REI

e-commerce website redesign

Overview

REI is a large national retail & e-commerce chain that specializes in selling clothing, gear, and equipment for outdoor sporting activities. As a design exercise, our team of 3 was tasked with conducting research on their current e-commerce site, focusing on usability and information architecture, after which I redesigned problematic features of the existing site in a mid-fidelity wireframe prototype.

My ROLE:  Research & Design

DURATION: 2 Weeks

TOOLS UTILIZED:    Sketch   |   INVISION    |  Omnigraffle   |   TRELLO   |    OPTIMAL WORKSHOP

SCOPE

During the course of this 2–week project my team and I:

• conducted user research via 
  • contextual inquiry
  • online surveys
  • usability testing
  • card sorting
• conducted analysis & synthesis of research data via
  • affinity mapping
  • persona creation
  • task & user flows
  • site mapping
  • user journeys
• conducted supplemental research via
  • heuristic analysis
  • features analysis
  • competitive analysis
• built mid-fidelity wireframes & a clickable prototype
• conducted multiple rounds of usability testing and iteration
• delivered a final research report & spec doc

RESEARCH PHase

Contextual Inquiry

We launched the project by conducting a contextual inquiry of actual REI customers in the physical store in order to observe their shopping behaviors.

What we discovered was that many customers had previously visited the website to do initial research but wanted to see the products in person before making a final decision. In that sense, the online store was working in tandem with the brick and mortar stores.

USABILITY TESTING

Following the contextual inquiry, we conducted several usability tests of the current REI web and mobile sites in order to get a sense of the site’s navigation capabilities and overall strengths and weaknesses.

From these test, we determined that REI’s current site has a large amount of content with many possible ways to navigate to end goals, but was also a bit overwhelming and disorganized.

The site’s top navigation was organized by sport/activity, which users found useful, but the the drop down menus were split into too many different sub-categories.  As a result, users were having a hard time navigating through them, and were more likely to resort to the search function in order to find what they were looking for. 

HEURISTIC ANALYSIS, SITE MAPPING & CARD SORTING

Along with usability testing, we conducted several internal analysis of the website capabilities including heuristic analysis, features analysis and documentation of the current site map and task/user flows.

We found that REI rated fairly highly in overall features offered, but that the site map was extremely large and cumbersome and there were many redundancies in sub categories and user paths.

Around the same time, we started conducting card sorting exercises in order to get a sense of how users would categorize the various products on REI’s site. For the most part, the results of the card sorting were consistent with current categorizations, but indicated that users were comfortable placing items into more general categories as opposed to extremely specialized sub-categories. 

SYNTHESIS & Design

Armed with this research, the next phase was to conceive the redesign. I started by developing a few personas to help guide the process:

Following that, I mapped out a new site map and user flow chart based on the persona’s needs.

Next, it was time to visualize the new design. My goal was to keep the essential navigation elements in place, but to consolidate the sub-menu and sorting categories in a way that users would hopefully find more streamlined and straightforward.

I also wanted to reposition some of the links to REI’s subsidiary sites to where they would be more accessible and noticeable to users.

One of the advantages that REI has over its competitors is that it also offers a range of other products and content such as in-store classes & events, REI-organized adventure trips, educational/instructions articles and member blogs.

While not technically part of the e-commerce site, I believe that these elements offer substantial value to REI’s brand, but users did not seem to be noticing links to them in their current location.

DESIGN

I first focused on the top menu categories, reducing the overall categories from 14 to 10, and then consolidating the number of sub-category options in the drop-down menus to no more than 6 per headline category.

I added images to the sub-category headings in order to provide visual cues for the user. I also removed the block of promotional links on the right side of the sub menus as users didn’t seem to be engaging with this content area, and it was creating unnecessary visual clutter.

Finally, I revised the sort & filter options on the product results pages, repositioning them horizontally along the top of the product results so users wouldn't have to scroll down in order to access them.  I then consolidated the sort/filter categories to show the more general options first, while placing more specialized options beneath a separate drop-down tab. 

TESTING AND ITERATION

Once the initial wireframes were in place, I loaded them into Invision to create a clickable prototype for usability testing.

For the first round of usability tests, I decided to retain one scenario/task from usability testing of the original site for purposes of comparison, and to create 2 new tasks to test out some of the revised navigational features. 

The task retained from the original site was to find a particular kayak  and place it in the shopping cart. Using the new prototype, this task didn’t present any problems for the testers, with all users successfully completing it.

For the second task, I asked users to find the highest rated pair of skiing boots that were currently on sale (i.e. reduced price). This task proved to be a bit more difficult.

During the design phase, I had decided to eliminate sale/deal items as a sub-menu category in the interests of consolidation. However, during this round of testing I discovered that users actually found it more intuitive to enter a category before looking for deals, so I decided to re-instate the sale/deal links in the sub-menus for the next prototype.

The third user task was designed to test the new sorting menus — specifically to see if the users could easily find additional sorting options under the new drop down tab.

This task also proved more difficult in the initial usability tests. Several users either did not notice the tab or did not think to look for the sorting option in that location. For the next iteration, I added an arrow signifier and recolored the text to make it consistent with the other sorting categories.

Having made these changes, the next round of usability testing showed a definite improvement with all users successfully completing each task. 

CONCLUSIONS

Overall, I think that the changes implemented were helpful in reducing the amount of visual clutter, providing a less overwhelming amount of information in drop-down menus, and giving added prominence to links that were previously overlooked by users.  

Further thoughts would be to do A/B testing of the original vs. redesigned sort and filter menus to see if there was any improvement in terms of success rate or completion time, or if the original orientation was actually more effective.