Produktutvikling og UX design

Slik fikk vi nrksuper.no til å bli den viktigste nettportalen for barn

“Den viktigste nettportalen”

“NRK Super skal ha læring som grunnverdi med utgangspunkt i barnehagens rammeplan. NRK Super skal bygge opp under barns kreativitet og vitebegjær. Barn skal oppleve mestring, begeistring og utfordres til læring.

Prosjektleder: Ken Håkegård, Designutvikler og UX: Lillian Hansen. Designutviklere: Geir-Inge Løvstad, Sigmund Øvrum, Anne-Marie Haugestad. Grafisk Designer: Øyvind Johannesen. På dette prosjektet hadde vi også innleide konsulenter og lånte resursser.

Viktig å påpeke: i NRK Super jobbet vi aldri isolert. Vi jobbet alltid på tvers av fagfelt og redaksjoner og det var mye fokus på samskaping og inkluderende prosesser.

Mine ansvarsområder

Brukerinnsikt, brukerinvolvering, analyse og hypoteser. Konkurrentanalyse, konseptutredning, konseptutvikling. interaksjonsdesign, prototyping, observasjoner, brukertesting, brukskvalitet og frontendutvikling.

Metoder og teknikker: Personas, scenarioer, hypoteser, klikkbare prototyper, brukertesting.

Noen av mine bidrag og hvilken verdi det ga

Brukerinnsikt, produktutforskning, konkurrentanalyse og benchmarking.
Hvilken verdi ga dette? Denne innsikten sikret at det nye designet dekket mangler og udekkede brukerbehov i dagens marked.

Gjennomgang, rydding, videreutvikling og optimalisering av eksisterende navigasjon, funksjonalitet, interaksjon og rammeverk.
Hvilken verdi ga dette? Det avdekket mangler og behov i dagens løsning. ga grunnlag for å etablere krav, sette føringer og utvikle nye retningslinjer og prinsipper for brukergrensesnitt. Retningslinjene sikret helhetlige og sømløse brukerreiser av høy kvalitet og en trygg opplevelse for barna.

!nformasjonsarkitektur: gjennomgang, rydding og sortering av eksisterende innhold og undersider. Brukertesting av eksisterende innhold og design.
Hvilken verdi ga dette? Alle undersider og alt innhold var wnhwtlig, brukersentrert møtte nye krav til brukergrensesnitt og av høy kvalitet.

Kontinuerlig brukertesting, brukerundersøkelser og feltobservasjoner.
Hvilken verdi ga dette? Dette sikret at brukerreiser, navigasjon, interaksjon og design var så intuitive og brukervennlige at
barn ned til 4 år klarte å navigere over hele nettportalen og løse oppgaver – uten voksenhjelp.

Dette minimerer også risiko ift publsering, fordi vi allerede vet at dette er noe sluttbrukeren vil ha.

Ansvarlig for brukerinvolvering, brukertesting og observasjoner – kombinert med design thinking.
Hvilken verdi ga dette? Dette ledet til nyskaping og innovasjon, noe som var viktig for NRK, som på denne tiden av mange ble oppfattet som litt “nedstøvet” og utdatert.

Brukersentrert design skaper produkter brukerne elsker

Brukersentrert tilnærming er en metodikk innenfor UX design som fokuserer på å identifisere og forstå brukernes behov, problemer og ønsker for å sikre at det utviklede produktet løser reelle problemer og skaper verdi.

Når du involverer brukeren i alle stegene av desiognprosessen sikrer du at produktet møter brukerens faktiske behov. Risiko blir minimert betraktelg og dere utvikler et produkt som kunden vil ha og kommer til å bruke.
Tidlig validering av ideer og hypoteser hjelper med å identifisere potensielle fallgruver og forhindrer kostbare feil under utvikling og lansering.
Fremmer innovasjon, nyskaping og verdiskapning ved å oppmuntre til utforskning av nye ideer og tilnærminger. Gjerne inkluderer interessenter i denne prosessen.

Utrag fra ny strategi: Barn skal taes seriøst som målgruppe og når de besøker nrksuper.no skal de være trygge og selvstendige. De skal klare navigere, løse oppgaver, se sine favorittserier i nett-TV, høre på nett radioen, spille spill (osv) på egen hånd – uten å måtte be om hjelp fra en voksen.

Kunne vi jobbe videre med eksisterende design?

Ikke bare var det vakkert, det var også svært barnevennlig og kjønnsnøytralt.

