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.

Atoms: The smallest building blocks of the design, such as color palette and text styles.

Figma Screenshot - Color StylesFigma Screenshot - Text Styles

Molecules: Combination of atoms to form a more complex UI element, such as buttons, accordions, form inputs, or individual status displays.

Figma Screenshot - ButtonsFigma Screenshot - Accordions

Organisms: Combination of molecules to form a distinct section of the website, such as the global navigation, the homepage hero or this interface component found on the search page.

Figma Screenshot - Search Page Interface

Page/Template: Combination of organisms to form a specific layout, such as the homepage, search page, search results page, or the provider details page.

Figma Screenshot - Homepage Layout

500ft view: I compiled all components into one library and organized them so they could be easily located and managed.

Figma Screenshot - Component Library

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.

Evolution of the Search Page from August 2021 to September 2022

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.

Usability Testing Results - MobileUsability Testing Results - Desktop


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.