UX/UI-design for innebygde programvareapplikasjoner for detaljhandel

Den fullt integrerte bensinstasjonsopplevelsen

Bensinhandel

Innebygde applikasjoner

Sveits

BELIGGENHETSveits
TEAMKreativ leder, UX-researcher, UX-designer, interaksjonsdesigner, brukergrensesnittdesigner, prosjektleder, leveranseleder, programvarearkitekt, produkteier

Kunden driver et stort nettverk av bensinstasjoner i Sveits, med drivstoff-, butikk- og servicetilbud på både urbane steder og langs motorveier. De ba om støtte til å omforme et fragmentert digitalt miljø som hadde vokst frem rundt eldre systemer og lokale workarounds. Omfanget dekket kassasystemer, utendørs betalingsterminaler, interaksjon i kjøretøy via CarPlay og et konsept for en lojalitetsorientert mobilapplikasjon. Målet var å skape en helhetlig arkitektur som gjenspeiler hvordan stasjonene faktisk drives, fremfor bare en overfladisk oppdatering av grensesnittet.

Dette prosjektet er en del av vårt pågående arbeid innen retail operations og multi-channel systemer, der evidence based UX, begrensninger i embedded systems og optimalisering av forecourt-workflows former grensesnitt for komplekse driftsmiljøer.

Creative Navy tilnærmet seg samarbeidet som et langsiktig program fremfor et enkelt prosjekt. Arbeidet strakte seg over tre år og fulgte en sekvens med research, modellering, redesign av applikasjoner og konsolidering av Design System. Hvert steg måtte ta hensyn til eksisterende infrastruktur og de operative realitetene ved syv stasjoner i Zürich-området.

Vi brukte Dynamic Systems Design, en metode som utvikler løsninger gjennom innebygd eksperimentering, løser spenninger mellom lokal optimalisering og systemkoherens, og følger implementeringen til organisasjoner blir selvstendige.

Kunden satte sammen et prosjektteam på seks personer fra drift, digital og engineering. Den strategiske styringen kom fra en styringskomité med fem medlemmer av ledergruppen. Denne governance-strukturen sikret at detaljerte observasjoner fra feltet kunne omsettes til beslutninger som påvirket teknologiroadmaps.

Gjennom hele samarbeidet var fokuset på sporbar begrunnelse. Hver designbeslutning måtte kunne knyttes til observert atferd, kvantifiserte mønstre eller tydelige begrensninger. Dette skapte et stabilt fundament for retail UX design som kan vedlikeholdes og videreutvikles over tid uten å måtte gå tilbake til grunnprinsippene for hver nye funksjon.

VÅRE 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 AV PETROL-RETAIL-MILJØET

Teamet startet med å analysere driftsforholdene som skiller bensinstasjoner fra andre former for retail. Hver stasjon håndterer intense etterspørselstopper, komplekse transaksjoner som kombinerer drivstoff og butikkvarer, samt utendørs interaksjoner som er utsatt for værforhold. Disse faktorene komprimerer beslutningstiden for både ansatte og kunder.

På de mest travle stedene behandlet kassepersonell på én enkelt kasse opptil 84 transaksjoner i timen i rushtidene. Komplekse kombinerte transaksjoner kunne ta opptil sju minutter før redesignen. Disse forholdene gjorde det tydelig at selv små ineffektiviteter i point of sale-flyter fører til betydelige kumulative forsinkelser.

Kassesystemene kjørte på embedded terminals med Full HD-skjermer på 1920 x 1080 piksler. De utendørs betalingsterminalene brukte skjermer på 1024 x 768 piksler som måtte være lesbare fra ulike vinkler. Begge enhetsklassene hadde ytelsesbegrensninger som påvirket hvor raskt skjermene kunne oppdateres ved håndtering av transaksjonslogikk i flere steg.

Utendørshardwaren opererte i temperaturer fra minus 20 til pluss 40 grader. Under feltbesøk observerte teamet gjenskinnsforhold i direkte sollys og under tak. Disse begrensningene betydde at grensesnittbeslutninger ikke kunne skilles fra fysiske realiteter. Enhver påstand om forbedring måtte gjenspeile hva som faktisk er gjennomførbart i dette miljøet for petrol station UX design og gas station interface design.

