REI Web & Mobile Redesign Exploration & Proposal

Project overview

Katy Wyman
Nov 30, 2017 · 9 min read

The goal of this conceptual project was to explore and redesign REI’s web desktop and mobile site.

Role

User Research | Project Manger | Designer

Part 1 | Research
Team work: Lead by Azin Sahabi, Marlow Patterson, and myself.

Part 2 | Design
Individual work

Timeframe

1 week to complete design prototypes.


Limitations, Parameters, Resources, and Materials

A week prior to REI’s desktop and mobile redesign, research was conducted using a variety of methods: beginning with contextual inquiries, following with heuristic analysis, site map/task flow/user flow analysis, competitive and comparative analysis, card sorting, and usability testing.

After synthesizing the research findings, I was able to design two prototypes, for desktop and mobile, which would conclude REI’s website redesign exploration. These prototypes were built in Photoshop and Sketch. Invision was fantastic at collecting all the wireframes together and developing a usable prototype.

Brand Overview

Recreational Equipment, Inc., commonly known as REI, is an American retail and outdoor recreation services corporation. It is organized as a consumers’ co-operative. REI owns their own line of gear & apparel, in addition to products from other brands such as: sporting goods, camping gear, travel equipment, and clothing. It also offers services such as outdoor-oriented vacations and courses.

Passionate and committed to:
• Promoting environmental stewardship
• Increasing access to outdoor
• Recreation through volunteerism,
• Gear donations & financial contributions

Initial Problem Statement

Customers like REI but feel differently about the shopping experience when using web or mobile devices.

How might we offer a cleaner and more intuitive experience to the REI web and mobile users, while maintaining brand identity and objective.

How did you confirm or refine your initial assumptions?

My initial problem statement was confirmed through usability testing, which showcased customer’s opinions toward the REI site.

Goals, Tasks, Scenarios

Scenario 1: You need a new warm jacket for a camping trip you are taking this weekend, and you only have $200 to spend.

Task 1: Go to REI website and find a warm, fleece jacket and add the jacket to your cart.

Scenario 2: You are browsing the homepage and want to ask Customer Service a few questions.

Task 2: Chat with Customer Service.

Scenario 3: You are new on REI and want to make a purchase.
Task 3: Make a purchase without creating an account.

Scenario 4: You are going cycling with some friends and need something to keep you warm.

Task 4: Browse through the selection and Quick View an item before adding it to your cart.

Task5: Go to mobile web and repeat task 1.

User Quotes:

“Even when I was able to find the item I was looking for, I was distracted by the various categories and almost derailed from my goal.”

“REI is a cool store, but it’s almost kind of boring and doesn’t represent the brick & mortar’s same store experience.”

Personas

Primary Persona: Seth

Secondary Persona: Ashley & Zach


Heuristic Evaluation

Side-by-side heuristic analysis of REI and ParagonSports websites show a slight advantage of ParagonSports.com over REI.com website. The reason might be the fact that Paragon is following the simplistic approach of all trending e-commerce websites and is using less categories and more filtering to allow users find what they are looking for. Paragon has a much more elegant design and is super easy to navigate.

REI, as a brand, is more successful in presenting itself as a content company. REI has a strong community of loyal customers and is more recognized as a specialty store and community building brand. But for some reason this superiority does not manifest itself in the online presence of REI. The following Heuristic analysis will look deeper into what the areas of concern are in REI website.

Competitive & Comparative Feature Analysis

Through this analysis, it was concluded that Paragon Sports and Vans held the closest model in the field.

Sketches

I took these findings and discovered which features were commonly used across all sites, and which features were giving the other sites a competitive advantage. REI needed to encompass the spirit of a content site (Vans), with the strategy needed in a e-commerce website (Paragon Sports).

Feature Discovery

(1) Vans’ features:
• Find Store, Gift Card, Live Chat, Favorites, My account, Cart — Nav Bar
• Clean and condensed — Nav Bar
Add to Cart and Live Chat sidebar buttons

(2) Paragon Sports’ features:
• Minimal categories on Nav Bar
Brand Category on Nav Bar
Specialty Shops carousel
Featured Brands carousel
Trending Gear carousel
Live Chat sidebar button

Usability Testing Round 1

Users were able to complete some tasks but found the overall REI site too busy and disorienting.

^ This finding lead to the the following wireframes designed below:

Mid-fidelity prototypes

Through the integration of various key features needed from the User to achieve their goal, low-fi sketches were created and then turned into mid-fi prototypes which was key in figuring out how all the features would work together.

Nav Bar

