UX Optimierung

Repark

Optimierung des Buchungsprozesses der Webapp und anschließende Präsentationsvorlage in PowerPoint

Thumbnail zur Case Study repark mit Mobile Mockups
Thumbnail zur Case Study repark mit Mobile Mockups
Thumbnail zur Case Study repark mit Mobile Mockups

Einleitung

Repark ist ein österreichisches Unternehmen, dass sich auf die Fahnen geschrieben hat, innovative Lösungen fürs Autoparken zu entwickeln. Über eine kostenlose Web-App können Berufsparker, Bewohner und Touristen kurzfristig oder vorreserviert digital und günstig parken. So trägt repark einen Teil zum intelligenten Parkmanagement und Mobilität in österreichischen Städten bei. Bisher gab nur einen sehr umständlichen Prozess für Monatsparker. Der Kunde kam auf uns zu, um diesen Prozess in den bisherigen Prozess zu integrieren. Dazu sollte auch eine PowerPoint Präsentation entwickelt werden, die diese neue Funktionalität bei Parkhausbesitzer vorstellt.

Meine Rollen

Das Projekt habe ich komplett alleine geleitet und auch umgesetzt: Von der Einfindung in den bestehenden Buchungsprozess bis hin zur Wireframe, High Fidelity Umsetzung und PowerPoint Präsentation. Dabei hatte ich engen Kundenkontakt und auch Meetings mit dem technischen Team von repark, um die Änderungen im Detail abzugleichen.

Fakten

Dauer

April 2024 - Mai 2024

April 2024 - Mai 2024

Platform

Web-App, PPT

Web-App, PPT

Branche

Mobilität

Mobilität

Verwendete Tools

Figma, Adobe Illustrator, PowerPoint

Figma, Adobe Illustrator, PowerPoint

Meine Rollen

UX/UI Designerin, Kundenbetreuerin, Kommunikationsdesignerin

UX/UI Designerin, Kundenbetreuerin, Kommunikationsdesignerin

Probleme

Komplizierter & langwieriger Prozess für neue Monatsmieter

Bisher müssen Interessierte sich telefonisch erkundigen, um einen Monatsparkplatz zu buchen. Das löste eine Kette von vielen Einzelschritten aus, was eine große Hürde für alle Beteiligten darstellte.

Komplizierter & langwieriger Prozess für neue Monatsmieter

Bisher müssen Interessierte sich telefonisch erkundigen, um einen Monatsparkplatz zu buchen. Das löste eine Kette von vielen Einzelschritten aus, was eine große Hürde für alle Beteiligten darstellte.

Komplizierter & langwieriger Prozess für neue Monatsmieter

Bisher müssen Interessierte sich telefonisch erkundigen, um einen Monatsparkplatz zu buchen. Das löste eine Kette von vielen Einzelschritten aus, was eine große Hürde für alle Beteiligten darstellte.

Kautionszwang & Vertrag Hürde für neue Mieter

Die Abwicklung fand außerhalb der Webapp statt und versachte viele undurchsichtige Schritte, die potenzielle Monatsmieter wenig Freiheit und Transparenz bietet

Kautionszwang & Vertrag Hürde für neue Mieter

Die Abwicklung fand außerhalb der Webapp statt und versachte viele undurchsichtige Schritte, die potenzielle Monatsmieter wenig Freiheit und Transparenz bietet

Kautionszwang & Vertrag Hürde für neue Mieter

Die Abwicklung fand außerhalb der Webapp statt und versachte viele undurchsichtige Schritte, die potenzielle Monatsmieter wenig Freiheit und Transparenz bietet

Hohe Arbeitsaufwand für die Verwaltung

Zwar bekam der Monatsparkmieter kaum etwas davon mit, aber trotzdem war der manuelle Arbeitsaufwand auf Seiten der Verwaltung enorm. Pro Parkplatz entstanden 3 - 5 interne Arbeitsstunden, hauptsächlich repetitiv und papierbasiert. Das war nicht nur ineffizient, sondern barg auch ein gewisses Fehlerpotenzial.

