REI - COOP

After reviewing the REI-COOP website, there are areas within the home, contact, and membership pages that could use improvement. Although the current site is usable, there are areas that do not meet ADA compliance standards and usability, including navigation and matching between the system and the real world. These issues and areas of improvement will be discussed within this analysis.

Client

SNHU

Sector

User Experience Design Course

Role

Sr. Product Designer

Duration

2 Months

Kick-Off

Objectives

Concentrating on areas of enhancement for the REI website, with the primary objective of conducting a UX audit. This project was part of my undergraduate UX course, aiming to identify and address usability issues.

Goals

  • Create a user analysis of the current REI website. Create a new design prototype based on finding.
  • Improve sites usability and accessibility through structure and navigation.

Principles

  • Negative Space - The balance of space and design, was kept within the redesign. This principle gives users the ability to focus on content and navigation.
  • Consistency - The current site tends to have an inconsistent design throughout the site. This causes the site to appear off-brand and not symbolize the company. Consistent design elements, color, and imagery were carried throughout the redesign.
  • Color Contrast - Users with visual impairments need to be considered for the site to pass ADA compliance guidelines. The current site has some issues with meeting the AA standards with color contrast. The redesign tested colors contrast for legibility. Also ensuring color combinations did not violate standards.

Research

Research

Usability Heuristics

Applying the "Usability Heuristics," the usability of the REI homepage, Membership, and contact pages was assessed, with a focus on navigation and the site's content structure. Additionally, scenarios were employed to gather further data on usability and user needs.

πŸ‘

Visibility of System Status

The REI site establishes a visual status for users. Clicking a category in the navigation menu displays the category name on the page, informing users of their current location. This usability element will be retained in the redesign.

🌍

Match Between System & Real World

The site employs ghost buttons, but their behavior deviates from the standard outlined-to-solid block transition upon hovering. Currently, the buttons become solid instead of outlined when hovered over, which may confuse users and make them think they've made an error. To address this issue, the button behavior will be reversed to align with real-world systems.

βœ…

Consistency & Standards

The existing REI site lacks a cohesive design pattern and consistency. Hero designs and CTAs undergo frequent changes, impacting both the REI brand and user experience. Design should remain consistent despite sales or holidays. The updated design adheres to a pattern, maintaining uniform colors and fonts throughout the entire site.

πŸ”ˆ

User Control & Freedom

Currently, on the contact page, users lack the option to send an email directly from the site, being compelled to use their computer's email application. This disrupts the user experience. The redesigned contact page offers the option to send a message directly from the site, requiring only the input of name, email, category, and message. This solution streamlines the process, reducing user steps and providing flexibility in the contact method.

🧠

Recognition Rather than Recall

The existing REI site effectively guides users through tasks by offering hints and clues in forms, following the UX principle of recognition over recall. This practice continues in the redesign. When users intend to email REI, the required fields in the email form are visibly indicated. Failure to fill a required field prevents email submission, with the empty field outlined in red accompanied by an error message

πŸ€Έβ€β™€οΈ

Flexibility & Efficiency of Use

The site offers users flexibility with wish lists and shipping methods, but issues arise when using the 'add to wish list' button. Users must create a list first, adding extra steps and navigating away from the item. The redesigned approach introduces a favoriting option instead of a wish list. Favorited items will be accessible on a dedicated favorites page, eliminating the need for users to create a list or leave the product page.

🎨

Aesthetic & Minimalist Design

The significant site update focuses on achieving a consistent design throughout. All pages will share a unified appearance in line with the REI brand, maintaining uniformity in buttons, fonts, and colors. Many green backgrounds will feature a subtle map pattern, enhancing the outdoor design theme. These consistencies aim to establish brand and aesthetic familiarity among users. While elements may vary slightly in appearance on different devices like tablets and mobile, the mobile layout adopts a stacked design for improved visibility.

DeSign

Updated Design

Conclusion

Final Thoughts

This UX audit for the REI website, undertaken as part of my undergraduate course, focused on user analysis and prototype design to enhance usability and accessibility. The redesign prioritized key principles, including maintaining negative space for content focus, ensuring consistency throughout the site, and addressing color contrast issues to meet ADA standards. User personas, representing a diverse range of REI customers, guided the redesign process. Applying Usability Heuristics provided valuable insights into navigation and content structure, further enhancing the user experience. Overall, the goal is to deliver an improved REI website that aligns with user expectations and industry standards.