CLIENT GOVERNANCE OG PROGRAMSTRUKTUR

Fra starten av ble arbeidet strukturert som et flerårig program med tydelig governance, heller enn en samling av isolerte initiativer. Kunden utnevnte et kjerneteam på seks medlemmer fra operations, digital product, engineering og finance. De koordinerte daglige spørsmål, håndterte tilgang til stasjonene og sørget for alignment med lokale ledere.

Over denne gruppen møttes en styringskomité med fem ledere ved definerte milepæler. Gruppen gjennomgikk forskningsfunn, tok beslutninger om arkitektonisk retning og avveide hensyn mellom operativ effektivitet, regulatorisk compliance og langsiktig teknologistrategi. Deres involvering sikret at beslutninger om POS-flyter, utendørsterminaler og in-vehicle-integrasjon ikke ble behandlet som lokale justeringer.

Programmet ble delt inn i streams med tydelig sekvensering. Redesign av POS-flyter pågikk i seks måneder og dannet ryggraden for det videre arbeidet. Streamen for utendørs betalingsterminaler strakte seg over sju måneder og bygget på erfaringene fra POS-endringene. CarPlay-applikasjonen ble designet på to måneder etter at integrasjonsantakelsene var testet. Andre aktiviteter som journey mapping, definisjon av mobilkonsept og konsolidering av Design System gikk på tvers av disse streamene.

Denne strukturen skapte forutsigbare touchpoints for gjennomganger og gjorde det mulig for kunden å planlegge utviklingsressurser. Den gjorde det også enklere å sikre at beslutninger tatt for én kanal ikke ble motsagt av valg i en annen. I praksis er dette avgjørende for en multi-channel user experience som kan styres, fremfor å bare bli lappet sammen.

BRUKERUNDERSØKELSER PÅ STEDET I SVEITS

Programmet startet med feltarbeid på sju stasjoner i Zürich-området gjennom Sandbox Experiments. I løpet av én uke gjennomførte teamet førti timer med strukturert observasjon og dokumenterte 532 transaksjoner på tvers av ulike tider på døgnet og trafikkmønstre. Målet var å forstå hvordan arbeidet faktisk utføres, og hvor digitale systemer hjelper eller hindrer.

Forskerne observerte 36 kassemedarbeidere i live drift. De fokuserte på hvor ofte de ansatte vekslet mellom drivstoff- og butikkmodus, hvordan de navigerte i rabatt- og lojalitetslogikk, og hvor de stolte på hukommelsen i stedet for skjermveiledning. Dette arbeidet ble supplert med 24 intervjuer med kassemedarbeidere, skiftledere og lærlinger. Forskningen ble gjennomført på tysk, noe som støttet direkte kommunikasjon og presis dokumentasjon av domenespesifikk terminologi.

Transaksjonene ble kodet etter type og kompleksitet. Teamet identifiserte mønstre der ansatte rutinemessig hoppet over felt, la inn data på nytt for å rette feil eller ventet på systemresponser mens køene vokste. Disse mønstrene ble senere brukt som evidens for arkitektoniske endringer.

Tilnærmingen kombinerte intervjuer, contextual inquiry og kvantitativ koding. Hensikten var ikke å samle historier, men å bygge et strukturert datasett for user research innen retail operations. Dette skapte et fundament for evidence based UX for retail som kunne diskuteres åpent med både operasjons- og engineering-stakeholdere.

KARTLEGGING AV JOURNEYS OG TRANSAKSJONSSTRUKTURER

Med forskningsgrunnlaget på plass utviklet teamet journey-modeller som beskrev både kunde- og ansattatferd på tvers av kanaler. Fokuset var ikke på marketing journeys, men på operativt relevante sekvenser som starter med ankomst til stasjonen og avsluttes med fullført betaling og registrering av lojalitet.

