UX/UI ontwerp voor ingebedde retail software applicaties

De volledig geïntegreerde tankstationervaring

Kleinhandel in brandstof

Ingebedde toepassingen

Zwitserland

Tankstation in Zurich Zwitserland waar gebruikersonderzoek werd gedaan
LOCATIEZwitserland
TEAMCreatief directeur, UX-onderzoeker, UX-ontwerper, interactieontwerper, UI-ontwerper, projectmanager, delivery manager, software-architect, producteigenaar

Als een van de toonaangevende netwerken van tankstations in Zwitserland, bieden zij een wereld van detailhandel, waaronder supermarkten, cafetaria's en autoservices.

De visie is om de klantervaring te verbeteren door frictie te verminderen. Dit betekent een revisie van de bruikbaarheid van de point of sale software die kassières gebruiken, en de introductie van een klantenscherm bij de kassa. Ze wilden verder gaan dan de klassieke point of sale (POS) ervaring en wilden ook een betaalautomaat buiten de winkel, een mobiele applicatie en een carplay app ontwerpen.

Zij namen ons UX/UI ontwerpbureau in de arm om dit strategische ontwerpproject te ondersteunen. We begonnen met een grondig gebruikersonderzoek ter plaatse in Zwitserland. Vervolgens stelden we een nieuwe end-to-end customer experience map op en ontwierpen we één voor één de UX en UI voor elke POS-applicatie.

ONZE BIJDRAGEN

Gebruikersonderzoek

UX-ontwerp

Testen van gebruikers

Prototyping

UI ontwerp - ontwerp systeem

Informatie-architectuur

Kwaliteitsborging

Gebruikersonderzoek werd uitgevoerd bij het tankstation in Kloten bij Zurich

GEBRUIKERSONDERZOEK TER PLAATSE IN ZWITSERLAND

Het onderzoeksteam van ons UX-bureau bracht een week door in Zwitserland om gebruikersonderzoek te doen in benzinestations rond Zürich. We ontmoetten ervaren ploegchefs, stationsmanagers en mensen in opleiding.

We pasten een mix van gebruikersonderzoeksmethoden toe, zowel kwantitatief als kwalitatief, om een volledig beeld te krijgen van wat er moet veranderen. Het UX-onderzoek werd uitgevoerd in het Duits, een van de taalvaardigheden van het bureau.

Tankstation waar gebruikersonderzoek werd uitgevoerd voor POS design project
POS gebruiker bij kassa in benzinestation wordt gefilmd voor gebruikersonderzoek observatiestudie
Interviewer zittend aan een tafel in een benzinestation in Zurich, in gesprek met een gebruiker van de POS retail applicatie

EEN KASSIER WORDEN OM EEN KASSIER TE KENNEN

Het doel van het gebruikersonderzoek was om de complexiteit en pijnpunten te ontdekken die kassiers ervaren bij het gebruik van de POS applicatie.

Gebruikersinterviews gaven ons een startpunt, maar systematische observatie van hoe zij de POS applicatie gebruiken om klanten te bedienen gaf ons een kwantitatief inzicht in bruikbaarheid knelpunten. Om zich verder te verdiepen, werkten onze ontwerpers samen met kassiers in een participatieve onderzoeksopzet. Tijdens een lunch met hen leerden we de uitdagingen kennen waarmee ze worden geconfronteerd naast de POS bruikbaarheid.

User persona of retail POS application shwoing pain points and task breakdown
Presentatie van een gebruikerspersoonlijkheid van een kassier die regelmatig software voor verkooppunten gebruikt

HOE UX PIJNPUNTEN ONTSTAAN IN RETAIL POS APPS

POS-applicaties hebben te maken met honderden soorten transacties. Door de UX onderzoeksgegevens in kaart te brengen, hebben we een inventarisatie gemaakt van scenario's die problemen opleveren.

Er zijn patronen in hoe UX pijnpunten ontstaan. Meestal zijn er kleine UX/UI complexiteiten die die in het dagelijks leven groeien en die een transactie die te lang duurt in gevaar brengen. Deze UX ontwerpproblemen kunnen alleen worden ontdekt in in de praktijk, ze kunnen niet worden geanticipeerd in het ontwerpproces.