Hohe Arbeitsaufwand für die Verwaltung

Zwar bekam der Monatsparkmieter kaum etwas davon mit, aber trotzdem war der manuelle Arbeitsaufwand auf Seiten der Verwaltung enorm. Pro Parkplatz entstanden 3 - 5 interne Arbeitsstunden, hauptsächlich repetitiv und papierbasiert. Das war nicht nur ineffizient, sondern barg auch ein gewisses Fehlerpotenzial.

Hohe Arbeitsaufwand für die Verwaltung

Zwar bekam der Monatsparkmieter kaum etwas davon mit, aber trotzdem war der manuelle Arbeitsaufwand auf Seiten der Verwaltung enorm. Pro Parkplatz entstanden 3 - 5 interne Arbeitsstunden, hauptsächlich repetitiv und papierbasiert. Das war nicht nur ineffizient, sondern barg auch ein gewisses Fehlerpotenzial.

Ziele

Angenehme & eigenständige Anmietungsmöglichkeit  

Dem Interessenten soll es ermöglicht werden eigenständig einen passenden Parkplatz und das gewünschte Preispaket auszuwählen. Dabei sollen unnötige Schritte eingestampft werden.

Angenehme & eigenständige Anmietungsmöglichkeit  

Dem Interessenten soll es ermöglicht werden eigenständig einen passenden Parkplatz und das gewünschte Preispaket auszuwählen. Dabei sollen unnötige Schritte eingestampft werden.

Angenehme & eigenständige Anmietungsmöglichkeit  

Dem Interessenten soll es ermöglicht werden eigenständig einen passenden Parkplatz und das gewünschte Preispaket auszuwählen. Dabei sollen unnötige Schritte eingestampft werden.

Digitales Vertragswesen und Abrechnung

Der lästige Papierkram für das Vertragswesen und die Abrechnungen soll komplett digitalisiert werden. Manuelle Vorgänge wie das Erstellen von Verträgen oder Besichtigungsterminen werden automatisiert.

Digitales Vertragswesen und Abrechnung

Der lästige Papierkram für das Vertragswesen und die Abrechnungen soll komplett digitalisiert werden. Manuelle Vorgänge wie das Erstellen von Verträgen oder Besichtigungsterminen werden automatisiert.

Digitales Vertragswesen und Abrechnung

Der lästige Papierkram für das Vertragswesen und die Abrechnungen soll komplett digitalisiert werden. Manuelle Vorgänge wie das Erstellen von Verträgen oder Besichtigungsterminen werden automatisiert.

Interne Ressourcen  durch Automatisierung einsparen

Durch das Digitalisieren und Bündeln menschlicher Aufgaben soll Arbeitspersonal entlastet und der Aufwand klein gehalten werden. Mögliche Fehlerquellen werden dadurch minimiert.

Interne Ressourcen  durch Automatisierung einsparen

Durch das Digitalisieren und Bündeln menschlicher Aufgaben soll Arbeitspersonal entlastet und der Aufwand klein gehalten werden. Mögliche Fehlerquellen werden dadurch minimiert.

Interne Ressourcen  durch Automatisierung einsparen

Durch das Digitalisieren und Bündeln menschlicher Aufgaben soll Arbeitspersonal entlastet und der Aufwand klein gehalten werden. Mögliche Fehlerquellen werden dadurch minimiert.

Eigenständige Besichtungsmöglichkeit

Zuvor gab es kaum die Möglichkeit einen Besichtigungstermin zu vereinbaren. Nun kann es der Endkunde selbst festlegen.

Eigenständige Besichtungsmöglichkeit

Zuvor gab es kaum die Möglichkeit einen Besichtigungstermin zu vereinbaren. Nun kann es der Endkunde selbst festlegen.

Eigenständige Besichtungsmöglichkeit

Zuvor gab es kaum die Möglichkeit einen Besichtigungstermin zu vereinbaren. Nun kann es der Endkunde selbst festlegen.

Empathize

User Spectrum

Alle Nutzergruppen vereint eine gemeinsame Motivation: Sie brauchen eine bequeme, effiziente und kostengünstige Lösung für das Parken über einen längeren Zeitraum.

Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo

