A Component-Driven Approach to Streamlining Development and Rapidly Improving User Experience


In response to the COVID-19 pandemic, the White House COVID-19 Response Team, U.S. Digital Service (USDS), the CDC, Castlight Health, and Boston Children's Hospital (BCH) came together to create, a vaccine finder tool to offer information on the availability of COVID-19 and flu vaccines in local areas, and to allow users to connect directly with providers who had vaccines in stock.

Sketch: Journey map of in-tour purchase flow

My Role

As the Principal Designer on for Boston Children's Hospital's Innovation and Digital Health Accelerator team (IDHA), it was my responsibility to lead the design handoff from USDS to BCH and ensure that all future design decisions aligned with the project's objectives and goals.

Problem Statement

The team encountered several design inconsistencies throughout the website, making it challenging to quickly implement design updates or respond to new directives from the White House or CDC. With the ongoing evolution of COVID-19 and the introduction of new vaccines, it was crucial to ensure that the website was regularly updated with accurate information as quickly as possible.


To address the design challenges and improve the efficiency of the development process, the project manager, lead engineer, and I agreed to adopt a component-driven approach to our production process. I then created a design system in Figma using atomic design methodology. This approach organized the website's content into modular and reusable components, simplifying the color palette and standardizing elements like type, spacing, and link/button treatments. I also developed a semantic naming convention for design elements and components based on the principles of modular design.

The Results

The implementation of the atomic design system in Figma had a transformative impact on the design process for It ensured consistency in branding and structure, making updates and maintenance easy to implement.

The improved design system facilitated rapid testing and design iteration, leading to improved user experiences. Specifically, in September of 2022, when we were tasked with scaling the number of vaccine options in the search experience from 10 to 15, we were able to quickly explore multiple design solutions, build high-fidelity prototypes, and run over 120 usability tests in less than 2 weeks. This rapid testing and iteration process enabled us to not only effectively add more complexity to the search experience but also increase users' accuracy on the search page by 25% while simultaneously cutting their time on task by 10 to 25 seconds.


The adoption of component-driven development and the creation of an atomic design system played a crucial role in the success of The design system ensured consistency in branding and structure and made updates and maintenance quicker and easier. The semantic naming convention for design elements and components helped minimize confusion and enhance collaboration between designers and developers. The improved design system facilitated rapid usability testing and design iteration, resulting in consistent improvements in task completion speed and accuracy for users.

Final Page Designs


Want to get in touch? Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.