For kundene fanget kartleggingen opp hvordan sjåfører valgte stasjon, hvordan de nærmet seg forplassen, hvordan de valgte pumpe og hvordan de kombinerte fylling med butikkjøp. For de ansatte dokumenterte kartleggingen hvordan de håndterte køoppbygging, kombinerte transaksjoner, unntak som avviste kort og avstemming ved skiftets slutt.

Hver journey ble delt inn i diskrete steg med tilhørende triggere, systemtilstander og miljøforhold. Dette gjorde det mulig for teamet å se hvor logikken i de digitale systemene avvek fra arbeidslogikken. For eksempel krevde enkelte flyter at kassemedarbeidere byttet mellom skjermer flere ganger for transaksjonstyper som forekommer ofte under høy belastning.

Modellene beskrev også overganger mellom kanaler. En sjåfør kunne ankomme via in-vehicle-navigasjon, autorisere seg på den utendørs terminalen og deretter gå inn i butikken for å fullføre et kombinert kjøp. De ansatte trengte konsistent informasjon på tvers av disse stegene. Ved å definere disse strukturene tydelig, la teamet grunnlaget for redesign av POS-systemet og sikret at endringer i én kanal ikke skapte nye inkonsistenser i en annen.

REDESIGN AV POINT OF SALE-WORKFLOWS

POS-streamen fokuserte på kassesystemene, siden de bærer den tyngste operative belastningen. Med utgangspunkt i journey-modellene katalogiserte teamet transaksjonstyper og grupperte dem etter frekvens og kompleksitet. Dette inkluderte egne flyter for kun drivstoff, kombinert drivstoff og butikk, innløsning av kuponger, lojalitetsoperasjoner og håndtering av unntak.

Seksten alternative POS-arkitekturer ble modellert gjennom option space mapping. Hver løsning reorganiserte hvordan handlinger ble gruppert og hvordan informasjon ble presentert i forhold til oppgavesekvenser. Målet var å redusere unødvendig navigasjon, begrense mode switching og gjøre feilhåndtering mer konsistent. Teamet sammenlignet hver løsning med det observerte datasettet på 532 transaksjoner for å se hvor ofte en gitt struktur traff de vanligste flytene.

Seks konsepter ble valgt ut for prototyping. Prototypene ble implementert på wireframe-nivå på skjermer som speilet 1920 x 1080 piksel-oppsettet til de faktiske kassesystemene. Totalt 29 testsesjoner på tvers av streams inkluderte strukturert evaluering av prototypene sammen med kassemedarbeidere og supervisorer. Tilbakemeldingene fokuserte på hastighet, tydelig oppgaveprioritering og samsvar med avstemmingsrutiner.

Den endelige løsningen jaget ikke nyhet. Den reorganiserte flytene slik at vanlige operasjoner krevde færre steg og færre mentale skift, samtidig som begrensningene i eksisterende maskinvare ble respektert gjennom constraint respecting. Det er her point of sale UX betyr mest for retail operations UX, ikke i isolerte grensesnittdetaljer.

FELTFUNN BASERT PÅ PROTOTYPER

Testarbeidet ga flere konkrete innsikter som forklarte hvorfor tidligere konfigurasjoner slet under høy belastning. Kassemedarbeidere hadde utviklet personlige snarveier for å kompensere for layoutproblemer. Disse snarveiene fungerte for erfarne ansatte, men gjorde opplæring av nye medarbeidere vanskeligere. Observerte feilrettingssekvenser viste at små inkonsistenser i rekkefølgen på felter førte til uforholdsmessig store forsinkelser når køene var lange.

Under testingen reagerte kassemedarbeidere positivt når sekvensene fulgte den interne logikken i arbeidet deres, fremfor strukturen i legacy-programvare. De fremhevet forbedringer der systemet var i tråd med hvordan de tenker rundt kombinasjonen av drivstoff, butikkvarer og lojalitetsfunksjoner. Supervisorer understreket at mer forutsigbare flyter gjør det enklere å holde kontroll i travle perioder, siden de reduserer antall spesialtilfeller som krever inngripen.