REI’s before Nav Bar (User’s Pain Points) contains many categories and 3 Utility Nav options. The after (User’s Love Points) redesign, has more negative space throughout the Utility options, Search Bar, and Categories, which provides ease to the User’s eye.

  • (1. Vans) inspired the Utility Nav
  • All activity categories were summarized into the Activity category
  • More previously hosted Footwear and Electronics. More was removed from the Nav Bar, and these sub categories became top categories in the Navigation
  • A Brand category was also added to the Nav Bar, where the User can browse and learn more about REI’s brands

Homepage + Actionable Iconography

REI incorporated (1. Vans) Live Chat & Shopping Cart button. The Cart button was redesigned to match REI’s aesthetics.

Menu

Men’s More sub-category which contained Sunglasses and Watches, was removed and these item categories were moved under Accessories.

The overall pop-down menu was redesigned to add and subtract the sub-categories. It’s clear, concise, and organized by hierarchy.

These mid-fidelity wireframes were designed in Photoshop & Sketch and then converted into prototypes for desktop and mobile in InVision for user testing.

Buttons

(2. Paragon Sports) inspired these hover-over buttons, which allows the User to easily hover over any item to quickly view it in detail, or to simply add the item to cart.

These features lacked in REI’s current site and Users felt it was time-consuming having to click on an item to see a larger image and even to add it to their cart.

Usability Testing Round 2

Users found the site organized and easy to use, however they wish brands and products were showcased in a more attractive way.

^ This finding lead to the the following wireframes designed below:

High-fidelity prototypes

The second round of design iterations were inspired from the results drawn from Usability Test round 2. Users wanted a clear picture of what REI’s site has to offer. They felt that a few features were lacking and that imagery and product descriptions were lacking in boldness.

Let’s keep in mind REI’s before:

Inspired by (2. Paragon Sports), the following changes were made:

Interactive

The current REI Nav Bar hosts the many of activities one can shop for, which is a pretty cool concept when looking for something activity-specific. However, Users were finding out that categories and those items under said categories weren’t overlapping. So for instance, a Fitbit placed under More/Electronics/Fitness Electronics/Activity Trackers/Brand/Fitbit, wasn’t available in the Men’s section under Watches. Instead of feeding into the confusion, as mentioned before, I eliminated More and combined the various activities under Activity tab on the Navigation Bar. In order to celebrate the various activity gear REI offers, I was inspired by (2. Paragon Sports) to design carousels that allow the Users to shop by Activities, as well as by Brands and Trending New Items.

Detailed Information

REI’s current item page showcases detailed information regarding features, sizing, and technical specs.

As seen below, the item page (product description | bottom portion) redesign helps the User focus on the Jacket and hides features, sizing, technical specs, and reviews under an expandable action.

The top portion of the image above flows from:
Product Name > Image > Price > Shipping Info > Member Dividend > Product details in box/banner. When the User wanted to learn about the product, it took them a minute to navigate the site and find the information they needed.

In the redesign below:
• Product description box/banner was eliminated
• Product description was moved upward to create a sense of hiearchy
• Product copy is now in one space, while all actions required is in another.

Creating a sense of hierarchy and flow on a product site helps the User find the items quickly and makes their shopping experience more pleasurable.


Site map, user flow, and task flow

These site maps, user flows, and task flows were designed in sketch and omnigraffle. They provide information needed to understand the User’s experience and journey while using REI.com.


REI Prototype Site on Invision

Mobile | https://projects.invisionapp.com/share/C3ENRZZE6#/screens/266080999/comments

Desktop | https://projects.invisionapp.com/share/4AENS1TT2#/screens/266058706_1Homepage_REI

Next Steps

  1. Checkout process can be made shorter with less steps.
  2. Customize website for Users who want to browse and feel inspired.
  3. Allow User to view product information as he or she prefers. There is currently too much information on the site.
  4. Connect more with brands and create a platform where the User can grow to learn about a brand and solidify brand loyalty.

Reflection

REI is not only a retail store, they are also a community that cares about humanism and nature conservation. Stepping foot into an REI store means adventure. The curious souls can find inspiration and the inspired can find their next travel destination. How can we take that essence and convert it to represent REI’s online presence?

This redesign proposal extends beyond this point. I want to continue exploring REI’s desktop and mobile experience. I want REI’s new and loyal Users to consider the site a place where the shopping experience meets content. I would love to see REI evolve into a seamless 1–2–3 step shopping process. Let’s take on this quest in making REI’s online presence an easy avenue to purchase products we need and to connect with the brands we love.

Thank you for reading. –Katy

Katy Wyman

Written by

Hi, I’m a New York based Communications x User Experience Designer. Passionate about all things creative.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade