UX/UI-design for innebygde programvareapplikasjoner for detaljhandel

Den fullt integrerte bensinstasjonsopplevelsen

Bensinhandel

Innebygde applikasjoner

Sveits

Bensinstasjon i Zürich i Sveits hvor brukerundersøkelser ble utført
BELIGGENHETSveits
TEAMKreativ leder, UX-researcher, UX-designer, interaksjonsdesigner, brukergrensesnittdesigner, prosjektleder, leveranseleder, programvarearkitekt, produkteier

Som et av de ledende bensinstasjonsnettverkene i Sveits tilbyr de en verden av detaljhandel, inkludert supermarkeder, kafeteriaer og biltjenester.

Visjonen er å forbedre kundeopplevelsen ved å redusere friksjonen. Dette innebærer en overhaling av brukervennligheten til kassaprogrammet som brukes av kassapersonalet, og innføring av en kundeskjerm ved kassen. I tillegg til den klassiske POS-opplevelsen ønsket de å designe en betalingsautomat utenfor butikken, en mobilapplikasjon og en carplay-app.

De engasjerte vårt UX/UI-designbyrå for å støtte dette strategiske designprosjektet. Vi startet med en grundig brukerundersøkelse på lokasjonen i Sveits. Deretter utarbeidet vi et nytt kundeopplevelseskart og designet UX og brukergrensesnitt for hver enkelt POS-applikasjon.

VÅRE BIDRAG

Brukerundersøkelse

UX-design

Brukertesting

Prototyping

Brukergrensesnittdesign - Designsystem

Informasjonsarkitektur

Kvalitetssikring

Brukerundersøkelser ble utført på bensinstasjonen i Kloten i nærheten av Zürich

BRUKERUNDERSØKELSER PÅ STEDET I SVEITS

UX-byråets researchteam tilbrakte en uke i Sveits for å utføre brukerundersøkelser på bensinstasjoner rundt om i Zürich. Vi møtte erfarne skiftledere, stasjonssjefer og personer under opplæring.

Vi brukte en blanding av brukerundersøkelsesmetoder, både kvantitative og kvalitative, for å skape et fullstendig bilde av hva som må endres. UX-undersøkelsen ble gjennomført på tysk, som er en av UX-designbyråets språkferdigheter.

Bensinstasjon der det ble utført brukerundersøkelser for POS-designprosjektet
POS-bruker ved kassa på bensinstasjon filmes for observasjonsstudie i forbindelse med brukerundersøkelser
Intervjueren sitter ved et bord på en bensinstasjon i Zürich og snakker med en bruker av POS-applikasjonen

BLI KONTORIST FOR Å KJENNE EN KONTORIST

Målet med brukerundersøkelsen var å avdekke kompleksiteten og smertepunktene som kassapersonalet opplever når de bruker POS-applikasjonen.

Brukerintervjuer ga oss et utgangspunkt, men systematiske observasjoner av hvordan de bruker POS-applikasjonen til å betjene kundene ga oss kvantitativ innsikt i flaskehalser i brukervennligheten. For å gå et nivå dypere jobbet UX/UI-designerne våre sammen med kassapersonalet i et deltakende forskningsdesign. Mens vi spiste lunsj med dem, fikk vi vite hvilke utfordringer de står overfor utover POS-brukervennligheten.

User persona of retail POS application shwoing pain points and task breakdown
Brukerpresentasjon av en butikkansatt som bruker kassaprogrammet regelmessig

HVORDAN UX-SMERTEPUNKTER OPPSTÅR I POS-APPER I DETALJHANDELEN

POS-applikasjoner håndterer hundrevis av transaksjonstyper. Ved å kartlegge UX-forskningsdataene skapte vi en oversikt over scenarier som skaper problemer.

Det finnes mønstre i hvordan UX-smertepunkter oppstår. Som regel er det små UX/UI-kompleksiteter som bygger seg opp i det virkelige liv, og som kompromitterer en transaksjon som tar for lang tid. Disse UX-designproblemene kan bare oppdages i det virkelige liv, de kan ikke forutses i designprosessen.

Brukeropplevelsesdiagram som viser smertepunkter ved bruk av programvare for salgssteder

UX-UTFORDRINGER FORSTERKES AV KONTEKSTEN

I det virkelige liv opererer POS-applikasjoner i en kompleks kontekst. Ved å gjøre brukerundersøkelser på stedet og ved å delta direkte, kartla vi de kontekstuelle faktorene som forstyrrer POS-systemets brukervennlighet.

Vi avdekket dusinvis av kontekstuelle UX-faktorer, som f.eks. gjenskinn på POS-skjermen på grunn av takbelysningen, eller hvordan skrivebordets utforming gjør det vanskelig å trykke på enkelte områder av POS-berøringsskjermen.

POS-system på bensinstasjon med høydepunkter som viser faktorer som påvirker brukeropplevelsen

KOMPARATIV ANALYSE AV POS-BRUKERSTRØMMER

Vi har sammenlignet brukeropplevelsen til andre POS-systemer. I denne detaljerte analysen har vi sammenlignet og satt løsninger opp mot hverandre i lys av scenariene vi avdekket i brukerundersøkelsene.

Denne systematiske gjennomgangen av konkurrerende brukeropplevelsesdesign avslørte en rekke ting man bør og ikke bør gjøre i dette prosjektet. Det hjalp oss med å snevre inn den påfølgende UX-designtilnærmingen.

Sammenlignende analyse av brukerflyten i POS-applikasjoner

PROTOTYPING OG TESTING AV LØSNINGER FOR POS-DESIGN

Vi laget prototyper for ulike tilnærminger til brukeropplevelsen. Hver av dem var en kombinasjon av grensesnittoppsett kombinert med en behandling av brukerflyten.

