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.
Car importer and dealer for leading car brands
Client: Project manager, Lead developer, Project manager intern, UX researcher
Agency: UX Consultant
The core competencies and methods I used during the project.
User interviews, competitor analysis, ideation, user testing
User flows, Wireframes, click dummy
User Interface design
User stories, Design Kanban method*, Stakeholder update reports, Developer Handover
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:
Customer talks about a prototype/MVP but what you really need is a finished product.
No marketing and business strategy.
Incomplete blue-print of the product; incomplete user flows and missing functionalities for the user to use the app.
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.
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.
4.3 Screen 2.2: Filter
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 (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
Feld Alle Filter auswählen
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.
After creating all the drafts. Possible user interface solutions where created in the form of lo-fidelity wireframes.
Besides the basic screens there was also functionality missing that lead to gaps in the user flow.
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)
- extend booking, ...
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.
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
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.
The end-result where the final UI Designs ready for development.
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.