Highlighted project:
Chip component

REI hired me to help evolve and mature their design system, Cedar, by identifying key needs and delivering solutions. My first project was the Chip component, a critical element that had been attempted but never fully realized over the past 5+ years. We recognized the need for a complex component to address multiple overlapping use cases. I led the strategy and design of the Chip component from start to finish, collaborating closely with a cross-functional team to bring the project to life.

Identifying the need
‍
I collaborated with the Cedar team to understand an emerging new component need with similar use cases. I gathered all REI-created use cases for choice selection, activating in-page state changes, and tags. I interviewed the designers and developers who originally created each use case design 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.

Based on REI-specific company needs, internal and external research, and best practices, I chose to focus on three main points of functionality that would cover over 10 major use cases at REI: choice, filter, and preferences.

Though seemingly disparate, what tied these functions together were that they were all state changes.

We decided tags were out of scope due to distinctly opposing behavior: external linking.

Competitive research and inspiration
‍
I studied what competitors were doing—what worked, what did not work, and drew inspiration from there. I drew boundaries around our complex and unique needs and those of other companies.

Conforming to existing brand guidelines
‍
I studied existing REI components that had similar specifications to understand and implement similar existing brand choices that would create a seamless experience for the end user.

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.

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 compliance review and testing
‍
I partnered with engineering to ensure compliance with WCAG for production.

Creating 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.

Visual design and production
‍
I worked closely with engineering to get the desired functionality while maintaining accessibility during each state and added the reusable element to the design system.

Outcomes and reflection
‍
Chip was the first complex, multi-functional component in the Cedar design system, laying the foundation for other components I later designed and contributed to, including Filmstrip and Skeleton.
‍
Chip saves designers countless hours of work
Chip became one of the top 10 most used components in REI’s Cedar design system, out of a total of 34 components.

Chip plays a critical role in REI's digital products
Chip is used on all search functionality throughout REI, adventure booking, choosing a store, and other key experiences.

The Chip design proved to be highly relevant to user needs
Chip achieved the lowest detachment rate of any component in the system, with an impressive 0.6%.