The coffee you enjoy each day has taken a long journey to arrive in your cup. By the time they’re planted, picked and purchased, coffee beans go through a series of steps that bring out their utmost potential.


01 Concept

During the second semester, we worked together on an interactive communication system called „Create your own Coffee“, that explained to the user interactively  how his coffee is planted, harvested and processed. We took the coffee bean to run like a read threat through the 10 steps of the process. Our idea was to involve the user in a playful way, while he gets a simple overview about the whole process and interactively learns how his coffee finally ends up in his cup.

02 Design

We tried out a lot of variants and layouts. We ended up choosing an organic hand drawn design, where we connected each part of the process with a line. The user is able to swipe from one screen to another and interact with the bean, which navigates to the next step.

03 Implementation

We illustrated our project in Adobe Illustrator, visualized it in After Effects and coded the interactions in „Coffee Script“ with Framer. Our project was interdisciplinary and we’ve worked together with an Erasmus industrial design student from Costa Rica.



Interactive Communication


Celina Abdalla
Nadja Grün 
Jose Avila


Adobe XD
Adobe Illustrator
Adobe Premiere