En systematisk sammenligning av fordelene og ulempene ved de ulike tilnærmingene ble presentert for kundens prosjektteam, og sammen valgte vi ut de som skulle testes med brukerne. Denne iterative UX-designprosessen ga oss fokus og bidro til rask levering. I løpet av bare seks uker hadde vi ferdigstilt UX-løsningen for POS-applikasjonen, og utviklingen kunne starte.

High fidelity-prototype av wireframe for et innebygd POS-system i bensinbutikker
To bensinstasjoner ved siden av hverandre som viser detaljhandelen i casestudien om UX-design

SELVBETJENTE KASSER FOR BENSINSTASJONER

Den utendørs betalingsterminalen er starten på selvbetjeningsopplevelsen på bensinstasjonen. Den er tilgjengelig døgnet rundt på fire språk og i to valutaer. Selvbetjeningsopplevelsen for bensinstasjoner er unik i detaljhandelen fordi bensintransaksjoner involverer pumpesystemet.

Brukergrensesnittet for terminalen er designet for å fungere under ulike forhold. For eksempel har ekstrem kulde om vinteren en innvirkning, og om natten tilpasses fargene i brukergrensesnittet for å være mer innbydende.

Brukergrensesnitt som viser brukeropplevelsen av en selvbetjent kasseterminal for bensinforretninger

ITERASJONER FØRER TIL EN ENKEL BRUKEROPPLEVELSE

I en iterativ tilnærming med 6 designsprints har vi laget flere wire-flows og testet dem. Vi har finpusset brukergrensesnittet for hvert skjermbilde og fjernet grensesnittkomponenter for å redusere kompleksiteten. Hver gang har vi testet designene for å sikre at vi ikke har gått for langt.

Brukerundersøkelsene som ble utført i de foregående fasene, var nyttige for å gjøre brukergrensesnittet for selvbetjente kasser enkelt. Korte utsagn setter for eksempel transaksjonsdata i sammenheng, og brukerne opplever klarhet.

Illustrasjoner for å veilede brukere av selvbetjeningsterminalen for bensinstasjoner

STØTTE TIL UTVIKLING

Innebygde systemer har spesifikke maskinvareegenskaper, og disse ble tatt i betraktning i UX/UI-designprosessen. UX/UI-designet gjenspeiler maskinens utseende og tar hensyn til skjermens spesifikasjoner.

Vi gjorde det enkelt for utviklerne å implementere brukergrensesnittet til selvbetjeningsterminalen ved å utarbeide et designsystem. Nå bruker de designsystemet til å vedlikeholde og oppdatere systemet på egen hånd.

Brukergrensesnittdesign for et innebygd system der brukerne velger betalingsmåte i selvbetjente kasser
Detaljer om brukeropplevelsen der brukerne sender inn kortopplysninger i selvbetjeningsgrensesnittet
Design systm showing the UI components of the self checkout for petrol retail including buttons, graphics and states

CAR PLAY-APPEN FULLFØRER BRUKEROPPLEVELSEN

For å komplettere kundeopplevelsen har vi utviklet en car play-applikasjon. Det er en app for biler, og den registrerer automatisk når du kjører inn på en bensinstasjon. Den vet også hvilken pumpe du har stoppet ved. Alt du trenger å gjøre, er å fylle bensin og kjøre videre.

Car Play-appen integrerer oppdagelse av bensinstasjoner, navigasjon og tanking. Det reduserer belastningen på butikkens POS-system og gjør det enkelt for brukerne å fylle drivstoff.

Bilens instrumentpanel med car play-app-grensesnitt for bensinstasjonskjede

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.

Ikonet for Car Play-appen i dashbordet
User interface options for selecting fueling details in car play app
Car play UI design while user is fueling at petrol station
Ui-design for transaksjonssuksess-skjerm i car play-app for bensinstasjon
Brukeropplevelsesdesign for mobilapplikasjon for bensinstasjon med bilens dashbord i bakgrunnen

DESIGN AV MOBILAPP-KONSEPT

Med utgangspunkt i alt det tidligere designarbeidet gjennomførte vi ytterligere to UX/UI-designsprints for å foreslå en fremtidsrettet brukeropplevelse for en mobilapp for detaljhandel. Den samler alle elementene i kundereisen.

Mobilappen er en viktig komponent i lojalitetsprogrammer og i detaljhandelens datamodell. For kunden gir den nye muligheter til å få mest mulig ut av gjentatt bruk av bensinstasjonene. Brukergrensesnittet gjenspeiler appens visjonære natur.

Fem Ui-design for mobilapplikasjon for bensinhandel fra Sveits
Designelementer

A COMPLETE CUSTOMER EXPRIENCE FOR GAS STATIONS

Alle applikasjonene vi har utviklet, jobber sammen for å skape en helhetlig kundeopplevelse på bensinstasjoner. Selvbetjeningsapplikasjonene avlaster kassapersonalet i butikken, slik at de kan gi kundene bedre service.

Brukeropplevelsen er den samme fra app til app, men vi har tilpasset hver enkelt app til å gjenspeile begrensningene i innebygde systemer eller regelverket som gjelder for bilavspillingsapper. Brukergrensesnittet løfter merkevaren og posisjonerer kunden som en innovativ aktør innen bensinhandel.

UX-designbyrået vårt leverte den manglende ekspertisen innen brukeropplevelsesdesign til utviklingen av hele spekteret av digitale produkter. For å levere en komplett tjeneste reiste vi til Sveits for å utføre brukerundersøkelser og forstå den unike konteksten.

RESULTATER

Fullstendig dekning av kundeopplevelsen

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

Sanntidsstøtte til utviklere under implementering