Recreational Equipment, Inc. (REI) Website Redesign
Research & Redesign
Background | Current Site
Given the retail company, Recreational Equipment, Inc. (REI), as a client, I conducted research methods to determine a powerful redesign to meet the high performance of large retailers like Amazon. My initial problem statement was as follows:
With large retailers like Amazon breathing down their neck, other retailers have to make some changes to keep up. REI is looking to design a new version of their e-commerce site.
How might we redesign REIs e-commerce site to be aesthetically pleasing and easy to use?
Research | Comparative & Competitive
Then began the research. My teammate, Jessica, and I began our exploration with some comparative and competitive analysis’. We spent time on the REI website along with competitive sites (Paragon Sports and Adidas) and comparable sites (Sunglass Hut and Crates and Barrel). We found that REI, as an e-commerce site, succeeds in many areas and provides a friendlier user experience than the other sites. We then conducted heuristic evaluations using both the Abby Method and the Honeycomb Method. This helped Jessica and myself to understand that REIs website lacks clarity and value in a couple of areas.
Research | Contextual Inquiry
After conducting research online, we were ready to begin our on-site investigation, contextual inquiries. We went out into the field and observed the behaviors of shoppers at all of these businesses. We found that these individuals mostly come into these stores with a specific task in mind, they go for organization, and optimal customer service.
Research | Closed-End Card Sorting
Next, we wanted to gain some insight into the way users would categorize the inventory on this site. We put together a one-hundred item list of inventory and performed a series of closed-end card sorts. 4/5 participants didn’t understand why there were so many different categories, and 5/5 participants placed items that could fit in more than one place into miscellaneous. From these card sorts, I learned that the global and local navigation on the REI website quite confounding to many participants. This directed me to other areas that needed improvement.
Research | Usability Testing
My last sector of research consisted of a set of five usability tests and interviews based on the current site. 5/5 users were capable of completing the given task, however, interviewing helped me to receive some interesting feedback. Some pull-quotes from my user interviews include:
“It is weird how in the list of products there is an option for me to compare but not to buy now.”
“Details and Specs are just long lists of garbage. I have to really read every single word.”
“Viewing your cart should be just as important as checking out.”
“The order summary page is way too difficult. The other options aren’t clickable, so why would they be there?”
“Lots of unnecessary intermediary steps in the shipping and billing process.”
Synthesis
After gathering insight from interviews and other research methods, I was able to synthesize this information and identify patterns.
- The details page is way too unorganized
- Some of the most important information and/or buttons do not stand out
- The order summary process is not convenient enough
- The shipping method is unclear
Personas | Primary
My primary persona was a 31 year old architect who cares about utility, durability, and outdoor experiences. Some of his needs from an online store include quick access to a range of options, knowing what is new on repeat visits, and optimal customer service. Some of his pain points include lack of sufficient product descriptions, difficult navigation, unclear organization, and lack of communication between staff members.
The Real Problem
Finally I was able to come upon the real problem:
How might we redesign REIs e-commerce site to give users a more clear and valuable experience when completing a task?
Translating Research into Design
Before entering the design phase of my project, I went back and analyzed all of the research I had conducted so that I could form an idea of what the priorities were for the redesign. What needed to stay the same and what needed work?
Design Studio
I then set up my design studio with 8-fold paper, a sharpie, all of my research findings, and of course my brain!!
After sketching out many low-fidelity wireframes, I was ready to make my way into Sketch.
Design | Medium-Fidelity Wireframes
I built medium-fidelity wireframes using the original REI website on both desktop and mobile platforms, and then adding in my design iterations. I implemented several features and made certain adjustments that I felt were necessary for a beneficial user experience.
Design | Annotated Wireframes
Design | High-Fidelity & Prototype
Eventually it was time to make compose high-fidelity wireframes and put together a prototype using the InVision app.
Task Flow
Before doing so, I constructed a task flow based on my personas needs and paint points using the software OmniGraffle:
Site Map
I also constructed a site map using OmniGraffle, along with a revised sitemap based on my research findings and the changes I implemented.
Prototype
Usability Testing
Using the prototype, I ran usability tests on five individuals. 5/5 users were able to successfully complete the given task. They provided me with some feedback that will guide me into the next steps of this project.