Teamet brukte denne tilbakemeldingen til å finjustere den endelige arkitekturen gjennom tension-driven reasoning. Det ble gjort endringer i hvordan handlinger ble gruppert, hvor nøkkelinformasjon ble plassert, og hvordan sjeldne unntak med høy operativ kostnad ble håndtert. Beslutningene ble dokumentert på en måte som gjorde det mulig å diskutere dem med engineering i presise termer.

Gjennom denne prosessen etablerte POS-redesignet en pålitelig modell for kassemedarbeidere og skapte en referanse for tilknyttede kanaler. Det ga også kundens styringskomité en konkret demonstrasjon av hvordan strukturerte beslutninger kan springe ut av feltevidens og føre til systemendringer innen retail operations UX.

DESIGN AV SELF CHECKOUT-OPPLEVELSEN

Utendørs betalingsterminaler krevde en egen tilnærming fordi de representerer en annen interaksjonskontekst. Kundene står foran en enhet som er utsatt for værforhold, samtidig som de håndterer selve tankingen. De har begrenset oppmerksomhet til å utforske grensesnittet og forventer at systemet responderer forutsigbart.

Terminalene måtte fungere i temperaturer fra minus 20 til pluss 40 grader og forbli lesbare i både dårlig lys og kraftig gjenskinn. Hver enhet støttet fire språk: tysk, fransk, italiensk og engelsk, samt to valutaer: euro og sveitsiske franc. Språkvalg og håndtering av valuta måtte løses uten å legge til steg som bremser hyppige brukere.

Flytene ble definert rundt kjernesekvenser som kortautorisasjon, valg av pumpe, fylling, håndtering av kvittering og lojalitetsgjenkjenning der det var relevant. Teamet tok også hensyn til feilsituasjoner som pumpe-timeouts eller delvise autorisasjoner. Disse flytene ble deretter testet i prototyper som brukte den faktiske oppløsningen på 1024 x 768 piksler for å sikre realistiske layoutbeslutninger.

Sesjoner med sjåfører og stasjonspersonell undersøkte hvor raskt folk kunne fullføre sentrale oppgaver uten forhåndsforklaring. Observasjonene førte til justeringer av tekst, rekkefølge på steg og hvordan feilsituasjoner ble presentert. Målet var å oppnå et nivå der grensesnittet på betalingsterminalen reflekterte logikken i tankingsprosessen og begrensningene ved ubetjent drift, samtidig som det ga en helhetlig opplevelse sammen med innendørssystemene.

MASKINVAREBEGRENSNINGER OG EMBEDDED-HENSYN

Både for innendørs kassesystemer og utendørs terminaler måtte prosjektet holde seg innenfor begrensningene til eksisterende maskinvare. Kunden byttet ikke ut enhetene, og designarbeidet kunne derfor ikke baseres på oppgraderinger som større skjermer eller raskere prosessorer. Dette gjorde embedded system UX til et tydelig fokusområde, ikke bare en bakgrunnsdetalj.

Skjermoppløsninger på 1920 x 1080 piksler for kasser og 1024 x 768 piksler for utendørs enheter ble behandlet som faste parametere. Teamet målte typiske responstider for kjerneoperasjoner og identifiserte spesifikke sekvenser der systemlatens påvirket interaksjonsmønstre. For eksempel førte forsinkelser mellom autorisasjon og bekreftelse til at kassemedarbeidere tok i bruk workarounds som gjorde opplæring og dokumentasjon mer komplisert.

Designbeslutningene hadde som mål å minimere avhengigheten av sekvenser som er følsomme for latenstid. Der skjermene krevde mer omfattende informasjon, prioriterte strukturen tydelighet fremfor tetthet. For embedded-maskinvare er dette ikke en estetisk preferanse, men en måte å unngå å overskride praktiske interaksjonsgrenser under belastning.

Disse vurderingene ble dokumentert for engineering-teamene, slik at de kunne forstå hvorfor bestemte layouter eller interaksjonsmønstre ble anbefalt. Målet var å sikre at implementeringen ikke gjeninnførte mønstre som virker effektive i teorien, men skaper problemer under reelle driftsforhold.