Der Stadtpendler

"Ich brauche einen festen Parkplatz, der immer verfügbar ist, damit ich morgens nicht länger nach einem freien Platz suchen muss, wenn ich zur Arbeit muss.“

Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo

Der Technik-Skeptiker

„Ich möchte eine einfache, unkomplizierte Lösung ohne unnötige Apps oder komplizierte Features. Die Anwendung muss klar strukturiert und leicht zu bedienen sein, damit ich nicht frustriert werde.“

Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo

Der Budgetbewusste

„Ich parke oft, aber ich möchte sicherstellen, dass ich nicht mehr bezahle, als nötig. Die Möglichkeit, den besten Preis zu finden und von monatlichen Rabatten oder fixen Tarifen zu profitieren, ist mir sehr wichtig.“

Define

User Flow

Der Zeitraum bis zur Deadline war knapp bemessen. Daher bin ich taktisch vorgegangen und habe mit User Flows begonnen, die die Grundlage für die Wireframes bildeten. Im aktuellen Prozess wurden die zuvor genannten Problempunkte klar sichtbar: Eine digitale Automatisierung zur Entlastung der Verwaltung war dringend erforderlich. Gleichzeitig war es wichtig, einen transparenten und kurzen Buchungsprozess für Interessenten sicherzustellen.

User Flow des aktuellen Prozesses der Buchung eines Parkplatzes über repark
User Flow des aktuellen Prozesses der Buchung eines Parkplatzes über repark
User Flow des aktuellen Prozesses der Buchung eines Parkplatzes über repark

Aktueller Prozess Buchung eines Parkplatzes über repark als User Flow

Aktueller Prozess Buchung eines Parkplatzes über repark als User Flow (größere Abbildung)

User Flow des Zielprozesses bei der Buchung über repark
User Flow des Zielprozesses bei der Buchung über repark
User Flow des Zielprozesses bei der Buchung über repark

Gewollter Zielprozess als User Flow abgebildet

Gewollter Zielprozess als User Flow abgebildet (größere Abbildung)

Define

Designvorgaben

Da ich bereits in der Vergangenheit mit dem Kunden repark zusammengearbeitet hatte und verschiedene Print-Medien umgesetzt hatte (u. a. Orientierungssystem eines Parkhauses), war mir das Corporate Identity und die zu beachtende Corporate Manual bekannt. So war es für mich ein leichtes mich schnell wieder einzuarbeiten und effizient an Lösungsvorschlägen zu arbeiten. Das Endergebnis wirkt insgesamt stimmig.

Screenshots Designinspirationen für Desktop und Mobile
Screenshots Designinspirationen für Desktop und Mobile
Screenshots Designinspirationen für Desktop und Mobile

Hausfarben und -Schrift von repark

Ideate

Wireframes & Iterationen

Der Fokus lag darauf, den Buchungsprozess sinnvoll und benutzerfreundlich zu gestalten. Deshalb habe ich erste Ideen in Form digitaler Wireframes umgesetzt. Die verwendeten Komponenten und Elemente konnte ich anschließend schnell in das bestehende Design von repark integrieren, um die knappe Deadline einzuhalten.

Sinnvolle Reihenfolge

An welchem Punkt soll das Login und die Preispakete angezeigt werden, damit der Nutzer ein transparentes Erlebnis durchläuft? Letztendlich entscheiden wir uns für das Ende des Buchungsprozesses, um den Login und die Bezahlmethode gebündelt zu lassen. Außerdem bekommt der Nutzer bereits beim Auswählen des Parkplatzes eine grobe Preisspanne angezeigt.

Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens vorher
Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens vorher
Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens vorher
Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens nachher
Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens nachher
Repark Wireframe-Iteration für eine sinnvolle Reihenfolge der Screens nachher

Login und Verifizierung

