REI — Responsive Web Redesign ~UXDI

Overview

As the third project for General Assembly’s User Experience Design Immersive program, we were to work as a team of fellow students, then as an individual to redesign an existing responsive website. For the first week of the project, we were to work in groups to conduct a series of different types of research, and then the following week of the project, we were to work independently to come up with a potential solution, design, and to test.

To begin with, a little bit of research on REI was needed;

REI is a consumer co-operative; this means that every member of REI is actually an owner of the company. This is the main difference between REI and it’s competitors.

“We inspire, educate and outfit for a lifetime of outdoor adventure and stewardship”

REI’s core purpose is to inspire, educate, and outfit for a lifetime. We can really feel this purpose clearly when we visit the stores. Then, what is the experience of using REI’s website like?

Discovery

We began the project with a series of different types of research; Contextual Inquiry, Screener/Survey, Competitive and Comparative Analysis, Heuristics Analysis, Usability Testing, and Card Sorting.

During our Contextual Inquiry, we were told that; 
 “it’s so much more fun to come to the store than to shop online!”
 
This was the core problem of REI’s website.

Almost all of the customers that we interviewed during contextual inquiry have either never been to REI’s website before, or barely visits the website, because it is much more fun to be in-stores, where you can try different equipments before buying, has great customer service, and helpful advices from staff to be “outfitted” for a lifetime.

Through the Screener/Survey, we found out some information that would help us move forward with the rest of the research;

  • 44% Age 35–50
  • 58% Male
  • 42% Female
  • 60% Shop REI and Amazon
  • 35% Northface
  • 16% Patagonia & L.L. Bean
  • 44% REI — Favorite Store
  • 56% Shop once in a few months
  • 47% Shop online once in a few months
  • 44% Prefer to shop online and in-store
  • 84% Like to shop for apparel
  • 63% Shop for shoes
  • 50% Camping and Hiking
  • Users generally shop once every few months
  • Users love REI
  • Users shop mainly for apparel and shoes

After conducting Usability Testings on the current website with 3 existing users and 2 new users, we found out that it is difficult to notice the features in the website, such as Expert Advice, Classes&Events, Adventures, that would enhance the experience of using the website. These were mainly due to difficult navigation problems and lack of promotions of the features.

Through two closed and one opened Card Sorting, we found out that having flexible categorization, meaning having multiple locations for items to be in, is beneficial! However, we also found out that some titles of the categories were too vague for the participants to figure out what belongs in them.

Along with the researches mentioned above, my team and I created Competitive Matrix, Competitive and Comparative Analysis, Heuristics Analysis that would help us get an idea of where REI stands in its industry.

(Top Left) Competitive Matrix, (Top Right) Competitive and Comparative Analysis, (Bottom four) Heuristics Analysis

We were given two personas that were made 5 years ago, and our task with personas was to update the personas according to our research findings. The personas have been revised and the primary, secondary personas have been chosen. Going back to the research, we found out that nearly half of REI’s members are women and in 2017, REI has actually started an incentive to represent women in their branding;

“A comprehensive effort to change the male dominated imagery of people in the outdoors by featuring women in advertising and marketing”

We also saw that the majority of the customers shopping were women during our contextual inquiry, which is why we chose Gabrielle, a woman, as our primary persona, and Ted and Jeremy, as our secondary personas.

Personas
Customers love shopping in REI because of the great customer service and store experience.
How might we bring this same level of in-store experience to REI’s website?

The findings for research lead to our problem statement.

Adding on, we wanted to take a deeper look into the actual user experience with REI’s current website. We used our personas to create User Journey, Task Flow, User Flow, and a Sitemap.

Starting with our User Journey of Gabrielle, we were able to create a Task Flow and an User Flow on the overall experience of REI’s current website along with those of The North Face’s current website for comparisons, then we created sitemap to find out the detailed structure of the website.

User Journey (Gabrielle)
User Journey (Ted and Jeremy)
(Green) Task Flow of REI, (Red) Task Flow of The North Face
(Green) User Flow of REI, (Red) User Flow of The North Face

Development

From this point on, the project was to be work on individually based on the findings from the group research. I came across with 5 major features to work on the current website from our findings; Design, Explore, Navigation, Payment, and Return.

Along with the problem statement, I wanted to go back to the brand statement, to prioritize the features that would help users be inspired, educated, and outfitted for a lifetime. With all the features that I came up with through the findings, only the features that would help to solve the problem were selected to be work on first. Then, I created a phase rollout with all the features, that will be added to the website eventually. The current process of the project in phase rollout would be in between phase 1 and 2.

MoSCoW Map
Phase Rollout

Delivery

Through rough hand sketches to gather ideas, I came up with the initial wireframes. Comparing to the current website, some of the major changes were made in 1. the overall design, 2. simpler navigation, with a new category of “Explore”, and revised category titles to reduce confusion, 3. new layouts for better organization of contents, 4. and lastly, one of my main focus, an incorporation of “Expert Advice”, into different pages of the website, to make the information from online more accessible as it is in-store.

Rough Sketches
Initial Wireframes (in comparison with the original website of REI)

Usability Testing

With the prototypes, I conducted two rounds of Usability Testings with 2 Scenarios and Tasks provided to the users for both desktop and mobile versions.

These are some of the Utility and Usability findings from two rounds of usability testings;

Utility

  • Clean, straightforward and simple layout
  • Good incorporations Expert Advice in different ways
  • Confusions in content; lack of color/image
  • Requires reduction of contents
  • Hierarchy issues with pages with more content

Usability

  • Easy and straightforward navigation
  • Desktop < Mobile for simple tasks
  • Desktop > Mobile for complex tasks with more content
  • Missing possible paths to complete the tasks
  • Some navigation problems (some due to prototype limitations)

KPIs and Metrics being introduced during class, additional task for me during the usability testings (as lightly done during the first set of usability testing for REI’s current website), was to keep track of the errors that users were making, and to keep track of the time of task completion. Sadly due to confusion, I tracked time of the overall usability testing of completing four tasks, but I did see some time reduction in the testings from the first round to the second round. Comparing to the original website, the success rate to complete the tasks has also increased from 83.33% to 90%, then to 100%.

KPIs and Metrics

Revisions

After receiving feedbacks, I was able to revise the prototypes twice. However, no major changes have been made to the first prototype; some issues were fixed for navigation, on both desktop and mobile versions, and hierarchy became more clear in content/lists.

Revisions

The following are the links to my final prototypes:

mobile — https://invis.io/ATDMVRAVR

desktop — https://invis.io/WXDLYX62D

Reflections

Thanks to my sleeping disorder, I was able to put in a lot of time in this project. I am happy with the overall outcomes and my presentations, and of course, the experience that I had with this project. This project had a lot of new methods learned that we had to input, and had a ridiculous amount of research that needed to be done, but having such humble and loving teammates, I was able to get through this well!

I can really see me pushing myself to be better every project, and seeing the actual improvement definitely motivates me to work harder everytime. I was skeptical about myself enjoying UX Design before I enrolled this course, and even on the day I started this course, but I actually do enjoy a lot :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.