UX Optimierung
Repark
Optimierung des Buchungsprozesses der Webapp und anschließende Präsentationsvorlage in PowerPoint
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
Kunde
Platform
Branche
Verwendete Tools
Meine Rollen
Probleme
Ziele
Prozess
Wie kann man mit wenigen Mitteln eine Monatsbuchung ausarbeiten?
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.
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.“
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.“
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.
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.
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.
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.
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.
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.
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
Anpassbar für jeden Partner
Neu: Preispakets-Übersicht
Neue anschauliche Grafiken
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 Figjam
Learning
Trotz engem Zeitplan konnte ich Erkenntnisse gewinnen, die nachfolgend beschrieben sind.