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.