Creating a new user experience with a concept-based design approach by redesigning an existing mobile application using several use cases.

This project was developed in the course Application Design I with Rebecca Schellhorn as lecturer. The task was to create a new user experience with a concept-based design approach by redesigning an existing mobile application using several use cases.

We decided on the VVS Mobil app due to our personal motivation. We all use the app a lot in our private lives and are often frustrated because it has a lot of menus, long loading times and no uniform design. We also found it exciting to redesignan app with a large target group.

To fulfill the semester task, we followed a common design process, which is divided into six phases: empathize, define, ideate, prototype, test and implement. The individual aspects of these phases are outlined below.

The first step was to understand the existing processes and functions of the app. For this purpose we mapped the existing flows and functions. This enabled us to recognise the complexity, inconsistencies in behavior and design as well as the range of functions.

We wanted to get to know the market for the VVS Mobil app by analysing the competition and using a SWOT analysis to determine which aspects are already well implemented and which are better solved by the competition. In order to get a clear picture of the users, we considered which people use the VVS Mobil app and created personas.

Through qualitative user tests, we wanted to gain concrete insights into how users handle the VVS Mobil App. The goal was to identify weaknesses in the app and at the same time to better understand the users, their behavior and their demands on such an application.

In order to condense the perspective on the problem and find the right design solution, we summarised the needs and goals of the users in user need statements. We also defined an explicit scenario for three of the four personas, which should help us to have a better picture in mind.

By prioritising all functions according to the Kano model, we then gained a clear understanding of which functions and features are relevant from the user’s perspective and how satisfactory the current implementation in the app is.

Developing design principles should help us to create a consistent and coherent design. They should define and communicate the main features of the new application.

In this phase of the process, we created an information architecture using card sorting for the structural design of all content of the new VVS Mobil app. In addition, we developed a navigation structure that would support the structure and purpose of the app without drawing attention to itself.

Only then did we start to come up with ideas. Here we used, among other things, the 6-8-5 method in order to obtain the widest possible range of solution sketches in a short time.

Already in the conception phase we divided the designs according to the individual functions, which at the same time formed our key frames. The main reason for this was that some functions and thus also the screens of the VVS mobile app are based on each other and cannot be designed in isolation. Different questions had to be answered, such as the question of input options for the connection search or the necessary functions and contents for the connection overview.

In order to validate our designs and get quick feedback on interface details, we carried out regular mini-user tests.

In the final phase of the design process, the aim was to fulfill the requirements resulting from the design principles in a corresponding information and visual design. In our application, for example, colour should be used less for the development of a personality and instead be used purely functionally as a signifier. Various criteria had to be considered when selecting the typography. First and foremost, the font should be functional and, especially with regard to the use of the vvs mobile app in different contexts, it should be both legible and in line with the information design in all font sizes and styles used. We developed style guides for colours, fonts, buttons and icons.

The behaviour of individual UI elements, as well as the transitions, should make clear what is currently happening, whereor at which level of detail the user is currently located and how he or she can return. For example, when filtering for a means of transport in the station information, those cards that become irrelevant through the filtering disappear to the left from the screen. The remaining cards move from bottom to top until a complete list is created.

The following key screens show the final design in comparison with the original screens of the application.

connection search

station information

connection overview

connection detail view

navigator

If you have any questions about the project, feel free to drop me a line or take a look at the extensive project documentation.

If you have any questions about the project or want to know more about it, just write me a short message.
I am happy about any suggestions and comments.