The Problem
REI is the "go to" store and website for outdoor enthusiast however their current website navigation is overwhelming and confusing.
As a purpose-driven brand, REI is committed to “inspiring, educating and outfitting for a lifetime of outdoor adventure and stewardship.” While this sentiment is reflected within REI’s relaxed, inviting in-store experience (organized by activity, filled with informed employees/equipment experts), as well as brand efforts such as #OptOutside, their desktop and mobile e-commerce experiences feel overwhelming and unnecessarily difficult for users to navigate.
My Role
I worked with 3 other researchers to understand the competitive landscape as well as challenges users encounter on REI’s site, and then on my own to ideate, design and execute a solution.
I did this project as part of a learning activity during a previous Bootcamp. My team and I took on this assignment with no supervision and split the sprint up into two parts.
Part 1 was dedicated to research with took 5 total days.
Part 2 was dedicated to design with took 6 total days.
Part 1: Research Methods and Key Findings
Initial Problem Statement
Our initial goals in part 1 were to gain an understanding of user problems and pain points associated with the REI website. We hypothesized that there were too many options listed within the home navigation tab, but wanted to ensure the design solution in part 2 was based off specific insights gained from users.
We conducted 10 in-store and 4 online contextual inquiries to observe and question users in their “natural habitat.” Digital contextual inquiries confirmed our hypothesis that the number of options in the navigation tab was overwhelming, and our in-store findings are below:
Contextual Enquiry
Competitive Research
We then mapped REI’s competitors on a matrix from “content-focus” to “product-focus” and “many brands under one roof” to “one brand under one roof.”
Competitors were selected based on product offering: primary competitors (such as EMS) maintain REI’s model of “many brands under one roof,” and secondary competitors (such as Patagonia) have a similar brand/product offering, but sell one brand under one roof.
Feature Analysis
Analyzed features across competitor’s websites to understand what REI is currently, is not currently, and could be offering to users.
Heuristic Evaluation
To better understand which areas generate the most problems among users, we conducted heuristic evaluation.
The “Learnable” category includes questions such as, “Does it behave consistently enough to be predicable?” and/or “Are there things offered to ease the more complicated process?”
Card Sorting
Lastly, we tested users via a card sorting exercise to better understand which points within REI’s existing information architecture generated the most confusion. This additionally verified our initial hypothesis that users were provided with too many options on the home navigation page.
An inventory list of 100 items was used for this card sorting exercise.
Research Conclusions
-
Users think the REI digital experience feels cluttered and disconnected from the relaxed, inviting in-store experience.
-
While most users visit the REI store in-person in order to speak with an informed employee/topic expert, this same task is not as easily replicated in the digital space. For example, the “Expert Advice” section is buried and requires clicking through multiple landing pages on both the website and mobile sites.
-
Lastly, users think the overall navigation on REI’s desktop and mobile sites is both overly categorized and overwhelming at the same time (they have too many specific options to choose from).
Part 2: Design
Personas
The first step was to make sure I knew who I was designing for. I synthesized research findings to iterate upon 2 “client-provided” personas: Natalie and Jeremy. Natalie is the primary persona I had in mind while developing the design solution.
Natalie is the primary user we are designing for
User Journey
To illustrate Natalie’s pain points as she navigates through REI.com, I mapped out her experience and emotions on a user journey.
User Journey demonstrating Natalie’s experience as she shops for a new pair of hiking boots.
Revised Problem Statement
Natalie goes to the REI store because she’s able to get credible advice from employees before buying something.
She needs new boots for her hike next weekend but won’t have time to go to the store.
How might we help Natalie find the right pair of boots without visiting the store?
Solution and Wireframes
To solve this problem, I initially sketched out some lo-fi frames:
Lo-fi sketches in my notebook to illustrate how Natalie would navigate through a simplified REI.com.
Overall my solution would consist of..
(a) A navigation tab with 6 category offerings, (vs. the original 15), and search listed as a separate feature above the category offerings (to de-clutter the navigation menu for users). Categories were based off contextual inquiry and card sorting. Users could click (1) “shop by activity,” where the original categories such as “camp & hike,” “climb” or “cycle” were listed, or (2) shop men’s; (3) shop women’s; (4) shop kids; (5) sale, and (6) expert advice.
(b) The REI logo moved to the middle of page so the design carries over to mobile, where the “hamburger” menu is in the top left
(c) Content Strategy: “Expert Advice” brought to the home navigation menu, and more easily findable throughout product search pages.
Not only does this simplify navigation for users, but it merges the in-store REI experience with online.
Mid-fi frames reflecting my design choice and user-centric rationale.
Recommended Site Map
Recommended site map reflecting a simplified home menu. Card sorting uncovered the insight that there are too many specific options on the home navigation menu. We also learned in contextual inquiry that most users like to shop at REI “by activity.” To condense the range of options users see first in the home screen, the list of activities has been condensed into a “shop by activity” section (categories based off card sorting results).
Usability Testing
From there, I conducted usability testing on my design solutions:
Users responded positively to the “help” section, and said it seemed to “mirror the in-store salesperson asking if they needed help” — without feeling disruption from a pop-up chat bot. They liked the credibility of REI’s content, and how easy it was to find with this new navigation.
Iterations
Usability findings indicated users responded more positively to a simplified navigation menu with fewer options to choose from.
My focal point in this case was the desktop experience, but I created three additional key screens in mobile to ensure the design solution is responsive across platforms.
A visual comparison of the “before” and “after” home navigation REI.com designs. Note the imagery in the “#OptOutside” and “sale” section are photos from REI.com, and selected as placeholders to show how non-disruptive the new, recommended menu design is for users.
Reflections and Next Steps
Overall, my design solution reflects changes I’d recommend to simplify the REI.com homepage for users across desktop and mobile.
Looking forward, I’d love to take card sorting another step further and create separate inventory lists per category. I still have remaining questions to explore, such as is “shop by activity” too redundant, and should the main menu just be categorized by “men’s,” “women’s,” and “kids”? And how can we eliminate some additional product offerings within each category-drop down, to ensure users experience the simplest navigation possible?
Lastly, I’m curious to know what kind of content users select from the home page. Would it be expert advice? Brand campaign content? Sale tiles? Product listings? Travel/adventure photo galleries? To find this out, I’d like to conduct A/B testing across home page assets, now that the home navigation doesn’t block/overlay all home page content once selected.