Redesigning Sony-Ericsson's Product Catalog

The following are notes from the Interaction08 session - Redesigning Sony Ericsson's Product Catalog, presented by Saskia Idzerda. She presented findings from a series of usability studies conducted around the world on the Sony Ericsson Mobile Phone Product Catalog web page. Check out the current page.

Unfortunately, the slides from the talk which show the design variations of the page don't seem to be online yet. But the video is available and they do a good job of showing the slides.

Notes:

• Was a product list but became too long as catalog grew from 10 to 20 to 70 different phones
• Customers indicated they wanted: 1) ways to filter the list and 2) summary info before the detail
• Usability Process: Created 3 throwaway protoypes > usability tests > from the findings created 1 prototype > usability test > final prototype > international usability tests.
• Used Agile development process
• 1st test with 7 testers in Sweden on all 3 prototypes
  • prototype #1 had a filter panel on the left with multi-steps, all white, mouseover photo provided detail
  • Didn't see the filter options, focused on the product photos
  • didn't see Next links in selection panels
  • got confused when combo of filter options and got 0 results
  • cannot underestimate the pull of product photos
• 2nd prototype had filter panel on left with expand/collapse categories of options
  • forgot selections when collapsed and wans't sure if list still couldn't take it into account
  • linked to large preview image
• 3rd prototype had 1 panel with all options visible and instant update of list, sliders for some options (size, etc.)
  • noticed more b/c of color choices
  • instantly updated list
  • size of the phone is an important selection factor
  • confused by how the sliders worked, did not get it at all
• Lessons learned
  • visibility is key
  • all controls visible all the time
  • immediate feedback necessary
  • avoid zero results
  • no innovative sliders
• 4th prototype included new marketing categories (In Focus = Camera phone, In Tune = Music Phone, In Style = Design Phones..) in tabs across top, filter panel also moved from the left to above the phone images
  • tested with 8 users in Sweden
  • users didn't see the categories, to separate from the phones
  • also even though some phones could play music they weren't considered music phones, those have additional functionality, same with camera phones. So, result is confusing to the user. Also, not easily translatable to other languages.
  • graphically the tabs looked like banners which resulted in users ignoring them
• Final prototype included categories within the filter panel, which remained above the images for better visibility
  • features written as user focused benefits "can take pictures" vs. "camera phone"
  • list is immediately update
  • as filters are chosen, any other filters that would result in 0 results is grayed out
  • click to preview w/large image and summary where filter panel was, instead of on mouseover, inline
  • comparison tool displays where filter panel is as needed, better imagery to "show" drag-n-drop
• International usability tests findings
  • everyone looked at phone images 1st
  • only US cared about styles
  • India users hated the color green, thought it was dull; everyone else said it was nice
  • No one noticed background image
  • 50% of China users preferred old design, tend to like dense layouts, to see all the phones at once
  • no one used the filters much in non-US countries
  • introduced an artificial progress bar to show the results were changing and it worked as the changes were quick and users didn't notice anything changed
  • users loved the drag-n-drop comparison tool but it had to be pointed out to them, didn't get it on their own
  • some filters had to be "only" (camera phones) and some had to be "and" (clamshell and slide out) so got a little confusing but result made sense to users
• what went live is similar to final prototype with some color changes
• Analytics since the implementation of the new design
  • 1/5 use the drag-n-drop comparison tool
  • filter options: 50% benefits (can take pics), 27% style (clamshell, stick, etc.), 22% category (music, camera, etc.)
• Usability studies were very valuable but they did see some conflicts with what occurs in reality
• about answering "can" people use it but doesn't answer "if" and "how"
• if & how users will use a feature is hard to test, hard to create the motivation in a test
• So, not a cure-all but still beneficial. Combine with other measurement tools such as surveys, field research and web analytics to get a more complete picture