REI Co-op

REI Search and Related Items. How my accessible, scalable design increased click rate by 205%.

THE PROBLEM

Browsing customers need an easy way to bridge to like categories at the bottom of search pages, so that they can continue navigating REI.com's taxonomy and purchase related items.

OUR SOLUTION

Our team designed an accessible, design-system compliant “related searches” component that better meets users’ expectations and allowed them to continue shopping the website, rather than leaving REI.com.

This solution also improved internal linking across the site, elevating REI's SEO ranking. Accessibility updates to the existing chip component within the Cedar Design System further supported accessible, functional and scalable design implemented by dozens of teams across the REI digital ecosystem.

KEY RESULTS

205%

Click Rate Lift

25%

Cart Additions Lift

12.5k

Engagements (during A/B/C test)

PRIMARY DELIVERABLES

Competitive analysis
User research, usability testing, and synthesis
Ideation studies + high-fidelity prototypes

Chip component accessibility update (WCAG AA)
Presentations to stakeholders and leadership
Polished final deliverable and handoff

PROJECT TIMELINE

Q1 - Q3 2021

MY ROLE

Strategy
Facilitation
UX Research
UI Design

TEAM

Veronica Benduski: Product Designer
Steve Valenza: Product Manager
John Lawless: Lead Software Engineer
Rick Carlisle: Software Engineer
(In partnership with 30+ stakeholders)

TOOLS

Figma, Figjam
Sharepoint
Confluence
Mural
Notion

The Related Searches feature is huge… you’re helping customers use their time more efficiently, walk around your website like a store, find products, and hopefully spend more money on your page... they help me save time and shop efficiently.

Usability Test Participant

PERSONA & PROBLEM STATEMENT

The customer journey

Meet Autumn, a browsing shopper with low vision on REI.com. Getting ready for a camping trip with friends, Autumn needs an efficient, accessible way to find gear when she reaches the bottom of a search page and hasn't found what she's looking for, or is unsure what else she might need. Related Searches help her continue shopping REI.com.

BACKGROUND RESEARCH, COMPETITIVE ANALYSIS & USER RESEARCH

Checking assumptions

Competitors keep browsing customers like Autumn shopping on their sites with related links — which often include images — at the bottom of their search pages.

I ran an in-depth generative baseline user study aligned to the business’ target demographic, finding that the majority of participants would go to another site if they do not find the product they want on REI.com.

Lofi sketching exercises

IDEATION, PROTOTYPING, A/B/C TESTING

Human-centered ideation

At this critical turning point in her explorative shopping journey, how might we keep customers browsing REI.com?

Following an intensive ideation process, we used 6-8-5 sketching and feasibility matrix workshops to diverge into dozens of possibilities and eventually converge on two final high-fidelity designs. I ran a usability study alongside a live A/B/C test, using qualitative and quantitative analysis to identify a clear winner.

The visual prominence, consistency, and interactivity of the redesigned component means customers notice Related Searches and keep exploring, rather than leaving the site. The redesign also saw an improved click rate (up to a 205% lift, mobile) and increase in cart additions (+1.45% lift, mobile) over the prior experience.

Midfi ideation

“Related Searches catch my eye here... they’re great, especially if you're a newbie like me, because they give you more ideas of what to shop for. I can just click and continue browsing almost as if I were in the store... I feel confident that I could find what I need on REI.com.”

Usability Test Participant

USABILITY TESTING

A design that meets customer expectations...

Even when tasked to use filters to refine their search and navigate deeper into the taxonomy, 100% of participants in the usability study stated that the way the redesigned Related Searches component works meets their expectations.

“This is exactly what I expected... I find Related Searches helpful when I’ve made it to the bottom, clicked through a few pages, and haven’t found what I’m looking for...”

HANDOFF & NEXT STEPS

...and
exceeds them

When customers aren’t able to find what they need or are looking for inspiration, Related Searches help them continue "walking around" online as they might in store, perhaps adding a few items to their carts that they didn’t realize they needed.

“Related Searches make it easy for someone who is searching rather than going back to ‘home’ or leaving the site.”

BONUS PROJECT

Cedar Design System a11y Update

This project also revealed an important accessibility (a11y) issue: Browsing shoppers with low vision could not distinguish between selected vs. unselected states of the chip component.

After detailed background research and analysis of use cases, I designed clearer focus, hover, selected, and unselected states of the chip component in the design system. This solution efficiently cascaded into and scaled the work of dozens of product teams across REI’s ecosystem.

FINAL THOUGHTS

In the complex environment of a large company like REI, integrating insights from over 20 stakeholders was the biggest challenge. Only part of this work was put into development due to shifting business priorities and restructuring following HQ layoffs.

However, the invaluable qualitative and quantitative insights gained from this research led to a clearer understanding of our customers' needs and will continue to support accessible, functional and scalable design on REI.com.