UX/UI-design til indlejrede softwareapplikationer til detailhandel

Den fuldt integrerede tankstationsoplevelse

Detailhandel med benzin

Embedded applikationer

Schweiz

PLACERINGSchweiz
TEAMKreativ direktør, UX-researcher, UX-designer, interaktionsdesigner, UI-designer, projektleder, delivery manager, softwarearkitekt, produktejer

Kunden driver et stort netværk af tankstationer i Schweiz med brændstof, butik og service på både by- og motorvejslokationer. De bad om hjælp til at gentænke et fragmenteret digitalt miljø, som var vokset frem omkring ældre systemer og lokale workarounds. Opgaven omfattede kassesystemer, udendørs betalingsterminaler, interaktion i bilen via CarPlay samt et koncept for en loyalitetsorienteret mobilapplikation. Målet var at skabe en sammenhængende arkitektur, der afspejler, hvordan stationerne faktisk drives, frem for blot en overfladisk opdatering af grænsefladen.

Projektet er en del af vores fortsatte arbejde med retail operations og multi-channel systemer, hvor evidence based UX, begrænsninger i embedded systems og optimering af arbejdsgange på forpladsen former grænseflader til komplekse driftsmiljøer.

Creative Navy gik til samarbejdet som et langsigtet program snarere end et enkelt projekt. Arbejdet strakte sig over tre år og fulgte en rækkefølge af research, modellering, redesign af applikationer og konsolidering af Design System. Hvert trin skulle tage hensyn til den eksisterende infrastruktur og de operationelle realiteter på syv stationer i Zürich-området.

Vi anvendte Dynamic Systems Design, en metode der udvikler løsninger gennem indlejrede eksperimenter, løser spændinger mellem lokal optimering og systemsammenhæng, og støtter implementering indtil organisationer opnår selvstændighed.

Kunden samlede et projektteam på seks personer fra drift, digital og engineering. Den strategiske styring kom fra en styregruppe med fem medlemmer af direktionen. Denne governance-struktur sikrede, at detaljerede observationer fra felten kunne omsættes til beslutninger, der påvirkede teknologi-roadmaps.

Gennem hele samarbejdet forblev fokus på sporbar argumentation. Hver designbeslutning skulle kunne kobles tilbage til observeret adfærd, kvantificerede mønstre eller klare begrænsninger. Det skabte et stabilt fundament for retail UX design, som kan vedligeholdes og udbygges over tid uden at vende tilbage til de grundlæggende principper for hver ny funktion.

VORES BIDRAG

Multi-Station Field Research

Transaction Pattern Analysis

Journey Mapping

Option Space Mapping

POS Workflow Redesign

Multi-Device Architecture

UI Design

Design System

Implementation Partnership

FORSTÅELSE AF PETROL-RETAIL-MILJØET

Teamet begyndte med at analysere de driftsforhold, der adskiller tankstationer fra andre former for retail. Hver station håndterer intense efterspørgselstoppe, komplekse transaktioner, der kombinerer brændstof og butiksvarer, samt udendørs interaktioner, der er udsat for vejret. Disse faktorer forkorter beslutningstiden for både personale og kunder.

På de travleste stationer behandlede kassemedarbejdere på én enkelt kasse op til 84 transaktioner i timen i spidsbelastningsperioder. Komplekse blandede transaktioner kunne tage op til syv minutter før redesignen. Disse forhold gjorde det tydeligt, at selv små ineffektiviteter i point of sale-arbejdsgange fører til betydelige samlede forsinkelser.

Kassesystemerne kørte på embedded terminals med Full HD-skærme i 1920 x 1080 pixel. De udendørs betalingsterminaler brugte skærme på 1024 x 768 pixel, som skulle forblive læsbare fra forskellige vinkler. Begge enhedstyper havde performancebegrænsninger, der påvirkede, hvor hurtigt skærmene kunne opdatere ved håndtering af transaktionslogik med flere trin.