Nedenfor ser du eksisterende design på nrksuper.no. Jeg og min prosjektleder jobbet tett med Qvisten under utviklingen av dette universet. Ikke bare ble det det en suksess visuelt, det var også med på å styrke merkevaren NRK Super fordi vi brukte samme design i vignetten til Barne-TV.

Dessverre oppdaget vi fort at dette designet egnet seg mer på TV enn det det gjorde som inngangen til Norges største nettportal for barn. Hvor er hovednavigasjonen? Hvor kan jeg se nett-TV? Designet speilet NRK Supers daværende strategi: barn skal utforske, oppdage og være nysgjerrig. Det skulle vise seg at denne strategien ikke var overførbar iht navigasjon i en nettportal med mange undersider.

Innsiktsfasen

Kvantitativ brukerinnsikt

Google analytics: Analyserte brukerdata og adferdsmønster for å finne ut: Hvilke sider gikk de på? Hvor lenge var de på de forskjellige sidene? Hvilken side var de på da de valgte å forlate? Hvor er smertepunktene? Hvilke side var de lengst på? Hvordan navigerer de?

Mouse click heatmap og eye track heatmap Denne metoden brukte vi for å validere noen av stedene vi mistenkte smertepunkter (knyttet til navigasjon og interaksjon).

Brukerdata fra Google Analytics gjorde meg oppmerksom på uregelmessigheter ift hvordan barn navigerte. Det virket som om de ikke brukte toppmenyen.

Jeg fulgte opp med mouseclick heatmap og fikk bekreftetmin teori: barna bruker ikke toppmenyen når de navigerer. Og jeg måtte finn ut årsaken.

Konkurrentanalyse

Problem: Jeg hadde ikke nok målgruppeinnsikt til å gjennomføre konkurrentanalysen som en 4 åring (med lav digital kompetanse).

Slik løste jeg det: Tilbrakte en dag i barnehage og fikk 4-årimgene til å utføre konkurrentanalysen – mens jeg observerte og noterte.

Konkurrentanalyse: Her fikk jeg barn til å utforske konkurrerende nettsider, produkter og tjenester – i Norge. Analysen av tilsvarende tjenester i europa USA og Asia tok jeg meg av.
Benchmarking: Her sammenlignet jeg (navigasjon, funksjonalitet, nivå av brukertilpasning, innhold) NRK Supers eksisterende nettportal med konkurrerende aktører
Gap-analyse: Hensikten her var å avdekke udekkede brukerbehov og mangler i markedet.

Funn fra konkurrentanalysen viste hull i markedet for målgruppen

De viktigste funnene fra konkurrentanalysen var at ingen barneportaler var helhetlige. Startsidene var vanligvis universelt utformet og brukersentrert, men undersidene hadde ofte annen navigasjon og grafikk. Lyd kom og lyd gikk. Noen undersider hadde masse tekst, andre undersider hadde plutselig tekst i et annet språk og voice-over på engelsk.

Hvordan kunne NRK bruke disse funnene til sin fordel – og styrke sin posisjon i markedet?

Ved å skape verdens første nettportal for barn som er så gjennomført og brukervennlig at selv en 4-åring klarer navigere rundt uten hjelp fra en voksen.

Egen side til De Voksne

Vi laget egen side til foreldre og foresatte. “For de voksne” inneholdt oversikt over alle undersider og innhold på nrksuper.no, samt hvilken verdi de ga til barna.

Observasjoner, empati og aktiv lytting.

Hva gjør dere på NRK Super?

(Hvilke behov har de? Hvilke ønsker? Bruker de toppmenyen? Søkefelt? Hvordan navigerer de? Hva savner de på NRK Super?)

Favoritten til guttene var kometkameratenes spill og “Hvem har bæsja”. Jentene likte ingen tradisjonelle nettspill – kun aktiviteter som for eksempel Bakespillet mitt. Evt å se musikkvideoer på Pling Plong. «Franklin og Fergy og Sauen Shaun» – svarte alle da jeg spurte hva de likte minst på nrsksuper.no.

Hva er din favoritt nettside – og hvorfor? (Hvordan navigerer de på de andre nettsidene osv) Frøkna på bildet viser meg en av sine favoritt aktiviteter å kle på en prinsesse.

Hva er åpenbare emosjonelle triggerne?

