Flybussen trengte bistand til å designe en digital løsning med felles innholdsløsning, rutesøkfunksjon og billettbestillingssystem basert for prinsippet “mobile first”

Eksisterende løsning for billettsalg og reiseplanlegging var ikke så gammel, men veldig lite brukervennlig og vanskelig å bruke på mobil. Så vi fikk oppgaven med å designe ny digital tjeneste for Flybussen med billetsalg, reiseplanlegger, innlogging, brukerprofiler, felles innholdsløsning (mm) etter «mobile first» prinsippet.

Flybussen hadde gjennomført et omfattende forprosjekt, og vi skulle bruke innsikten og prototypen fra forprosjektet som utgangspunkt. Til tross for at jeg – som alltid – avdekket mange smertepunkter og logiske brister i brukerreisen til prototypen, så ga den oss en effektiv start

Jeg var operativ UX-lead og interaksjonsdesigner, med ansvar for hele designprosessen – fra innsikt og konseptutvikling til implementering.  Jeg samarbeidet tett med et tverrfaglig team bestående av scrum master, tjenestedesigner, utviklere, produkteier, prosjektleder og interessenter fra Flybussen.
Vi arbeidet smidig (Scrum) med to-ukers sprinter, og jeg fasiliterte aktiviteter som:
– Innsikts- og idéworkshops
– Løpende designjusteringer basert på brukertester
– Sprint reviews og designpresentasjoner for interessenter .

Jeg fungerte som bindeledd mellom forretning, teknologi og sluttbruker, og sikret kontinuerlig forankring i prosjektets mål: økt salg gjennom en enklere brukeropplevelse.

Prosessrammeverk: Smidig/ Scrum. Daglige Stand-Ups, Backlog raffinering, Sprint planning, Sprint Review og feedback / retrospektiv. Verktøy: Azeture Devops.

Det fantastiske teamet bak flybussen.no

Stein-Inge: Teknisk Ansvarlig, Erik: Utvikler, Ståle: Prosjektleder, Harald: Produkteier, Sara: Smidig Coach,Christian: Utvikler, Monika: Funksjonell Ansvarlig, Lillian: Ansvarlig designer UX/UI og visuelt design, Natalia: Tjenestedesigner, Arash: Salg.

Selv om denne mini casen bare en liten del av Flybussen prosjektet, så hadde den stor betydning for resultatet:

Reisende som prøvde kjøpe billetter online avbrøt kjøpet i betalingsdelen.

Forretningsproblem

Lange køer, forsinkede busser og stor pågang hos kundesupport

Passasjerer som skulle reise til og fra flyplassen med Flybussen foretrakk å kjøpe bussbillett direkte hos sjåføren, dette førte til kø hos bussjåførene, forsinkede busser og misfornøyde kunder. De som forsøkte kjøpe billetter online måtte ofte ringe kundesupport for å få hjelp til å fullføre kjøpet. Dette førte til stor pågang på kundesupport

FLYBUSSEN FAKTA

problem løsning prototype prosessen

Brukerproblem

Den eksisterende løsningen + eksisterende prototype for reiseplanlegging og billettsalg førte til frustrasjon, avbrutte kjøp og kø ved fysisk billettsalg. Reisende som var klare for å betale ble møtt av kompliserte krav for å opprette passord, uforståelig label tekst og ekstra felt – dette skapte såpass mye kognitiv belastning, frustrasjon og stress at de avbrøt kjøpet.

Løsning

Vi redesignet kjøpsflyten etter prinsippet mobile first og “resultatorientert design” – med tydelig fokus på kundens mål – å betale for billetten – og forretningsmål (konvertering) – å selge billetter.
Vi designet en ny side som kunden ble tatt til etter fullført løp: “confirmation page”, og flyttet alle overflødige steg fra betalingsdelen til confirmation page.

Resultater

Flybussen økte salg av billetter på nett med 18%
Supporthenvendelser knyttet til bruk av tjenesten opphørte.
Takknemlige og fornøyde kunder – styrkede relasjoner.
Mer presise busser og bussjåfører som kunne fokusere mer på hovedoppgaven sin: å frakte reisende trygt og effektiv til og fra flyplassen.
En strålende fornøyd produkteier som ønsket være min referanse.

Hva hadde jeg gjort annerledes i dag?

* Bremset bruken av rosa profilfarge i interaksjonsdesignet, den mister impact hvis den brukes for mye.
* Ikke brukt rosa farge til tekst eller tekstbakgrunn- for dårlige kontraster.
* Brukt mer tid på helhetlige kundereisen som for eksempel.
* Hadde vært ivrig på å få inn progressive disclosure. Men grunnen til at jeg ikke brukte det sist gang var resultater fra brukertesting.

Verktøy og metoder

Design Thinking 
Scrum
Journey Mapping
 Jobs-to-be-Done (JTBD) 
Personas & Scenario Mapping
Prototyping og brukertesting
 Geriljatesing 
Workshops 
Samskaping og deltakende designprosesser
 Presentasjoner
Heuristisk evaluering
BASIC-rammeverket (for kvalitetssikring)

Læring

kommer

(påbegynt) VERKTØY OG METODER

problem løsning prototype prosessen

Forretningsmål og konkurranseanalyse

Denne delen setter setter retningen og forteller hvilke funksjoner jeg skal funksjoner. Med hvem:

Interessentintervjuer
Samtaler med interessenter for å innhente innsikt om forretningsmål, utfordringer og prioriteringer. 

SWOT-analyse:  Kartlegging av virksomhetens styrker, svakheter, muligheter og trusler for å tilpasse UX-strategien. 

Markedsanalyse:  Forståelse av markedet, inkludert kundesegmenter, trender og økonomiske faktorer. 

Business Model Canvas:  Visualisering av virksomhetens verdiforslag, kundesegmenter og inntektsstrømmer for å sikre at UX støtter kjernevirksomheten.

Konkurrentanalyse:
Gjennomgang av konkurrenters produkter, tjenester og nettsider for å identifisere forbedringsmuligheter og sikre at Flybussen fikk en løsning som skilte seg ut fra konkurrentene.

Benchmarking:
Sammenlignet Flybussen med bransjestandarder og konkurrenter. 

SWOT-analyse:
Analyse av konkurrenter for å forstå deres styrker, svakheter, muligheter og trusler. 

Gap-analyse: Identifisering av udekkede brukerbehov og hull i markedet som produktet kan fylle.

PROBLEM

problem løsning prototype prosessen

Hva var problemematisk med betalingsdelen?

Når kunden endelig har funnet riktig fra lokasjon, til lokasjon, tidspunkt og antall reisende, er han nå klar til å betale og tykker derfor den røde knappen han tror er “bekreft betaling”. Bekreft betaling viser seg å være en “videre” knapp, og han blir nå tatt til en side (skisse nedenfor) som ber kunden om å gjøre «mye annet rart» før kunden fikk betale. Dette kompliserte prosessen såpass mye at mange kunder avsluttet kjøpsprosessen i ren frustrasjon.Og i enkelte tilfeller var det ikke mulig for kunden å fullføre handelen, på grunn v alle stegene som var påkrevd før de fikk kjøpe billett.

Hvordan kom vi fram til dette?

Gjennom heuristisk evaluering, observasjoner, brukerintervjuer og funn fra brukertester avdekket vi at checkout-flyten inneholdt for mange steg og distraksjoner som hindret brukeren i å fullføre kjøpet.

Kjell, 34 år Bilmekaniker

Kjell er en håndverker fra Økern i Oslo. Han har egen bil, så han bruker aldri kollektivtransport innen Oslo.Du få gangene han ikke kjører sel, spanderer han på seg en taxi eller Uber. Det er kun når hann skal ut og reise at han tar kollektivt, da reiser han alltid med Flybussen. Han synes det er altfor mye styr å ta tog fra Jernbanetorget osv. Kjell kjøper alltid billett direkte hos sjåføren for å spare tid.

