Playful app concept

BA thesis ↓
2017

The Isarwasser mobile app provides information for river surfers in Bavaria. In designing for such a local, tight-knit, but also rapidly growing community, the aim was to strike a light-hearted tone while also support social connections within the community. To further this objective the concept followed a storytelling approach.

A storytelling approach to interface design

The goal was for the interaction to have a flowing feel to it, to transition through the different states in a way reminiscent of narrative structure. I tried to achieve this – among other ways – with a playful and experimental navigation concept, the use of illustrations and by creating some surprising moments.

I found the theoretical basis for these ideas in Brenda Laurel's 2014 edition of her classic "Computers as Theatre". In consequence, I tried to translate many principles she describes in her book into concrete design decisions.

The Isarwasser app does not only show real time data – it is itself a representation of the river surfing environment. The interactor navigates with swipe and scroll gestures.

Figure: The different sections are in a spatial relationship to each other and the "water level".

Sensor data and the interactor’s input directly affect the virtual environment and influence for example the water level or the color of the river.

Figure:
Water changing according to real time conditions.

By repeatedly interviewing users (using sketches, wireframes, paper prototypes and click dummies), I found out that they were really excited by social features that I had initially deemed not as important.

Illustations

For this project, I wanted to use illustration as a functional element of the user interface like any other. The illustrations became part of the overall visual language and provided more flexibility compared to photography.

Recording of prototype:
Intro

Main screens and
navigation

Dialogues and notifications

Animation when activating the status "gone surfing" via pulldown gesture

Conclusion

When we think not only about individual interface elements on a screen, but about the stories that can be experi­enced through them (stories about goals, solutions, frustrations – with suspense and re­solutions) we really do create inter­actions as experiences, like the term UX design implies. This project gave me the opportunity to explore the use of narrative techniques in interface design and to learn through experimentation.

• Featured in
• Interactive exhibition at push.conference 2017
• Graduation exhibition at Faculty of Design, HM, Munich, 2017
• Project info
• BA of Arts: Communication Design, University of Applied Sciences Munich, 2017. Tutoring: Matthias Edler-Golla
• Design and protoyping done with
• Sketch, Principle