Flybussens billettsalg løsning

– slik gikk den fra kranglefant til teamplayer

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.                                                                                                                             Prosessrammeverk: Smidig/ Scrum. Daglige Stand-Ups, Backlog raffinering, Sprint planning, Sprint Review og feedback / retrospektiv. Verktøy: Azeture Devops. Oppgave: Design av nettside med reiseplanlegger, billettsalg (billettbestillingssystem) og felles innholdsløsning for flybussen.no, basert på prinsippet “mobile first”.

Kort om Flybussen og hva Flybussen trengte hjelp til

Flybussen er en kjent og kjær aktør og en sterk merkevare som har som mål å være den beste opplevelsen for å reise til og fra flyplassene i hele Norge. Flybussen trengte bistand til å utvikle en digital tjeneste som gjør det enklere for kundene å planlegge tur og bestille flybussbilletter online. Løsningen skulle være verdiskapende og merkevarebyggende og bidra til at forbrukerne velger å reise til-fra flyplassen med flybussen framfor andre aktører.

Kundene følte at dagens billettsalg løsning motarbeidet dem når de forsøkte kjøpe billett

Den gamle løsningen var såpass vanskelig å bruke at enkelte trengte support for å fullføre kjøpet, mens andre valgte å kjøpe billetter hos sjåføren, noe som skapte køer og forsinkelser.

Etter kick-off med kunden startet jeg med produktutforskning, med fokus på konkurrentanalyse og brukerundersøkelser.

Kort Om Forprosjektet

En kvantitativ undersøkelse med over 100 svar fra brukere over hele landet avdekket antagelser før prosjektstart. Deretter ble en prototype designet og testet på utvalgte brukere. Dette dannet grunnlaget for neste steg, hvor vår oppgave var å designe den nye løsningen basert på prototypen og innsikten fra forprosjektet. Vi endte med å gjøre mange flere endringer enn forventet.

Mål for den nye billettsalgløsningen

  1. Så enkel å bruke at flere kjøper billetter online.
  2. En felles plattform som kommuniserer reisetilbud og rutetabell.
  3. En felles plattform som kommuniserer på tvers av selskapene.
  4. En tjeneste som brukeren foretrekker.
  5. Enkel, brukervennlig og sømløs å bruke for reisende med Flybussen.
  6. Verdiskapende og merkevarebyggende slik at forbrukerne velger flybussen framfor andre alternativer.
  7. Samlende slik at eierne viser stolthet til tjenesten.

Nå en titt på endringene jeg og mitt team gjorde, samt forklaring på hvorfor vi gjorde det.

Nytt design og ny look and feel

Hvordan landet jeg et visuelt design som var rake motsetning fra prototypens look and feel?

Vi ønsket å tenke nytt og vi ønsket å skille oss ut. Gå vekk fra buss og transport, flytoget, VY og Ruter. Vi ønsket et design som var sentrert rundt følelser, omdømme, merkevarebygging og kunderelasjoner. Vi ønsket et design som tydelig viser at Flybussen er menneskelig, varm 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:

Konkurrentanalysen

  • Konkurrentanalyse innebærer å analysere konkurrenter for å forstå deres styrker, svakheter, strategier og markedsposisjoner. Dette hjelper med å identifisere muligheter og trusler i markedet, samt beste praksis og referansepunkter for UX-design. Dette steget er kritisk

Vy sitt startside design. Liker at det er enkelt og at de bruker klarspråk og første person en tall når de kommuniserer med brukeren. Men designet er litt dystert og grått og mangler visuelt hierarki, så jeg vet hvor jeg skal feste blikket. 

Vy sin utlistning etter rutesøk. Flere selskaper brukte dette designet., så det var en trend. Dessverre så klarte jeg miste bussen min pgav designet. Så jeg kunne ikke følge noen trend. 

Dette Svenska busselskapet ble den viktigste kilden til inspirasjon for meg og Flybussen.

 

Kommer snart..

Diverse best-of-the-best inspirasjon fra produktutforskningen og konkurrentanalysen..

Personas basert på dybdeintervju med 6 tidligere Flybussen kunder

Kjell, 34 år Bilmekaniker

Kjell, en håndverker fra Økern i Oslo, bruker aldri kollektivtransport i byen, men tar taxi av og til. Når han besøker familien i Grovfjord, reiser han med Flybussen til flyplassen. 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. Og egentlig ikke lyst til å slutte kjøpe billett direkte hos sjåfør.

1. Du har 20 sekunder på å skape et godt førsteinntrykk: Sømløs og enkel onboarding kan øke retention rate med 50%.  

Eksisterende design hadde følgende UX design prinsipp brudd:

