Isarwasser
Playful app concept, BA
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.
“Interface design [is] aimed at creating representations of worlds that are like reality, only different.”
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 experienced through them (stories about goals, solutions, frustrations – with suspense and resolutions) we really do create interactions 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 (catalogue)
- Project info
- BA of Arts: Communication Design, University of Applied Sciences Munich, 2017. Tutoring: Matthias Edler-Golla
- Protoyping done with
- Principle