Så langt hadde jeg lært at en 4 åring i utgangspunktet ikke er interessert i det du har designet hvis hen ikke blir følelsesmessig involvert (påstand bekreftet av Google Analytics). Samt at terskelen for å avslutte en økt er lav – hvis de plages og brukbarheten er dårlig. Til og med hvis de ikke plages, men bare kjeder seg. For at den nye nettportalen skulle bli en suksess var det viktig å avdekke emosjonelle trigger:

Når begynner de å kjede seg?
Hva frustrerer dem?
Hva gjør de glade, engasjerte og motiverte?

Personas

– basert på funn fra innsiktsfasen

Aksel 4 år

Personlighet: Utadvendt – en av gutta. Spiller fotball og er opptatt av å konkurrere og vinne.

Liker: Bæsj, fotball, biler, tog, dinosaurer og ikke jenter.

Liker å gjøre på nettet: Spille spill, ting som har med fotball og bæsj.

Liker ikke: jentelus, dukker og sånn.

Mål: Konkurrere og prestere

Utfordinger: Han får kun bruke data i helgene. Moren vil at han skal prioritere lekser. Kjeder seg fort.

Lise Lotta 5 år

Personlighet: Lise er stille, forsiktig, pliktoppfyllende, nysgjerrig, takknemlig og glad.

Interesser: Prinsesser og glansbilder. Og så liker hun se på – særlig to – musikkvideoer på nrksuper.no. De hører hun på mange ganger per dag.

Liker å gjøre på nettet: Se musikk videoer på nrksuper.no. Kle på spill.

Mål: Kose seg og bare ta det med ro. Se musikkvideoer. Kle på spill.

Utfordinger: De har ikke data hjemme så Lise har lite erfaring med data og internett.

Jack 4 år

Personlighet: Veldig ivrig, åpen, sårbar og snill.

Interesser: Bæsj, tog, dinosaurer, biler. Vil veldig gjerne brukerteste for meg, men jeg må veilede han.

Liker å gjøre på nettet: Vet ikke. Han har ikke så mye erfaring.

Mål:Lære hvordan bruke internett. Vil veldig gjerne spille togspill.

Utfordinger: Lav teknisk kompetanse, Han har ikke datamaskin hjemme. Foreldrene har ingen interesse i teknologi.

Skisser vi ikke gikk for

Informasjonsarkitektur – Content Edit

Funn fra innsiktsfasen, feltobservasjoner og eksisterende design

Retningslinjene vi utarbeidet for å sikre konsekvent, intuitivt og brukervennlig brukergrensesnitt

– i dag kalles de interaction design principles

1. (Accessibility) Alle aktive klikkområder må aktivere en stemme ved musover som forklarer funksjonen (Eks: ”Gå til spill”).
2. (alt-tekst) Alle aktive klikkområder må aktivere en tekst ved musover som kan leses av målgruppa.
3. (System status): Der hvor innlasting av et objekt kan ta tid skal det alltid være en preloader.
4. (Consitency) Preloaderen skal være lik over alt slik at brukeren raskt kjenner igjen + forstår funksjonen.
5. Preloaderen skal ha både stemme og tekst, i tillegg til animasjon
4. (Consistency) Hovednavigasjonen/menyen skal alltid befinne seg på samme sted uansett hvor brukeren befinner seg.
5. Det skal alltid være tydelig for brukeren hvordan hen
a. Kommer til hovedsiden vår
b. Kommer til hovedsiden for den aktiviteten hun har valgt (Spill, Nett-TV, aktuell programside).

Etterhvert kom flere regler som omhandlet constrains:

Navigasjon

I forrige designprosess konkluderte vi med at vi måtte bruke logoer istedenfor tekst siden de små barna ikke kan lese. I denne prosessen oppdaget jeg at de små barna ikke skjønner logoer heller.

..og dette funnet dannet grunnlaget for navigasjonsikonene:

Tidlig skisse. Vi ønsket å skape et univers for barna. Vi ønsket at det skuille føles levende. Derfor så designet var grafiske designer Øyvind flere ikoner til startsiden. Redaksjonen var superfornøyd men jeg stakk til en barnehage og brukertestet, for å være sikker. Det skulle vise seg at barna ikke skjønte at fem av ikonene tilhørte navigasjonen, og var hovedmenyen deres. En gutt satt kun og klikket oppi dammen, han forventet at noe skulle skje når han klikket på den. En annen klikket bare på vinduene i tårnet – uten av noe skjedde. Da de – endelig – tilfeldigvis klikket på navigasjonsikonene som faktisk var interaktive, skjønte de ikke noe, for plutselig var de tatt med til en annen øy