Kunden driver ett stort nätverk av bensinstationer i Schweiz, med bränsle-, butiks- och serviceverksamhet på både urbana platser och motorvägslägen. De efterfrågade stöd för att omforma en fragmenterad digital miljö som hade vuxit fram kring äldre system och lokala workarounds. Omfattningen inkluderade kassasystem, externa betalterminaler, interaktion i fordon via CarPlay samt ett koncept för en lojalitetsinriktad mobilapplikation. Målet var att skapa en sammanhängande arkitektur som speglar hur stationerna faktiskt drivs, snarare än en ytlig uppdatering av gränssnittet.
Detta projekt är en del av vårt fortsatta arbete med retail operations och multi-channel-system, där evidence based UX, begränsningar i embedded systems och optimering av forecourt-workflows formar gränssnitt för komplexa operativa miljöer.
Creative Navy tog sig an samarbetet som ett långsiktigt program snarare än ett enskilt projekt. Arbetet sträckte sig över tre år och följde en sekvens av research, modellering, omdesign av applikationer och konsolidering av Design System. Varje steg behövde ta hänsyn till befintlig infrastruktur och de operativa realiteterna på sju stationer i Zürichområdet.
Vi använde Dynamic Systems Design, en metod som låter lösningar växa genom inbyggd experimentering, löser spänningar mellan lokal optimering och systemkoherens, och stöttar implementeringen tills organisationer blir självständiga.
Kunden satte samman ett projektteam med sex personer från operations, digital och engineering. Den strategiska vägledningen kom från en styrgrupp med fem medlemmar ur ledningsgruppen. Denna governance-struktur säkerställde att detaljerade observationer från fältet kunde omsättas i beslut som påverkade tekniska roadmaps.
Under hela samarbetet låg fokus på spårbart resonemang. Varje designbeslut behövde kunna kopplas till observerat beteende, kvantifierade mönster eller tydliga begränsningar. Detta skapade en stabil grund för retail UX design som kan underhållas och vidareutvecklas över tid utan att behöva återgå till grundprinciperna för varje ny funktion.
Multi-Station Field Research
Transaction Pattern Analysis
Journey Mapping
Option Space Mapping
POS Workflow Redesign
Multi-Device Architecture
UI Design
System för utformning
Implementation Partnership
Teamet började med att analysera de operativa förhållanden som skiljer bensinstationer från andra former av retail. Varje station hanterar intensiva efterfrågetoppar, komplexa transaktioner som kombinerar bränsle och butiksvaror samt utomhusinteraktioner som är exponerade för väderförhållanden. Dessa faktorer komprimerar beslutstiden för både personal och kunder.
På de mest trafikerade platserna hanterade kassapersonal vid en enda kassa upp till 84 transaktioner per timme under rusningstid. Komplexa blandade transaktioner kunde ta upp till sju minuter före omdesignen. Dessa förhållanden gjorde det tydligt att även små ineffektiviteter i point of sale-flöden leder till betydande kumulativa förseningar.
Kassesystemen kördes på embedded terminals med Full HD-skärmar i 1920 x 1080 pixlar. De utomhusbaserade betalterminalerna använde skärmar på 1024 x 768 pixlar som behövde vara läsbara från olika vinklar. Båda enhetsklasserna hade prestandabegränsningar som påverkade hur snabbt skärmarna kunde uppdateras vid hantering av transaktionslogik i flera steg.
Den utomhusbaserade hårdvaran fungerade i temperaturer från minus 20 till plus 40 grader. Under fältbesök observerade teamet bländningsförhållanden i direkt solljus och under tak. Dessa begränsningar innebar att gränssnittsbeslut inte kunde skiljas från de fysiska realiteterna. Varje påstående om förbättring behövde spegla vad som faktiskt är genomförbart i denna miljö för petrol station UX design och gas station interface design.
Redan från början utformades arbetet som ett flerårigt program med tydlig governance, snarare än som en samling isolerade initiativ. Kunden tillsatte ett kärnteam med sex medlemmar från operations, digital product, engineering och finance. De samordnade dagliga frågor, hanterade tillgången till stationerna och säkerställde alignment med lokala chefer.
Ovanför denna grupp samlades en styrgrupp med fem chefer vid fastställda milstolpar. Gruppen granskade forskningsresultat, fattade beslut om arkitektonisk inriktning och gjorde avvägningar mellan operativ effektivitet, regulatorisk efterlevnad och långsiktig teknologistrategi. Deras engagemang säkerställde att beslut om POS-flöden, utomhusterminaler och in-vehicle-integration inte behandlades som lokala justeringar.
Programmet delades upp i streams med tydlig sekvensering. Omdesignen av POS-flöden pågick i sex månader och utgjorde ryggraden för det fortsatta arbetet. Streamen för utomhusbaserade betalterminaler sträckte sig över sju månader och byggde vidare på lärdomarna från POS-förändringarna. CarPlay-applikationen designades på två månader efter att integrationsantagandena hade testats. Andra aktiviteter som journey mapping, definition av mobilkoncept och konsolidering av Design System löpte parallellt med dessa streams.
Denna struktur skapade förutsägbara touchpoints för genomgångar och gjorde det möjligt för kunden att planera utvecklingsresurser. Den gjorde det också enklare att säkerställa att beslut som togs för en kanal inte motsades av val i en annan. I praktiken är detta avgörande för en multi-channel user experience som kan styras, snarare än bara lappas ihop.
Programmet inleddes med fältarbete på sju stationer i Zürichområdet genom Sandbox Experiments. Under en vecka genomförde teamet fyrtio timmars strukturerad observation och dokumenterade 532 transaktioner över olika tider på dygnet och trafikmönster. Målet var att förstå hur arbetet faktiskt utförs och var digitala system hjälper eller hindrar.
Forskarna observerade trettiosex kassamedarbetare under pågående drift. De fokuserade på hur ofta personalen växlade mellan bränsle- och butiksläge, hur de navigerade i rabatt- och lojalitetslogik samt var de förlitade sig på minnet i stället för skärminstruktioner. Detta arbete kompletterades med tjugofyra intervjuer med kassamedarbetare, skiftledare och praktikanter. Forskningen genomfördes på tyska, vilket stödde direkt kommunikation och en exakt dokumentation av domänspecifik terminologi.
Transaktionerna kodades efter typ och komplexitet. Teamet identifierade mönster där personalen rutinmässigt hoppade över fält, matade in data igen för att korrigera fel eller väntade på systemrespons medan köerna växte. Dessa mönster användes senare som underlag för arkitektoniska förändringar.
Metoden kombinerade intervjuer, contextual inquiry och kvantitativ kodning. Avsikten var inte att samla berättelser, utan att bygga ett strukturerat dataset för user research inom retail operations. Detta skapade en grund för evidence based UX för retail som kunde diskuteras öppet med både operations- och engineering-stakeholders.
Med forskningsunderlaget på plats tog teamet fram journey-modeller som beskrev både kunders och personals beteende över olika kanaler. Fokus låg inte på marketing journeys, utan på operativt relevanta sekvenser som börjar med ankomst till stationen och slutar med genomförd betalning och tilldelning av lojalitet.
För kunderna visade kartläggningen hur förare valde station, hur de närmade sig förplatsen, hur de valde pump och hur de kombinerade tankning med butiksköp. För personalen dokumenterade kartläggningen hur de hanterade köbildning, blandade transaktioner, undantag som nekade kort och avstämning vid arbetspassets slut.
Varje journey delades upp i tydliga steg med tillhörande triggar, systemtillstånd och miljöförhållanden. Detta gjorde det möjligt för teamet att se var de digitala systemens logik skilde sig från arbetslogiken. Till exempel krävde vissa flöden att kassapersonal växlade mellan skärmar flera gånger för transaktionstyper som ofta förekommer under hög belastning.
Modellerna beskrev även övergångar mellan kanaler. En förare kunde anlända via in-vehicle-navigering, auktorisera sig vid utomhusterminalen och sedan gå in i butiken för att slutföra ett kombinerat köp. Personalen behövde konsekvent information genom alla dessa steg. Genom att tydligt definiera dessa strukturer lade teamet grunden för omdesignen av POS-systemet och säkerställde att förändringar i en kanal inte skapade nya inkonsekvenser i en annan.
POS-streamen fokuserade på kassesystemen eftersom de bär den tyngsta operativa belastningen. Med utgångspunkt i journey-modellerna katalogiserade teamet transaktionstyper och grupperade dem efter frekvens och komplexitet. Detta inkluderade separata flöden för endast bränsle, kombinerat bränsle och butiksköp, inlösen av värdebevis, lojalitetsfunktioner och hantering av undantag.
Sexton alternativa POS-arkitekturer modellerades genom option space mapping. Varje alternativ omorganiserade hur åtgärder grupperades och hur information presenterades i relation till arbetssekvenser. Målet var att minska onödig navigering, begränsa mode switching och göra felhantering mer konsekvent. Teamet jämförde varje alternativ med det observerade datamaterialet på 532 transaktioner för att se hur ofta en viss struktur täckte de vanligaste flödena.
Sex koncept valdes ut för prototyputveckling. Prototyperna togs fram på wireframe-nivå på skärmar som speglade de faktiska kassornas upplösning på 1920 x 1080 pixlar. Totalt 29 testsessioner över olika streams inkluderade strukturerad utvärdering av prototyperna tillsammans med kassapersonal och arbetsledare. Återkopplingen fokuserade på hastighet, tydlig uppgiftsordning och anpassning till avstämningsrutiner.
Den resulterande lösningen jagade inte nyhet. Den omorganiserade flödena så att vanliga moment krävde färre steg och färre mentala övergångar, samtidigt som befintlig hårdvaras begränsningar respekterades genom constraint respecting. Det är här point of sale UX är som viktigast för retail operations UX, inte i isolerade gränssnittsdetaljer.
Testarbetet gav flera konkreta insikter som förklarade varför tidigare konfigurationer haft problem under hög belastning. Kassapersonal hade utvecklat personliga genvägar för att kompensera för layoutproblem. Dessa genvägar fungerade för erfarna medarbetare, men gjorde det svårare att utbilda nya anställda. Observerade felkorrigeringssekvenser visade att små inkonsekvenser i fältordningen skapade oproportionerligt stora förseningar när köerna var långa.
Under testerna reagerade kassapersonalen positivt när sekvenserna följde den interna logiken i deras arbete snarare än strukturen i äldre programvara. De lyfte fram förbättringar där systemet stämde överens med hur de tänker kring kombinationen av bränsle, butiksvaror och lojalitetsåtgärder. Arbetsledare betonade att mer förutsägbara flöden gör det lättare att behålla kontrollen under intensiva perioder, eftersom de minskar antalet specialfall som kräver ingripande.
Teamet använde denna feedback för att förfina den slutliga arkitekturen genom tension-driven reasoning. Förändringar gjordes i hur åtgärder grupperades, var viktig information placerades och hur sällsynta undantag med hög operativ kostnad hanterades. Besluten dokumenterades på ett sätt som gjorde det möjligt att diskutera dem med engineering i precisa termer.
Genom denna process etablerade POS-omdesignen en pålitlig modell för kassapersonal och skapade en referens för relaterade kanaler. Den gav också kundens styrgrupp en konkret demonstration av hur strukturerade beslut kan utgå från fältbaserad evidens och leda till förändringar på systemnivå inom retail operations UX.
Utomhusbaserade betalterminaler krävde en särskild ansats eftersom de representerar en annan interaktionskontext. Kunder står framför en enhet som är exponerad för väderförhållanden samtidigt som de hanterar själva tankningen. De har begränsad uppmärksamhet för att utforska gränssnittet och förväntar sig att systemet reagerar förutsägbart.
Terminalerna behövde fungera i temperaturer från minus 20 till plus 40 grader och förbli läsbara i både svagt ljus och starkt bländande förhållanden. Varje enhet stödde fyra språk: tyska, franska, italienska och engelska, samt två valutor: euro och schweizerfranc. Språkval och valutahantering behövde lösas utan att lägga till steg som saktar ner frekventa användare.
Flödena definierades kring centrala sekvenser som kortauktorisering, val av pump, tankning, kvittohantering och lojalitetsigenkänning där det var relevant. Teamet tog även hänsyn till felsituationer som pump-timeouts eller partiella auktoriseringar. Dessa flöden testades sedan i prototyper som använde den faktiska upplösningen på 1024 x 768 pixlar för att säkerställa realistiska layoutbeslut.
Sessioner med förare och stationspersonal undersökte hur snabbt människor kunde utföra centrala uppgifter utan förhandsförklaring. Observationerna ledde till justeringar av texter, stegordning och hur feltillstånd presenterades. Målet var att nå en nivå där betalterminalens gränssnitt speglade logiken i tankningsprocessen och begränsningarna vid obemannad drift, samtidigt som det gav en sammanhängande upplevelse tillsammans med de inomhusbaserade systemen.
Både för de inomhusbaserade kassorna och de utomhusbaserade terminalerna behövde projektet arbeta inom ramarna för den befintliga hårdvaran. Kunden bytte inte ut enheterna, och designarbetet kunde därför inte bygga på uppgraderingar som större skärmar eller snabbare processorer. Detta gjorde embedded system UX till en tydlig huvudfråga snarare än en bakgrundsdetalj.
Skärmupplösningar på 1920 x 1080 pixlar för kassor och 1024 x 768 pixlar för utomhusenheter behandlades som fasta parametrar. Teamet mätte typiska svarstider för centrala operationer och identifierade specifika sekvenser där systemlatens påverkade interaktionsmönster. Till exempel ledde fördröjningar mellan auktorisering och bekräftelse till att kassapersonal tog till workarounds som försvårade utbildning och dokumentation.
Designbesluten syftade till att minimera beroendet av sekvenser som är känsliga för latens. När skärmar krävde mer omfattande information prioriterade strukturen tydlighet framför täthet. För embedded-hårdvara är detta inte ett estetiskt val, utan ett sätt att undvika att överskrida praktiska interaktionsgränser under belastning.
Dessa överväganden dokumenterades för engineering-teamen så att de kunde följa varför vissa layouter eller interaktionsmönster rekommenderades. Målet var att säkerställa att implementationen inte återinförde mönster som verkar effektiva i teorin men orsakar problem under verkliga driftsförhållanden.
I takt med att streamerna mognade samlade teamet mönstren i ett gemensamt Design System som omfattade kassor, utomhusterminaler, CarPlay och mobilkonceptet. Systemet innehöll komponentdefinitioner, interaktionsregler och användningsnoter, strukturerade per kanal och gemensamt mönster. Målet var att stödja både nuvarande implementation och framtida utveckling.
Dokumentationen klargjorde vilka element som var gemensamma över olika enheter och vilka som var specifika för en viss plattform. Till exempel förblev knapptillstånd, grundläggande typografival och vissa mönster för datapresentation konsekventa. Andra aspekter, såsom layoutgridar och interaktionsmodeller, anpassades efter begränsningarna i varje enhetsklass och användningskontext.
Utvecklarna fick tillgång till assets som var anpassade till deras befintliga toolchain. Designteamet deltog i regelbundna implementationssessioner för att klargöra beteenden och besvara frågor om edge cases under Implementation Partnership. Detta minskade risken för avvikelser mellan avsett och faktiskt beteende, särskilt vid felhantering och tillståndsövergångar.
Design System kan bäst beskrivas som ett Design System för retail-applikationer som måste fungera över både embedded-terminaler och uppkopplade miljöer. Syftet är inte enbart visuell branding, utan repeterbar beslutsfattning som produkt- och engineering-team kan använda när ekosystemet utökas eller justeras.
CarPlay-applikationen täckte en annan del av användarresan. Den behövde stödja upptäckt av närliggande stationer, vägledning till förplatsen och identifiering av rätt pump efter ankomst. Samtidigt behövde den följa plattformsregler som begränsar förarens distraktion samt lokala regler för tankningsbeteende.
Teamet definierade användningsscenarier där förare närmar sig en station, får uppmaningar när de kör in på förplatsen och bekräftar den pump de stannar vid. Interaktionssekvenserna hölls korta. Där det var möjligt byggde designen på röstkommandon och enkla bekräftelser i stället för omfattande menynavigering. Detta speglar den disciplin som krävs inom automotive UX design, snarare än mönster från konsumentinriktade mobilappar.
Integrationsarbetet fokuserade på konsekvent identifiering av pumpar och säker auktorisering. Applikationen behövde kommunicera med det befintliga back end-systemet så att pumpstatus och betalningsstatus stämde överens med verkligheten på förplatsen. Testsessions med förare undersökte hur tydligt appen förmedlade dessa tillstånd och hur väl logiken matchade förväntningarna.
Den resulterande strukturen utgjorde grunden för CarPlay-appens UX för denna kund. Den låg i linje med flödena för utomhusterminaler och kassor, samtidigt som den respekterade de striktare begränsningarna för in-vehicle-gränssnitt. Denna kanal påverkade därefter andra delar av ekosystemet när förare närmade sig stationen via fordonet i stället för genom fristående navigeringsverktyg.
Apparna för bilspel fungerar både med röst- och pekstyrning och UX/UI-designen måste anpassas till ett körscenario. När den är utformad på rätt sätt gör car play det enklare och säkrare att använda en app.
Användarupplevelsen för car play utformas i enlighet med standarderna för car play-appar och fordonsbestämmelser. Vi hade tidigare erfarenhet av UI-designprogramvara så som Kanzi så vi kunde leverera applikationen på bara två designsprintar.
Mobilappen utvecklades inte som en fullt implementerad produkt under programmet. I stället definierade teamet ett koncept som beskrev hur lojalitet, betalningsförberedelser och besökshistorik kunde fungera i relation till de andra kanalerna. Målet var att ge en tydlig riktning för framtida investeringar utan att låsa kunden vid för tidiga detaljer.
Konceptet beskrev hur kunder kunde registrera fordon, hantera betalningsmetoder, se tankhistorik och ta del av lojalitetsförmåner. Det tog hänsyn till strukturen i de transaktioner som observerades på stationerna samt begränsningarna i pump- och terminalintegration. Applikationsarkitekturen undvek att införa ny logik som skulle avvika från det som personal och system redan använde.
Scenarier definierades för frekventa användare, tillfälliga besökare och förare som hanterar flera fordon. Dessa scenarier påverkade navigationsstrukturen och hur data presenterades. Teamet tog även hänsyn till hur appen skulle fungera i områden med svagare uppkoppling och hur den skulle samverka med CarPlay när båda finns i fordonet.
Genom att tillhandahålla detta koncept gav programmet kunden en referens för framtida arbete. Det beskrev hur en multi-channel user experience kan utökas till mobil utan att fragmentera logiken eller skapa parallella processer för loyalty program UX som personalen inte kan stödja.
Programmet tog fram omdesignade eller nydefinierade upplevelser för fem centrala applikationer. Dessa var kassasystemen, de utomhusbaserade betalterminalerna, CarPlay-applikationen, mobilkonceptet och den gemensamma arkitekturmodellen som binder ihop dem. Arbetet resulterade också i ett Design System och implementeringsriktlinjer som fortsatt vägleder utvecklingen.
Operativt är POS-arkitekturen nu anpassad efter de observerade transaktionsmönstren snarare än historiska systembegränsningar. Kassapersonal rapporterar mer förutsägbara flöden och färre situationer där de behöver arbeta runt systemet under press. Även om kunden inte har publicerat kvantitativa prestandaresultat, visar intern feedback på smidigare hantering av komplexa transaktioner under högbelastning.
Interaktionen med utomhusterminalerna har blivit mer enhetlig mellan olika platser, med tydligare hantering av språkval och pumpstatusar. CarPlay-integrationen ger organisationen ett strukturerat sätt att engagera förare innan de når betalterminalen. Mobilkonceptet ger en praktisk färdplan för framtida lojalitets- och kontofunktioner.
På organisationsnivå har kunden fått en transparent modell av sin digitala kundresa och de tillhörande arbetsflödena för personalen. Produktledning, drift och engineering arbetar utifrån en gemensam förståelse när förändringar prioriteras.
Organisationen fick immateriella resurser: omdöme kring vad som är viktigt i bränsleretail över kanaler, en gemensam produktintuition om hur multi-device-system bör fungera under operativ press, samt en resonemangsförmåga som gör det möjligt för team att utöka digitala kontaktpunkter utan att fragmentera upplevelsen. Systemet behåller sin competitive position genom att stödja effektiva, förutsägbara transaktioner över förplats, inomhusmiljöer och fordonskontexter, medan konkurrenter som prioriterar funktionsackumulering framför operativ samstämmighet har svårt att betjäna nätverk som arbetar under realtidspress med komplexa multi-channel-samordningskrav.
Programmet visar hur UX-design för bensinstationer kan stödja långsiktig operativ tydlighet utan att förlita sig på dramatiska påståenden eller ytliga omdesigner.
Fullständig täckning av kundupplevelsen
UX/UI för 5 applikationer levererade på 10 månader
Realtidsstöd för utvecklare under genomförandet