Overview


Problem

Novice backpackers have a hard time finding multi-day backpacks with the right features, capacity and fit. A single mistake during the purchase might end up affecting the health and even safety of the backpacker during an extended trip in wilderness.

Solution

We redesigned REI's website to provide more detailed guidance and support for novice backpackers to find the backpack of the right size, capacity, and features without having to travel to an REI store.

My Role

UX Researcher, UX Designer

Timeline

Sept. 2017 - Dec. 2017

Team Members

Tony Jin, Xinyi Chen, Lindsay Kelly, Brianna Pritchett, Xue Zhao

Tools

Qualtrics, Sketch, InVision



Our Approach

My Contribution

During the research phase, I contacted local REI stores for interview permissions. After the first store declined our request, my perseverance helped us discover alternative choices and more opportunities for interviews. I visited different REI stores for observations and interviews, and conducted a task analysis based on the data collected. I also took the lead to design and distribute a detailed online survey that yielded hundreds of responses with rich qualitative data. I then analyzed the survey data and helped create affinity diagrams. With the help of my teammate Lindsay, I created a customer journey map based on the data we gathered.

Generated in the ideation phase, my ideas of providing guidance through an interactive survey and community-based expert support were both refined and incorporated into our final design.

In addition, I created two versions of interactive prototypes in InVision for two rounds of user testing. I synthesized users' feedback from both rounds, developed design implications, and created the final User Interface using Sketch. I also moderated several cognitive walkthrough and usability testing sessions.

Design Outcome

Design Outcome

Research


Through a series of primary research detailed below, including field observations, interviews and surveys, we decided to focus on novice backpacker's pack purchasing experience on REI's website.

Field Visits

We first visited a local REI store several times to understand the general store layout, observe people's purchasing process, and identify the need we hope to address. We pivoted from focusing on tents to focusing on backpacks because there was generally a higher demand for help in the backpack area.

Observations at REI
I took the lead to come up with a scenario in which I needed to buy a multi-day backpacking pack for a 3-day trip in wilderness. I went through the entire backpack selection process in-store and interacted with salespeople with the objective dictated by the scenario in mind. The information gathered helped us create the task analysis for in-store backpack purchase.

Observations at REI
During our visits, I also took the lead to talk with the store's manager for interview permissions. Though he had to decline our request, the manager pointed us to REI backpacking classes taught at another store, which graciously agreed to our interview request later.

Task Analysis

Based on the data we collected through field visits and the exploration of REI's website/app, we created a task analysis for each context to better understand our users' pain points when purchasing a backpack through different channels. Here is a summary of the analysis:

Task analysis

Interviews & Affinity Mapping

To better understand novice backpackers' current experience purchasing backpacks, we attended REI's lightweight backpacking class, and conducted short, semi-structured interviews with REI's customers and salespersons.

Lightweight backpacking class & interview notes

We also interviewed a non-REI backpacking expert to learn about the best practices in the backpacking community that novice backpackers might not be aware of.

Lightweight backpacking class & interview notes

We synthesized our results using affinity mapping and gained the following insights:

  • Fit is the most important factor to consider when purchasing a backpack; a backpack that fits poorly can cause discomfort and potentially injury.
  • Novice backpackers usually don't know what to consider when selecting a backpack.
  • Backpackers form a tight community and are usually willing to help each other.
  • There are a couple of questions that all REI salespersons are trained to ask in order to help their customers find the right backpack model.
  • The in-store purchasing experience has few room for improvement, because almost all REI customers believe that REI's salespersons are well-trained and usually actively help them answer their questions.
  • People are generally reluctant to make large purchases like buying backpacks on mobile apps. Such purchases require careful research beforehand, and people generally do not use mobile phones to conduct the research.

As a result, we decided to focus on REI's website as our point of intervention, since this context has the largest potential for improvement.

Detailed Online Survey

After our decision to focus on REI's website, I designed and deployed a detailed survey on people's backpack purchasing experience on REI's website. Through the survey, we hope to learn more about the user demographics, what they look for when shopping for backpacks online, what their pain points are throughout the process, what they think REI's website is currently lacking, etc.

Survey Results Example

Our main findings in the survey include:

  • Most users (around 70%) are between the age of 25 and 34.
  • Some users complete the entire process online, while others typically conduct online research first, before going in store to look and feel the physical products.
  • Users generally find REI's online expert advice articles to be inaccurate and outdated.
  • Users need more personalized advice from others in the backpacking community.

The survey, which received nearly 300 responses, also provided us with rich data for our persona creation, which is detailed below.

Additional Research

In addition to interviews and surveys, our group also conducted contextual inquiries, online research of the user group (backpackers), and analyses of frequently asked questions on REI's website. We analyzed our results using affinity mapping.

Affinity mapping

