UX und UI Design für Kassensysteme

Die neue User Experience für Tankstellen

Tankstellen

Embedded Interface

Schweiz

Tankstelle in der Schweiz in der Nacht
ORTSchweiz
TEAMCreative Director, UX Researcher, UX Designer, Interaktionsdesigner, UI Designer, Projektleiter, Softwarearchitekt, Produktentwickler

Der Kunde ist eines der top Tankstellennetzwerke in der Schweiz. In den Tankstellen bieten sie nicht nur Kraftstoffe an, sondern die Tankstellen gleichen einem kompletten Supermarkt und verkaufen auch alles für die Autopflege. Ergänzt wird das Einzelhandelsangebot durch eine Cafeteria.

Sie wollten es ihren Kunden einfacher machen, bei ihnen einzukaufen. Das bedeutet die Verbesserung der Usability des Kassensystems und ein neues Display für Kunden. Dazu wollten sie einen neuen Bezahlautomaten entwerfen, eine mobile App und eine Carplay App. Diese Systeme sollten in der Schweiz erprobt werden.

Sie haben unsere UX Design Agentur beauftragt. Der erste Schritt war es User Research in der Schweiz vorzunehmen. Danach haben wir das UX – UI Design für jedes System entworfen. Alle diese Designs wurden mit Benutzern in der Schweiz getestet.


UNSER BEITRAG

User Research

UX Design

User Testing

Design für Prototyp

UI Design - Design System

Informationsarchitektur

Qualitätskontrolle


Tankstelle mit User Experience in der Schweiz

USER RESEARCH IN DER SCHWEIZ

Ein Team unserer UX-UI Design Agentur hat eine Woche in Tankstellen in der Schweiz verbracht. Wir haben Kassierer, Abteilungsleiter, Tankstellenmanager und Azubis befragt. In der User Research Studie haben wir quanititative wie auch qualitative Methoden angewendet.

Das Ziel der User Research Studie war es zu verstehen, wie Kassierer mit dem Kassensystem interagieren, welche Probleme sie haben und was man alles verbessern kann. Ohne diese Informationen würde die User Experience des Kassensystems einfach nur anders werden, aber nicht unbedingt besser.

Tanksäulen in der Schweiz die vom POS bedient werden
Kassiererin in Tankstelle in der Schweiz während User Research
Zwei Menschen im Gespräch während User Research in schweizer Tankstellen

USER RESEARCH IN DER PRAXIS

In der Design Agentur haben wir User Research Experten, die viele Methoden beherrschen. In dieser Studie in der Schweiz haben wir mit User Interviews angefangen, um ein erstes Verständnis für das Thema zu entwickeln.

Danach haben wir Kassierer im Raum Zürich bei dem Umgang mit dem Kassensystem beobachtet. Unsere Designer haben selber als Kassierer gearbeitet, um zu verstehen wie das User Interface verbessert werden kann.

User persona of retail POS application shwoing pain points and task breakdown
Zwei User Personas des Kassensystems als Vorbereitung auf UX Design

DIE UX PROBLEME EINES KASSENSYSTEMS

Kassensysteme werden intensiv benutzt. Wir haben die Daten unserer UX Studie ausgewertet und eine Liste von Szenarien erstellt, bei denen es Probleme gibt.

Die meisten Probleme bei der Benutzung eines Kassensystems entstehen aus kleinen UX/UI Design Details, die zu komplexen Vorgängen führen können. Wenn man dann als Kassierer einen Fehler macht, dauert es lange bis man das Problem beseitigt hat. Diese komplexen Vorgänge lassen sich nicht im theoretischen Design vorhersehen, sondern ergeben sich nur aus den Gesprächen mit den Anwendern.

Diagramm mit User Experience Problemen im schweizer Kassensystem

DER KONTEXT MACHT UX DESIGN SCHWIERIG

Im echten Leben werden Kassensysteme in komplexen Umfeldern benutzt. Die Zeit, die wir in Tankstellen in der Schweiz verbracht haben, hat uns gezeigt was das ganz konkret bedeutet. Wir konnten eine Liste von Usability-Faktoren zusammentragen, die alle die Nutzung des Kassensystem beeinflussten.

Wir haben etliche Faktoren entdeckt, wie zum Beispiel blendendes Licht auf dem Bildschirm, oder das Layout der Tische auf denen sich das Touchdisplay befindet. Viele dieser Faktoren sind spezifisch für die Tankstellen in der Schweiz, andere gelten aber überall.

Das POS System mit markierten Usability-Faktoren

EIN VERGLEICH DER USER FLOWS

Wir haben die User Experience von anderen Kassensystemen verglichen. Diese Art von Analyse betreiben wir oft, da sie uns immer brauchbar Daten liefert. Wir haben nicht nur Systeme aus der Schweiz analysiert, sondern Kassensysteme aus aller Welt.

Diese strukturierte Analyse von möglichen User Experience Design Lösungen hat später im Design viel Zeit gespart. Wir konnten gezielter arbeiten und schneller UX Designs erstellen.

User Flow Diagramm eines Kassensystems für User Experience Audit

USER TESTING FÜR POS UX DESIGNS

Wir haben mehrere Prototypen erstellt, jeder mit einer eigenen Vision für die User Experience. Wir konnten sowohl verschiedene Layouts, als auch User Flows ausprobieren.

