Menu
Background
In 2020 spring, when the coronavirus began to rage, everything about it was confusing and puzzling. It is difficult for people to understand the complex data on the government’s website, and it’s even harder to customize the dataset and put them together to compare its impact.
This project aims to practice my storytelling skills and use motion graphics and interaction to enhance the story.
3 months Solo Project
Principle, Miro, Sketch, Hype 4
UI & Interaction Designer, Data visualization, Researcher
Outcome
Picked into school’s Fast Track program. Link
Solution
Need:
1. Cross-comparing the important issue.
2. Find the emotional connection between us and the data.
Mainstream Data Site Analysis
Issue:
Usability Test
In version 1.0, I focus on the information itself. This version lists more details, but the information architecture is confusing, and the visual language is not unified.
UI Challenge: tell vivid stories with data visualizations. Establish a unified visual perception.
↓The colors were made according to Data Visualization selection specifications.
Black mode allows people to merge their eyes on the data, but I will consider the ADA if I can re-update in the future; I have color-blind friends who can’t read part of my data through the color grayscale.↓
Compare, Use the density of circles to distinguish data
Contains, the larger number always contains the smaller number before it
Using storytelling and interactive way to explain The COVID-19 data of the moment.
Cross-Referencing Section
COVID-19 is not an isolated event in how it affects our lives. Cross-referencing section use 4 data story to tell a more complex pandemic story.
The story includes the relationship between COVID-19 with other pandemics.
COVID-19 with other causes of death of that year.
COVID-19, with other common causes of death of that year.
And other diseases caused by COVID-19 during the pandemic.
Those are all supported by several articles. I list all the data sets on the reference menu in the top Navigation Bar.
Absence creates confusion and a feeling of not being valued. Missing Data itself represents a message.
Interactable pages. Please use a laptop and try to click with the mouse:) Or you could go down to see the video.
Learnings & Challenges
This project was intense. I need to balance research, tell a compelling story, and platform design. Most of my time was spent using attractive interaction and motion graphics, but at a period, I forgot the operation platform and WACG. While there were many moving parts, I learned how to create and organize motion graphics and use them to tell a compelling story.