Udendørshardwaren fungerede i temperaturer fra minus 20 til plus 40 grader. Under feltbesøg observerede teamet blændingsforhold i direkte sollys og under overdækninger. Disse begrænsninger betød, at interface-beslutninger ikke kunne adskilles fra de fysiske realiteter. Enhver påstand om forbedring skulle afspejle, hvad der reelt er muligt i dette miljø for petrol station UX design og gas station interface design.

CLIENT GOVERNANCE OG PROGRAMSTRUKTUR

Fra starten blev arbejdet rammesat som et flerårigt program med klar governance frem for en samling af isolerede initiativer. Kunden udpegede et kerneteam på seks personer fra operations, digital product, engineering og finance. De koordinerede daglige spørgsmål, styrede adgangen til stationerne og sikrede alignment med de lokale ledere.

Over denne gruppe mødtes en styregruppe bestående af fem ledende chefer ved fastlagte milepæle. Gruppen gennemgik research-resultater, traf beslutninger om arkitektonisk retning og afvejede hensyn mellem operationel effektivitet, regulatorisk compliance og langsigtet teknologistrategi. Deres involvering sikrede, at beslutninger om POS-flows, udendørs terminaler og in-vehicle-integration ikke blev behandlet som lokale justeringer.

Programmet blev opdelt i streams med klar sekventering. Redesign af POS-workflows kørte i seks måneder og dannede rygraden for det efterfølgende arbejde. Streamen for udendørs betalingsterminaler strakte sig over syv måneder og byggede videre på erfaringerne fra POS-ændringerne. CarPlay-applikationen blev designet på to måneder, efter at integrationsantagelserne var testet. Andre aktiviteter som journey mapping, definition af mobilkoncept og konsolidering af Design System kørte på tværs af disse streams.

Denne struktur skabte forudsigelige touchpoints for reviews og gjorde det muligt for kunden at planlægge udviklingsressourcer. Den gjorde det også lettere at sikre, at beslutninger truffet for én kanal ikke blev modsagt af valg i en anden. I praksis er dette afgørende for en multi-channel user experience, der kan styres frem for blot at blive lappet sammen.

BRUGERUNDERSØGELSE PÅ STEDER I SCHWEIZ

Programmet begyndte med feltarbejde på syv stationer i Zürich-området gennem Sandbox Experiments. Over en uge gennemførte teamet 40 timers struktureret observation og dokumenterede 532 transaktioner på tværs af forskellige tidspunkter på dagen og trafikmønstre. Målet var at forstå, hvordan arbejdet faktisk udføres, og hvor digitale systemer hjælper eller hindrer.

Forskerne observerede 36 kassemedarbejdere under live drift. De fokuserede på, hvor ofte personalet skiftede mellem brændstof- og butiksfunktioner, hvordan de navigerede i rabat- og loyalitetslogik, og hvor de stolede på hukommelsen frem for skærmvejledning. Dette arbejde blev suppleret med 24 interviews med kassemedarbejdere, skifteledere og elever. Undersøgelsen foregik på tysk, hvilket understøttede direkte kommunikation og præcis registrering af domænespecifik terminologi.

Transaktionerne blev kodet efter type og kompleksitet. Teamet identificerede mønstre, hvor personalet rutinemæssigt sprang felter over, indtastede data igen for at rette fejl eller ventede på systemrespons, mens køerne voksede. Disse mønstre blev senere brugt som evidens for arkitektoniske ændringer.

Tilgangen kombinerede interviews, contextual inquiry og kvantitativ kodning. Formålet var ikke at indsamle historier, men at opbygge et struktureret datasæt til user research for retail operations. Det skabte et fundament for evidence based UX for retail, som kunne drøftes åbent med både drift og engineering-stakeholders.

KORTLÆGNING AF JOURNEYS OG TRANSAKTIONSSTRUKTURER

Med research-korpusset på plads konstruerede teamet journey-modeller, der beskrev både kunders og medarbejderes adfærd på tværs af kanaler. Fokus var ikke på marketing journeys, men på operationelt relevante sekvenser, som starter med ankomst til stationen og slutter med gennemført betaling og tildeling af loyalitet.