DESIGN SYSTEM OG IMPLEMENTERINGSSTØTTE

Etter hvert som streamene modnet, samlet teamet mønstre i ett felles Design System som dekket kassesystemer, utendørsterminaler, CarPlay og mobilkonseptet. Systemet inneholdt komponentdefinisjoner, interaksjonsregler og bruksnotater, strukturert etter kanal og felles mønstre. Målet var å støtte både dagens implementering og fremtidig utvikling.

Dokumentasjonen klargjorde hvilke elementer som var felles på tvers av enheter, og hvilke som var spesifikke for en gitt plattform. For eksempel forble knappetilstander, grunnleggende typografivalg og enkelte mønstre for datapresentasjon konsistente. Andre aspekter, som layout-rutenett og interaksjonsmodeller, ble tilpasset begrensningene i hver enhetsklasse og brukskontekst.

Utviklerne mottok ressurser som var tilpasset deres eksisterende toolchain. Designteamet deltok i de regelmessige implementeringssesjonene for å avklare atferd og besvare spørsmål om edge cases under Implementation Partnership. Dette reduserte risikoen for avvik mellom tiltenkt og faktisk atferd, spesielt når det gjelder feilhåndtering og tilstandsoverganger.

Design System kan best beskrives som et Design System for retail-applikasjoner som må fungere på tvers av embedded-terminaler og tilkoblede miljøer. Formålet er ikke bare visuell branding, men repeterbar beslutningstaking som produkt- og engineering-team kan bruke når økosystemet utvides eller justeres.

CARPLAY-APPLIKASJON OG KJØRETØYINTEGRASJON

CarPlay-applikasjonen dekket en annen del av reisen. Den måtte støtte oppdagelse av nærliggende stasjoner, veiledning til forplassen og identifisering av riktig pumpe etter ankomst. Samtidig måtte den følge plattformregler som begrenser sjåførens distraksjon, samt lokale forskrifter for tankeadferd.

Teamet definerte bruksscenarier der sjåfører nærmer seg en stasjon, får varsler når de kjører inn på forplassen og bekrefter pumpen de stopper ved. Interaksjonssekvensene ble holdt korte. Der det var mulig, baserte designet seg på stemmehandlinger og enkle bekreftelser fremfor omfattende menynavigasjon. Dette reflekterer disiplinen som kreves i automotive UX design, snarere enn mønstre fra forbrukerorienterte mobilapper.

Integrasjonsarbeidet fokuserte på konsistent identifisering av pumper og sikker autorisasjon. Applikasjonen måtte kommunisere med eksisterende back end slik at pumpestatus og betalingsstatus samsvarte med den faktiske situasjonen på forplassen. Testsessjoner med sjåfører undersøkte hvor tydelig appen formidlet disse tilstandene, og hvor godt logikken stemte med forventningene.

Den resulterende strukturen dannet grunnlaget for CarPlay-appens UX for denne kunden. Den var prinsipielt i tråd med flytene for utendørsterminaler og kassesystemer, samtidig som den respekterte de strengere begrensningene for in-vehicle-grensesnitt. Denne kanalen påvirket deretter andre deler av økosystemet når sjåfører nærmet seg stasjonen via kjøretøyet i stedet for gjennom uavhengige navigasjonsverktøy.

CAR PLAY-APPEN BLE UTVIKLET I TO DESIGNSPRINTS

Car Play-apper fungerer både med tale- og berøringsstyring, og UX/UI-designet må være tilpasset et kjørescenario. Riktig utformet gjør Car Play det enklere og tryggere å bruke en app.

Car Play-brukeropplevelsen er utformet i samsvar med standardene for Car Play-apper og regelverket for bilindustrien. Vi hadde tidligere erfaring med programvare for brukergrensesnittdesign, som Kanzi, og kunne derfor levere applikasjonen i løpet av bare to designsprints.

MOBILAPP-KONSEPT OG LOJALITETSLOGIKK