We discovered that novice backpackers generally need help in the following areas:

  • Capacity: It is hard for novice backpackers to determine the capacity of their backpacks, which is highly dependent on what they bring and the length of their trips.
  • Weight: Novice backpackers tend to overestimate how much they'll need for their trip. However, backpacking experts have repeatedly mentioned that one should always try to minimize the total weight of one's backpack.
  • Fit: Without trying on the backpacks in store, it is extremely hard for novice backpackers to find a pack that fits well with their body. However, fit is the most important factor to consider when buying packs for multi-day backpacking treks.

When they need help, novice backpackers usually resort to the following resources:

  • REI Experts: Novice backpackers consistently report that in-store REI experts are extremely helpful and knowledgeable. However, the online expert advice provided by REI is perceived as static and outdated, which needs to be improved.
  • Experience Backpackers from the Community: Our research shows that backpackers form a very social and community-oriented group. Most of them enjoy helping fellow backpackers, even strangers. Novice backpackers usually get advice from more experience backpackers they meet, either in person or on backpacking forums and Facebook groups.

Persona

We created the following personas based on the data we gathered in our interviews and surveys. Since we decided to focus on redesigning REI's website, we created two personas who shop either exclusively online, or both online and in store.

Persona - Carrie

Persona - Ben

Since we focus on REI's online experience, we also created an anti-persona who shops exclusively in store to make sure that we do not design for this group of users.

Persona - Irene

Journey Mapping

Customer Journey-1

Customer Journey-2

Design


Ideation

In order to encourage divergent and creative thinking, we decided to sketch out design ideas individually before coming together and presenting our ideas to the group. Each group member referred back to the user needs we identified in the research stage to make sure that the solutions we came up with addressed at least part of our users' needs. Below are some of our individual sketches.

sketches

Design Alternatives

As a group, we merged our ideas into the following 3 design concepts:

Concept 1

In our first concept, we provide novice backpackers with a traditional survey which asks questions that would otherwise be asked by salespersons in REI's stores. After answering these questions, users will see a list of recommended backpacks that are suitable for their needs. They will also see a list of recommended features for them, and whether each recommended backpack has those features. This concept allows users to better understand and effectively find which backpacks will be the right fit for them, considering their size, weight, body frame and all of the items they will be carrying in their backpack.

Concept 1

Concept 2

Concept 2 provides users with an interactive video in which a qualified expert from REI talks about his backpacking experience. In the video, the expert will ask the same questions salespersons ask in an REI store, give tips to users on how to measure their bodies, and educate them what they should do to prepare for their specific trips. This concept could not only help novice backpackers narrow down their choices, but also educate them what they should consider while choosing a backpack.

Concept 2

Concept 3

Since research shows that backpackers usually form a close community, our third concept aims to bring the community together and let more experienced backpackers help novice backpackers with their purchase decisions. We provide a "Chat with Expert" function that enables users to email/chat with either REI salespersons or experienced backpackers online who have agreed to give advice to novice backpackers on REI's site. In the expert list, users are able to see the ratings of each expert, their specialties, and their experiences. This concept provides a platform for novice backpackers to reach out to experienced backpackers, learn from them, and find the right backpack more efficiently.

Concept 3

User Feedback

In order to narrow down our ideas, we conducted 7 feedback sessions with novice backpackers to see their preferences. We found that:

  • Users generally prefer the survey tool (Concept 1) over the video tutorial (Concept 2), because the survey enables them to skip parts and does not require audio output.
  • However, a number of users liked the personal elements of having the instructions narrated by Ned (an illustrative REI expert).
  • Users also reported that they will use the expert advice tool, and hope to have access to it at any stage of the process.

Based on the data, we made the following design decisions:

  • Use an interactive survey as the main feature to help users narrow down their options.
  • Incorporate more personal features that users liked into the survey design (e.g. describing why each question is asked and narrating the instructions through the voice of Ned the expert).
  • Create an expert advice tool to connect novice backpackers with REI salespersons as well as experts from the greater backpacking community.
  • Allow users to access the expert advice tool anytime during the process.

Wireframes

We created the following wireframes as a group in order to illustrate the basic functionalities of our final design. The emphasis at this stage is still on functionalities rather than visual design, since we hope to make sure that our final design meets users' needs before refining the interface.

annotated wireframes

To evaluate our prototype, we created the following task scenario for our users:

You are going to Smoky Mountain for a week-long backpacking trip and need to find a suitable backpack for the adventure. You will be travelling with your significant other, carrying a 2-person tent, a sleeping bag, but no sleeping mat or cooking gear. Please use the tool to narrow down your choices and seek advice from an expert to confirm the backpack capacity.

During each evaluation session, we first showed users the current REI website, asked them several screening questions to make sure that they are novice backpackers, and explained to them the task scenario. After users completed the tasks, we asked them several follow up questions and encouraged them to provide feedback on the design.

Based on users' feedback, I created the following design recommendations for our medium-fidelity prototype.

