Speeding Up Web Development with Design Systems

The COVID-19 Prevention Network (CoVPN) is part of a nationwide effort to develop effective treatments for COVID-19. Established by the National Institutes of Health (NIH) National Institute of Allergy and Infectious Diseases (NIAID), CoVPN is helping country-wide networks of infectious disease experts and their global partners coordinate large Phase 3 trials for potential vaccines and monoclonal antibodies (mAbs) for prevention of COVID-19.

To recruit the diverse pool of volunteers needed to conduct these trials, NIAID asked a Booz Allen digital transformation team to build a website that would allow CoVPN to support the enrollment of a large volume of volunteer applications for a registry for Phase 3 trials taking place across the country as well as to educate the public on the science of vaccines and mAbs.

Using a design system we created to comply with federal digital policy, we helped NIAID design and launch CoronavirusPreventionNetwork.org in 5 weeks. In its first 2 months of operation, this secure, user-friendly website and its Spanish-language version received more than 6.4 million page views and enabled more than 400,000 people to sign up as volunteers.

When fighting a global pandemic, speed is critical. After establishing CoVPN, NIAID needed to quickly launch the network’s website, a task that presented several key challenges: 

• The site had to comply with the 21st Century Integrated Digital Experience Act, which reinforces federal digital requirements in order to improve the user experience and ease of use for visitors to federal websites, and other federal digital policy.
• The site needed to publish materials in both English and Spanish to help the CoVPN Community Engagement team reach a diverse pool of potential volunteers.
• Due to high interest in COVID-19-related information, the site had to accommodate unusually heavy traffic loads. And as the only entry point into CoVPN’s volunteer registry, it needed to follow stringent security requirements—and ensure the continued trust of the American public. 

Our digital transformation team had previously recognized the need to create a design system for NIAID, knowing this tool would empower the agency to quickly respond in fluid situations, like the outbreak of a deadly disease, while ensuring that any website or application they built complied with federal digital policy.

A design system is a collection of reusable digital components guided by clear standards, documentation, and a common design language. Developers can rapidly assemble these components to build any number of digital applications. Design systems improve the efficiency of front-end design and development and give teams the tools and self-sufficiency to quickly create design mock-ups and gain buy-in from multiple stakeholders. 

Using the design system we created, our team of digital developers, designers, DevOps specialists, usability experts, content strategists, data science professionals, and project managers built a working prototype of the CoVPN website in a matter of weeks.

CoronavirusPreventionNetwork.org soft-launched on July 7—just 5 weeks after our team began work. An official announcement followed the next day. Within 24 hours, 32,000 participants had used the site to enroll in the volunteer registry. Our team, under the direction of NIAID, then provided technical expertise, branding, and linguistic support to develop a Spanish-language version. Espanol.CoronavirusPreventionNetwork.org launched August 4.

Within 2 months, the two sites had received more than 6.4 million page views and enrolled more than 400,000 volunteers. In addition to accepting volunteer applications, the sites provide education on clinical studies, vaccines, and mAbs, as well as answers to frequently asked questions about COVID-19 and ongoing studies.

To help NIAID and CoVPN leaders track progress through real-time data, our team stood-up several analytics dashboards that display key metrics like users, page views, and submitted applications. Our team also continues to handle weekly content updates. They add new pages, guide design and information architecture decisions, and provide weekly metrics reports to NIAID, NIH, and CoVPN leadership.  

Our approach to the design and launch of CoronavirusPreventionNetwork.org and Espanol.CoronavirusPreventionNetwork.org has enabled NIAID to get closer to the stated goal of 1 million enrollees in the CoVPN volunteer registry. By using a design system, we were able to stand up two time-critical websites without sacrificing the quality of work or security or risking costly delays—and with the confidence of knowing the sites comply with regulations and federal best practices.