case study

how 30 screen designs became 130 screens

introduction

the project brief

Assist the management team with user research and UX/UI Design to create an app based on a similar existing app, to be used internally.

A blueprint was created by the client's UX researcher and set the stage for the scope of the project. 30 screens where described in detail: functionality & screen content.

worked for (client)

Car importer and dealer for leading car brands

branche

Automotive

Team

Client: Project manager, Lead developer, Project manager intern, UX researcher
Agency: UX Consultant

My responsibility

The core competencies and methods I used during the project.

UX Research

User interviews, competitor analysis, ideation, user testing

UX Design

User flows, Wireframes, click dummy

UI Design

User Interface design

project management

User stories, Design Kanban method*, Stakeholder update reports, Developer Handover

the start

I took the blueprint as a base to start a conversation with the team and to create hypotheses which where validated in user interviews.

a few challenges arrised after these conversations:

the challenge

not an mvp

Customer talks about a prototype/MVP but what you really need is a finished product.

no plan

No marketing and business strategy.

incomplete documentation

Incomplete blue-print of the product; incomplete user flows and missing functionalities for the user to use the app.

no product owner

No product owner in the project with all insights to the product. Part of the knowledge was with the PM, part with the UX/UI designer and part with the e-commerce lead.

the process

With a tight deadline and a management team with a lot to loose, the most important thing was to have the first visuals on the table.

Process

snippet from The blueprint (German)

4.3 Screen 2.2: Filter

a) Usersicht
Antippen des Filtersymbols führt zur Anzeige der Filter-Einstellungsmöglichkeiten.
Antippen des Bereichs ausserhalb des Filterbereichs führt zur Schliessung und Anwendung der Filtereinstellungen

b) Felder Bezeichnung

Feld Zurücksetzen
Feld (Schieber on/off) Nicht verfügbare Parkplätze ausblenden
Feld (Schieber on/off) Nicht buchbare Parkplätze ausblenden
+ Feld (checkbox) S M L Parkplatz ausblenden
Feld (Mehrfachauswahl) Barrierefrei; überdacht; videoüberwacht; Frauenparkplätze vorhanden; Dauermiete möglich; zugangsbeschränkt (Schlüssel/Badge); zahlbar über Parking App
+ verlängerbar

Feld Alle Filter auswählen

UX Wireframe

Process

content draft

With the blueprint as reference the first thing I created was an overview of all the screens described in the document and what content should be presented on the screen.

This way it was easier to get a quick overview of all design work needed and find possible missing gaps in the flow.

Process

low-fidelity screens

After creating all the drafts. Possible user interface solutions where created in the form of lo-fidelity wireframes.

Low fidelity UI Design

the missing screens

Besides the basic screens there was also functionality missing that lead to gaps in the user flow.

+100 screens

The blueprint didn't include any of the basic screens like:
Menu, Login, Register, Forget Password, Support, Search, language, delete account, ...

Besides these screens there was also functionality missing that led to gaps in the user flow:
- Parking garage info (opening times, price)
- personal account, credits, payment (add, manage, security)
- navigation
- extend booking, ...

Process

user testing

Outcomes of the user tests where taken into consideration while creating the lo-fidelity screen designs

The tests were conducted in a car while driving and looking for a parking spot.

draft vs. lo-fidelity screen

Based on conducted user interviews it was more likely to have an 'only show XL parking spots'* vs. don't show S,M and/or L parking spots.

*for people with big SUVs or where bad at parking

auswahl S, M or L Parplätze
Nur XL Parkplätze anzeigen an oder aus

business requirements

Also from a business perspective it turned out to be a huge overhead to determine S, M & L spots and to communicate this to the user.

final ui design

The end-result where the final UI Designs ready for development.

Process

User interface design

After determining all the low-fidelity screens based on both a user and business perspective I created a style guide and an UI Library. From there I created the - 135 - screen designs.

UI design map parking app

Let's connect!

Are you interested in working with me?
now or in the future: let us connect!

hello@fleuraugustinus.com