REI Uncommon Path
Redesign

Uncommon Path is a digital publication and newsletter for REI Co-op members. The blog unpacks the ideas, issues and experiences that shape the relationship between people and life outside.

Project Type

Website Redesign

Location

Remote

Team

UX Designer - Me

UX Designer - Caroline

Visual Designer - Emily

Company

REI

Industry

E-commerce

Timeline

4 Months

Context

Reimagined REI’s Uncommon Path (Blog)—connecting e-commerce with a community centered by improvements in community and engagement.

Context

During my time as a UX Design Fellow at Code & Theory, my first major assignment was to reimagine REI’s Uncommon Path blog and its e-commerce experience. Our goal was to transform Uncommon Path into a dynamic online community that reflects REI Co-op’s core values of exploration, inclusivity, and environmental advocacy

Problem

100%👎

Of the users I asked to complete specific actions on Uncommon Path expressed challenges with navigation, content discovery, and community engagement.

I ran user tests—recruited people, set tasks, tracked behavior, and logged pain points.

Solution

Easy Content Discovery

Improved filters, search, and recommendations help users find relevant articles.

Connected Blog and Store Experience

Created a connected ecosystem in this experience where different types of content can coexist to help the user make better purchasing decisions.

Seamless Exploration

Intuitive UI elements encourage effortless browsing, strengthens brand credibility, and fosters a loyal community

Click on the "View More Details" cta button to view in detail

  • Article Listing Page

  • Video Listing Page

  • Article Detail Page

  • Podcast Listing Page

  • Author Listing Page

  • Add To Cart Page

  • Product Listing Page

  • Article Listing Page

  • Video Listing Page

  • Article Detail Page

  • Podcast Listing Page

  • Author Listing Page

  • Add To Cart Page

  • Product Listing Page

I created 7 of the entire teams 14 wireframes—two (2) moved straight into the high fidelity MVP (examples below).

Article Listing Page

Video Listing Page

I began by identifying my target users to clarify their pain points, ensuring an organized site audit focused on those specific issues and much more.

My Process

Personas

I started by completing an audience analysis through online observation. I looked at comments from users talking about uncommon path experience from the Uncommon Path blog section, and Reddit.

From analyzing my findings, I found two distinct user groups:

Shopper

  • Enjoy visitng REI Shop to purchase their favorite gear and clothing

  • Value Expert Advice, user reviews, and seamless navigation between content and product pages

Learner

  • Enjoy coming to Uncommon Path for learning new outdoor activities

  • Read personal stories, tips, and gear reviewsIsolated community experience

I then identified the experience pillars from Uncommon Path.

Uncommon Path Pillars

Community
First

A community-driven platform where readers can discover and share real-life stories

Intuitive
Discovery

Make the site easier to explore and show off essential content and products to the users


Shop & Read

Shop &
Read

Seamlessly integrate REI’s e-commerce with Uncommon Path to guide users along an intuitive journey

Life Outdoors

Identify a distinct visual direction that aligns with REI Co-op’s values and sets Uncommon Path apart

Using the 5 Pillars as a framework, it help me pinpoint five major pain points within the key user experiences.

**As a team, we designed 14 page templates for the REI Uncommon Blog site redesign.


I designed 7 of the 14 templates. Out of the 7 templates I designed, 3 are apart of our MVP flow. To view my wireframes and MVP design process in more detail, please reach out. Thanks!

Pain Points

Overwhelming & Impractical Navigation

Overwhelming users with too many options

Non-existent Content Hierarchy

Difficulty in finding relevant content

Isolated Community Experience

Limited opportunities to interact with each other or with the content creators

Separated Entities of REI Ecosystem

Missed conversion opportunities

The Painpoints I found gave me the insights I needed to zoom Out in the larger experience to work on Navigation.

Site Map

Site Map

By creating a site map, I gained a clearer understanding of how pages relate within the REI experience. This allowed me to organize pages and navigation tabs for the most optimal user experience within REI to positively impact the users (Shoppers + Learners) and business.

Myself and the other fellow created two different explorations for the site map (vertical + horizontal). We ultimately chose the horizontal navigation because it was more familiar for existing REI Uncommon Path users and provides more freedom to discover content.

**As a team, we designed 14 page templates for the REI Uncommon Blog site redesign.


I designed 7 of the 14 templates. Out of the 7 templates I designed, 3 are apart of our MVP flow. To view my wireframes and MVP design process in more detail, please please click/tap on the "View More Details" floating button on the bottom right hand corner of your screen. Thanks!

Once the site structure was clear, I moved on to outlining the essential design requirements to align user needs and features for design.

Gathering Requirements

