@CHEWY
Redesigning Chewy’s alert component
Impacting the site outside of my small corner of the world
During my time at Chewy, I have primarily worked inside the Autoship product (subscription service). One such Autoship project led to me identifying a site wide issue, which I fixed by contributing two new components to the Chewy design system.
Alerts were being overused globally on the site, lessening their impact for real issues that customers could action on
The problem
Devise a new component to address the needs of designers
The project
Pages with abundant alerts used to reflect status
Identifying the need
As I began a project I was working on to help customers replace discontinued items in their Autoships, I noticed that the Chewy design system’s alert component was being over-used.
Chapter 1
Alerts V1
Chewy’s design system is relatively new. When I first started, our options for components were limited, resulting in some designers being forced to incorrectly use a component to move their work along. Our Pharmacy team specifically was working in a complex space that resulted in products that could have 60+ unique statuses.
As a result, the alert component because over-used, which was lessoning their impact on the site globally.
Pulling on a thread
My project was the appropriate use case to to utilize the existing alert component because:
Discontinued items would cause order fulfillment issues, costing the business money, and resulting in customers not getting their items.
I was creating flows to help customers address the issue, meaning that the problem was actionable on the part of customers.
However, I knew that my alerts would be competing for customers’ attention against many other alerts on the page and across the site.
My project with the existing V1 component
Out with the old, in with the new
Armed with my observations, I approached the design system team. While I was able to convince them of the issue, they couldn’t prioritize updating the component in time for my project. We agreed that I would go ahead and contribute the new component myself.
Chapter 2
Auditing the landscape
I started by reviewing how Chewy uses alerts throughout the site, both internally and externally. I met with designers from different areas and created a list of use cases. Then, I looked at other design systems to see how they handled those same use cases
My audit of design systems with alert components
One component becomes two
After my internal and external audit, it became clear that I would actually be contributing two components.
Page level alert
This component would be very restrictive in its usage. These alerts could only be used at the very tops of pages with critical information.
Page level alerts component and usage guidance
Inline alert
An entirely new component to the system. To be used to reflect status.
Inline alerts component and usage guidance
Results
After iterating on and socializing my proposal with all my stakeholder designers, I contributed these two components to the design system in 2024.
Chapter 3
Final component contributed
$5.7 million in savings from original project that first used the component
Inline alert - 1.9k instances across 24 teams
Page level alert - 691 instances across 17 teams
The new page level alert in action for the project that originally sent me on this journey. The alert allowed me to house the referenced SKU at the top of the page, and therefore remove it from the item list.