For kunderne viste kortlægningen, hvordan bilister valgte en station, hvordan de nærmede sig forpladsen, hvordan de valgte en stander, og hvordan de kombinerede tankning med køb i butikken. For personalet dokumenterede kortlægningen, hvordan de håndterede køopbygning, blandede transaktioner, undtagelser som afviste kort og afstemning ved vagtskifte.

Hver journey blev opdelt i diskrete trin med tilhørende triggere, systemtilstande og miljøforhold. Det gjorde det muligt for teamet at se, hvor de digitale systemers logik afveg fra arbejdets logik. For eksempel krævede visse flows, at kassemedarbejdere skiftede mellem skærme flere gange ved transaktionstyper, som forekommer hyppigt under spidsbelastning.

Modellerne beskrev også overgange mellem kanaler. En bilist kunne ankomme via in-vehicle navigation, godkende ved den udendørs terminal og derefter gå ind i butikken for at afslutte et kombineret køb. Personalet havde brug for ensartet information på tværs af disse trin. Ved at definere disse strukturer tydeligt forberedte teamet grundlaget for redesign af POS-systemet og sikrede, at ændringer i én kanal ikke skabte nye inkonsistenser i en anden.

REDESIGN AF POINT OF SALE-WORKFLOWS

POS-streamen fokuserede på kassesystemerne, da de bærer den største operationelle belastning. Med udgangspunkt i journey-modellerne katalogiserede teamet transaktionstyper og grupperede dem efter hyppighed og kompleksitet. Det omfattede separate flows for kun brændstof, kombineret brændstof og butik, indløsning af vouchers, loyalitetsfunktioner og håndtering af undtagelser.

Seksten alternative POS-arkitekturer blev modelleret gennem option space mapping. Hver mulighed reorganiserede, hvordan handlinger blev grupperet, og hvordan information blev præsenteret i forhold til opgavesekvenser. Målet var at reducere unødvendig navigation, begrænse modeswitching og gøre fejlhåndtering mere ensartet. Teamet sammenlignede hver mulighed med det observerede datasæt på 532 transaktioner for at se, hvor ofte en given struktur dækkede de mest almindelige flows.

Seks koncepter blev udvalgt til prototyping. Disse prototyper blev implementeret på wireframe-niveau på skærme, der afspejlede 1920 x 1080 pixel-layoutet på de faktiske kassesystemer. I alt 29 testsessioner på tværs af streams omfattede struktureret evaluering af prototyperne med kassemedarbejdere og supervisorer. Feedbacken fokuserede på hastighed, tydelig opgaveprioritering og overensstemmelse med afstemningsrutiner.

Den endelige løsning jagtede ikke nyhedsværdi. Den reorganiserede flows, så de mest almindelige handlinger krævede færre trin og færre mentale skift, samtidig med at begrænsningerne i den eksisterende hardware blev respekteret gennem constraint respecting. Det er her, point of sale UX betyder mest for retail operations UX – ikke i isolerede interface-detaljer.

FELTFUND BASERET PÅ PROTOTYPER

Testarbejdet gav flere konkrete indsigter, der forklarede, hvorfor tidligere konfigurationer havde haft problemer under spidsbelastning. Kassemedarbejdere havde udviklet personlige genveje for at kompensere for layoutproblemer. Disse genveje fungerede for erfarent personale, men gjorde oplæring af nye medarbejdere vanskeligere. Observerede fejlkorrektionsforløb viste, at små inkonsistenser i rækkefølgen af felter skabte uforholdsmæssigt store forsinkelser, når køerne var lange.

Under testene reagerede kassemedarbejderne positivt, når sekvenserne fulgte den interne logik i deres arbejde frem for strukturen i ældre software. De fremhævede forbedringer, hvor systemet stemte overens med den måde, de tænker på kombinationen af brændstof, butiksvarer og loyalitetsfunktioner. Supervisorer understregede, at mere forudsigelige flows gør det lettere at bevare overblikket i travle perioder, da de reducerer antallet af specialtilfælde, der kræver indgriben.

