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
