REI Product Page Update

Strategy | Research | Testing | Design

When I started at REI back in 2019, the product page was seeing low engagement, stagnant conversion rates and was not in compliance with WCAG accessibility standards. When starting off updating one of the most vital pages of the REI ecosystem, we had to tread lightly and make sure to partner with all the stakeholders (which was almost everyone at REI 😉) to get this right. First, I started with stakeholder interviews with about 20 partners, then conducted a workshop, and finally story mapped out our steps.

 

Customer goals

  1. Customers feel confident in the product they are choosing.

  2. Customers trust that REI has given them the information they need to choose the right product.

  3. The page is accessible, simple and intuitive.

  4. Customers understand how they can get their product.

  5. Showcases REI’s passion for the outdoors and creating an inclusive environment for all to get outside.

 
 

P R O C E S S

Problems to solve

I conducted a baseline usability test of the current product details page which included examinations of the key features of the product page. Along with user testing, customer feedback surveys were another place we received feedback from. The largest areas of opportunity were around; mixed price (different prices for different colors/sizes), fulfillment options, mobile media center usability, and size charts.

  • How might we allow customers to see the price of the item they selected easily?

  • How might we help customers understand how, when, and how much it will cost them to get their item?

  • How might we make a mobile image carousel more usable for people with lower mobility?

  • How might we expose the size chart when and where customers need it?

Measuring success

Key performance metrics were identified along with qualitative testing approaches to evaluate the success or failures of our updated features.

KPI:

  • Increase add to cart rate

  • Increase conversion rate

  • Decrease bounce rate

  • Decrease error counts

  • Increase page speed

Qualitative:

  • Unmoderated and/or moderated tests were conducted on each feature to gauge usability and findability.

  • A yearly benchmark test is conducted and the feature set “ease of use” and overall impressions are gauged and compared to previous years.

 

Feature Enhancements

 

Mobile Media Center

Before

Customer Problems:

  • Customers could not see the image well on mobile without zooming in.

  • Customers with low mobility could not progress easily through the image carousel.

imagecarousel_before

After

Solutions:

  • Increased size of the mobile image so it is more visible on mobile devices

  • Aligned w/ desktop to have exposed image thumbnails to create consistency and increased accessibility

 

Buy Box Area

Before

Customer Problems:

  • Customers had to tediously click to find the price of an item by toggling the color and size options.

  • Shipping methods were confusing to some customers.

  • Messaging was scattered which caused issues with findability.

 

After

buybox

Solutions:

  • Exposed sizing and split sizing into price points.

  • Updated shipping methods to incorporate free shipping messages near decision point.

  • Membership messaging was moved above the Add to cart button to help customers see the value in membership.