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

Introduction

  • 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
(Left to right) Emily, Alex, and Olivia
(Left to right): Katherine, Lilian, and Sohini

Before: Landing Page

After: Redesigned Landing Page

Redesigning the Website

  • 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
  • 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
  • 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
  • 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
  • Constant communication
  • Maintaining an iterative UX design process
  • Weekly work sessions

Visualizing the Data

Before: A Spreadsheet Screencap

After: An Interactive Tool

Before: Static Text

After: An Interactive Tool

Impact

--

--

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
Develop for Good

Develop for Good

Volunteer students and recent graduates creating digital tools for nonprofit organizations.