eCommerce Product Cards

Context

With the roll out of Door To Door Organic’s newly redesigned responsive site, it was time to give our product cards a reboot too.

Requirements

The design needed to be lightning fast, easy to understand for non tech savvy users, and look amazing on desktop and mobile. One of the more challenging pieces of the puzzle was that the new cards needed to be able to handle all the types of products the entire grocery store sold as well as show off sale items in a way we hadn’t done before.

Team

img_5239
Some of the “Barn” Team

The entire front end team was involved. All the design fell heavily onto Christan Fergus, Trisha Allin, and Tim Farley. My role was strictly as a researcher by providing some heuristic guidance and lots of user testing.

The full front end team involved:

  • Juli Duffer (Director)
  • Cristan Fergus (Design)
  • Trisha Allin (Design)
  • Tim Farley (Design)
  • Nichole Frey (Dev)
  • DeAndre Carroll (Dev)
  • Becca Vasil (Dev)
  • Jenny Marshall (QA)
  • Khristine Nelsen (QA)

Process

I had been tracking Add To Cart and Remove From Cart behaviors in Google Analytics and Heatmap.me for 3 months. Additionally, approximately 100 MouseFlow videos of user mouse movements interacting with product cards were analyzed. We used these metrics as a baseline.  I also used previous moderated user tests to inform the designers of frustrations and misunderstandings users were having with the current product cards.

screen-shot-2016-07-06-at-10-05-47-pm
Online Moderated Interview
heatcart
Heatmap.me data for original product cards

After discussing the problems with the current design and the desires of various internal departments, the 3 designers worked independently to design new cards. They presented each option to the development and product teams. We discussed the pros and cons of each design, selecting one main design and adding in a few elements from the other two.

I then took screenshots of the proposed design and our old design and conducted preference tests through http://www.usabilityhub.com.

productlayout
Top = Proposed Design,  Bottom = Old Design

The next step was to work through the various states and options that the cards would need to handle. These include sale items, discounts for multiple purchases, and items sold by the pound instead of by the unit. At each step of the way, we used Usability Hub to make sure we were going in the right direction.

The new cards were rolled out in stages – Search results, customer logged in homepage, Hot at the Shop department, other departments, and lastly, category pages. Each roll out section included all responsive versions from desktop through mobile.

Key Findings

Users did not like our current Add To Cart functionality. It attempted to be interactive, but users felt that it popped up and disappeared at the wrong intervals. Also, the functionality did not reflect their cart contents as rapidly as they would have liked.

Merchandising requested a button that would add the bulk sale items to the cart with one click (i.e. $3.00 each or 2 for $5.00). A couple of design iterations were tested and users loved the results.

screen-shot-2016-11-04-at-4-26-29-pm
Final product cards

Items sold by the pound still required users to click through to the product page to select the weight. The best icon to communicate this need was controversial! After thoroughly testing 3 options, the team knew an ellipsis was our best choice.

screen-shot-2016-05-18-at-4-49-22-pm
Heatmap data shows massive increases in Add To Cart activity!

Results

We originally felt that a square card with white space would be most effective. But given the number of users that were on tablets and mobile, they needed to scroll way too much to see all the products. Door To Door Organics moved to a variable width card that is responsive based on device. This allowed more products per row and less scrolling.

screen-shot-2016-11-04-at-4-27-45-pm
Half of the Desktop view – notice the width of the card
screen-shot-2016-11-11-at-11-19-30-am
Full row of the Tablet view – notice how narrow the width is compared to Desktop

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s