Brukersentrering
    • Fokuser på brukernes behov og atferd.
    • Design med tanke på brukernes opplevelse, ferdigheter og kontekst.
Enkelhet:
    • Hold designet enkelt og intuitivt.
    • Unngå unødvendig kompleksitet og overflødige elementer.
Hierarki og prioritering
    • Organiser informasjon og funksjoner etter viktighet.
    • Bruk visuelle hierarkier som størrelse, farge og plassering for å veilede brukerens oppmerksomhet.
Problemer med eksisterende onboarding
  1. Designet er ikke brukersentrert eller tilpasset kontekst for bruk, ergo så er løsningen er vanskelig å bruke for folk i farten.
  2. Et statisk hero bilde dekker hele skjermen, og gir ingen hint om hvor kunden kan kjøpe billett eller om det er mulig å sjekke reisetider. Med andre ord er ikke informasjonen på startsiden organisert etter viktighet, I tillegg mangler forsiden visuelt hieraki.
  3. Hero bildet gjør løsningen mindre intuitiv, I tillegg har det ingen estetisk eller funksjonell hensikt så det er overfødig og burde fjernes.
Funn fra brukerundersøkelser

Jeg dybdeintervjuet 6 tidligere kunder og gjennom brukerintervjuene fikk jeg vite at kundene sjelden kjøpte billetter online fordi det tok for lang tid. Kundereisen var lite intuitiv og løsningen var ikke tilrettelagt mobil.

De gangene de brukte mobilløsningen var det fordi de ikke hadde tilgang til datamaskin. De var gjerne i farten og hadde dårlig tid. Flere av de jeg intervjuet hadde egen bil og  lite erfaring med å kjøpe billetter med app.

Slik løste vi onboarding problemet
  1. Vi satt brukeren I sentrum og tilpasset designet kontekst for bruk. Hero bildet ble fjernet og reiseplanleggeren/billettsalg delen løftet opp.
  2. Alle utfyllingsfelt vises, vi brukte kun progressive disclosure (trinnvis visning) på returbillett valget. Funn fra brukertesting viste at digitalt svake kunder foretrekker å se alle utfyllingsfeltene på forhånd. Fordi det forbereder dem på hva som kommer og de kan derfor ta stilling til hva annet måtte fylles ut.
  3. Dato og tidspunkt er ferdig utfylt med dagens dato og nå-tidspunkt (billett varer I 24 timer fra du kjøper den). Antall reisende er også ferdig utfylt med en person.

2. Når alle utfyllingsfelt har tydelige labels skrevet i klart språk, blir brukerne trygge på at handlingene de utfører er korrekte.

Eksisterende startfelt design har brudd på følgende UX design prinsipp og WCAG 2.1 retningslinje:

Gjenkjenning fremfor gjenkalling
    • Reduser brukerens behov for å huske informasjon.
    • Bruk kjente ikoner, symboler og designmønstre som brukerne lett kan gjenkjenne.
3.3.2 Ledetekster eller instruksjoner

Innhold som krever inndata fra brukeren skal ha synlige ledetekster som gjør at brukeren forstår hvordan skjema skal fylles ut.

Dette er problematisk med startfeltet i eksisterende prototype:

Første versjon har kun en ledeltekst “destinasjon” til to forskjellige inndata felt. De brukertester dette og brukerne skjønte ikke betydningen a “destinasjon”.  I siste protoype har de erstattet “destinasjon” med fra/til. Dette blir også feil fordi alle utfyllingsfelt skal ha tydelige labels som er synlige til enhver tid slik at brukeren trygt kan fylle ut alle felt uten å måtte tenke, huske eller bli usikker.

Slik løste vi problemet til reiseplanleggerens startfelt 

Hvert felt fikk eget label og labelteksten skrev vi i ujålete klarspråk: “Fra” og “Til”. De trenger bare se labelteksten når de fyller ut feltene, de trenger ikke huske. Alle utfyllingsfelt skal ha tydelige labels skrevet i klart språk, slik at brukerne enkelt kan fylle ut feltene uten å måtte huske eller bli usikker på om de gjør det riktig. Uerfarne brukere blir trygge og føler seg som digitale eksperter.

3. Gjør det enkelt for brukerne å fullføre viktige handlinger og la brukeren få bestemme passordet selv. 

Eksisterende betalingsfly har brudd på følgende UX design prinsipper:

Enkelhet:

Design appen slik at brukerne enkelt kan legge til transaksjoner, sjekke saldoer og lage budsjetter uten forvirring eller kompliserte trinn.

UX design prinsipp: Brukerens kontroll og frihet

