BACKGROUND
The challenge: Imagine an online tool for visualizing the spread of Flu each year across the US. Detail a user experience that addresses the following:
- Severity over time (i.e. this year vs last year)
- Severity per state (i.e. CA vs NY)
- Relation to population density
- Location and number of students in grade schools
I broke the project down into an outcome vision, design story, a provisional persona, and assumptions.
SKETCHING
I did a large number of sketches exploring various means of navigating through the content. I also explored different ways of visualizing the information, including different chart styles as well as lists.
TASK FLOW
I then mapped out how the user would move through the app in order to find the information they wanted.
MOBILE WIREFRAMES
I decided to try a dashboard approach in order to surface actionable information. The advantage is seeing all the information at a glance. In the first version, the charts were overwhelming.
The second version cleans up the information, allowing the user to tap into a filtered list.
The population density tab allows the user to tap into the chart, enabling them to view details about the affected population centers.
The initial version of the States tab allowed the user to compare cases in two states by week, month or over the past year.
However, people making decisions about how to address flu outbreaks might want to see all the states. Here, the worst outbreaks are at the top they can determine with states need the most help. The week filter is first to provide the most up-to-date view.
Users can tap into a stat in order to get details about flu cases on a county level.
By drilling down into a county, the user can then get info about the flu cases on a hospital basis in order to direct medical assistance to them. They can also get contact info for the hospital.
The intial version of the Schools tab provided a spatial view with circles representing schools. The larger the circle, the more cases.
Map clustering might be an issue, however, especially in densly populated states such as New York.
I chose to display info about the Schools as a list, with the most affected schools at the top.
Tapping a school allows the user to see more info about the school, including contact info.
The Time tab allows the user to see flue trends over the course of several time dimensions. Another potential variation of the tab would allow the user to adjust the time scale via a date picker.
WEB WIREFRAMES
Starting with a mobile first approach was helpful.
I was able to take the concise design from the initial mobile wireframes, and expand the content for the Web version.
In this wireframe, the state dropdown would be a combo box. The year pickers could become date pickers to provide a more granular view of the data.
MOBILE PROTOTYPE
You can view the mobile prototype that I created in Flinto here: https://www.flinto.com/p/8b233399
VISUAL DESIGN
I wanted the visual design to be simple, clean and calming. It was also important that the design emphasize how the user can navigate through the app.
