Otto Versand

Otto Versand

Date: summer 2016
Categories: product design, interaction design, visual design, information design, front-end web development
Tools: Adobe CS, HTML, SCSS/Sass, JavaScript/jQuery

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.

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

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

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

To see the map embedded in the article on Otto Versand’s website, please visit this link.

For an external link to the full interactive map by itself, please click here.



Top