VVS Mobil –

application redesign

university project

Introduction –

topic & 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 & are often frustrated because it has a lot of menus, long loading times & no uniform design. We also found it exciting to redesign an app with a large target group.

Design Process –

brief & quick

To fulfill the semester task, we followed a common design process, which is divided into six phases: Empathize, Define, Ideate, Prototype, Test & Implement. The individual aspects of these phases are outlined below.

existing flows & functions

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

competitor analysis & personas

We wanted to get to know the market for the VVS Mobil app by analysing the competition & using a SWOT analysis to determine which aspects are already well implemented & 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 & created 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 & at the same time to better understand the users, their behavior & their demands on such an application.

user needs & scenarios

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

feature prioritisation

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

design principles

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

ideation

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 & purpose of the app without drawing attention to itself. Only then did we start to come up with ideas. Here we used the 6-8-5 method in order to obtain the widest possible range of solution sketches in a short time.

prototyping & testing

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 & thus also the screens of the VVS mobile app are based on each other & 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 & contents for the connection overview. In order to validate our designs, we carried out regular mini-user tests.

information design & 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 & visual design. In our application, for example, colour should be used less for the development of a personality & instead be used purely functionally as a signifier. Various criteria had to be considered when selecting the typography. First & foremost, the font should be functional &, especially with regard to the use of the VVS mobile app in different contexts (on the go/ at home, for young/old, …), it should be both legible & in line with the information design in all font sizes & styles used. We developed style guides for colours, fonts, buttons & icons.

behaviours & transitions

The behaviour of individual UI elements, as well as the transitions, should make clear what is currently happening, where or at which level of detail the user is currently located & 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.

Key Learnings –

designing remotely is difficult

As the most important key learnings 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 & 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 & 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 & the design of the final screens, it became difficult to discuss everything online.

Project information –

study

Interaction Design

Semester 3

University of Design Schwäbisch Gmünd

course

Application Design I

Summer 2020

supervision

Rebecca Schellhorn

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.

2 + 15 =