1Day Sooner: Using Data and UI/UX to Combat COVID-19

Develop for Good is an intercollegiate technology/design organization that aims to generate social good by providing web app and development services with non-profits. Some of our most notable partners include UNICEF, the World Bank, the Nature Conservancy and the World Health Organization. Check us out at https://www.developforgood.org/!

Introduction

Develop for Good’s team consisted of the following students:

(Left to right) Emily, Alex, and Olivia
(Left to right): Katherine, Lilian, and Sohini

The team helped redesign 1Day Sooner’s website and create interactive visualizations that would help create awareness about COVID-19 risk and vaccine funding. Check out the final projects at https://www.1daysooner.org/ and Olivia’s own write-up at https://oliviajychang.com/1day-sooner!

Founded in April 2020, 1Day Sooner is an organization that advocates on behalf of COVID-19 challenge trial volunteers. Some of the nonprofit’s goals are to rapidly accelerate the deployment of the most effective COVID-19 vaccine possible, support the utilization of challenge studies for other diseases in the future, and develop a global movement fighting to eradicate infectious disease as an enemy of humanity. The organization advocates on behalf of 32,000+ potential COVID-19 challenge trial volunteers. Their open letter to the National Institutes of Health promoting preparation for these trials is signed by 15 Nobel Laureates and 150+ academics and experts, including Al Roth and Stanley Plotkin. They are currently partnering with Oxford’s Jenner Institute in preparation for these trials.

The main goal of the website redesign was to reflect 1Day Sooner activities and positions on the latest COVID-19 vaccine developments, with up-to-date information and visualizations. 1Day Sooner also has a multitude of resources on the pandemic, so the website should have maintained a base for COVID-19 resources from the research team. Some of the projects and requirements we were tasked with implementing were primarily encouraging advocates to join 1Day Sooner or volunteer in human trials for COVID-19, along with a volunteer map, volunteer hub, resource base, press section, and other pages.

Before: Landing Page

After: Redesigned Landing Page

Redesigning the Website

Our team wanted to focus on 1Day Sooner’s target audience first. We studied the existing website to identify its main calls-to-action/principles and met regularly with 1Day Sooner representatives to discuss the purpose of the site.

The target group we identified were volunteers interested in taking COVID-19 trial vaccines. Other users included advocates who wanted to support COVID-19 challenge trials but not volunteer, as well as general visitors interested in learning about 1Day Sooner’s work, human challenge trials, and COVID-19 research.

We aimed to maintain large calls-to-action encouraging volunteers for 1Day Sooner, as well as ensuring all resources were accessible and understandable.

Our overall goals were to:

The main problem we identified with the original website was that the main navigation bar, or menu, was long, cluttered, and intimidating to navigate. There were 12 options in the main bar, with no grouping to improve the user flow. Another negative to this was that the bar did not fit in one line so some options were pushed into a second line, creating clutter in the very top of the website. Additionally, the main home page was long and text-heavy, discouraging users from perusing the full length of resources and information curated by the 1Day Sooner team. Finally, the original website has devolved into a tangle of too many subpages and broken links, harming the user flow and creating confusion on the website.

We spent weeks 1–2 doing design research, defining goals for the re-design and mapping out a user journey flow chart for our redesign with new information groupings. Weeks 3–4 were then spent with each member brainstorming rough mockup themes and ideas in Figma. From there, we were got together to consolidate our ideas into one cohesive theme and spent weeks 5–7 creating a final mock-up. Lastly, weeks 8–10 were spent implementing the mock-up design into Squarespace. Specific steps we took during our 10-week timeline are detailed below:

Our team started off the design process by determining our new information grouping to clean up the main navigation, using the 12 options in the original website’s navigation bar. We created a user flowchart to visualize our changes:

Next, we created rough wireframes in Figma based on our flowchart. We decided to narrow down the versions based on:

