about     contact

UX/UI

REI SITE REDESIGN




Opportunities for a better user experience begin by understanding the customer base and learning what their wants and needs are when shopping on the REI website.


Design Opportunities:
︎ Navigation Bar
︎ Menu
︎ Buttons
︎ Product Summary Page







Nav Bar


User testing revealed that REI’s before nav bar was a pain point due to confusion around the activity-based categories. Users couldn’t determine where specific items were categorized, making it difficult to get to the individual product pages they were looking for.

The solution was to organize products into categories using familiar universal terms. This redesigned nav bar resulted in a more intuitive browsing experience.


REI Current Menu


REI Menu Redesign

Menu


REI’s current menu delivers an array of options from which to choose from. By organizing the categories and condensing them into a drop down version of the original, the user will have an easier visual experience that can help access items easier.

As seen in this REI menu redesign, the nav bar has streamlined all the activities into one Activity button.
To reflect this, the men’s drop down menu has replaced More with By Activity, all the items under More have been moved under Accessories. 









Add to cart & Quick view buttons
Exhibit A

Accessible cart and live chat button

Buttons


When designing a better user experience, buttons are the number one thing that can help facilitate and make purchasing an item off a website a 3-click experience as opposed to a 8-click adventure. Time is of the essence and the longer it takes for the user to figure out how to add items to a cart, the more time the user has to contemplate on whether or not to complete the purchase. To help REI secure purchases, I’ve included two new buttons below every product: an Add to cart and a Quick view

The current REI check out process can be expedited by including an add to cart button. One of our user tester’s pain point was that there were too many action steps required. In effort to reduce these action steps, these buttons can help the user browse and add items to their cart in a more efficient way. 

From a competitive/ comparison standpoint, many websites similar to REI have adopted scroll-down cart and live chat buttons. The importance of the sidebar live chat button is two-fold. First, the user doesn’t need to scroll to the bottom of the page and click through two pages to land on Exhibit A. The user can simply click on the live chat button and begin chatting with customer service through a pop up chat window. Second, this button follows the user to any page on the site. Imagine being inside a brick and mortar REI store, you are walking past many isles and need help from a sales person or store manager. There’s no need to leave the site with questions unanswered, this live chat button is there in any step of your shopping experience. 


REI Current Product Summary Page

REI Product Summary Page Redesign

Product Summary Page


User testing REI’s current website allowed me to gage information about how the customer consumes information provided on the site. Insight on pain points include:

• Item information on summary page is overshadowed by REI membership promotion.

• Selecting color/size is not intuitive because the icons next to product on very small.

• Item spec info section should have hierarchy and be the first thing the user sees. This information would best fit within the product description section.

• Abundance of information below product picture is overwhelming. Is there a better way to showcase this? 

REI’s redesigned page targets user’s pain points and provides subtle solutions that help the customer have a better experience. The new product summary page provides visual and informational hierarchy. Product photography is included to help the user identify details on the fleece jacket. Spec information is now located below the product’s price and REI membership promo is now placed next to the Add to cart button, which will remind the user to sign up for membership as they check out. Lastly, the user can access more product information below as they click through a drop down menu.