Für das Buchen eines Monatsparkplatzes ist eine Registrierung bzw. Login nötig. Das ist nicht nur für repark wichtig, sondern dient dem Nutzer selbst auch sicher zu gehen, dass unter seinem Account die Monatsmiete abgezogen wird. Da das Vermieten hauptsächlich über das Smartphone erfolgt, ist eine Verifizierung via SMS während des Logins naheliegend.

Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher

Daten des Fahrzeug-Halters

Eine weitere Ergänzung ist das Eingeben der Fahrzeug-Halter Daten, wenn diese nicht bereits im Profil hinterlegt sind. Hier kann der Nutzer also noch letzte Anpassungen vornehmen.

Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher

Optionalen Besichtigungstermin ausmachen

Der sehr kompakte Buchungsprozess eines Besichtigungstermins verzichtet auf eine Prozess-Bar. Eine Anmeldung ist aber auch hierfür notwendig. Nach dem Besichtigungstermin kann der Nutzer eine Monatsmiete buchen.

Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung vorher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung nachher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung nachher
Repark Wireframe-Iteration für die optionale Besichtigungstermin-Vereinbarung nachher

Test

User-Testing

Situation

Auf Grund der gegebenen knappen Deadline mussten wir auf das User Testing verzichten. Damit sind wir das Risiko eingegangen, die Bedürfnisse der Web-App-Nutzer nicht komplett abzudecken oder zu treffen.


Eine grobe Orientierung bot mir der bisherige Buchungsprozess von Kurzzeit-Parkplätzen und der enge Austausch mit dem Kunden und dem Entwickler-Team.

Vorteile

Ein Usertesting hätte zeigen können, ob der neu gestaltete Buchungsprozess tatsächlich effizienter ist und die gewünschten Verbesserungen erzielt.


Obwohl ein Test mit Endnutzern nicht möglich war, konnten wir stattdessen das direkte Feedback der Verwaltung nutzen, die vom Kunden selbst gestellt wurde.

Final

Finales Design

Interaktiver Prototyp

Wir haben einen interaktiven High-Fidelity-Prototypen (Clickdummy) erstellt, um die Benutzerführung anschaulich zu machen. Dabei haben wir bewusst einfache Übergänge integriert, die zum minimalistischen und klaren Design der Screens passen. Der Prototyp dient außerdem als praktische Guideline für das Entwicklungsteam.

Neue Designs

Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo
Repark Mockup des Willkommen-Startscreens mit austauschbaren Partner-Logo

Anpassbar für jeden Partner

Repark bietet Parkplatzanbietern eine gewisse visuelle Freiheit auf sich aufmerksam zu machen. So kann das Branding und zusätzliche Informationen im ersten Screen integriert werden, um sich von der Konkurrenz abzuheben und bei den Monatsparkern in Erinnerung zu bleiben.

Repark bietet Parkplatzanbietern eine gewisse visuelle Freiheit auf sich aufmerksam zu machen. So kann das Branding und zusätzliche Informationen im ersten Screen integriert werden, um sich von der Konkurrenz abzuheben und bei den Monatsparkern in Erinnerung zu bleiben.

Repark Mockup eines Garagen-Datail-Screens
Repark Mockup eines Garagen-Datail-Screens
Repark Mockup eines Garagen-Datail-Screens

Neu: Preispakets-Übersicht

Volle Transparenz bei den Preispaketen: Keine versteckten Kosten oder Kautionskosten. Monatsparker werden direkt aufgeklärt, welches Preispaket sich für sie lohnt.

Volle Transparenz bei den Preispaketen: Keine versteckten Kosten oder Kautionskosten. Monatsparker werden direkt aufgeklärt, welches Preispaket sich für sie lohnt.

Repark Mockup eines Buchungsbestätigungs-Screens mit neuer Grafik
Repark Mockup eines Buchungsbestätigungs-Screens mit neuer Grafik
Repark Mockup eines Buchungsbestätigungs-Screens mit neuer Grafik

Neue anschauliche Grafiken

Neue ansprechende Grafiken im Stil der Corporate Identity von repark lockern das Design auf und werden integriert, um bestimmte Start- oder Zielpunkte innerhalb eines Prozesses hervorzuheben.

