Interactive Data Visualization Prototype

•

The clickable prototype can be found @
https://xd.adobe.com/view/1eadc2ac-c265-43ef-59cd-bd64dbb9cf85-689c/

Or you can just use the following embedded prototype.

I started my workflow by doing some sketches on Illustrator, I normally do it with pen and paper, however, couldn't resist Illustrator this time. I created 2 different concepts. After some thinking, I decided to go with the one on the left because it was the better way to explore a development and cause visualization.

After deciding on the concept I created the main page. I wanted to go with lively colors to make the visualization more interesting. Used blue to represent USA and red to represent USSR and its allies. To represent the both worlds I went with purple, the mix of red and blue. And this color choice created the first challenge. The challenge of choosing a color to represent the Google nGram data. Whatever color I tried, there weren't enough contrast so after some trial and error I went with green.

Then, I created the active filter states as new pages.

It is time for creating the news page. The news' main political actor is presented on the left side with a bigger visual. While the opposite party represented with a smaller photograph. Also, to make their political sides obvious, I used the same color I've used for the countries/blocks. I also used the main actor's customized country flag in the background. USA's flag is fine, however, USSR flag proved to be a challenging one due to the lack of detail on the whole surface of the flag. So I had a little space to show that it is the USSR's flag.

Finally, I created the "President" page. This page challenged me in numerous ways. It wasn't easy to create a hierarchy with the color palette. I also wished that Adobe XD had tools to justify the text, but no luck. However, I'm happy with the final result.