Mobilappen ble ikke utviklet som et fullt implementert produkt i løpet av programmet. I stedet definerte teamet et konsept som beskrev hvordan lojalitet, betalingsforberedelse og besøks­historikk kunne fungere i samspill med de andre kanalene. Målet var å gi en tydelig retning for fremtidige investeringer uten å låse kunden til for tidlige detaljer.

Konseptet beskrev hvordan kunder kunne registrere kjøretøy, administrere betalingsmetoder, se tankehistorikk og motta lojalitetsfordeler. Det tok hensyn til strukturen i transaksjonene som ble observert på stasjonene, samt begrensningene knyttet til integrasjon med pumper og terminaler. Applikasjonsarkitekturen unngikk å introdusere ny logikk som ville avvike fra det ansatte og systemer allerede brukte.

Det ble definert scenarier for hyppige brukere, sporadiske besøkende og sjåfører som administrerer flere kjøretøy. Disse scenariene informerte navigasjonsstrukturen og datapresentasjonen. Teamet vurderte også hvordan appen ville fungere i områder med svakere dekning, og hvordan den ville samhandle med CarPlay når begge er til stede i kjøretøyet.

Ved å tilby dette konseptet ga programmet kunden en referanse for fremtidig arbeid. Det beskrev hvordan en multi-channel user experience kan utvides til mobil uten å fragmentere logikken eller skape parallelle prosesser for loyalty program UX som ansatte ikke kan støtte.

SAMORDNET DRIFT OG FORUTSIGBAR VEKST

Programmet leverte redesignede eller nydefinerte opplevelser for fem sentrale applikasjoner. Dette var kassesystemene, de utendørs betalingsterminalene, CarPlay-applikasjonen, mobilkonseptet og den delte arkitekturmodellen som binder dem sammen. Arbeidet resulterte også i et Design System og implementeringsretningslinjer som fortsatt styrer utviklingen.

Operasjonelt er POS-arkitekturen nå tilpasset de observerte transaksjonsmønstrene, fremfor historiske systembegrensninger. Kassemedarbeidere rapporterer mer forutsigbare flyter og færre situasjoner der de må omgå systemet under press. Selv om kunden ikke har publisert kvantitative ytelsesresultater, indikerer interne tilbakemeldinger en smidigere håndtering av komplekse transaksjoner i rushtider.

Interaksjonen med utendørsterminalene har blitt mer konsistent på tvers av lokasjoner, med tydeligere håndtering av språkvalg og pumpestatus. CarPlay-integrasjonen gir organisasjonen en strukturert måte å engasjere sjåfører på før de når betalingsterminalen. Mobilkonseptet gir et praktisk veikart for fremtidige lojalitets- og kontofunksjoner.

På organisasjonsnivå har kunden fått en transparent modell av den digitale kundereisen og tilhørende arbeidsflyter for ansatte. Produktledelse, drift og engineering jobber ut fra en felles forståelse når endringer prioriteres.

Organisasjonen oppnådde immaterielle ressurser: dømmekraft om hva som er viktig i drivstoffhandel på tvers av kanaler, en delt produktintuisjon for hvordan multi-device-systemer bør fungere under operativt press, og en resonneringsevne som gjør det mulig for team å utvide digitale berøringspunkter uten å fragmentere opplevelsen. Systemet opprettholder sin competitive position ved å støtte effektive, forutsigbare transaksjoner på forplass, innendørs og i kjøretøykontekster, mens konkurrenter som prioriterer funksjonsakkumulering fremfor operativ sammenheng, sliter med å betjene nettverk som opererer under sanntidspress med komplekse multi-channel-koordineringskrav.

Programmet viser hvordan UX-design for bensinstasjoner kan støtte langsiktig operasjonell klarhet uten å basere seg på dramatiske påstander eller overfladiske redesign.

RESULTATER

Fullstendig dekning av kundeopplevelsen

UX/UI for 5 applikasjoner levert på 10 måneder

Sanntidsstøtte til utviklere under implementering

Har du et prosjekt i tankene?