Isarwasser

Playful app concept

App shown on an iphone in exhibition

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.

App shown on an iphone in exhibition

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.

App screenshots overview
App screenshots

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 de­sign [is] aimed at creating repre­sen­tations of worlds that are like reality, only di­fferent.”

Brenda Laurel: Computers as Theatre, 2014

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.

Graphic showing the 'water level' concept and 'location' of screens
Graphic showing the 'water level' concept and 'location' of screens
Graphic showing the 'water level' concept and 'location' of screens

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.

Graphic showing the change in 'water' colour

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.

The app icon
App icon
2:08 min use case video

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.

Graduation exhibition labelling
Exhibition labelling
Manuscript, theoretical part of BA thesis
BA thesis manuscript
Surfer on a river wave
River wave