annotated wireframes

Prototype

After we designed the user interface, I took the lead to create an interactive prototype of our tool in InVision. Click to view the InVision prototype.

UI

Evaluate


Cognitive Walkthrough

To evaluate the user flow of our app, we conducted several cognitive walkthrough sessions with usability experts. Our tool leads our users through a linear process to help them narrow down their choices. Though our process resembles REI salespersons' process in helping novice backpackers in store, we hope to make sure that the user flow, when translated into a digital survey, is intuitive and easy to follow.

During each session, we first provide our usability experts with the context of our design and a backpack purchasing task to guide their evaluation. We then show them the interface and walk them through the tool step by step. During each step, we let them write down answers to all the following questions, together with explanations supporting the answers:

  • Is this what you expected to see?
  • Are you making progress towards your goal?
  • What would your next action be?
  • What do you expect to see next?

Some of the feedback we got from usability experts include:

  • This progress bar is not visible enough.
  • The "prev/next" buttons are not visible enough.
  • The users might not know that they are making progress towards the end goal until the last page, when they see the recommendations; they might give up halfway as a result.
  • The "Try-on for free" function on the recommendations page is not visible.

Usability Testing

Similar to our earlier user feedback sessions, we conducted several in-person, moderated usability testing sessions with potential users. After showiung users the current REI website and make sure that they are novice backpackers, we read them the following task:

Find a backpack for a trip to Smoky Mountain for 5 days for yourself. You will be travelling with your significant other and carrying 1 tent, 2 sleeping bags, 2 sleeping mats, and 1 stove. Ask an expert for help along the way. Also, please share your thoughts and any questions you may have as you look for your backpack. Finally, we are not evaluating you, but rather seeking feedback to improve our solution.

Users then completed the task while thinking aloud. Following the task, we asked them whether they would use the tool in place of in-store shopping, and let them fill in the System Usability Scale (SUS).

Overall, our design received an average SUS score of 77 (SD = 23.48). In fact, the mean was greatly affected by one outlier with an extremely low score; all the other users rated the system as highly usable. A larger sample size is needed to get a more accurate estimation of the system's usability, but a SUS score of 77 assures us that our system is considered usable by most of our audience.

Other feedback/take-aways from the usability studies include:

  • The instruction videos on the Body Fit page were not noticed by a number of users.
  • The continuous scale for estimated weight/capacity confused a number of users.
  • Several users did not understand what "Your Backpack" meant on the Weight Estimation page.
  • Instead of selecting a backpack as their final choice, users hope to either view details of backpacks they are interested in, or compare several backpacks on the Recommendations page.

Design Iterations

Note: an interactive prototype of the final design will be available soon. The main UI screens can be found below.

Based on the results gather from cognitive walkthrough and usability testing sessions, I created the final design of our tool using Sketch. The design changes I made are illustrated below.

Landing Page

On the landing page, I left only one entry point to the tool through the call-to-action button to minimize confusion. I also changed the icon for the voice interface we hope to provide for the visually impaired.

Designed changes made 1


Trip Length

For the trip length page, I changed the wording of the third button to make the meaning of the option clear. I also made the following changes to the general layout, which appear on all the following pages as well:

  • Placed the explanation on why the tool asks each question under the respective question. The original layout placed the explanation above the progress bar, which was hard to notice.
  • Changed the progress bar to make it clear which sections have been completed.
  • Always show available filters and candidate backpacks on the page; gradually narrow the choices down as more filters are suggested based on the user's input.
  • Changed the navigation (Previous/Next question buttons) for it to be more prominent.
  • Increased the font size for the expert tool.
Designed changes made 2


Body Fit

Some users did not realize that the videos were playable. Therefore, I added more prominent titles for each video and made it clear that users can click to play the video instructions. I also added suggested filters earlier in the process (though without all the information it can be inaccurate) and changed the candidate backpacks once users finish answering one question to let them see the progress they make towards their goal.

Designed changes made 3


Weight & Capacity

Changes to this section's design include:

  • Changed the title of the section to better reflect what we are estimating (weight and capacity, not weight alone).
  • Made it clear through description that the estimated weight is the total weight of the backpack with all the gears inside.
  • Abandoned the continuous scale for weight estimation, which confused a lot of users. Replaced it with discrete categories.
  • Changed each category's capacity range for them to be consistent with REI's filters.
  • Enabled users to carry half a tent and share the weight with others, which was not taken into consideration in our original design.
Designed changes made 4


Recommendations

Changes to this section's design include:

  • Changed the ambiguous wording of the "Select" buttons to "Learn More".
  • Enable users to directly select backpacks to compare on this page.
  • Added a call-to-action button to let users notice their option to try out 3 backpacks at home and return 2 of them for free.
  • Changed the "Why We Recommend" section for each backpack to make it easier to read and more realistic.
Designed changes made 5