During this stage, my team and I were in constant communication on how to make the design phase as efficient as possible. We agreed on MVP features, and established detailed component requirements that would be implemented in the wireframe and final design.

After Gathering Requirements, I jumped into DESIGNING. 👨‍🎨

Design Process

Initial Sketches

For the design phase, the first template I worked on was the article listing page. The initial listing page lacked adequate navigation, filters, and personalization options.

To fix these issues, I implemented a secondary navigation section for choosing topics of interest, added filters for more personalization, and created a sticky navigation at the top to allow users to see different parts of the REI ecosystem while browsing.

Example of ideation Sketches I made for the article listing page

Now lets move to the wireframe.

Wireframe

Many of the features I mentioned in the initial sketch are designed here in higher fidelity. However, in this iteration, I focused on improving component spacing and adding relevant copy to assist the visual designer in the final design phase.

Finally, what you all have been waiting for! 🥁

Annotations </>

Thoughtful Research + Design = Increased REI Value 💰 😁

The final article listing page enables discovery by category, topic, or tag, improving exploration on REI Uncommon Path. The design resolves previous experience issues with content herarchy, navigation, usability, and business return on design investment.

Learner + Shopper

  • Easy Content Discovery – Improved filters, search, and recommendations help users find relevant articles.

  • Connected Blog and Store Experience - Created a connected ecosystem in this experience where different types of content can coexist to help the user make better purchasing decisions.

  • Seamless Exploration – Intuitive UI elements encourage effortless browsing, strengthens brand credibility, and fosters a loyal community


REI Uncommon Path ROI

  • Higher Conversion to Purchases - Easier discovery drives more users to REI’s e-commerce

  • Increased Repeat Visits - Engaged readers return, increasing lifetime value


After Designing, I went through the process of completing annotations </>. This helped me understand the handoff process to developers.

[C-C10] 3-Up Article Content Card Grid

This module enhances user interaction by enabling exploration of various articles through a secondary navigation located under the module title. This allows users to easily find content related to specific activities. Users can further refine their search with a dropdown filter and sort option. While scrolling, users can hover over content cards to reveal additional article details. Additionally, a "Load More" button offers seamless article discovery with a single click, ensuring smooth and easy navigation.

Notes on Content Source

  • Dynamic means the content is pulled directly from a product database. Every element of this card is dynamically populated in the process such as the card tags, cover image, title, name of author, published date, and read time

  • CMS Considerations allow the ability for admin to remove and add cards as well as other listing elements.

Now let’s turn to the constraints and insights that shaped the final design.

Now let’s turn to the constraints and insights that shaped the final design.

Constraints

Iterations for MVP pages

If I had the chance to iterate further on this project, I’d focus on more user-facing AI features. These could include personalized navigation paths, AI-generated summaries for comment threads, and interactive infographics that show how gear looks in different scenarios.


Our redesign mainly tackled major interaction and content issues. However, we still considered AI’s role in backend content updates and personalization features while completing annotations. I made sure to show hints of that thinking in the final designs.

Reflections + Takeaways

I had a great experience working in this problem space. I successfully fixed and improved user experience issues in content, discovery, and navigation. I’m confident our solutions can be applied to similar challenges in the future. Hopefully, I can continue working on additional projects like this in the future.

Team Work Makes the Dream Work

Working with the other two fellows on this project couldn’t have gone better. We pushed each other to think more ambitiously and strategically about every aspect of the work. One of the best moments came when we were all creating our hi-fidelity wireframes. Each of us focused on specific pages, but we supported one another by critiquing each other’s designs and asking questions that advanced our overall vision.

UX Your Presentations

I had the opportunity to design three presentations at different stages of the project for our managers and other internal teams. Each presentation was tailored to a distinct audience, reflecting real-world scenarios for sharing design work.

Our first, a midpoint presentation, showcased early discovery work. Our second, the “define” presentation, was more strategy-focused and explained how our research and audits shaped the new REI experience. Finally, the last presentation provided a high-level summary of all the work I had created throughout the project.

The main takeaway is that stakeholders absorb and process information differently. Understanding your audience and what they care about is vital for communicating your work effectively. Without this, it’s hard to gain design buy-in and ultimately implement your ideas.

Working with the other two fellows on this project couldn’t have gone better. We pushed each other to think more ambitiously and strategically about every aspect of the work. One of the best moments came when we were all creating our hi-fidelity wireframes. Each of us focused on specific pages, but we supported one another by critiquing each other’s designs and asking questions that advanced our overall vision.

See Ya Later!

See Ya Later!

I appreciate you stopping by and taking a look at my work. Let's stay in touch 🤝

I appreciate you stopping by and taking a look at my work. Let's stay in touch 🤝