Utfording: Har ikke tålmodighet eller interesse i å sette seg inn i dårlige brukergrensesnitt.

Dette følte brukerne som problematisk med prototypens betalingsdel

Disse la grunnlaget for designendringene

Ingen avgangstid på billetten skapte usikkerhet: “Når går bussen? Jeg skal rekke et fly!”
Brudd. 3.3.4 Forhindring av feil (juridiske feil, økonomiske feil, datafeil) (Nivå AA)

Utydelig ledetekst: “e-post adresse”? Brukerne forsto ikke hva som skjedde etter utfylling.
Brudd: WCAG krav 3.3.2. Ledetekster eller instruksjoner   Clear hierarchy and structure. Tilgjengelighet

Hvis bruker valgte “registrer brukerkonto” måtte hen lage passord som fulgte 4 passord regler.
Brudd: Brukersentrering og kontekst for use. Minimize cognitive load. Tilgjengelighet.

I prototypen var det ikke mulig å kjøpe billetter uten (1) å logge inn eller (2) å opprette profil hos flybussen.no.
Brudd: Fleksibilitet og effektivitet. 2.4.5 Flere måter (Nivå AA). Brukersentrering. Tilgjengelighet.

 Ekstra kostnad på 5 kr for SMS-billett skapte usikkerhet: hvor kommer billetten hvis jeg ikke betaler for sms?
Brukersentrering og kontekst for use. WCAG krav 3.3.2. Ledetekster eller instruksjoner. Tilgjengelighet

Totalpris uten stykkpris førte til forvirring: “358 kr for to voksne – hvor mye koster én billett?”
Brudd: 3.3.4 Forhindring av feil (juridiske feil, økonomiske feil, datafeil) (Nivå AA). Recognition Rather than Recall.

Påtvunget avhuking for brukervilkår opplevdes som stressende “hva er det jeg godkjenner nå?” Brudd: Brukersentrering og kontekst for use.

LØSNING

problem løsning prototype prosessen

Betalingsdelens viktigste oppgave er å la kunder effektivt kjøpe billetter

Vi ryddet vekk alt støy og beholdt kun de stegene som fremmer salg

Funn som har ført til designendringer

“Når går bussen?”
– Nytt design informerer om både avgangstid og linjenumer.

“Hva skjer hvis jeg fyller ut feltet e-post?”
– Vi skrev presis og beskrivende ledetekst over utfyllingsfeltet.

“Ikke mulig å kjøpe billetter uten brukerprofil?”
– Vi gjorde det mulig å fullføre kjøpet uten å logge inn eller registrere seg som bruker.

“Hvor finner jeg tilbake til billetten jeg har kjøpt?”
– Vi gjorde det tydelig hvordan de mottar billetten: “hvilken e-post adresse skal vi sende billettene til?”

“Hva godkjenner jeg når jeg huker av?”
Vi fjernet avhuking for brukervilkår og la til en link – lettere å skjønne at det kun er formalia.

“Hvor mye koster en billett? Betaler jeg riktig?”
Totalpris inkludert spesifisert med pris pr billett og antall billetter.

Confirmation page – hit kommer kunden når hen har betalt for billettene

– her har kunden full oversikt over sin reise

Gir kunden oversikt

Denne siden skal sikre at kundens billett(er) er lett tilgjengelige.

Reiseinformasjon samlet på et sted

Her finner kunden all relevant informasjon som omhandler billettkjøp og kommende reise.

Rekruttere nye brukere

Flybussen skal bruke denne siden til å rekruttere nye (registrerte) flybussen.no brukere. Her kant du enkelt opprette ny bruker og du kan lese om fordelene ved å være registrert bruker osv.

Her kan du opprette profil

Vi flyttet “opprett profil” til Confirmation page (denne siden). og fjernet passord reglene slik at kunden kan bruke favoritt passordet ditt.

Vil du ha billett på sms?

Ønsker kunden billetten sent via sms? Herkan hen bestemme seg for det – uten å føle stress.

Billett med QR-kode

Ønsker du å laste ned billetten selv? Det gjør du på denne siden.

Flybuss Spinner

Laster-indikator var ikke en del av bestillingen men en gave fra meg til den hyggelige Flybuss gjengen. Jeg illustrerte og animerte den i Adobe Animate.

PROSESSEN

problem løsning prototype prosessen

RESEARCH/ DISCOVERY

Aktivitet: Heuristisk evaluering og observasjon av brukere i kjøpsprosessen. Med hvem: Tjenestedesigner, produkteier (Flybussen).  Hvorfor: For å identifisere barrierer og støy i betalingsflyten.  Resultat: Funn som dannet grunnlaget for hypotesen: “Reisende avslutter i betalingsløpet/check out fordi oppgaver som ikke har direkte tilknytning til betaling oppfattes som støy og hindringer.”

Aktivitet: Brukerintervjuer og dataanalyse fra kundeservice.
Med hvem: Faktiske reisende og ansatte på kundeservice. Hvorfor: For å forstå hva som skjer og hvorfor det skjer.  Resultat:Forståelse for at effektivitet og sømløse brukerreiser som er tilrettelagt kontekst for bruke, er viktig for reisene.

Aktivitet: Konkurrentanalyse og benchmarking mot ledende aktører som Ruter og Vy, samt andre aktører i ut-og innland
Hvorfor: Gjennomgikk konkurrenters produkter, nettsteder og tjenester for å identifisere deres styrker og svakheter. Dette steget er kritisk for å sikre at Flybussen kunne levere en like god eller bedre digital opplevelse.
Resultat: Funn om bransjestandarder og best practices for checkout-design, listefremvisning osv.

En kvantitativ undersøkelse med over 100 svar avdekket antagelser før prosjektstart. En prototype ble deretter utviklet og testet på brukere (to iterasjoner) og dannet grunnlaget for design av den nye løsningen.

DEFINE AND SCOPE

Aktivitet: Utviklet personas og kundereiser for typisk bruker. Hvorfor: For å konkretisere behov og kontekst. 

IDEATION/KONSEPT/PROTOTYPE/VALIDATION

Aktivitet: Regelmessige workshops med interessenter for å definere nye effektmål og prioritere funksjoner. Med hvem: Prosjektleder, produkteier, utviklere, forretningssiden. Hvorfor: For å forankre prosjektets mål og sikre felles forståelse. Resultat: Felles enighet om at kjøpsflyten skulle være kjernemål for løsningen.

DESIGN/PROTYPING/USERTESTING/ITERATION

Interaksjonsdesign: Skapte nye og sømløse flyter med tydelig progresjon, isolerte oppgaver og forenklet informasjonsstruktur.
Visuell design: Utviklet en robust og inkluderende “mobile first”- opplevelse med fokus på brukerkontroll, effektivitet og trygghet.
Prototyping: Klikkbare prototyper i Figma testet ukentlig med brukere og interessenter.

Aktivitet: Hyppige brukertester (hver 14. dag), geriljatesting på Oslo Bussterminal og A/B-testing av betalingsside. Resultat: 80 % raskere kjøpsfullføring og ingen avbrutte kjøp.

TECHNICAL IMPLEMENTATION

Samarbeidet tett med utviklere under sprint reviews og daglige stand-ups.
Designoverleveringer i Azure DevOps og Zeplin.
Kontinuerlig validering og no justering av design i produksjon.

Nytt design og ny look and feel

Hvordan landet jeg et design som var så forskjellig fra prototypens look and feel?

