E-Commerce Experience

Conceptual Navigation and UX Design: Shopping at REI.com was never easier!

GOAL & TIMING

Identify pain points in REI's online shopping experience.

Timeline:
1 Week Team Research

1 Week Solo Design
 

Platform: Responsive Web

CLIENT

Conceptual design done as part of an Information Architecture project at General Assembly

REI is a retail and outdoor recreation services corporation that focuses on an adventurous lifestyle rather than athletics/sports

REFINED PROBLEM

REI customers online shopping experience is being negatively affected by confusing item labels and by the amount of navigation and filtering options that are presented to them at once.

MY ROLE

In Team

Research
Data Analysis

 

Individually
Ideation
Design
Testing

UX Approach

SCREENER SURVEY

80 Responses

60% Female – 40% Male
Ages 24-34

50% Shop REI on mobile

50% Shop REI on desktop

5% Use the native REI app

68% Buy at Amazon
50% Buy at REI

WEB AUDITS

Competitive Analysis (6)

Brand Analysis
Heuristic Analysis

CONTEXTUAL INQUIERY

2 In-store
2 Online

USABILITY TESTS

4 of Current Website

8 of Proposed Design

(2 rounds of 4)

CARD SORTING

3 Rounds
(Closed, Open, Closed)

18 Participants

Over 125 Items

What Did We Learn?

RESEARCH FINDINGS

  • Not attracted to homepage and hero images are not clickable
     

  • Pages are too long
     

  • Overwhelmed by lack of organization of products within sub-categories
     

  • Want better categorization/labels
     

  • Wants to see images of real people wearing/using products
     

  • Like REI’s return policies
     

  • Like the quality of the products
     

  • Want to stay updated to the latest gear

User Journey 

Jeremy Murray, 31, Developer, keeps up with the latest outdoor gear

Problem Statement

REI’s loyal customers want to get the most out of the site such as new product updates, comprehensive product filtering, product information, and overall a better site navigation.

 

How might we help them efficiently navigate the site to find products of their interest?

Card Sorting

MATCHING USERS MENTAL MODEL


Participants of the usability test were having trouble browsing through the over 1000 items on the navigation. To find out what categories users rather group items together, we conducted three rounds of card sorting (Closed, Open, Closed) using Optimalworkshop.com.

CARD SORTING INSIGHTS

Changes made:

  • Consolidated many of the repeating items in Men, Women, and Kids

  • Water > Hydration

  • Deals > Sales

  • Lighting > Flashlights & Lanterns

  • Sunglasses > Men’s Sunglasses/Women’s Sunglasses

Sitemap

Click images to enlarge (PDF)

CURRENT SITE MAP

  • Contains over 125 sub-menus and over 1,000 items

  • Footer is very extent and disorganized

PROPOSED SITE MAP

  • Validated by 3 card sorting rounds, I reduced the main navigation into small bite-size information making it easy to digest – only see what you need       

  • Grouped all activities into one category    

  • A sub menu would drop and further to refine the search

  • The information in the footer was re-organized for clarity

Building & Testing

I created a paper prototype for a first round of testing. Then iterated based on user feedback and created the mid-fidelity prototype to be tested a second time. Here are the results:

WHAT WORKED
● Users successfully filtered Men's pants by color and price and sorted by 'Lowest Price First'
● Users successfully subscribed to newsletter
● "Nice homepage!"

WHAT DIDN'T WORK

● 7/8 Users failed to find "bag with laptop compartment" in first attempt

● Still unclear where to find bags: Gear, Accessories or by gender

Key Design Decisions

GOALS

DESIGN SOLUTIONS

Improve site navigation efficiency

Conduct card sorting of navigation's main and sub categories to match users mental model

Avoid cognitive overload

Redesign the main navigation and filters to only show the products or category users selected

Improve engagement

  • Add newsletter subscription box to the top navigation

  • Make hero images clickable and feature multiple products

Make product page less cluttered

  • Reduce product page length by turning product details, specs, and size charts into tabs

  • Reduce number of reviews and Q&A's are shown in the product page

Final Visual Design

SHOP REI

RESULTS

 

PRODUCT PAGE

PRODUCT PAGE CONTINUED

MOBILE RESPONSIVE

MOBILE RESPONSIVE NAVIGATION MENU

Next Steps & Takeaways

NEXT STEPS

  • More card sorting: users still have trouble with certain item labels/categories

  • Push native app download/usage since our survey shows that only 5.1% of our participants make use of it

  • Test responsive mobile site to find friction points

RETROSPECTIVE

This was a very challenging project that taught me the importance of involving every team member in the discovery phase in order to better understand the business and users needs at the moment of designing solutions. If I could go back and change something, it would be to establish a more organized method of recording user interview responses