Teamet brugte denne feedback til at forfine den endelige arkitektur gennem tension-driven reasoning. Der blev foretaget ændringer i, hvordan handlinger blev grupperet, hvor nøgleinformation blev placeret, og hvordan sjældne undtagelser med høj operationel omkostning blev håndteret. Beslutningerne blev dokumenteret på en måde, der gjorde det muligt at drøfte dem med engineering i præcise termer.

Gennem denne proces etablerede POS-redesignet en pålidelig model for kassemedarbejdere og skabte en reference for relaterede kanaler. Det gav også styregruppen hos kunden en konkret demonstration af, hvordan strukturerede beslutninger kan udspringe af feltbaseret evidens og føre til systemændringer inden for retail operations UX.

DESIGN AF SELF CHECKOUT-OPLEVELSEN

Udendørs betalingsterminaler krævede en dedikeret tilgang, fordi de repræsenterer en anden interaktionskontekst. Kunderne står foran en enhed, der er udsat for vejret, mens de håndterer selve tankningen. De har begrænset opmærksomhed til at udforske interfacet og forventer, at systemet reagerer forudsigeligt.

Terminalerne skulle fungere i temperaturer fra minus 20 til plus 40 grader og forblive læsbare i både svagt lys og kraftig blænding. Hver enhed understøttede fire sprog: tysk, fransk, italiensk og engelsk, samt to valutaer: euro og schweizerfranc. Sprogvalg og håndtering af valuta skulle løses uden at tilføje trin, der sænker tempoet for hyppige brugere.

Flows blev defineret omkring kernesekvenser som kortautorisation, valg af stander, tankning, håndtering af kvittering og loyalitetsgenkendelse, hvor det var relevant. Teamet tog også højde for fejlsituationer som timeout på standeren eller delvise autorisationer. Disse flows blev derefter testet i prototyper, der brugte den faktiske opløsning på 1024 x 768 pixels for at sikre realistiske layoutbeslutninger.

Sessioner med bilister og stationspersonale undersøgte, hvor hurtigt folk kunne gennemføre centrale opgaver uden forudgående forklaring. Observationerne førte til justeringer af tekst, rækkefølgen af trin og måden fejltilstande blev præsenteret på. Målet var at nå et niveau, hvor betalingsterminalens interface afspejlede logikken i tankningsprocessen og begrænsningerne ved ubemandet drift, samtidig med at der blev skabt en sammenhængende oplevelse med de indendørs systemer.

HARDWAREBEGRÆNSNINGER OG EMBEDDED-OVERVEJELSER

På tværs af både indendørs kassesystemer og udendørs terminaler måtte projektet arbejde inden for rammerne af den eksisterende hardware. Kunden udskiftede ikke enhederne, og designarbejdet kunne derfor ikke baseres på opgraderinger som større skærme eller hurtigere processorer. Det gjorde embedded system UX til et eksplicit fokusområde frem for en baggrundsdetalje.

Skærmopløsninger på 1920 x 1080 pixel for kasser og 1024 x 768 pixel for udendørs enheder blev behandlet som faste parametre. Teamet målte typiske svartider for centrale operationer og identificerede specifikke sekvenser, hvor systemforsinkelse påvirkede interaktionsmønstre. For eksempel medførte forsinkelser mellem autorisation og bekræftelse, at kassemedarbejdere iværksatte workarounds, som gjorde oplæring og dokumentation mere komplekst.

Designbeslutningerne sigtede mod at minimere afhængigheden af sekvenser, der er følsomme over for latenstid. Hvor skærme krævede mere omfattende information, prioriterede strukturen klarhed frem for informations­tæthed. For embedded hardware er dette ikke et æstetisk valg, men en måde at undgå at overskride praktiske interaktionsgrænser under belastning.