La brukerne føle at de har kontroll over systemet og deres interaksjoner.

Dette var problematisk med betalingsflyten til prototypen

Når brukeren skulle kjøpe billett og var kommet til betaling var det ikke mulig å fullføre kjøpet uten å opprette profil hos flybussen.no samt å opprette passord med 4 passord regler.

Slik løste vi problemet til betalingsflyten til prototypen

Vi ga brukeren kontrollen tilbake og forenklet kundereisen slik at hen sømløst og effektivt kunne kjøpe billett:

  1. Vi gjorde det mulig for bruker å fullføre kjøpet uten å opprette profil.
  2. Vi fjernet passord reglene, slik at brukerne kunne bruke sitt favoritt passord.

Det skal være kort vei til målet og minst mulig friksjon på veien dit. Og ja, innloggingen var fortsatt sikker selv om reglene ble fjernet.

4. Utlistningene etter et rutesøk må være selvforklarende, kundene husker ikke alltid hva de nettopp søkte

Eksisterende utlistningene etter rutesøk har brudd på følgende UX design prinsipper:

UX design prinsipp: Gjenkjenning fremfor gjenkalling
    • Reduser brukerens behov for å huske informasjon.
    • Bruk kjente ikoner, symboler og designmønstre som brukerne lett kan gjenkjenne.
UX design prinsipp: Brukerens kontroll og frihet

La brukerne føle at de har kontroll over systemet og deres interaksjoner.

Dette var problematisk med utlistningene etter rutesøk i prototypen

Brukertesting viste at folk ikke skjønte utlistningene etter å ha gjort rutesøk (skisse til venstre). Hva betydde de forskjellige tallene? Hvilken distanse hadde de egentlig søkt? Hvorfor kunne de ikke bestille billett til en gitt avgang?

Slik løste vi problemene i utlistningene etter rutesøk

Det nye designet viser tydeligere fra-til holdeplass så de slipper være usikker på om de har søkt riktig.  Det viser også fra-til tidspunkt på de forskjellige rutene og det lar brukeren velge et gitt tidspunkt.

5. Pop-ups og dropdowns burde unngås da dette stresser, forvirrer og irriterer brukerne

Eksisterende utlistningene etter rutesøk har brudd på følgende UX design prinsipper:

Estetisk og minimalistisk design
    • Fjern unødvendige elementer som ikke tjener en funksjonell eller estetisk hensikt.
    • Hold designet rent og fokuser på det som er viktig.
Brukerens kontroll og frihet
    • La brukerne føle at de har kontroll over systemet og deres interaksjoner.

Scenario: Du skal legge til antall billetter og sjekke pris. Gammel (blått design) vs ny løsning.

Slik løste vi pop-up vindu over pop-up vindu problematikken

I det nye designet er dropdown vinduene byttet ut med en ny side når brukeren skal oppgi antall reisende. Brukeren bestemmer selv når siden skal lukkes, det vet hen på grunn av Xen i høyre hjørne. Handlingen er isolert og brukeren føler ikke stress,

Flybuss Spinner

Denne spinneren illustrerte + animerte jeg i Adobe Animate. Den dukker opp nårsider tar litt tid å laste eller at forbindelsen er dårlig.

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.

Hvorfor brukertester vi?      

Overordnet mål:
  • Økt brukskvalitet.
  • Økt billettsalg.
  • Minimere risiko for lansering av nye flybussen.no
  • Færre support henvendelser.

Min framgangsmåte er design thinking/ Lean UX inspirert, og går – kort fortalt – ut på å lete etter områder (deler av flyten) brukerne ser på som «problematiske». For så å la brukeren teste dette problemområdet aka guide meg til en bedre løsning.

Resultater/Funn

Ved å observere brukertestingen får du ekspert råd (brukerne er ekspertene) på hvordan forbedre design, interaksjon, kommunikasjon og brukeropplevelse. Med andre ord så brukes funnene til å optimalisere produktets design.

Evt så bekrefter brukertestingen at flyten funker og da kan kan vi hoppe videre til neste problem(område).

Jeg er ikke tilhenger av å intervjue testpersoner på dette stadiet, funnene blir ikke reelle da fordi intervjuobjektene ofte prøver å svare det de tror er riktig.

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

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

  Kunde velger dato og tidspunkt på desktop.

Utlistningsside

Om Lillian Hansen

Trenger du hjelp med digital kommunikasjon? Jeg kan hjelpe deg med å synliggjøre din bedrift, dine produkter & dine tjenester i Sosiale Medier & på digitale plattformer.

Kontakt
  • Lillian Hansen
  • (+47 ) - 932 - 66307
  • lillianhansen@hotmail.com