Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Aus Quälerei wird Experience. Ein Redesign.

Aus Quälerei wird Experience. Ein Redesign.

Die Robbe kann aufatmen, die Tierquälerei ist vorbei. In diesem Kurs wurde Robben & Wientjes mit einem erfrischenden Redesign, samt neuem Design System und neu konzipiertem User-Flow aus ihrer alten Marotte befreit. Ausgangspunkt waren eine heuristische Evaluation, Konkurrenz-Analyse und viel Liebe für Tier und Mensch. Viel Spaß dabei.

1. Kurzbeschreibung

Robben & Wientjes ist Berlins bekanntester Autoverleih. Hier werden die “Robben” City Hopper, DB Vito, Transporter und Co schon seit mehr als 40 Jahren verliehen. Ein wahrer Ur-Berliner also.

Der Autoverleih ist für seinen Berliner Charme bekannt: 

„Hier wird nich viel jeredet sondern anjepackt. Dit is keen Start-Up aus'n Staaten sondern ‘n stinknormaler Laden aussa Hauptstadt“.

- Die Robbe

2. Der Status Quo

Status Quo 1.pngStatus Quo 1.png

2.1. Status Quo: Was sagt die Konkurrenz?

Sie sind keine Unbekannten: WeShare, Miles, ShareNow und Konsorten sind in den letzten Jahren an jeder Berliner Ecke aus dem Asphaltboden geschossen.

Konkurrenz.pngKonkurrenz.png

Mit gutem Grund, denn der Car-Sharing Markt boomt - und das schon seit ungefähr 10 Jahren. Das haben natürlich auch Robben & Wientjes direktesten Konkurrenten (Stationäre Car-Sharing Anbieter) mitbekommen. In meiner Konkurrenz-Analyse wird es deutlich, dass Enterprise, Hertz und National in ihrem Web-Auftritt intelligent investiert haben.

Aber was sagt unsere Robbe?

2.2. Status Quo: Was sagt die Robbe?

Die Robbe ist alt, verstaubt, wirr und nicht sehr freundlich.

Robben & Wientjes hat leider den Sprung aus dem alten Wasser verpasst. Zur Zeit dümpelt sie mit einer verstaubten und nutzerunfreundlichen Website, die an den meisten Stellen unlogisch und verwirrend wirkt, vor sich hin.

Aber tauchen wir selbst in die Materie.

1. Problempunkt Eine Robbe ohne Ästhetik.

Nicht nur die Konkurrenz hat die Robbe überholt, sie selbst ist überholt. Mensch muss kein Design-Expert*in sein, um zu erkennen, dass die Webseite von Robben & Wientjes veraltet ist. Die visuelle Sprache ist nicht konsistent, Informationen werden unnötig oft sichtbar wiederholt oder im Gegenteil sehr gut versteckt. Der „trashy“ Look ist Geschmacksache, aber nach meiner Sicht nicht nützlich. Mensch kann und sollte gleichzeitig charmant und seriös sein.

Eine Robbe ohne Ästhetik.pngEine Robbe ohne Ästhetik.png
Opoortunity Area 2.pngOpoortunity Area 2.png

Opportunity Area: Eines Neues Fell für die Robbe.

Bitter, aber wahr: Aussehen zählt. Gerade im Dienstleistungssektor. Um auf dem hartumkämpften Markt überleben zu können, braucht Robben & Wientjes einen UX-Design-konformen Neuanstrich. Das ist das Mindestmaß.

Mit einem neuen Design wird der Autovermieter nicht nur seriöser erscheinen, sondern auch seinen Nutzer*innen die Webseite-Nutzung automatisch erleichtern.

2. Problempunkt: Eine Transaktion ohne Transparenz.

Der Transaktionsprozess von Robben & Wientjes ist intransparent. Zu keinem Zeitpunk wissen die Nutzer*innen in welchem Teil der Transaktion sie sich befinden. Selbst ein transparenter Warenkorb fehlt - Mensch kann nicht nachvollziehen wie sich der Preis rechnet. Das kann zu Verunsicherung und hohen Absprungsraten führen.

Transaktion ohne Transparenz.pngTransaktion ohne Transparenz.png
Opoortunity Area 2.pngOpoortunity Area 2.png

Opportunity Area: Usern die Flosse reichen

Für eine Robbe, dessen einziges Ziel es ist Online-Transaktionen zu erreichen, kann dieses Problem ein echter Genickbruch werden. Daher muss dieser Punkt unbedingt geändert und die Nutzer*innen an die Hand genommen werden - mit einem konstanten und transparenten Checkout-Flow.

3. Problempunkt: Ein Userflow ohne Flow.

Der momentane User-Flow von Robben & Wientjes verwirrt. Er lässt die Nutzer*innen von Seite zu Seite springen und erfordert ein gutes Gedächtnis um sich Größe, Preis und Verfügbarkeit zu merken. Das schürt viele Fehler.

Denn anders als Robben, die ein besonders gutes Gedächtnis haben, wird unseres zur Zeit immer schlechter.

→ Analysierter User-Flow in Figma öffnen

Userflow ohne Flow.pngUserflow ohne Flow.png
Userflow ohne Flow 2.pngUserflow ohne Flow 2.png

Opportunity Area: Mit neuem User-Flow schneller ans Ziel robben.

Hier muss Nutzer*innen-zentriert gedacht werden: Wer sind meine Nutzer*innen? Was für Informationen brauchen sie und welche sind relevant, damit sie so einfach und schnell wie möglich zum Ergebnis kommen.

Hier habe ich das größte Potential gesehen, sich entscheidend von der Konkurrenz abzuheben. Wenn die User-Journey des Transaktionsprozesses wirklich einzigartig gestaltet ist, also smart, effizient und bedürfnisorientiert ist, könnte hier ein marktgewinnender USP entstehen.