Each week, we met up to review and consolidate upon our designs as well as discuss the feedback given by the client. Our low-fidelity wireframes started with the main pages of the flowchart. Some points of discussion were whether or not we wanted to have separate buttons that would redirect to another page and how we wanted to display the long blocks of text without removing any information.

We decided on implementing more visual elements such as infographics, photos, and icons to help break up the long blocks of text. With the “About COVID-19 Trials’’ page, we unanimously agreed that having a secondary navigation bar to organize the information would be better than having to scroll through long blocks of text. Throughout the process, we communicated with 1Day Sooner on a bi-weekly basis, and the client was able to offer their thoughts on certain changes or designs they had in mind.

After individually designing low-fidelity wireframes for each page of the website and receiving constructive feedback from both our peers and 1Day Sooner, we began to section off parts of the website to focus on independently for the higher fidelity mockups. We chose to divide the pages based on each teammate’s strengths and specific sections we thought each person would fit best. We also finalized specific design choices such as the navigation bar, page headings, and color scheme. After going through many iterations and refining our pages, we consolidated the final mockups and received detailed feedback from 1Day Sooner before implementing our designs onto Squarespace.

Some main points of feedback from 1Day Sooner:

After our last round of feedback with 1Day Sooner finalizing and polishing our high-fidelity wireframes, we implemented our designs into Squarespace.

One challenge we immediately realized was that not all of our ideas could be implemented using the Squarespace platform. For example, we were interested in having submenus within pages to better organize information and reduce clutter, but this was not an element provided in Squarespace. To resolve this problem, we learned how to perform code injections using HTML, CSS, and Javascript, which allowed us to fully recognize and implement our designs.

Our final design fully accomplished our goals for the redesign. From our main requirements and goals, we:

On the design side, our project was successful through:

Our PM Alex created an outline for the entire 10-week pipeline, encouraging us to stay on track to complete by the required date. Our client 1Day Sooner was also very helpful in meeting with the PMs biweekly and providing excellent and constructive feedback.

Visualizing the Data

Our team was tasked with visualizing equity contributions from international governments to COVID-19 vaccine producers. These producers included AstraZeneca, Pfizer, and SanoGlaxofine. We also identified the type of program the funding came from, for example, Operation Warp Speed. 1Day Sooner, at the time, had a lot of unstructured data they wanted to streamline and visualize into something visually engaging, interactive, and fun for visitors of the site. They originally had a screencap of an Excel spreadsheet that tracked equity funding.

Full Tableau Dashboard: https://public.tableau.com/profile/emily.xu#!/vizhome/COVID-19VaccineFundingEquity/InteractiveMapDosesFunding2

Before: A Spreadsheet Screencap

After: An Interactive Tool

Our team was also tasked with creating an R Shiny app that would visualize the risk of COVID-19 trial vaccines using Bayesian inference and meta-analyses. These calculations would have comparable activities that measure up similarly in terms of risk, such as giving birth, and riding a motorcycle, amongst others. The goal was to illustrate the risk of COVID-19 trial vaccines with comparable activities, given predetermined metrics entered by the user.

Full R Shiny App:

https://emilyxu.shinyapps.io/Riskmodel_Delta/?_ga=2.246681923.613179095.1609653935-1134737476.1607976332

Github Link:

Before: Static Text

After: An Interactive Tool

Impact

1Day Sooner’s client base consists of about 40,000+ users in 165+ countries. Their website, which has been viewed by over 300,000 unique visitors in its first three months, aims to provide the latest information on COVID-19 and human challenge trials. Once COVID-19 is defeated, the organization aims to help bring awareness to human challenge trials and eradicate infectious diseases for good.

We hope that our efforts to redesign 1Day Sooner’s website will help boost user metrics by creating a more engaging and visually appealing interface to interact with. Furthermore, we hope that the dashboards we helped create will help inform users of their own individual risk of disease/death from COVID-19 trial vaccines and of international funding committed ahead of time to help eradicate the pandemic!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store