Overview
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 Vaccines.gov, 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.
My Role
As the Principal Designer on Vaccines.gov 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.
Solution
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.
Molecules: Combination of atoms to form a more complex UI element, such as buttons, accordions, form inputs, or individual status displays.
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.
Page/Template: Combination of organisms to form a specific layout, such as the homepage, search page, search results page, or the provider details page.
500ft view: I compiled all components into one library and organized them so they could be easily located and managed.
The Results
The implementation of the atomic design system in Figma had a transformative impact on the design process for Vaccines.gov. 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.
Conclusion
The adoption of component-driven development and the creation of an atomic design system played a crucial role in the success of Vaccines.gov. 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.
