Otto Versand
I worked for the Berlin-based online marketing agency Peak Ace to help create a campaign for the Austrian online shopping magazine Otto Versand. My task entailed designing and developing an interactive map displaying all the vegan ice cream shops in Vienna, using Vienna’s U- and S-Bahn map. It was going to be used in an article on Otto Versand’s website, and therefore needed to be easily embeddable.
Categories
Interactive map, web app, visual design, information design, web development
Hover on the map locations to see more information about each shop!
![Ariel Cotton UI UX Design Information Design Otto Versand Peak Ace Vegan Ice Cream Vienna Icon Design](../../wp-content/img/ux/veganes-eis.png)
I produced a stylized version of Vienna’s U- and S-Bahn map, eliminating the lines that did not have any ice cream stops, for the sake of simplicity and clarity. I then designed icons in the shape of ice cream cones to mark the stops where the shops are. An icon with one scoop of ice cream indicates one ice cream shop, and an icon with several scoops denotes more than one shop at that stop.
![Ariel Cotton UI UX Design Information Design Otto Versand Peak Ace Vegan Ice Cream Vienna Icon Design](../../wp-content/img/ux/veganes-eis-hover.png)
To make it interactive, I implemented a feature that allows users to hover over each icon in order to learn which shops were located at that stop, and information about each shop including opening hours, vegan flavors, address, website and social media.
I referred to Otto Versand’s identity guide for colors and typeface. I borrowed some icons from FontAwesome and designed a custom ice cream icon for the Flavors section.
![Ariel Cotton UI UX Design Information Design Otto Versand Peak Ace Vegan Ice Cream Vienna Icon Design](../../wp-content/img/ux/veganes-eis-hover2.png)
In addition to being used on Otto Versand, the map was also featured in the Austrian online publications News and Lust aufs Leben.
For an external link to the full interactive map by itself, please click here.