VVS Mobil Redesign

Application Design

In the course Application Design, we redesigned the VVS Mobil app of the Stuttgart public transport system. Following an exemplary design process, we created a new user experience with a concept-based design approach and designed several use cases.

Empathize

Existing Flows & Functions

In order to understand the processes and functions of the app, we created a wireflow of the entire system in an initial analysis. This allowed us to identify the complexity, inconsistencies in behaviour and design, as well as the range of functions.

Competitor Analysis

In order to get to know the market of the VVS Mobil app, we carried out a SWOT analysis. This allowed us to identify which aspects are already well implemented and which are better solved by the competition.

Personas

To get a clear picture of our user group, we considered which people use the app. Based on this, we created corresponding personas, which should help us justify design decisions in the further process.

User Research & Testing

In order to better understand the pain points of the existing VVS Mobil app as well as the wishes and requirements of the users, we carried out qualitative remote user tests with subjects corresponding to our personas. 

In the quantitative analysis, we conducted a survey to get a broader picture of the app's functionality, as well as an insight into the mobility behaviour of our target group.

Define

User needs & scenarios

In order to condense the perspective on the problem and find the right design solution, we have summarised the goals and needs of our personas in user needs.
To have an even more concrete picture in mind, we have defined concrete usage scenarios for three of our personas.

Feature Prioritization with the Kano Model

By prioritising all existing functions according to the Kano Model, we gained a clear understanding of which functions are relevant from the user's point of view and how satisfactorily they are implemented in the current app.

Complementary we added new functions which we derived from the previously defined user needs.

Design Principles 

Developing design principles should help us create a consistent and coherent design. They define and communicate the main features of the new application. They also act as a common denominator and a kind of signpost on the basis of which we can discuss issues in the team and ultimately make decisions.

Ideate

Information Architecture

With the help of two open card sortings, we brought the previously defined functions and contents of the app into a structural framework. From this we derived the system's information architecture.

Navigation Design 

We designed the navigation to support the structure and purpose of the app without drawing attention to itself.

The primary functions are arranged in a flat structure and can be accessed with just a few clicks. This is particularly important in stressful situations when on the go. Under each menu item, the user reaches the respective sub-functions via a hierarchical navigation.

 Ideation

For the visual implementation of our main functions, we wanted to sketch as many ideas as possible using the 6-8-5 method. We quickly realised that the functions were too complex and convoluted to be explored within a few minutes.

We instead decided to deal with the functions one by one following the hierarchy defined by the feature prioritisation.

Prototyping & Testing

Every Function in Detail

Already in the conception phase, we decided on a step-by-step approach to the main functions, which at the same time formed the key screens. In doing so, we dealt with conceptual, layout, navigation and interaction aspects on a detailed level.

Mini User Tests

In regular mini user tests, we gathered quick feedback on interface details and micro-interactions.

Closed Card Sorting

For the more complex information design of the connection cards, we collected different user perspectives in several closed card sortings. Based on the results, we developed numerous variants with different visual hierarchies.

Implement

Information Design

Following our design principles, we have created a clear hierarchy by selecting and organising the information. In this hierarchy, the information is presented in a comprehensible, effective and target group-oriented way. 

Visual Design 

We derived the visual design from the design principles and the requirements of our broad target group. It is reduced, clear and focused on function. The personality of the app is defined by its functional character. Colour, form, typography and animations are therefore used first and foremost to encode, structure and convey information.

Final Results

Connection Search

In order to obtain relevant information in stressful situations with as few clicks as possible, it is sufficient to enter the destination to initiate the search. By default, the current location and the current time are set as search parameters.

Station information

In addition, the user can call up all stations in his proximity via the map, including situational information on means of transport and departure times. The filter function allows the user to quickly find the departure they are looking for.

Connection overview

The clear visual hierarchy of the connection cards provides the user with the most relevant information, which helps him to quickly find the suitable connection.

Connection detail view

Following the same information hierarchy as the connection overview the detail view provides the user with an in-depth look on the connection in a both a textual and visual form.

Navigator

The Navigator is an assistant that guides the user step-by-step through the connection and supports them on their journey with situational information. We developed this delight function as a supplement to meet our requirement of a context-sensitive, accompanying and supporting system.

Reflection

Methods aren't always helpful

We tried to use a few methods for the ideation of our main functions but quickly realised that they didn't really suit our specific needs. Instead we did what felt right and took our own ideation approach.

In Short: Methods can be helpful, until they get into your way and prevent you from following your experienced based intuition.

Project

  • Application Design 1
  • Semester 3
  • HfG Schwäbisch Gmünd

Duration

  • April 2020 - July 2020

My Contributions

  • Research & conceptualisation
  • Interaction & visual Design
  • Film shoot & edit

Supervision

  • Rebecca Schellhorn

previous project

next project