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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In regular mini user tests, we gathered quick feedback on interface details and micro-interactions.
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.
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.
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.
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.
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.
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.
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.
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.
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.
