Chips component
REI has been evolving and maturing their Design System, Cedar. We identified a complex component need based on many similar or overlapping use cases. I led the strategy and design of the project with the help of a cross functional set of partners from start to finish.
Role
Senior UX Designer
Team
Design Lead
Product Manager
Front-End Developers
Identifying the need
I gathered similar designs other designers at REI created in response to specific use cases throughout the REI website. I interviewed them to understand our direct users better and gather more information on the needs of each use case.
Industry research and problem discovery
A few designers and I collaboratively gathered industry research on best practices for Chip components to better understand our design constraints.
Comparing internal components
I studied similar internal components to make intentional decisions about brand consistency or to establish new norms if necessary.
Accessibility compliance research
I studied the most up to date WCAG documentation for relevant recommendations about interactive elements like the Chip to make sure this component could be accessed by all users with or without disabilities.
Competitive research and inspiration
I studied what competitors were doing—what worked, what did not work, and drew inspiration from there.
Visual design iterations and testing
I created a few iterations that could satisfy the needs of each use case, brought these iterations to company-wide design critiques, and guerilla tested them in prototypes with people who matched the user profiles.
Accessibility testing and compliance
We made good use of our accessibility testing tools and accessibility partners to make sure this Chips component was accessible to all users with and without disabilities.
Designing, writing, and publishing component documentation
I wrote documentation in collaboration with my development partner and added a functional prototype of this component to our design library so our designer, developer, and product manager users may successfully use this component to make their REI page designs more on-brand, usable, and accessible.
Outcomes and reflection
Chips saved designers countless time
Chips became one of the top 10 most used components in REI’s Cedar design system (out of 34 components total).Chips is used on the highest value parts of REI’s digital products
Chips is used on all search functionality throughout REI, adventure booking, choosing a store, and other experiences.Chips responds to user needs appropriately
Chips maintained a very low detach rate from the system of just .6%
