Naja

Naja_mainThe revised product detail page for Naja solves key usability issues with product selection.

Helping Women Look Good, Feel Good and Do Good

Naja_homeOriginal landing page, with a headline and call-to-action button that had dropped below the intended placement.

Background

When I began consulting with Naja, they had just relaunched their site using a popular e-commerce template solution and wanted to test its effectiveness. Our goal for the new site was to analyze its usability and improve the path to purchase, beginning with the desktop version.

The Customer

The persona of the Naja shopper is based on the founder’s interviews with 600 women. Meet Zoe—she is 35, college-educated, value-conscious, owns an iPhone and resides in the Bay Area. Zoe shops online frequently for clothing and other goods, and she often browses clothing and fashion sites to see what’s new and in style. Zoe wants to spend modestly on clothing, and she is motivated to look good, feel good and do good.

Usability Testing and Analysis

Six users tested the desktop version of Naja’s website. Given six tasks, they tested the shopping experience, purchase flow and subscription sign-up. All tasks were completed by most users, but with difficulty. To synthesize the results, I created a spreadsheet detailing user’s reactions to the six tasks and any other usability issues. As patterns emerged, I generated sticky notes to capture them. Working with UX designer Nico Mizono, we categorized and prioritized the notes. Then I reorganized the spreadsheet to reflect our analysis.
Naja test synthesisAfter recording usability issues on stickies and in a spreadsheet, I collaborated with fellow designer Nico Mizono to prioritize them (pictured, left).

The most critical items to address:

  1. Product sizing and labeling: users made several errors and false assumptions related to choosing the correct product, including failure to specify a size, which was not required by the system. Many users also mistakenly opened the product detail page for underwear but thought they had chosen a bra, and vice versa.
  2. Matching products: when users tried to order a coordinating set, they weren’t able to find the matching items.
  3. Cart editing: most users had difficulty removing items from their cart and expected the option to make other changes to their cart, such as size and color edits.
  4. Customer service: users had difficulty finding help information, reducing confidence in Naja’s customer service, which in turn reduces overall trust in the company.
Naja_X_before_afterOriginal (top) and revised (bottom): users couldn’t figure out how to remove an item from the dropdown cart, so I added “Remove” next to the “X” with visual link cues.

Quickly Improving Usability Issues

Naja had a big press release scheduled for four days after I completed the test analysis. We pushed to fix all key issues that could be implemented within three days, allowing one day for review and revisions. I worked with the remote developers to provide detailed instructions with supporting visuals.

As a result of these revisions, users like Zoe can:

  • See products that coordinate with the one she is currently viewing
  • Order a product without forgetting to select her size
  • Request her size if it’s not currently available for a product
  • Remove items from her cart more easily
  • Receive system feedback when adding to cart from the Quickview modal window
  • Send a gift message to the recipient
  • View the company’s contact information
  • Get an estimated delivery time on pre-order items
  • Get the details about US and International shipping policies

Solving the Bigger User Experience Problems

We made fast and furious progress on the site in time for the press release. The next step is to rework the product detail page to address key problems with product selection. The solution will reduce errors and the overall cognitive load for shoppers. I’ve collaborated with the growth team to implement better analytics so we can measure the success of our upcoming usability revisions. Below is the revised product detail page for the desktop site.

Naja_before_afterClick to enlarge, then pause the slideshow to read.

  • Categories:  UX Design,  Visual/UI Design, Website
  • Client: Naja
  • Product: E-commerce Site
  • Ship Date: 2014