Neue ansprechende Grafiken im Stil der Corporate Identity von repark lockern das Design auf und werden integriert, um bestimmte Start- oder Zielpunkte innerhalb eines Prozesses hervorzuheben.

Addition

PowerPoint Präsentation

Um die neue Monatspark-Buchungsfunktion zu bewerden, habe ich außerdem das Design der Präsentations-Folien erstellt. In der Layout-Phase verwendete ich Figma, um Ideen schneller umsetzen und dem Kunden präsentieren zu können. Anschließend wurden die Folien als Vorlagen in PowerPoint exportiert und editierbar gemacht.

Screenshot aus dem Programm Figjam, in dem die Folien für das Kickoffmeeting mit dem Kunden
Screenshot aus dem Programm Figjam, in dem die Folien für das Kickoffmeeting mit dem Kunden
Screenshot aus dem Programm Figjam, in dem die Folien für das Kickoffmeeting mit dem Kunden

Screenshot aus Figjam

Learning

Trotz engem Zeitplan konnte ich Erkenntnisse gewinnen, die nachfolgend beschrieben sind.

Wertvolle User Flows

Eine zentrale Erkenntnis aus der Arbeit mit User Flows war, wie essenziell sie für die Strukturierung komplexer Prozesse sind. Sie helfen nicht nur dabei, potenzielle Schwachstellen frühzeitig zu erkennen, sondern machen das Problem auch greifbarer und verständlicher. Dadurch lassen sich zielgerichtetere Lösungen entwickeln und besser kommunizieren.

Wertvolle User Flows

Eine zentrale Erkenntnis aus der Arbeit mit User Flows war, wie essenziell sie für die Strukturierung komplexer Prozesse sind. Sie helfen nicht nur dabei, potenzielle Schwachstellen frühzeitig zu erkennen, sondern machen das Problem auch greifbarer und verständlicher. Dadurch lassen sich zielgerichtetere Lösungen entwickeln und besser kommunizieren.

Wertvolle User Flows

Eine zentrale Erkenntnis aus der Arbeit mit User Flows war, wie essenziell sie für die Strukturierung komplexer Prozesse sind. Sie helfen nicht nur dabei, potenzielle Schwachstellen frühzeitig zu erkennen, sondern machen das Problem auch greifbarer und verständlicher. Dadurch lassen sich zielgerichtetere Lösungen entwickeln und besser kommunizieren.

User Testings geplant

Zusätzliche User-Testings hätten sicherlich wertvolle Einblicke geliefert, waren jedoch aufgrund der knappen Zeit bis zur Deadline nicht umsetzbar. Stattdessen wird der Fokus darauf liegen, nachträgliche Testings durchzuführen, um das System weiter zu optimieren und mögliche Schwachstellen gezielt zu beheben.

User Testings geplant

Zusätzliche User-Testings hätten sicherlich wertvolle Einblicke geliefert, waren jedoch aufgrund der knappen Zeit bis zur Deadline nicht umsetzbar. Stattdessen wird der Fokus darauf liegen, nachträgliche Testings durchzuführen, um das System weiter zu optimieren und mögliche Schwachstellen gezielt zu beheben.

User Testings geplant

Zusätzliche User-Testings hätten sicherlich wertvolle Einblicke geliefert, waren jedoch aufgrund der knappen Zeit bis zur Deadline nicht umsetzbar. Stattdessen wird der Fokus darauf liegen, nachträgliche Testings durchzuführen, um das System weiter zu optimieren und mögliche Schwachstellen gezielt zu beheben.

Mehr Case Studies

UX/UI Redesign

Passwortgeschützt

AssistenzUp

UX/UI Redesign

Passwortgeschützt

AssistenzUp

UX/UI Redesign

Passwortgeschützt

AssistenzUp

Branding, UI Design, Print

Visuelle Arbeiten

Branding, UI Design, Print

Visuelle Arbeiten

Branding, UI Design, Print

Visuelle Arbeiten

UX/UI Redesign

liked-you!

coming soon

UX/UI Redesign

liked-you!

coming soon

UX/UI Redesign

liked-you!

coming soon