In unserer Agentur haben wir Tests organisiert und gemessen wie Kassierer mit jeder Designversion zurechtkommen. Die Ergebnisse haben wir dem Kunden und dem Entwicklerteam gezeigt und zusammen haben wir uns für für das beste UX Design entschieden.

UI Design des Kassensystems mit Touch Display
Tankstelle in der Schweiz in der Nacht wo User Research gemacht wurde

UX DESIGN FÜR BEZAHLAUTOMATEN

Der Bezahlautomat wird benutzt wenn der Shop in der Tankstelle zu voll ist oder wenn man nachts tankt. In der Schweiz ist der Bezahlautomat 24/7 nutzbar. Er kann in vier Sprachen bedient werden. Der Benutzer kann in Schweizer Franken oder Euro bezahlen.

Ein Bezahlautomat für Tankstellen ist einzigartig, weil er auch mit dem Pumpensystem kommunizieren muss. Das User Interface Design muss in den verschiedensten Umgebungen funktionieren. Zum Beispiel beeinflusst die Kälte im Winter die User Experience und die Farben auf dem Display müssen sich in der Nacht anpassen.

User Interface des Bezahlautomaten für Tankstellen mit Schweizer Franken

EINE VEREINFACHTE USER EXPERIENCE

Wir haben mehrere Layouts und Wireflows für die User Experience des Bezahlautomaten erstellt. Insgesamt haben wir für das UX und UI Design sechs Wochen gebraucht. Für jede Seite im Flow haben wir uns bemüht alles Unwichtige wegzulassen. So konnten wir die Komplexität im User Interface reduzieren.

Alles, was wir aus der User Research Phase in der Schweiz gelernt haben, war nützlich, sowohl für das UX Design als auch für das UI Design.

Diagramm für User Experience des Bezahlautomaten für Tankstellen

UNTERSTÜTZUNG FÜR ENTWICKLER

Embedded Systems haben immer einzigartige technische Anforderungen, die von der Hardware stammen und diese müssen im UX-UI Design berücksichtigt werden. Unsere UX-UI Design Agentur hat viel Erfahrung mit solchen Systemen.

Das UI Design des Bezahlautomaten berücksichtigt die Eigenschaften des Bildschirms. Wir haben es für die Entwickler einfach gemacht das Design umzusetzen, in dem wir ihnen ein Design-System zur Verfügung gestellt haben. Sie benutzen das Design-System auch heute noch, um den Bezahlautomaten weiterzuentwickeln.

UI Design für Bezahlautomat mit Auswahl der Bezahlmethode
UI Design fpr Bezahlautomat mit Eingabe des schweizer Kennzeichen
Design systm showing the UI components of the self checkout for petrol retail including buttons, graphics and states

USER EXPERIENCE FÜR CAR PLAY APP

Um das Tanken in der Schweiz noch einfacher zu machen, haben wir eine Car Play App entwickelt. Es ist eine Applikation, die direkt im Auto funktioniert und selbst feststellt, wenn sich der Wagen in einer Tankstelle befindet.

Kunden müssen nur noch abfüllen und wegfahren, die Bezahlung funktioniert über die App. Diese Option ist in der Schweiz vor allem in der Hochsaison praktisch, wenn die Tankstellen voller Touristen sind.

UI Design für Car Play App in Auto Dashboard

ZWEI DESIGN SPRINTS FÜR CAR PLAY

Die Car Play App kann man sowohl über das Touchscreen als auch mit der Stimme bedienen. Das UX Design muss sowohl während der Fahrt als auch in der Tankstelle stimmen.

Das Design der Car Play App unterliegt vieler Designstandards und gesetzlicher Richtlinien. Als UX Design Agentur, die bereits einige Projekte in der Autoindustrie umgesetzt hat, beherrschen wir diese Prozesse und können so Projekte zügig umsetzen.

Car Play App Logo in Liste der Apps
User interface options for selecting fueling details in car play app
Car play UI design while user is fueling at petrol station
UI Design für Beleg in der Car Play App
UI Design für mobile App für Tankstelle in iPhone

MOBILE APP UX DESIGN KONZEPT

Während der User Research Studie in der Schweiz und den UX Designphasen haben wir viel über die Kundenerfahrung in den Tankstellen herausgefunden. Dieses Wissen konnten wir anwenden, um ein mobile App Design in nur zwei Wochen zu erstellen.

Was das UX Design angeht, baut die mobile App auf den anderen Systemen auf und das UI Design ist eine Weiterentwicklung des Design Systems, das wir zuvor erstellt hatten. Das UI Design der App hat aber einen fast schon visionären Charakter.

Fünf UI Designs für mobile App für Tankstelle in der Schweiz

A COMPLETE CUSTOMER EXPRIENCE FOR GAS STATIONS

Alle Designs für die Applikationen, für schweizer Tankstellen bieten den Kunden eine einheitliche Erfahrung. Der Zweck ist es, dem Kunden und den Kassierern das Leben angenehmer zu machen.

Durch User Research in der Schweiz konnte das Team unserer UX Design Agentur ein klares Verständnis dafür entwickeln, welche Details im Design einen Unterschied machen werden.

Das UX Design jeder App, vom Kassensystem und dem Bezahlautomaten, zu der Car Play App und der Mobile App, wurde mit Benutzern getestet.






Design elements

ERGEBNISSE

Komplettes User Experience für Tankstellen

UX/UI Design für fünf Apps in 10 Monaten

Echtzeit Support für die Entwickler