De klant beheert een groot netwerk van tankstations in Zwitserland, met brandstof-, winkel- en serviceactiviteiten op zowel stedelijke als snelweglocaties. Ze vroegen om ondersteuning bij het herstructureren van een gefragmenteerde digitale omgeving die was ontstaan rond legacy-systemen en lokale workarounds. De scope omvatte kassasystemen, betaalterminals buiten, interactie in het voertuig via CarPlay en een concept voor een loyaliteitsgerichte mobiele applicatie. Het doel was om een consistente architectuur te creëren die weerspiegelt hoe stations daadwerkelijk functioneren, in plaats van alleen een oppervlakkige interfacevernieuwing.
Dit project maakt deel uit van ons voortdurende werk binnen retail operations en multi-channel systemen, waar evidence based UX, beperkingen van embedded systems en optimalisatie van forecourt-workflows de interfaces voor complexe operationele omgevingen vormgeven.
Creative Navy benaderde de samenwerking als een langetermijnprogramma in plaats van een enkel project. Het werk strekte zich uit over drie jaar en volgde een reeks van research, modellering, herontwerp van applicaties en consolidatie van het Design System. Elke stap moest rekening houden met de bestaande infrastructuur en de operationele realiteit van zeven stations in de regio Zürich.
We pasten Dynamic Systems Design toe, een methode die oplossingen ontwikkelt door ingebedde experimenten, spanningen tussen lokale optimalisatie en systeemcoherentie oplost, en implementatie begeleidt totdat organisaties onafhankelijkheid bereiken.
De klant stelde een projectteam samen van zes mensen uit operations, digital en engineering. De strategische aansturing kwam van een stuurgroep met vijf leden uit het executive team. Deze governance-structuur zorgde ervoor dat gedetailleerde observaties uit het veld konden worden vertaald naar beslissingen die de technologieroadmaps beïnvloedden.
Gedurende de hele samenwerking bleef de focus liggen op herleidbare besluitvorming. Elke ontwerpbeslissing moest terug te voeren zijn op geobserveerd gedrag, gekwantificeerde patronen of expliciete beperkingen. Dit creëerde een stabiele basis voor retail UX design die in de tijd kan worden onderhouden en uitgebreid, zonder steeds opnieuw naar de eerste principes terug te moeten gaan voor elke nieuwe feature.
Multi-Station Field Research
Transaction Pattern Analysis
Journey Mapping
Option Space Mapping
POS Workflow Redesign
Multi-Device Architecture
UI-ontwerp
Ontwerp systeem
Implementation Partnership
Het team begon met het analyseren van de operationele omstandigheden die tankstations onderscheiden van andere vormen van retail. Elke station verwerkt intense vraagpieken, complexe transacties die brandstof en winkelartikelen combineren en buiteninteracties die blootstaan aan het weer. Deze factoren verkorten de beslissingstijd voor zowel medewerkers als klanten.
Op de drukste locaties verwerkten kassamedewerkers aan één enkele kassa tot wel 84 transacties per uur tijdens piekperiodes. Complexe gemengde transacties konden vóór het herontwerp tot zeven minuten duren. Deze omstandigheden maakten duidelijk dat zelfs kleine inefficiënties in point of sale-processen leiden tot aanzienlijke cumulatieve vertragingen.
De kassasystemen draaiden op embedded terminals met Full HD-schermen van 1920 x 1080 pixels. De betaalterminals buiten gebruikten schermen van 1024 x 768 pixels die vanuit verschillende hoeken leesbaar moesten blijven. Beide apparaatklassen hadden performancebeperkingen die beïnvloedden hoe snel schermen konden verversen bij het afhandelen van meerstaps transactielogica.
De buitenhardware werkte bij temperaturen van min 20 tot plus 40 graden. Tijdens veldbezoeken observeerde het team verblindingscondities in direct zonlicht en onder overkappingen. Deze beperkingen maakten duidelijk dat interfacebeslissingen niet los konden worden gezien van de fysieke realiteit. Elke claim over verbetering moest weerspiegelen wat in deze omgeving haalbaar is voor petrol station UX design en gas station interface design.
Vanaf het begin werd het werk opgezet als een meerjarig programma met duidelijke governance in plaats van een verzameling losse initiatieven. De klant stelde een kernteam samen van zes leden uit operations, digital product, engineering en finance. Zij coördineerden dagelijkse vragen, regelden toegang tot de stations en stemden af met lokale managers.
Boven deze groep kwam een stuurgroep van vijf executives samen op vastgestelde mijlpalen. Deze groep beoordeelde onderzoeksresultaten, nam beslissingen over de architecturale richting en maakte afwegingen tussen operationele efficiëntie, naleving van regelgeving en langetermijntechnologiestrategie. Hun betrokkenheid zorgde ervoor dat beslissingen over POS-flows, buitenterminals en in-vehicle-integratie niet als lokale aanpassingen werden behandeld.
Het programma werd opgedeeld in streams met een duidelijke volgorde. Het herontwerp van de POS-workflows liep zes maanden en vormde de ruggengraat voor het daaropvolgende werk. De stream voor de betaalterminals buiten duurde zeven maanden en bouwde voort op de lessen uit de POS-aanpassingen. De CarPlay-applicatie werd in twee maanden ontworpen nadat de integratie-aannames waren getest. Andere activiteiten zoals journey mapping, definitie van het mobiele concept en consolidatie van het Design System liepen over deze streams heen.
Deze structuur creëerde voorspelbare touchpoints voor reviews en stelde de klant in staat om ontwikkelresources te plannen. Het maakte het ook eenvoudiger om te zorgen dat beslissingen voor het ene kanaal niet werden tegengesproken door keuzes in een ander kanaal. In de praktijk is dit essentieel voor een multi-channel user experience die kan worden aangestuurd in plaats van slechts opgelapt.
Het programma begon met veldwerk op zeven stations in de regio Zürich via Sandbox Experiments. In de loop van één week voerde het team veertig uur aan gestructureerde observatie uit en documenteerde het 532 transacties verspreid over verschillende dagdelen en verkeerspatronen. Het doel was om te begrijpen hoe het werk daadwerkelijk wordt uitgevoerd en waar digitale systemen helpen of juist hinderen.
De onderzoekers observeerden 36 kassamedewerkers tijdens de dagelijkse operatie. Ze richtten zich op hoe vaak het personeel wisselde tussen brandstof- en winkelmodus, hoe zij door kortings- en loyaliteitslogica navigeerden en waar zij op hun geheugen vertrouwden in plaats van op scherminstructies. Dit werk werd aangevuld met 24 interviews met kassamedewerkers, ploegleiders en trainees. Het onderzoek vond plaats in het Duits, wat directe communicatie en een nauwkeurige vastlegging van domeinspecifieke terminologie mogelijk maakte.
De transacties werden gecodeerd op type en complexiteit. Het team identificeerde patronen waarbij medewerkers routinematig velden oversloegen, gegevens opnieuw invoerden om fouten te corrigeren of wachtten op systeemreacties terwijl de wachtrijen langer werden. Deze patronen dienden later als bewijs voor architecturale veranderingen.
De aanpak combineerde interviews, contextual inquiry en kwantitatieve codering. De bedoeling was niet om verhalen te verzamelen, maar om een gestructureerde dataset op te bouwen voor user research binnen retail operations. Dit creëerde een basis voor evidence based UX voor retail die transparant besproken kon worden met zowel operations- als engineering-stakeholders.
Met het onderzoeksbestand op orde bouwde het team journey-modellen die zowel klant- als medewerkersgedrag over de verschillende kanalen beschreven. De focus lag niet op marketing journeys, maar op operationeel relevante sequenties die beginnen bij de benadering van het station en eindigen met een voltooide betaling en loyaliteitsregistratie.
Voor klanten legde de mapping vast hoe bestuurders een station kozen, hoe zij het voorterrein benaderden, hoe zij een pomp selecteerden en hoe zij tanken combineerden met aankopen in de winkel. Voor het personeel documenteerde de mapping hoe zij omgingen met wachtrijvorming, gemengde transacties, uitzonderingen zoals geweigerde kaarten en de afrekening aan het einde van de dienst.
Elke journey werd opgesplitst in afzonderlijke stappen met bijbehorende triggers, systeemtoestanden en omgevingscondities. Dit stelde het team in staat te zien waar de logica van digitale systemen afweek van de logica van het werk. Zo vereisten bepaalde flows dat kassamedewerkers meerdere keren tussen schermen wisselden bij transactietypen die vaak voorkomen tijdens piekbelasting.
De modellen beschreven ook de overgangen tussen kanalen. Een bestuurder kon aankomen via in-vehicle navigatie, zich autoriseren bij de buitenterminal en vervolgens de winkel binnen gaan om een gecombineerde aankoop af te ronden. Het personeel had consistente informatie nodig over al deze stappen heen. Door deze structuren duidelijk te definiëren, bereidde het team de basis voor het herontwerp van het POS-systeem en zorgde het ervoor dat wijzigingen in het ene kanaal geen nieuwe inconsistenties in een ander veroorzaakten.
De POS-stream richtte zich op de kassasystemen, omdat deze de zwaarste operationele belasting dragen. Voortbouwend op de journey-modellen catalogiseerde het team transactietypen en groepeerde deze op frequentie en complexiteit. Dit omvatte aparte paden voor alleen brandstof, gecombineerde brandstof- en winkeltransacties, het inwisselen van vouchers, loyaliteitsprocessen en exception handling.
Zestien alternatieve POS-architecturen werden gemodelleerd via option space mapping. Elke optie herstructureerde hoe acties werden gegroepeerd en hoe informatie werd gepresenteerd in relatie tot taakvolgordes. Het doel was om onnodige navigatie te verminderen, mode switching te beperken en foutafhandeling consistenter te maken. Het team vergeleek elke optie met de geobserveerde dataset van 532 transacties om te zien hoe vaak een bepaalde structuur de meest voorkomende paden raakte.
Zes concepten werden geselecteerd voor prototyping. Deze prototypes werden op wireframe-niveau geïmplementeerd op schermen die de 1920 x 1080 pixel lay-out van de daadwerkelijke kassa’s weerspiegelden. In totaal omvatten 29 testsessies verspreid over de verschillende streams een gestructureerde evaluatie van deze prototypes met kassamedewerkers en supervisors. De feedback richtte zich op snelheid, duidelijkheid van taakvolgorde en aansluiting op de afrekenroutines.
De uiteindelijke oplossing was niet gericht op vernieuwing omwille van de vernieuwing. De herstructureerde de flows zodat veelvoorkomende handelingen minder stappen en minder mentale overgangen vereisten, terwijl de beperkingen van de bestaande hardware werden gerespecteerd via constraint respecting. Hier komt point of sale UX het sterkst tot zijn recht voor retail operations UX, en niet in losse interfaceverfraaiingen.
Het testwerk leverde verschillende concrete inzichten op die verklaarden waarom eerdere configuraties moeite hadden onder piekbelasting. Kassamedewerkers hadden persoonlijke snelkoppelingen ontwikkeld om lay-outproblemen te compenseren. Deze snelkoppelingen werkten voor ervaren medewerkers, maar maakten het inwerken van nieuwe werknemers moeilijker. Geobserveerde foutcorrectiesequenties toonden aan dat kleine inconsistenties in de volgorde van velden onevenredig grote vertragingen veroorzaakten wanneer de wachtrijen lang waren.
Tijdens het testen reageerden kassamedewerkers positief wanneer de sequenties de interne logica van hun werk volgden in plaats van de structuur van legacy-software. Ze benadrukten verbeteringen waarbij het systeem aansloot bij de manier waarop zij denken over het combineren van brandstof, winkelartikelen en loyaliteitsacties. Supervisors benadrukten dat voorspelbaardere flows het makkelijker maken om controle te houden tijdens drukke periodes, omdat ze het aantal uitzonderingen dat ingrijpen vereist verminderen.
Het team gebruikte deze feedback om de uiteindelijke architectuur te verfijnen via tension-driven reasoning. Er werden wijzigingen aangebracht in de groepering van acties, de plaatsing van belangrijke informatie en de afhandeling van zeldzame uitzonderingen die hoge operationele kosten met zich meebrengen wanneer ze verkeerd worden behandeld. Deze beslissingen werden zo gedocumenteerd dat ze in precieze termen met engineering konden worden besproken.
Door dit proces stelde het POS-herontwerp een betrouwbaar model vast voor kassamedewerkers en creëerde het een referentie voor gerelateerde kanalen. Het bood de stuurgroep van de klant ook een tastbare demonstratie van hoe gestructureerde beslissingen kunnen voortkomen uit veldonderzoek en leiden tot systeemniveauveranderingen binnen retail operations UX.
Buitenbetaalterminals vereisten een aparte aanpak, omdat ze een andere interactiecontext vertegenwoordigen. Klanten staan voor een apparaat dat aan het weer is blootgesteld terwijl ze bezig zijn met tanken. Ze hebben beperkte aandacht voor het verkennen van de interface en verwachten dat het systeem voorspelbaar reageert.
De terminals moesten werken bij temperaturen van min 20 tot plus 40 graden en leesbaar blijven bij weinig licht en sterke verblinding. Elk apparaat ondersteunde vier talen: Duits, Frans, Italiaans en Engels, en twee valuta’s: euro en Zwitserse frank. Taalkeuze en valutaverwerking moesten worden opgelost zonder extra stappen toe te voegen die frequente gebruikers vertragen.
De flows werden gedefinieerd rond kernsequenties zoals kaartautorisatie, pompselectie, tanken, afhandeling van de bon en loyaliteitsherkenning waar relevant. Het team hield ook rekening met foutcondities zoals pomptime-outs of gedeeltelijke autorisaties. Deze flows werden vervolgens getest in prototypes met de daadwerkelijke resolutie van 1024 x 768 pixels om realistische lay-outbeslissingen te garanderen.
Sessies met bestuurders en stationsmedewerkers onderzochten hoe snel mensen kernactiviteiten konden voltooien zonder voorafgaande uitleg. De observaties leidden tot aanpassingen in de tekst, de volgorde van stappen en de manier waarop fouttoestanden werden gepresenteerd. Het doel was om een niveau te bereiken waarbij de interface van de betaalterminal de logica van het tankproces en de beperkingen van onbemand gebruik weerspiegelde, terwijl er tegelijkertijd een samenhangende ervaring ontstond met de systemen binnen.
Zowel bij de kassa’s binnen als bij de betaalterminals buiten moest het project werken binnen de grenzen van de bestaande hardware. De klant verving de apparaten niet, waardoor het ontwerp niet kon steunen op upgrades zoals grotere schermen of snellere processors. Dit maakte embedded system UX tot een expliciete ontwerpuitdaging in plaats van een achtergrondaspect.
Beeldschermresoluties van 1920 x 1080 pixels voor kassa’s en 1024 x 768 pixels voor buitentoestellen werden als vaste parameters behandeld. Het team mat typische responstijden voor kernoperaties en ontdekte specifieke sequenties waarbij systeemlatentie de interactiepatronen beïnvloedde. Zo zorgden vertragingen tussen autorisatie en bevestiging ervoor dat kassamedewerkers workarounds gingen gebruiken die training en documentatie ingewikkelder maakten.
De ontwerpbeslissingen waren erop gericht de afhankelijkheid van sequenties die gevoelig zijn voor latentie te minimaliseren. Waar schermen meer uitgebreide informatie vereisten, gaf de structuur prioriteit aan duidelijkheid boven dichtheid. Voor embedded hardware is dit geen esthetische voorkeur, maar een manier om onder belasting binnen praktische interactiegrenzen te blijven.
Deze overwegingen werden gedocumenteerd voor de engineeringteams, zodat zij konden volgen waarom bepaalde lay-outs of interactiepatronen werden aanbevolen. Het doel was ervoor te zorgen dat de implementatie geen patronen opnieuw introduceerde die in theorie efficiënt lijken, maar in de praktijk problemen veroorzaken.
Naarmate de streams volwassen werden, consolideerde het team de patronen in één Design System dat kassa’s, buitenterminals, CarPlay en het mobiele concept omvatte. Het systeem bevatte componentdefinities, interactieregels en gebruiksnotities, gestructureerd per kanaal en per gedeeld patroon. Het doel was om zowel de huidige implementatie als toekomstige evolutie te ondersteunen.
De documentatie maakte duidelijk welke elementen gemeenschappelijk waren over apparaten heen en welke specifiek waren voor een bepaald platform. Zo bleven knoptoestanden, basis typografische keuzes en bepaalde patronen voor datapresentatie consistent. Andere aspecten, zoals lay-outgrids en interactiemodellen, werden aangepast aan de beperkingen van elke apparaatklasse en de context van gebruik.
Ontwikkelaars ontvingen assets die aansloten op hun bestaande toolchain. Het designteam nam deel aan de reguliere implementatiesessies om gedrag te verduidelijken en vragen over edge cases te beantwoorden tijdens Implementation Partnership. Dit verkleinde het risico op afwijkingen tussen het beoogde en het daadwerkelijke gedrag, vooral bij foutafhandeling en toestandsovergangen.
Het Design System kan het best worden beschreven als een Design System voor retail-applicaties die moeten werken over embedded terminals en verbonden omgevingen heen. Het doel is niet alleen visuele branding, maar herhaalbare besluitvorming die product- en engineeringteams kunnen toepassen bij het uitbreiden of aanpassen van het ecosysteem.
De CarPlay-applicatie richtte zich op een ander deel van de journey. Ze moest het vinden van nabijgelegen stations ondersteunen, begeleiding naar het voorterrein bieden en na aankomst de juiste pomp identificeren. Tegelijkertijd moest ze voldoen aan platformregels die afleiding van de bestuurder beperken en aan lokale regelgeving voor tankgedrag.
Het team definieerde gebruiksscenario’s waarin bestuurders een station naderen, meldingen ontvangen bij het betreden van het voorterrein en de pomp bevestigen waar zij stoppen. De interactiesequenties werden kort gehouden. Waar mogelijk maakte het ontwerp gebruik van spraakacties en eenvoudige bevestigingen in plaats van uitgebreide menunavigatie. Dit weerspiegelt de discipline die vereist is voor automotive UX design, in plaats van consumenten-mobiele patronen.
Het integratiewerk richtte zich op consistente pompidentificatie en veilige autorisatie. De applicatie moest communiceren met de bestaande back end, zodat de pompstatus en betalingsstatus overeenkwamen met de werkelijkheid op het voorterrein. Testsessies met bestuurders onderzochten hoe duidelijk de app deze statussen communiceerde en hoe goed de logica aansloot bij de verwachtingen.
De resulterende structuur vormde de basis voor de CarPlay-app-UX voor deze klant. Deze sloot in principe aan op de flows van de buitenterminals en de kassa’s, terwijl tegelijkertijd rekening werd gehouden met de strengere beperkingen van in-vehicle interfaces. Dit kanaal beïnvloedde vervolgens andere delen van het ecosysteem wanneer bestuurders het station via het voertuig benaderden in plaats van via onafhankelijke navigatietools.
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.
De mobiele app werd tijdens het programma niet als een volledig geïmplementeerd product ontwikkeld. In plaats daarvan definieerde het team een concept dat vastlegde hoe loyaliteit, betalingsvoorbereiding en bezoekgeschiedenis konden functioneren in relatie tot de andere kanalen. Het doel was om een duidelijke richting te geven voor toekomstige investeringen zonder de klant vast te leggen op voortijdige details.
Het concept beschreef hoe klanten voertuigen konden registreren, betaalmethoden beheren, tankgeschiedenis bekijken en loyaliteitsvoordelen ontvangen. Het hield rekening met de structuur van de transacties die bij de stations werden waargenomen en met de beperkingen van pomp- en terminalintegratie. De applicatie-architectuur vermeed het introduceren van nieuwe logica die zou afwijken van wat personeel en systemen al gebruikten.
Er werden scenario’s gedefinieerd voor frequente gebruikers, incidentele bezoekers en bestuurders die meerdere voertuigen beheren. Deze scenario’s bepaalden de navigatiestructuur en de presentatie van gegevens. Het team hield ook rekening met hoe de app zich zou gedragen op locaties met zwakkere connectiviteit en hoe deze zou samenwerken met CarPlay wanneer beide in het voertuig aanwezig zijn.
Door dit concept te leveren gaf het programma de klant een referentie voor toekomstig werk. Het schetste hoe een multi-channel user experience kan worden uitgebreid naar mobiel zonder de logica te fragmenteren of parallelle processen te creëren voor loyalty program UX die het personeel niet kan ondersteunen.
Het programma leverde herontworpen of nieuw gedefinieerde ervaringen voor vijf kernapplicaties. Dit waren de kassasystemen, de buitenbetaalterminals, de CarPlay-applicatie, het mobiele concept en het gedeelde architectuurmodel dat ze met elkaar verbindt. Het werk resulteerde ook in een Design System en implementatierichtlijnen die de ontwikkeling blijven sturen.
Operationeel sluit de POS-architectuur nu aan op de geobserveerde transactiepatronen in plaats van op historische systeembeperkingen. Kassamedewerkers melden voorspelbaardere flows en minder situaties waarin ze onder druk om het systeem heen moeten werken. Hoewel de klant geen kwantitatieve prestatieresultaten heeft gepubliceerd, wijst interne feedback op een soepelere afhandeling van complexe transacties tijdens piekmomenten.
De interactie met de buitenterminals is consistenter geworden over alle locaties, met duidelijkere afhandeling van taalkeuze en pompstatussen. De CarPlay-integratie biedt de organisatie een gestructureerde manier om bestuurders te benaderen voordat zij de betaalterminal bereiken. Het mobiele concept biedt een praktische roadmap voor toekomstige loyaliteits- en accountfuncties.
Op organisatieniveau heeft de klant een transparant model gekregen van de digitale customer journey en de bijbehorende werkprocessen van het personeel. Productmanagement, operations en engineering werken vanuit een gedeeld begrip bij het prioriteren van veranderingen.
De organisatie verwierf immateriële middelen: beoordelingsvermogen over wat belangrijk is in brandstofretail over kanalen heen, een gedeelde productintuïtie over hoe multi-device-systemen zich onder operationele druk moeten gedragen, en een redeneercapaciteit waarmee teams digitale touchpoints kunnen uitbreiden zonder de ervaring te fragmenteren. Het systeem behoudt zijn competitive position door efficiënte, voorspelbare transacties te ondersteunen over voorterrein, binnenruimtes en voertuigcontexten, terwijl concurrenten die feature-accumulatie boven operationele samenhang stellen, moeite hebben om netwerken te bedienen die onder realtime druk werken met complexe multi-channel-coördinatie-eisen.
Het programma laat zien hoe UX-design voor tankstations langdurige operationele helderheid kan ondersteunen zonder te vertrouwen op dramatische claims of oppervlakkige herontwerpen.
Volledige dekking van de klantervaring
UX/UI voor vijf applicaties opgeleverd in tien maanden
Realtime ondersteuning voor ontwikkelaars tijdens de implementatie