3. Umsetzung

Startseite.pngStartseite.png

Wie eben oben erwähnt: Bei der Umsetzung lag mein Fokus auf dem neuen User-Flow, dieser sollte mit mehr Flexibilität, Nutzungs-Effizienz und besserer Nutzerkontrolle den Nutzer*innen mehr Freiheit schenken und gleichzeitig ihre Bedürfnisse decken. Mit dem großen Ziel hier ein wirklich innovatives Produkt zu erschaffen.

Aber lasst uns nicht die Robbe von Hinten aufzäumen.

Alles begann mit einem komplett neuem Design System.

3.1. Design System: Color & Fonts.

Beim Farb-System habe ich mich an die aktuelle Akzent Farbe von Robben & Wientjes gehalten, da die Robbe nach dem Neuanstrich natürlich auch noch wiedererkennbar sein soll.

Als Secondary Farbe ich mich im Gegensatz zum ursprünglichem Rot für ein komplementäres Grün entschieden, weil dies nicht als Warn-Farbe stigmatisiert ist und so keine negative Verwirrung stiften kann. Außerdem war das gut verknüpfbar mit unserer Gewohnheit, dass Grün eine „bestätigende“ Farbe ist. Zusätzlich sieht es besser aus. ;-)

Bei den Fonts habe ich mich für die Source Sans Pro entschieden. Sie ist gut lesbar, sieht sauber aus und hat trotzdem noch irgendwas robbenartiges.

→ Color & Fonts Library in Figma öffnen

DS_ Color & Font.pngDS_ Color & Font.png

3.2. Design System: Komponenten Bibliothek

Das Herzstück meiner Arbeit. Da der komplette User-Flow neu konzipiert und dadurch auch wesentlich komplexer wurde, war dieser Teil der Arbeit tierischer Aufwand. Aber das hat die Robbe verdient.

Jede Komponente, jedes Modul und jedes Layout ist von „Scratch“ gebaut - einzig und allein die Icons sind von Material Design.

→ Komponenten Library in Figma öffnen

DS_ Component Library.pngDS_ Component Library.png
DS_ Component Library-1.pngDS_ Component Library-1.png

3.3. Neue UX: Mehr Transparenz

Für mehr User Control und Transparenz habe ich der ganzen Robben Experience einen Checkout-Flow verpasst. Das hilft nicht nur beim Transaktionsprozess Fehler zu vermeiden, wir geben den Nutzer*innen auch mehr Kontrolle und das Gefühl von Sicherheit. Ebenso erlangen wir so mehr Transparenz: Nutzer*innen wissen jetzt immer wo sie sind und wie ihre Preise entstehen.

Mehr Transparenz.pngMehr Transparenz.png
Mehr Transparenz 2.pngMehr Transparenz 2.png

3.4. Neue UX: Unique User-Flow

Nun zum User-Flow. Bei der Erarbeitung des User-Flows war für mich erste Prämisse die Bedürfnisse der Nutzer*innen nicht nur zu decken sondern auch zu übertreffen.

Mit einem normalen Checkout-Flow hätte sich die Robbe nur zwischen den anderen Konkurrenten eingereiht - das darf nicht die Erwartungshaltung sein und wäre nur vergeudeter Arbeitsaufwand.

Unsere Robbe soll glänzen, daher differenzierte ich die Bedürfnisse der Nutzer*innen in drei Kategorien.

1. Kategorie: Ich möchte ein Auto mieten und mir ist der Fahrzeug-Typ ganz wichtig.
2. Kategorie: Ich möchte ein Auto mieten und mir ist Ab- und Rückgabeort ganz wichtig.
3. Kategorie: Ich möchte ein Auto mieten und mir ist die Abholzeit ganz wichtig.

Einmaliger User-Flow..pngEinmaliger User-Flow..png
Verbesserter User-Flow..pngVerbesserter User-Flow..png
Momentanter User-Flow..pngMomentanter User-Flow..png

Je nachdem welches Bedürfnis Priorität der Nutzende hat, passt sich der Checkout-Flow an. Merkt Mensch zwischendurch, dass eine andere Kategorie doch relevanter ist, kann er flexibel wechseln.

Für die CDUler oder Menschen, die Neues gerne meiden, gibt es weiterhin auch die Option des ganz klassischen Reservierungsformulars.

4. Prototyp

5. Fazit

Also zunächst zur Reflektion über meine eigene Arbeit für Robben & Wientjes: es war tierische Arbeit und ein Sprung ins kalte Wasser (letzter Wortwitz, promise). Aber in Ernst, ich hatte mir vorgenommen in diesem Kurs mir Figma so gut es geht anzueignen, mit dem Ziel am Ende behaupten zu können, dass ich nun Figma mehr oder weniger gut beherrsche. Diese Behauptung kann ich jetzt annehmen. Was mich freut. Die Knechterei und die stundenlangen Frust-Momente mit den Dropdowns haben sich gelohnt.

Zum Kurs. Ich möchte dem Alphatier des Kurses Sebastian gar nicht zu viel Honig ums Maul schmieren, aber sein Kurs war für mich bis dato der beste Kurs an der FH. Er war nicht nur extrem klar strukturiert, wir wurden auch endlich gefordert - und nicht nur das: wir haben alle ausführliches Feedback bekommen, wann auch immer wir danach gefragt hatten. Ein äußerst produktiver Kurs.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Sebastian Kaim

Zugehöriger Workspace

System:Relevanz — Mit besseren Interfaces mehr erreichen

Entstehungszeitraum

Wintersemester 2021 / 2022