REI Conceptual Redesign

Header for website.png

my role

UX Researcher and Designer

duration

2 weeks, November 2017

Project status

Complete

Project Overview

REI (Recreational Equipment, Inc.) is an outdoor goods store that started in Seattle in 1938. There are currently 154 stores across the United States and it has a very robust e-commerce website.

My research team of three set out to learn about REI’s customers, competitors, and business structure. We talked with shoppers to discover how customers were experiencing the store, and conducted user tests to see how customers experienced shopping online. The site was analyzed against standard heuristics as well as compared to competitive sites.

The redesign of REI's website, which I worked on solo, focuses on the categorizing of items and the navigation to find everything.

INFORMATION GATHERING

Contextual Inquiries

We visited the local REI store to talk with current customers and discover their experiences and thoughts with the staff, organization, and layout of the store.

Insights:
Customers were confused about where to join the checkout line. Had to be redirected by a posted employee.
Customers used the map of the store to help find what they were looking for.
Most of the customers had specific items in mind before entering the store and wanted to see/touch them in person before buying. 
They used the website to do research and get an overview of what was available before checking it out in the store. 
Time-limited coupons were an incentive to get customers into the store
Customers valued knowledgeable staff.

User Testing of Current REI Site

We recruited people who are outdoor enthusiasts and have shopped at REI to test the current website, both desktop and mobile. Overall the site was very easy to use. Some testers found the number of categories to be overwhelming as they searched for specific items.

Heuristic Analysis

The REI website was analyzed using the industry-standard Abby Method Heuristics. This looks at specific aspects of the website that are considered to be essential in the structure and design of a product.

Overall, REI’s website is well organized and offers an impressive number of features and areas for exploration. Items are categorized primarily by activity, but are also discoverable through multiple channels, which makes for a high level of usability. Most of our testers did not experience any major issues completing tasks, even as they took different paths to complete them. The mobile experience largely mirrors the desktop experience, and the site is very responsive to scaling down to accommodate smaller screens.

The highly-detailed level of categorization available on the site may be a bit of a weakness. On the desktop version, a few testers seemed to get overwhelmed by the amount of options available in the subcategory menus, quickly abandoning them and moving to the search bar even if the item/category they were looking for was listed in the drop down menu. Greater consolidation of menu categories may be worth exploring to make the experience more streamlined for users.

Looking at accessibility compliance for users with disability, the site is lacking for dyslexia, with using stark white as the background instead of an off-white.

Heuristic.png

RESEARCH SYNTHESIS

Problem Statement

Outdoor enthusiasts love to explore and purchase new gear for their future adventures. Consumers of REI (Recreational Equipment Incorporated) are often overwhelmed with the number of options presented to them, even when they know exactly what they want.

How can we simplify the REI shopper’s experience to minimize frustration and leave a positive impression?

Personas

From our research, the team created two personas.

User Journey

The journey that our primary persona goes through as he is searching for a new pair of boots. 

User Journey.png

DESIGN PHASE

Site Map: Original and Redesign

The current site has 13 categories in the primary navigation.

REI_site-map.png

Changes in the redesign:
• Consolidated all outdoor activities into one category
• Separated out Clothing and Footwear
• Removed Men/Women/Kids categories

REI_site-map Redesign.png

Initial Sketches

Wireframes

Key differences between existing design and redesign: desktop site.

Key differences between existing design and redesign: responsive site.

Prototypes

Usability Testing: First Round

Task 1:
Locate the least-expensive sit-on-top kayak and add it to your shopping cart.
[4 out of 6 users did not see ‘Kayaks’ as a category to filter]

Task 2:
Locate a purple children’s life vest and add it to your wish list.
[5 out of 6 users did not know that PFDs are life vests; 4 out of 6 users first looked under ‘Clothing’]

Task 3:
Find a store near you that’s within a train ride away and locate its hours.
[2 out of 6 users ignored the ‘Distance’ button]

Usability Test 1 Copy.png

Design Iterations: First Round

The category 'kayak' was made more prominent so that users would see they would need to filter down first.

Design Iteration 1 A Copy.png

The sub-category ‘PFDs’ was expanded to ‘Personal Flotation Devices’ to make it more clear.

Design Iteration 1 B Copy 2.png

A ‘Go’ button was added below the ‘Distance’ button to make it more clear to users that they should select a distance first.

Design Iteration 1 C Copy 3.png

Usability Testing: Second Round

Task 1:
Locate the least-expensive sit-on-top kayak and add it to your shopping cart
[5 out of 5 users did not initially see 'Kayaks' as a category to filter]

Task 2:
Locate a purple children's life vest and add it to your wish list
[mobile only: 3 out of 5 users were unsure how to filter down to Kids' PFDs]

Task 3:
Find a store near you that's within a train ride away and locate its hours
[100% success]

Usability Test 2 Copy.png

Design Iterations: Second Round

A new page was added to clearly separate the ‘Kayaking’ sub-categories.

Design Iteration 2 A.png

A new page was added on mobile to clearly separate the ‘Personal Flotation Devices’ sub-categories. 

Design Iteration 2 B.png

Conclusion

With this redesign of the REI website, the primary navigation was simplified to supply the user with an easier presentation. This gives it a cleaner and more sleek look, which many users desire.