A theoretical data visualization and website redesign project for the CDC’s COVID Data Tracker for Underlying Medical Conditions as part of my Master of Human-Computer Interaction & Design program at UC Irvine.
A screenshot of the CDC Data Tracker for Underlying Medical Conditions (as it appeared in November, 2020) can be viewed here or visit the live site at covid.cdc.gov/covid-data-tracker/#underlying-med-conditions.
The general project scope was to use design to address the inequality of information in an existing digital information portal within the categories of finance, education, politics, or healthcare. I chose senior citizens as my target user which led to an initial problem statement of “how can I help non-techy senior citizens with pre-existing medical conditions, to easily assess their COVID risk and discover correlating preventative measures so they can begin to safely visit friends and family in person?”
The Double Diamond process was used, leading to the following 4 phases. It’s worth noting here that this class was “Design & Prototype” so most of our time was spent in the Develop and Deliver phases.
Phase 1: Discover
- Secondary research was conducted on the web browsing habits of seniors, how they seek out healthcare information online, their general use of technology, and how to best design for senior users. This research consisted primarily of academic journal articles but also included more consumer-facing web pages too.
- An evaluation of the current site was completed using SUS, heuristic evaluation, and a WCAG 2.1 A/AA Compliance Review.
Phase 2: Define
- Based on data gathered in the Discover phase the problem statement was revised to “how can I help older Americans with age-related impairments easily understand CDC COVID-19 data on pre-existing medical conditions?”
- An empathy map was created to help better understand the user’s thoughts, actions, and emotions.
Initial data visualization and layout sketches
Second round of sketches and notes (made in a moment of inspiration)
Phase 3: Develop
- Based on the understanding of the user generated from the previous Discover and Define phases I was committed to intentional simplicity, and place in order to put the user at ease. I wanted the design to feel welcoming and approachable to seniors. The data should be clear in its meaning and not overwhelming in appearance. They should feel at home in the interface.
- The Develop phase began with the creation of a mood board and design anatomy helping to generally define the look and feel I wanted to promote.
- Sketches were created for both the overall web page design and the data visualizations. Sketching led to multiple ideas that made their way into the final designs:
- Not using the full width of the page for content but instead showing a subtle background image specific to the region the user was searching for, providing them with a sense of place.
- Using circles and rounded corners to give the content a “softer” feel which hopefully makes it feel more approachable and less rigid.
- Defaulting to a very stripped down view of the data and allowing the user to choose if they want to see more detail. If the user was going to be overwhelmed with data (hopefully not) I wanted it to be their choice and to give them an easy out to a more basic view.
- The “where (i.e. what area does the user want to see data from?), who (i.e. who is affected), how (i.e. how are they effected)” progression of the data.
- The use of grouped bar charts to best illustrate the data.
- Wireframes were created based on sketches and notes. These wireframes were then peer-reviewed within our program cohort and revision were made accordingly.
Phase 4: Deliver
- Hi-Fi UI designs for mobile and desktop were created based on the wireframe revisions. These were put through two rounds of peer evaluation using HCI principles.
- Clickable prototypes were generated out of the final designs and these too were peer-reviewed and revised to increase usability.
- A Project Summary Quick Reference Guide was created to give to stakeholders.