Vi ønsket å tenke nytt og vi ønsket å skille oss ut. Vi ønsket at designet skulle formidle at Flybussen er folkelig, inkluderende, munter, varm, uhøytidelig og imøtekommende, et selskap med hjerte og sjel.

Jeg designet forskjellige forslag som alle ble godkjent av Flybussen, deretter fikk jeg Flybussens kunder til å stemme på det designet de likte best. Utvalgt design fikk 90% av stemmene så vi hadde en tydelig vinner:

Utlistningsside – nyheter

Hva gjør jeg når jeg tror at løsningen er nok brukervennlig?

Jo, da kontakter jeg verdens beste mamma (da 81 år) og får henne til å brukerteste den. Rapport fra brukertestingen delte jeg med mine Facebook venner og med team og Flybussen.

Flyt: Kunde skal kjøpe tur-retur billett på mobil.

Påbegynt scenario: Du skal reise fra Majorstuen. Du skal reise den 17. klokken 04:06.

Oppgaveformat i matematikk for Utdanningsdirektoratet

Selv om denne mini casen bare en liten del av Flybussen prosjektet, så hadde den stor betydning for resultatet:

Reisende som prøvde kjøpe billetter online avbrøt kjøpet i betalingsdelen.

Forretningsproblem

Lange køer, forsinkede busser og stor pågang hos kundesupport

FLYBUSSEN FAKTA

problem løsning prototype prosessen

Brukerproblem

Løsning

Resultater

Hva hadde jeg gjort annerledes i dag?

Verktøy og metoder

Læring

(påbegynt) VERKTØY OG METODER

problem løsning prototype prosessen

Forretningsmål og konkurranseanalyse

PROBLEM

problem løsning prototype prosessen

Hva var problemematisk med betalingsdelen?

Hvordan kom vi fram til dette?

Kjell, 34 år Bilmekaniker

Dette følte brukerne som problematisk med prototypens betalingsdel

LØSNING

problem løsning prototype prosessen

Betalingsdelens viktigste oppgave er å la kunder effektivt kjøpe billetter

Funn som har ført til designendringer

Confirmation page – hit kommer kunden når hen har betalt for billettene

Gir kunden oversikt

Reiseinformasjon samlet på et sted

Rekruttere nye brukere

Her kan du opprette profil

Vil du ha billett på sms?

Billett med QR-kode

Flybuss Spinner

PROSESSEN

problem løsning prototype prosessen

RESEARCH/ DISCOVERY.tatsu-rkmkLpf30lg.accordion-head{color: rgba(0,0,0,1) ;background: rgba(228,228,228,1);}

DEFINE AND SCOPE.tatsu-H1EyLpf3Cll.accordion-head{background: rgba(236,236,236,1);}

IDEATION/KONSEPT/PROTOTYPE/VALIDATION.tatsu-BkHJI6f20xe.accordion-head{background: rgba(236,236,236,1);}

DESIGN/PROTYPING/USERTESTING/ITERATION.tatsu-SyLkUTM2Axx.accordion-head{background: rgba(236,236,236,1);}

TECHNICAL IMPLEMENTATION.tatsu-BJP1U6znRgl.accordion-head{background: rgba(236,236,236,1);}

Nytt design og ny look and feel

Hvordan landet jeg et design som var så forskjellig fra prototypens look and feel?

Utlistningsside – nyheter

Hva gjør jeg når jeg tror at løsningen er nok brukervennlig?

Jo, da kontakter jeg verdens beste mamma (da 81 år) og får henne til å brukerteste den. Rapport fra brukertestingen delte jeg med mine Facebook venner og med team og Flybussen.

Flyt: Kunde skal kjøpe tur-retur billett på mobil.

RESEARCH/ DISCOVERY

DEFINE AND SCOPE

IDEATION/KONSEPT/PROTOTYPE/VALIDATION

DESIGN/PROTYPING/USERTESTING/ITERATION

TECHNICAL IMPLEMENTATION