Disse overvejelser blev dokumenteret for engineering-teams, så de kunne følge, hvorfor bestemte layouts eller interaktionsmønstre blev anbefalet. Målet var at sikre, at implementeringen ikke genindførte mønstre, som virker effektive i teorien, men skaber problemer under reelle driftsforhold.

DESIGN SYSTEM OG IMPLEMENTERINGSUNDERSTØTTELSE

Efterhånden som streams modnedes, samlede teamet mønstre i et samlet Design System, der dækkede kassesystemer, udendørs terminaler, CarPlay og mobilkonceptet. Systemet indeholdt komponentdefinitioner, interaktionsregler og brugsnoter, struktureret efter kanal og fælles mønstre. Målet var at understøtte både den nuværende implementering og fremtidig udvikling.

Dokumentationen tydeliggjorde, hvilke elementer der var fælles på tværs af enheder, og hvilke der var specifikke for en given platform. For eksempel forblev knaptilstande, grundlæggende typografivalg og visse mønstre for datapræsentation konsistente. Andre aspekter som layoutgrids og interaktionsmodeller blev tilpasset begrænsningerne for hver enhedsklasse og brugskontekst.

Udviklerne modtog assets, der var tilpasset deres eksisterende toolchain. Designteamet deltog i de regelmæssige implementeringssessioner for at afklare adfærd og afklare spørgsmål om edge cases under Implementation Partnership. Det reducerede risikoen for afvigelser mellem den tilsigtede og den faktiske adfærd, især i fejl­håndtering og tilstandsskift.

Design System’et kan bedst beskrives som et Design System for retail-applikationer, der skal fungere på tværs af embedded terminaler og forbundne miljøer. Formålet er ikke kun visuel branding, men gentagelige beslutningsprincipper, som produkt- og engineering-teams kan anvende, når økosystemet udvides eller justeres.

CARPLAY-APPLIKATION OG KØRETØJSINTEGRATION

CarPlay-applikationen dækkede en anden del af brugerrejsen. Den skulle understøtte søgning efter nærliggende stationer, guidning til forpladsen og identifikation af den korrekte stander efter ankomst. Samtidig skulle den overholde platformregler, der begrænser førerens distraktion, samt lokale regler for tankningsadfærd.

Teamet definerede brugsscenarier, hvor bilister nærmer sig en station, modtager prompts ved indkørsel på forpladsen og bekræfter den stander, de stopper ved. Interaktionssekvenserne blev holdt korte. Hvor det var muligt, byggede designet på stemmekommandoer og enkle bekræftelser frem for længere menunavigation. Det afspejler den disciplin, der kræves i automotive UX design, frem for mønstre fra almindelige mobilapps.

Integrationsarbejdet fokuserede på ensartet identifikation af standere og sikker autorisation. Applikationen skulle kommunikere med det eksisterende back end, så standerstatus og betalingsstatus svarede til den faktiske situation på forpladsen. Testsessions med bilister undersøgte, hvor tydeligt appen formidlede disse tilstande, og hvor godt logikken matchede forventningerne.

Den resulterende struktur dannede grundlaget for CarPlay-appens UX for denne kunde. Den var principielt i tråd med flows for udendørs terminaler og kassesystemer, samtidig med at den respekterede de strengere begrænsninger for in-vehicle interfaces. Denne kanal påvirkede derefter andre dele af økosystemet, når bilister nærmede sig stationen via køretøjet i stedet for gennem uafhængige navigationstjenester.

CAR PLAY APP SKABT I TO DESIGNSPRINTS

Car play-apps fungerer både med stemme- og touch-kontrol, og UX/UI-designet skal tilpasses til et kørescenarie. Når det er designet korrekt, gør car play det nemmere og mere sikkert at bruge en app.

Car Play-brugeroplevelsen er designet i overensstemmelse med standarderne for Car Play-apps og reglerne for bilindustrien. Vi havde tidligere erfaring med UI-designsoftware som Kanzi, så vi var i stand til at levere applikationen på kun to designsprints.

MOBILAPP-KONCEPT OG LOYALITETSLOGIK