Gebruikerservaringsdiagram met pijnpunten bij het gebruik van verkooppunt-software

UX-UITDAGINGEN WORDEN VERSTERKT DOOR DE CONTEXT

In de praktijk opereren POS-toepassingen in een complexe context. Door ter plekke gebruikersonderzoek te doen en direct te participeren, brachten we de contextuele factoren in kaart die de bruikbaarheid van het POS systeem verstoren.

We ontdekten tientallen contextuele UX-factoren, zoals schittering op het POS-scherm door verlichting van bovenaf of hoe de lay-out van de balie het moeilijk maakt om sommige delen van het POS touchscreen aan te raken.

POS-systeem in benzinestation met hoogtepunten die factoren tonen die de gebruikerservaring beïnvloeden

VERGELIJKENDE ANALYSE VAN POS GEBRUIKERSSTROMEN

Wij hebben de gebruikerservaring van andere POS-systemen gebenchmarkt. In deze gedetailleerde analyse vergeleken we oplossingen in het licht van de scenario's die we tijdens het gebruikersonderzoek aan het licht hadden gebracht.

Deze systematische review van concurrerende gebruikerservaringen onthulde een groot aantal dingen die we wel en niet moesten doen die van toepassing zijn op het project. Het hielp ons de daaropvolgende UX ontwerpbenadering te verfijnen.

VERGELIJKENDE ANALYSE VAN POS GEBRUIKERSSTROMEN

PROTOTYPES MAKEN EN TESTEN VAN OPLOSSINGEN VOOR POS-DESIGN

We creëerden prototypes voor verschillende benaderingen van de gebruikerservaring. Elk was een combinatie van interface lay-outs gecombineerd met een behandeling van de gebruikersstromen.

Een systematische vergelijking van de voor- en nadelen van elke benadering werd voorgelegd aan het Socar projectteam en samen kozen we diegenen die getest zouden worden met gebruikers. Dit iteratieve UX-ontwerpproces gaf ons focus en het vergemakkelijkte een snelle oplevering. In slechts zes weken hadden we de UX oplossing voor de POS applicatie voltooid en kon de ontwikkeling beginnen.

High-fidelity prototype van wireframe voor embedded POS systeem in petrol retail
Twee benzinestations naast elkaar die de retail operatie in de UX design case studie laten zien

ZELFKASSA-ERVARING VOOR BENZINESTATIONS

De outdoor betaalterminal is het begin van de self checkout ervaring in het tankstation. Hij is 24/7 beschikbaar in vier talen en twee munteenheden. De ervaring met zelfbedieningskassa's voor tankstations is uniek in de retailwereld omdat benzinetransacties via het pompsysteem verlopen.

De gebruikersinterface voor de terminal werd ontworpen om in verschillende omstandigheden te werken. Zo heeft extreme kou in de winter een impact en 's nachts passen de kleuren van de gebruikersinterface zich aan om meer uitnodigend te zijn.

Gebruikersinterface die de gebruikerservaring toont van de self checkout terminal voor de benzinedetailhandel

ITERATIES LEIDEN TOT EEN EENVOUDIGE GEBRUIKERSERVARING

In een iteratieve aanpak met zes ontwerp sprints, hebben we meerdere wire-flows gemaakt en getest. We hebben de UI van elk scherm verfijnd, waarbij we interfacecomponenten hebben weggehaald om de complexiteit te verminderen. Elke keer hebben we de ontwerpen getest om er zeker van te zijn dat we niet te ver zijn gegaan.

Het gebruikersonderzoek dat in de vorige fasen werd uitgevoerd, was nuttig om de self checkout UI rechttoe rechtaan te maken. Zo plaatsen korte uitleg transactiegegevens in context en worden dingen duidelijk voor gebruikers.

Illustraties voor gebruikers van de zelfkaartautomaat voor benzinestations

STEUN VOOR ONTWIKKELING

Ingebedde systemen hebben specifieke hardwaremogelijkheden en daarmee is rekening gehouden in het UX/UI ontwerpproces. Het UI ontwerp weerspiegelt het uiterlijk van de machine en het houdt rekening met de specificaties van het display.

