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:
- Emily Xu (PM-Data), UC Berkeley ’21
- Alex Hu (PM-Design), NYU Stern ’22
- Olivia Chang, CSU Long Beach ‘21
- Katherine Yang, Dartmouth ’21
- Lilian Wang, Maryland ’20
- Sohini Kar, MIT ‘22
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:
- Renovate the main navigation and create better information grouping
- Clean up the pages, add more visualizations and cut some clutter and text
- Improve the branding with a more limited color palette and typography
- Maintain strong call-to-action buttons for volunteering, advocacy, and donating
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:
- How well it aids the user in their goals
- How well it addresses the problems we identified
- Usability of the site
- Ease of implementation into Squarespace
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:
- Changing relevant titles (“Get Involved” is not as personable as “Volunteer Hub”, which provides more of a community-like connotation)
- Changing certain icons to best represent the use cases and headings
- Formatting the “Fight the Pandemic” section differently to match the “Toolkits” section
- Getting rid of the grey colors in the “What We Do” and “Donate” pages, and maintaining the same style as the “Visions, Goals & Principles” page
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:
- Revamped the main navigation, used dropdowns to better group individual pages and improve the user experience
- Created and added visualizations and interactions for trial vaccine risks and severity of death, funding equity map, and volunteer map
- Removed clutter and text by using images, infographics, and visualizations
- Modernized color palette with a more golden yellow and deeper navy blue
- Maintained strong call-to-action buttons for volunteering, advocacy, and donating by emphasizing them through visual hierarchy and color theory principles
- Combined repetitive pages to clean up user flow, avoided broken links and unpolished websites by fully redesigning every page
On the design side, our project was successful through:
- Constant communication
- Maintaining an iterative UX design process
- Weekly work sessions
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:
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!
