Inspired by realism, I sought to create a way to visualize the data in a dimensional way.
I thought that it would be an interesting way to display fast food locations by using food to represent the different locations. Having the ability to scroll through the timeline and see the food fall on the maps helps the user to understand how they can interact with the data.
At this stage, I was trying to think of a way for the user to understand what they are looking at visually without really needing to look at the key. My solution was to place the selected restaurant logo onto the map. Another helpful conditional element is how the food changes based on which restaurant is selected. With this solution, the user immediately knows that they are looking at McDonalds data right as they see both 1- the restaurant logo and 2- the corresponding food.
This was the first round of comps. After making a simulated wrapper map, I played around with displaying different obesity data that correlates to the locational data. The information on the right is too distracting and takes away from the map, which should be the main focus. The map is too desaturated, and the data on the right is too huge and bright. The timeline also gets lost at the bottom, and the user might not know that they can interact with it due to proximity issues.
By making the secondary elements smaller, the attention is now drawn to the main focus, the map. The obesity information is now moved to the left to make for a more cohesive layout. The timeline is moved in proximity to the other interactive elements at the top so the user is likely to interact with it.
The last stage was to increase the contrast, and to create “stains” on the maps. Locations represented by sprinkles are also added to simulate how the data would appear.