We hebben het de ontwikkelaars gemakkelijk gemaakt om het UI-ontwerp van de zelfbedieningskassa-terminal te implementeren door een ontwerpsysteem op te stellen. Nu gebruiken ze het ontwerpsysteem om het systeem zelfstandig te onderhouden en bij te werken.

UI ontwerp voor embedded systeem waar gebruikers de betaalmethode selecteren in de self checkout ervaring
Detail gebruikerservaring waarbij gebruikers kaartgegevens invoeren in zelfkassa-interface
Design systm showing the UI components of the self checkout for petrol retail including buttons, graphics and states

DE CAR PLAY APP MAAKT DE GEBRUIKERSERVARING COMPLEET

Om de klantervaring compleet te maken hebben we een car play applicatie ontworpen. Het is een native app voor auto's en hij detecteert automatisch wanneer je een tankstation binnenrijdt. Het weet ook bij welke pomp je gestopt bent. Het enige wat je hoeft te doen is tanken en wegrijden.

De car play app integreert het vinden van tankstations, navigatie en tanken. Het vermindert de belasting van het POS-systeem van de winkel en maakt het voor gebruikers gemakkelijk om te tanken.

Auto dashboard met auto play app gebruikersinterface voor tankstation keten

CAR PLAY APP GEMAAKT IN TWEE ONTWERPSPRINTS

Car play-apps werken zowel met spraak- als met aanraakbediening en het UX/UI-ontwerp moet worden aangepast aan een scenario in de auto. Als car play goed is ontworpen, wordt het gebruik van een app gemakkelijker en veiliger.

De car play gebruikerservaring is ontworpen in overeenstemming met de standaarden voor car play apps en regelgeving voor auto's. We hadden al ervaring met UI design software zoals Kanzi, dus we waren in staat om de applicatie in slechts twee design sprints op te leveren.

Car play app icoon in dashboard
User interface options for selecting fueling details in car play app
Car play UI design while user is fueling at petrol station
Ui ontwerp voor transactie succes scherm in auto play app voor tankstation
Ontwerp mobiele applicatie gebruikerservaring voor retail benzinestation met auto dashboard op achtergrond

MOBIELE APP CONCEPT ONTWERP

Voortbouwend op al het eerdere ontwerpwerk hebben we nog twee UX/UI design sprints uitgevoerd om een vooruitstrevende gebruikerservaring voor een mobiele retail app voor te stellen. Het brengt alle elementen van de klantentraject samen.

De mobiele app is een essentieel onderdeel in loyaliteitsprogramma's en in het retail datamodel. Voor de klant opent het nieuwe manieren om het meeste te halen uit hun herhaalde gebruik van de tankstations. Het UI-ontwerp weerspiegelt het visionaire karakter van de app.

Vijf Ui ontwerpen voor benzine retail mobiele applicatie uit Zwitserland
Ontwerpelementen

A COMPLETE CUSTOMER EXPRIENCE FOR GAS STATIONS

Alle toepassingen die we ontworpen hebben, werken samen om een coherente end-to-end klantenervaring te creëren in tankstations. De zelfbedieningskassa-applicaties verminderen de belasting van de caissières in de winkel, zodat zij een betere service kunnen bieden aan het winkelend publiek.

De gebruikerservaring is coherent van de ene app naar de andere, maar we hebben elke app aangepast aan de beperkingen van ingebedde systemen of regelgeving die van toepassing is op car play apps. Het UI-ontwerp verbetert het merk en positioneert Socar als een innovatieve speler in de benzinedetailhandel.

Ons UX-designbureau leverde de ontbrekende expertise in user experience design voor de creatie van de volledige reeks digitale producten. Om een complete service te leveren, reisden we naar Zwitserland om gebruikersonderzoek uit te voeren en de unieke context te begrijpen.

RESULTATEN

Volledige dekking van de klantervaring

UX/UI voor vijf applicaties opgeleverd in tien maanden

Realtime ondersteuning voor ontwikkelaars tijdens de implementatie