Mobilappen blev ikke udviklet som et fuldt implementeret produkt under programmet. I stedet definerede teamet et koncept, der beskrev, hvordan loyalitet, betalingsforberedelse og besøgshistorik kunne fungere i relation til de andre kanaler. Formålet var at give en klar retning for fremtidige investeringer uden at binde kunden til for tidlige detaljer.

Konceptet beskrev, hvordan kunder kunne registrere køretøjer, administrere betalingsmetoder, se tankhistorik og modtage loyalitetsfordele. Det tog højde for strukturen i de transaktioner, der blev observeret på stationerne, samt begrænsningerne ved integration med standere og terminaler. Applikationsarkitekturen undgik at introducere ny logik, der ville afvige fra det, som personale og systemer allerede anvendte.

Der blev defineret scenarier for hyppige brugere, lejlighedsvise besøgende og bilister, der administrerer flere køretøjer. Disse scenarier informerede navigationsstrukturen og præsentationen af data. Teamet overvejede også, hvordan appen ville fungere i områder med svagere forbindelse, og hvordan den ville koordinere med CarPlay, når begge er til stede i køretøjet.

Ved at levere dette koncept gav programmet kunden et referencepunkt for fremtidigt arbejde. Det skitserede, hvordan en multi-channel user experience kan udvides til mobile kanaler uden at fragmentere logikken eller skabe parallelle processer for loyalty program UX, som personalet ikke kan understøtte.

ENSARTEDE DRIFTSFORHOLD OG FORUDSIGELIG VÆKST

Programmet leverede redesignede eller nydefinerede oplevelser for fem centrale applikationer. Det drejede sig om kassesystemer, udendørs betalingsterminaler, CarPlay-applikationen, mobilkonceptet og den fælles arkitektoniske model, der forbinder dem. Arbejdet resulterede også i et Design System og implementeringsretningslinjer, som fortsat informerer udviklingen.

Operationelt er POS-arkitekturen nu tilpasset de observerede transaktionsmønstre snarere end historiske systembegrænsninger. Kassemedarbejdere rapporterer mere forudsigelige flows og færre situationer, hvor de må arbejde uden om systemet under pres. Selvom kunden ikke har offentliggjort kvantitative performance-resultater, indikerer intern feedback en mere smidig håndtering af komplekse transaktioner i spidsperioder.

Interaktionen med udendørsterminalerne er blevet mere ensartede på tværs af stationer, med tydeligere håndtering af sprogvalg og standerstatus. CarPlay-integrationen giver organisationen en struktureret måde at engagere bilister på, før de når betalingsterminalen. Mobilkonceptet giver en praktisk køreplan for fremtidige loyalitets- og kontofunktioner.

På organisationsniveau har kunden opnået en transparent model af den digitale kunderejse og de tilhørende medarbejderworkflows. Produktledelse, drift og engineering arbejder ud fra en fælles forståelse, når ændringer prioriteres.

Organisationen opnåede immaterielle ressourcer: dømmekraft i forhold til, hvad der er vigtigt i brændstofdetailhandel på tværs af kanaler, en fælles produktintuition for hvordan multi-device-systemer bør fungere under operationelt pres, samt en evne til at ræsonnere, der gør det muligt for teams at udvide digitale touchpoints uden at fragmentere oplevelsen. Systemet fastholder sin competitive position ved at understøtte effektive, forudsigelige transaktioner på tværs af forplads, indendørs og køretøjskontekster, mens konkurrenter, der prioriterer feature-akkumulering over operationel sammenhæng, har svært ved at betjene netværk, der arbejder under realtidspres med komplekse multi-channel-koordinationskrav.

Programmet viser, hvordan UX-design for tankstationer kan understøtte langsigtet operationel klarhed uden at basere sig på dramatiske påstande eller overfladiske redesigns.

RESULTATER

Komplet dækning af kundeoplevelsen

UX/UI til 5 applikationer leveret på 10 måneder

Support til udviklere i realtid under implementeringen

Har du et projekt i tankerne? Tal med en UX konsulent