REI

UX for sporting goods mobile application

My Role

UX Designer, Design Researcher

Tools

Sketch, Adobe XD, Invision, Google Suite, Paper And Pen

Key Skills

Interview, User Flows, Research, Prototyping

Deliverables

Mobile Application Design

Project Team

1 UX Designer, 2 UX Researchers, 1 Project Lead

Process

Before we started to work on this project, we had to layout a plan of how we would approach this project. The usual process of our approach was to follow the basic the process which involves different stages while developing the product.

DEFINE

Overview

Adapting REI information architecture into the mobile application that provides ease of accessibility to REI's lists feature, suggestions, recommendations and accessing all the required information in a more organized way.

REI is an employee owned sporting goods website with much more than camping equipment. It also offers adventure travel, adventure checklists and advice.

The Problem / Opportunity

REI's features are difficult to find. The deliverables decided for this project was to adapt REI information architecture into the mobile application that provides ease of accessibility to REI's lists feature, suggestions, recommendations and accessing all the required information in a more organized way.

Checklist feature hard to find
Contents in several places, making it difficult for the users to find the information
Users are unable to share and comment on their lists feature

SOLUTION

A final set of high fidelity designs were delivered along with prototypes, well researched plan
and usability test results

DISCOVER

Design Research

Research was quintessential. In order to understand the user needs better, various research methods were used which helped us with great insights to make smooth and hassle free user experience.

The research served several purposes and guided us in designing strategies. Research served the following purposes:

Understanding the user needs, goals and pain points
Learning about the company and its information architecture flow
Learning and analyzing the competitors

Contextual Inquiry and Interviews

REI Store - Fremont, California

Start point of the research was first by conducting contextual inquiry and user interviews. This was done by going out and talking to people to figure out their listing habits, are they aware or use REI web or phone app and knowing about their lifestyle.

The participants were found at one of the REI stores located in the Bay Area and few through our known family and friends who are avid fans of REI brand. We tried to reach out to as many people as possible and tried to gain insights from them.

Expectations from the interview

Help to figure out important features the user needs
Help to discover what topics we can combine in the app
What activities users are most active on
figure out how the users prepare for their activities
Are their experiences similar doing online shopping vs in store shopping
Is the user familiar with the existing REI phone application?
- How often do they use it?
Does the user find checklist useful and how often is it used?

Interview Questions

These were some of the interview questions and for the contextual inquiry to understand our users and their travel style better

What are your hobbies?
How often do you plan these activities?
Which items do you stress importance on having it with you during these activities?
When planning for a trip/activity how do you go about making sure you have everything? Be specific
Who do you usually go on trips with?
- If you travel with others, how do you organize what you need to take with you?
Do you shop online or in store?
Are you familiar with REI?
- If no, how do you figure out what to buy?
Do you ever shop through their online store? If so, which features of REI app you like ?
How do you organize your checklist?
Which features would you like to have on REI application?

Approached around 8 people at REI store to conduct the contextual inquiry and interviews

2 out of 8 matched up as they were tech savvy and did shopping via mobile and website.

Also only 2 agreed to help us by allowing to interview them in store

6 out of 8 preferred shopping at REI store where they can feel the
products physically

They did not use REI website or mobile app to shop

Reached out to 2 more users outside REI store. These 2 interviewee were through our social circles, whom we knew were avid fans of REI brand

User Persona

Interview Quotes

Interview Insights

Competitive analysis was also done of the features of 'to do list' and 'checklist applications.’ This analysis gave me a bit more deeper insights to create feature list and synthesize research better.

Collaborative Features

Once the information was collected with all the contextual inquiries and interviews, we gained meaningful insights which helped us in understanding our target audience better. Talking to people and conducting interviews brought us a step closer in simplifying our design decision process.

Below mentioned are insights in different aspects which we collected during this research activity

Features highlighted by users

Checklist with sharing capability
Wishlist
FAQs
Customer reviews
Showing other customer buying patterns or behaviours
Shipping and return
Product suggestions
New products highlighted
Detail information about the activity, venue, essentials and weather updates

Behaviour and Habits

Tech savvy
Fitness enthusiast
Well organized
Habit of creating lists for anything and everything in life
Prefer doing outdoor activities in groups

User Survey

An insight that we gained from using a google forms survey was that REI shopping was done primarily in store. From this we determined that it was important to focus on item categories as opposed to specific items in the checklist, while at the same time allowing users to access specific items with only couple of clicks.

Competitive Analysis

Competitive Analysis

Competitive analysis was done to get an idea of the features and to narrow down on MVP. REI currently does not have a feature to customize wishlist with comments.

REI had lot of features which were similar to other products. The only app which have comment feature is Google Keep. Our brief did state that one of the feature that this design needed was 'ability to add comments on the list feature'.

Comparative Analysis

Below check out the various applications which have been compared with 'LIST' as the main feature which is one of the most important feature for the design improvements.

Three applications which have been compared are the following

Amazon
Google Keep
Walmart

Key ideas are as follows

Add comments
Share list with others
Add pictures to each list created
Separate needs from already have items

Location of list Feature

Current Sitemap Analysis

One of the steps to make my research easy and insightful was to understand and analyze the current / initial sitemap of REI.

IDEATE

Once we had all the above research in hand, we started with our ideation process

Feature Prioritization | Sketches | User Flow

How might we?

How can we combine wishlist with checklist?

How can we adopt REI’s current mobile application to emphasize these design changes?

How can we create more user to user interaction within the app?

Feature Prioritization

Before starting the design process, feature prioritization matrix was created in order to understand which features will be incorporated in this version. Due to time limitation we focused on incorporating only few features in the design.

Sketches

Some initial sketches by me during our ideation process

User Flow

Based on initial ideation and sketches, initial user flow was designed by collaborating with my other team members.

TESTING

Paper Prototypes

Initial paper prototypes

With the help of initial sketches and user flows, we ideated paper prototypes. Kindly find below screen shots of couple of paper prototypes.

Usability Testing 1

Findings

To test run our ideas at initial stages, I did a quick usability testing with 4 users by creating the most basic tasks of the app. Before moving further with our design decisions, we wanted to get a clarity of what and how our ideas are being perceived. We took help of the agile setting to make iterations according to the user insights. The result of our findings is as follows:

Mid Fidelity Wireframes And Testing

Usability Testing 2

After the initial testing, mid fidelity wireframes were created for the next round of testing and insights.

Final Design

Iterated Sitemap | Iterated User Flow | Prototype | High Fidelity Screens

Iterated Sitemap

“Expert Advice” which has a checklist feature in REI website is absent on the the REI mobile app. During the iteration process, checklist feature is termed as ‘Checklist’ under LISTS option in mobile app.

Iterated User Flow

High Fidelity Mockup And Prototype

Based on all the feedbacks and test results with mid fidelity mockups, finally my team and I came up with the final set of designs.

System Usability Scale Results

Once all the high fidelity mockups were ready, our participants were given the prototype to try out the new design. Kindly find the SUS (system Usability Scale) chart to see how was the new design intuitive and how it was perceived by our users. Though we as a team continuously thought of still working around the solution, we received great positive feedback.

Project Learning

Working on this product truly helped me to know my potential related to my research skills. Conducting in-depth interviews of the users also helped me to learn about the industry better and how it functions. This was an exciting project to work on as I being a part of the team could follow entire UX process in the right way which also boosted up my confidence.

Collaboration, team learning, user interviews, designing site maps and user flows are some of my major learning takeaway while working on this project.

REI