"Kopf und Zahl"
microsite
Role
Year
Category
Tools
UX-, UI-Design, 2D-Animation
2021
Mobile Web-Design
Adobe XD, After Effects
"Kopf und Zahl" is a handy reference booklet for anyone who wants to have key information about the canton St.Gallen, in Switzerland, at hand and is published once a year. In addition to the key statistical and geographic data of the canton, there are also canton and municipality codes, as well as the names of all mayors and members of parliament at cantonal and federal level.This project is a fictional exercise I created, while I was an Interactive Media Design apprentice.
Briefing
The task at hand, was to digitalize "Kopf und Zahl" into a microsite and create three types of interactive statistics, that would be reusable for any type of information presentation for mobile only.
Typography and colors were bound to the booklet's design and had to be used for the digital one.
Interactive scale:
Initial scale in the booklet:
Interactive pie chart:
Initial chart in the booklet:
Interactive map:
Initial map in the booklet:
Process and challenges
Transforming the analog into something digital and interactive meant I had to carefully select, how the information could be moved and clearly understood.
It also needed to seamlessly melt into the design of the microsite and be interesting to use.
Brainstorming:
Low-Fi Wireframes and Storyboards:
