vvs mobile app

application redesign

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

introduction

topic and goal

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.

empathize

existing flows and functions

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.

existing flows and functions

competitor analysis and personas

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.

personas

user testing

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.

user testing

define

user needs and scenarios

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.

feature priorisation

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.

feature priorisation

design principles

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.

design principles

ideate

information architecture and navigation design

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.

mini user tests
navigation structure

sketches and ideas

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.

sketches and ideas

prototype and test

design of features and functions

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.

detail design

mini user tests

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

implement

information design and visual design

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.

colour style guide

behaviors and transitions

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.

final results

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

connection search

connection search

station information

station information

connection overview

connection overview

connection detail view

connection detail view

navigator

navigator

key learning

designing remotely can be challenging

As the most important key learning we could note that Miro is a valuable tool in the research phase to record results, especially because of the remote collaboration this semester. At the beginning we had many conceptual discussions and dealt with detailed questions for a long time, so that although the time for the visual design of the scenarios was short, they quickly took shape due to the extensive preparatory work and the identification with the personas. Finally we learned that the remote cooperation worked well in the early concept phase. However, when it came to detailed discussions and the design of the final screens, it became difficult to discuss everything online.

 

project information

course

Application Design I
April – July 2020
Semester 3
HfG Schwäbisch Gmünd

supervision

Rebecca Götte

 

interested in the whole process?

nothing simpler than that

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

contact information

any questions?

let’s get in touch

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.

15 + 2 =