Blog Archives
Home / Blog Archives

Løsning for reiseplanlegging og billettsalg – Flybussen

Det fantastiske teamet bak flybussen.no Read More

Oppgaveformat i matematikk for Utdanningsdirektoratet

  • BAKGRUNN
  • MIN ROLLE
  • METODER OG VERKTØY
  • TEAMET

En av de mest samfunnskritiske oppgavene til Utdanningsdirektoratet er å utarbeide og gjennomføre eksamener og prøver. Årlig gjennomføres over 300 000 skriftlige eksamener i systemene og over 650 000 prøver. På grunn av krav om universell utforming av IKT løsninger, skaffet Utdanningsdirektoratet ny heldigital løsning for gjennomføring av eksamener og prøver. Den nye løsningen manglet funksjonalitet for å måle elevenes ferdigheter etter komnptansekrav i ny læreplan.

Mitt ansvar var å identifisere hvilken funksjonalitet som manglet, utvikle konsepter, designe løsninger og til slutt integrere ny funksjonaliteten i den nye gjennomføringsløsningen.

Operativ UX Lead og produktdesigner – ledet hele produltutviklingsløpet fra innsikt og konsepturvikling til teknisk implementering.

Prosessrammeverk: Lean UX, design Thniking, brukersentrert design, produktdesign, instruksjonsdesign. emosjonelt design, læringsdesign.

Verktøy: Confluence, Jira, Figma, Sharepoint.

Fra matematikksenteret:
Morten Svorkmo, Bård Vinje, Olav Dalsegg Tokle

Fra utdanningsdirektoratet:
Pedersen, Øyvind, Avdeling for eksamenstjenesten

 «Når du ikke er god i matte, skjønner du ingenting»

Forretningsproblem

Systemet sviktet men Utdanningsdirektoratet fikk skylden

Ny læreplan ble innført uten å kunne tilby lærebøker eller læremidler som var tilrettelagte. Dette resulterte i at blinde/sterkt svaksynte elever ble ekskludert og ergo så fikk de ikke like muligheter som andre elever. Det norske systemet sviktet, men Utdanningsdirektoratet fikk skylden og vi ble (blant annet) saksøkt av foreningen “Foreldre For Blinde Barn” flere ganger. Udir stod i fare for å få omdømmet svekkert så det var kritisk at den nye prøve- og eksamensløsningen og all ny funksjonalitet var universelt utformet og inkluderende.

Levende produktvisjon

Vi skal skape et fleksibelt, universelt utformet og engasjerende oppgaveformat som gjør det mulig for alle elever – uavhengig av funksjonsevner og faglige ferdigheter – å vise sin matematiske kompetanse på en rettferdig, visuell og motiverende måte.

Første versjon av denne visjonen var: “Vi skal lage et fleksibelt og universelt utformet oppgaveformat som gjør det mulig for elever i alle trinn å tegne diagram som del av oppgaven.” 

Hvorfor er en levende produktvisjon viktig?

  • Den sikrer retning i et komplekst prosjekt. En levende visjon gjør det enkelt for teamet å ta riktige valg når løsningene blir mange og veivalgene uklare. Den holder fokus på hva som faktisk skaper verdi for elever og lærere.
  • Den skaper felles forståelse og eierskap. Når visjonen utvikles og justeres i takt med innsikt og testing, blir den et verktøy for samling – ikke et dokument som støver ned. Tverrfaglige team trenger ett felles kompass.
  • Den gjør det mulig å prioritere smartere. En statisk visjon stopper læring. En levende visjon lar dere justere ambisjonsnivå, funksjonalitet og problemløsning etter hva dere ser fungerer i praksis.
  • Den sikrer brukerverdi over tid. Brukere endrer seg, teknologien endrer seg, og rammevilkår endrer seg. En levende visjon sørger for at produktet fortsetter å være relevant, inkluderende og motiverende.
  • Den støtter innovasjon og kvalitet. Når visjonen er i bevegelse, åpner den for å teste, skrote og forbedre uten å miste fokus. Det gjør at sluttproduktet blir bedre enn første idé.

KJAPT OVERBLIKK

problem  designprinsipper   prototype   process 
Forretningsproblem

Utdanningsdirektoratet

Noen av kompetansemålene i den nye læreplanen er at eleven skal ha følgende ferdigheter: «..kunne sette opp eller tegne tabeller, diagrammer, grafer og geometriske figurer.» I tillegg: «..kunne forstå og tolke organisert visuell informasjon, som tabeller, diagrammer, grafer og geometriske figurer…»

I TAO – den nye gjennomførngsløsningen – var det ikke noe oppgaveformat/items som lot eleven tegne diagrammer og grafer, med andre ord så fikk ikke utdanningsdirektoratet/studiested ikke målt elevene i disse kompetansekravene.

Uten dette formatet kunne de ikke gjennomføre nasjonale prøver eller ekseamne. 

–

Utdanningsdiraktoratet

Løsning

Vi kapte et fleksibelt, universelt utformet og engasjerende oppgaveformat som gjør det mulig for alle elever – uavhengig av alders trinn, funksjonsevner og faglige ferdigheter – å vise sin matematiske kompetanse på en rettferdig, enkel, visuell og engasjerende måte.

–

Resultat

  • Oppgaveformatet kunne brukes i nasjonale prøver og bidra til kvalitetsutvikling på alle nivåer i skolen og hjelper lærere med å følge opp enkeltelever og tilpasse opplæringen.
  • Oppgaveformatet ga lærerne nok grunnlag til å gi elever eksamen karakter.
  • Første i sitt slag i Norden – et dynamisk, universelt oppgaveformat i ny teknologi.
  • Automatisert tilrettelegging (generering av alt-tekst) for elever som bruker hjelpemiddelteknologi.
  • Støtter både grunnskole og videregående (delt i to alders- og kompetansenivåer).
  • Oppgaveformatet ble en favoritt blant elevene da de fremmet mestring og motivasjon gjennom mikrolæring og gamification.
1. Brukerproblem:

Elevene

Elever som ikke er stødige i matematikk blir overveldet bare av å bare se på enkelte matteoppgaver og regnestykker.  De ikke vet hvor de feste blikket eller hvordan de skal starte.

Dette kan føre til økt matteangst, tap av motivasjon, og en følelse av utilstrekkelighet.  
“Det føles overveldende, jeg vet ikke hvor jeg skal feste blikket!”
“Enten kan du det eller så kan du det ikke. Når du ikke kan det skjønner du ingenting.”

Elevene

Løsning

Selv om elevene hatet matte – så sørget vi for at de elsket å løse matteoppgaver. Og selv om elevene ikke skjønner statistikk – så sørget vi for at de enkelt klare sette opp et diagram.

 Vi klarte bryte ned kompliserte prosesser og framstille de som intuitive og strukturerte læringsstier med klare instruksjoner og visuelle hierarkier. Vi skapte intuitiv onboarding som guidet elevene ved hjelp av mikrointeraksjoner, visuelle elementer, robust design og progressive disclosure.

Resultat

Oppgaveformatet i statistikk ble brukt av 119 000 elever høsten 2023, og ble utpekt som elevenes favoritt fordi de opplevde mestring og motivasjon:

«Gøy å bruke det»
«Veldig fint og bevegelig»
«Jeg elsket det»

2. Brukerproblem:

Oppgaveutviklerne

Oppgaveutviklere manglet den tekniske kompetansen som kreves for å utvikle oppgaver tråd med de 47 WCAG kravene som gjelder for offentlig sektor. Dermed så brukte de altfor mye tid på tilrettelegging og de var redd det kunne gå ut over det faglige innholdet og oppgaver generelt.

De brukte også mye tid på å sette seg inn i de forskjellige ystemene, og savnet veiledere og mer brukervennlige grensesnitt.

Oppgaveutviklerne

Løsning

Vi utviklet et oppgaveformat som tilrettela seg selv ved å autogenerere alt-tekst direkte i alt-tekst attributten – ved hjelp av javascript. 
Gjennom dynamisk tilrettelegging ble oppgavene automatisk tilgjengelige for alle typer elever — uavhengig av funksjonsevne. 
Oppgaveutviklerne kunne dermed konsentrere seg om faglig innhold i stedet for tekniske barrierer.

Vi designet et oppgaveformat som var komplekst på undersiden men såppass enkelt på utsiden at de ikke trengte å lære seg det.

Resultat

Oppgaveutviklerne trengte ikke bekymre seg over manuell tilrettelegging, eller lute på om de hadde skrevet alt-teksten korrekt.

De trengte heller ikke bruke tid på å lære seg hvordan sette opp oppgaver med diagrammer i eller rette oppgaver, alt var nå automatisert.

Nå kunne de bruke mer tid på det som er jobben deres og det de brenner for: å skape de beste læringsopplevelsene for alle elever.

3. Brukerproblem:

Svaksynte og blinde elever 

Barn og unge – elever og kandidater – med funksjonsnedsettelser stod i fare for å bli utestengt fra samfunn og skole. En ny læreplan, nye kompetansemål og nye lærebøker var innført i norske skoler.
Men hvor ble det av lærebøkene for blinde og sterkt svaksynte som var avhengige av leselist, skjermleser og annen hjelpemiddelteknologi?

Svaksynte og blinde

Løsning

Et oppgaveformat som møter lovpålagte krav er ikke nødvendigvis håndterlig for en blind elev. Ofte så sikrer wcag at eleven får tilgang til oppgaven men ikke klarer løse den. Vi sikret at blinde elever hadde lik tilgang som elever som kan se, i tillegg til at det møtte lovpålagte WCAG krav..

Resultat

Blinde og sterkt svaksynte elever ble ikke utestengt – de fikk like muligheter som andre elever.

Vi designet et nyskapende, innovativt og universelt utformet (portable custom intercation) som fremmet mestring og motivasjon gjennom visuell interaksjon og gamification.

 

Hvilken funksjonalitet laget vi?

problem  designprinsipper   prototype   process 

Et oppgaveformat – portable custom interaction

Hva skulle oppgaveformatet måle?

Noen av kompetansemålene i den nye læreplanen krever følgende ferdigheter fra eleven:
– Kunne sette opp eller tegne tabeller, diagrammer, grafer og geometriske figurer.
– Kunne forstå og tolke organisert visuell informasjon, som tabeller, diagrammer, grafer og geometriske figurer…»

Dette betyr at å tegne diagrammer blir en viktig del av besvarelsen på eksamen (og prøver), og vår oppgave var å muliggjøret det.

Funksjonalitet

Her var jeg opptatt av å balansere brukerbehov, forretningsmål og tekniske rammer, benyttet derfor MoSCoW-metoden- for å skape struktur. 

Les mer under prosess

 

Tegn Diagram – kort løsningsbeskrivelse

Del 1 – Elev velger diagram
Diagrammene elev har å velge mellom er: søylediagram, gruppert søylediagram, linjediagram og sektordiagram.

Del 2 – elev setter opp valgt diagram
Hvis elev har valgt “søylediagram” er det mulig å:
Tegne X akse og y akse.
Dele opp y akse og x akse.
Gi x-akse og y-akse navn.
Sette positive og negative verdier på y-akse og x-akse.
Sette opp og tilpasse (vertikale) søyler.
Navngi søyler.
Gi diagrammet navn.

Resultat

  1. Første i sitt slag i Norden – et dynamisk, universelt utformet oppgaveformat utviklet i ny teknologi.
  2. Automatisert tilrettelegging (alt-tekst generator) for elever som bruker skjermleser/leselist.
  3. Kan brukes på i grunnskole og på videregående.
  4. Det kan måle elevenes kompetanse etter ny læreplanmål.
  5. Inkluderende, engasjerende og universelt utformet.
  6. Enkelt og intuitivt for oppgaveutviklere å bruke.

Slik ser det ut når oppgaveutvikler setter opp del 1: elev velger diagram.

PERSONAS – elev

problem  solution  prototype   process
Steve, 13 år 

Steve kjenner ingen mestringsfølelse eller motivasjon med matematikkfaget generelt. Han sliter litt med de grunnleggende ferdighetene, sier ofte at han “ikke forstår noe og ikke vet hvordan/hvor han skal starte”. For han føles matematikk matematikk overveldende, men liker veldig godt engelsk muntlig og fransk.

PROTOTYPE for elev

problem  solution  prototype   process
“Det føles overveldende”

Overveldende indikerer cognitive overload – derfor la jeg til progressive disclosure.

“Jeg vet ikke hvor jeg skal feste blikket!”

Med tillatelse fra Matematikksenteret fikk jeg tommel opp til å veilede eleven med progressive disclosure og designet mitt.

“Hvis du ikke er god i matte, skjønner du ingenting”

Dette designet sikrer at elever klarer sett opp diagrammer selv om de ikke har den grunnleggende kunbnskaoen. 

Funn blir design

 

Mikrolæring og progressive discloure

Vi brukte mikrolæring og progressive discloure og brøt ned innholdet i små, håndterbare moduler for enklere tilegnelse og bedre læringsutbytte.

Strukturert læringssti

Mikrolæringen designet jeg som en strukturert læringssti som veiledet eleven gjennom å gradvis synliggjøre utfyllingsfelt og informasjon etterhvert som de ble relevant.

Informative labels

Utfyllingsfeltene hadde informative labels, visuelle elementer og universale ikoner som sikret at eleven viste hva hen skulle gjøre til enhver tid.

Brukerreise

Lag et søylediagram som heter “Verden fineste digram”. Tittel på y-aksen er: “antall solgte”, minimum verdi: 0, maksimum verdi: 35 med en intervall på 5. Fire søyler på x-aksen, første søyle heter “stratos” og har verdi på 10, neste søyle “Bamse Mums” med verdi på 18. Endre antall søyler til 2, deretter tilbake til 4. Til slutt endrer du type diagram til søylediagram. Nedenfor er prototypen,legg merke til den stegvise læringen, hvor enkelt det er å lage et diagram, hvordan du kan lukke panelene for å forhindre cognitive overload og hvor enkelt det er å endre verdier og type diagram.

Designprinsipper

1. Brukersentrering
Vi designet for brukernes behov og atferd.
Vi designet med tanke på brukernes opplevelse, ferdigheter og kontekst.

2. Estetisk og minimalistisk design
Vi fjernet unødvendige elementer.
Vi holdt designet rent og fokuser på det som er viktig.

3. Gjenkjenning fremfor gjenkalling
Vi reduserte brukerens behov for å huske informasjon.
Vi brukte kjente ikoner, symboler og designmønstre som brukerne lett kan gjenkjenne.

4. Hierarki og prioritering
Vi organiserte informasjon og funksjon etter viktighet og i kronologisk rekkefølge.

5. Brukerens kontroll og frihet
Brukerne kan angre og gjøre om handlinger.
Brukerne har kontroll over systemet og deres interaksjoner.

6. Fleksibilitet og effektivitet
Formatet passer for ungdomsskolen og videregående, for nybegynnere og erfarne brukere.

7. Tilgjengelighet
Vi designet for alle brukere, inkludert de med funksjonsnedsettelser.
Vi fulgte retningslinjer for universell utforming og tilgjengelighet.

8. Tilbakemelding
Vi ga brukerne feedback hver gang de utførte en handlin.

Feilmeldinger og avvik

Vi la vi til begrensninger som gjorde det umulig å taste helt feil. For eksempel: i inputfeltet der eleven skulle skrive antall søyler deaktiverte vi bokstav input. På den måten ble eleven “tvunget” til å skrive et tall. Selvsagt hadde det også vært riktig å skrive “fire” søyler istedenfor “4”. Men hva om en elev ikke var stødig i norsk skriftlig, og skrev “firre”? Det kunne vi ikke risikere.
Vi fjernet også mulighet for desimaler, hvis svaret ikke inneholdt desimaler.

PERSONAS – oppgaveutvikler

problem  solution  prototype   process
Ragnhild, 58 år 

Fagansvarlig og oppgaveutvikler for nasjonale prøver i lesing, hun har faglærer utdnning med en mastergrad i sosiologi. Ragnhild føler stor omsorg for elevene og streber etter å lage rike og varierte oppgaver. Hun er utdannet lærer med en mastergrad i pedagogikk. Hun bruker mye tid på å sette seg inn i forskjellige læringsteknologier og savner den tiden hun kunne vie all sin tid på fag og faglig innhold. Hun synes Geogebra er for lite brukervennlig, og føler på økt arbeidspress nå når alle oppgaver skal lages digitalt, hun ikke får bruke godt innarbeidet oppgavetyper fordi de bryter med WCAG kravene og er veldig redd for å publisere oppgaver som ikke er itråd med WCAG kravene – og synes særlig dette med alt-tekst er vanskelig. 

1. Problem: synes særlig dette med alt-tekst er vanskelig

Oppgaveutviklerne “er redd for å publisere oppgaver som ikke er i tråd med WCAG kravene og synes særlig dette med alt-tekst er vanskelig.”
Kravet de referer til er  1.1.1 Ikke-tekstlig innhold (Nivå A) som går ut på å gi brukeren et tekstalternativ for innhold som ikke er tekst. 

Slik løste vi alt-tekst problemet

Vi laget et oppgaveformat med innebygd alt-tekst generator. Jeg laget regler og instruksjoner for hvordan teksten skal skrives, deretter la utvikleren inn dette ved hjelp av javascript. Nedenfor ser du 3 skjermbilder fra nasjonale prøver for 8. klasse på udir.no. Skjermbildene viser hvordan koden endrer seg i takt med elevens handlinger, som i dette eksemplet er å legge til verdier til hver sektor.

2. Problem: bruker mye tid til å forstå læringsteknologi – savner å kunne vie all sin tid på fag og faglig innhold”.

Det innebygde kontrollpanelet var lite intuitivt så vi gikk bort fra det og lot fagansvarlige og oppgaveutviklere sette opp diagrammer på samme måte elevene setter opp diagrammer (se prototype). Nå trengte de ikke lære seg noe nytt og på den måten fikk de mer tid til det faglige.

Scoring av oppgaver forenklet og automatiserte vi ved å la de som lager oppgavene skrive fasit i samme inputfelt  som elevene skulle skrive svaret. Nå slipper de bruke tide på retting, ergo enda mer tid til å lage kvalitetsinnhold.

“Streber etter å lage best mulig oppgaver for alle elever.” Forfatter har full kontroll over oppgaveformatet, og kan sette opp oppgaven akkurat som hen vil. For eksempel så kan hen sette opp et ferdig diagram i oppgaven og la eleven (1) legge til verdi på søylene eller (2) legge til eller skrive søylenavn.

Skissen nedenfor viser hvordan oppgaveutvikler kan legge til fasit i samme inputfelt som elevene skriver sitt svar.

PROSESSEN

problem  designprinsipper   prototype   process 

Da vi startet arbeidet med å utvikle et nytt digitalt oppgaveformat i matematikk for nasjonale prøver og eksamen, sto vi overfor et komplekst utgangspunkt: ingen av oss hadde tidligere utviklet et tilsvarende format. Verken de tekniske rammene, de faglige behovene eller brukerkravene var tydelig definert. For å håndtere dette, valgte jeg å bruke Lean UX som overordnet metode – kombinert med Design Thinking og en brukersentrert tilnærming.

Faciliterte workshops og samskapingsprosesser og involverte alle berørte parter for å etablere felles forståelse, minimere risiko ved lansering, sikre innovasjon, øke leveransekvalitet og sikre eierskap.

Funksjonalitet

Prioritering handler om å balansere brukerbehov, forretningsmål og tekniske rammer, og til dette brukte jeg MoSCoW-metoden fordi den hjelper med stuktur.

Ettersom ingen av oss visste noe særlig om teknologien vi skulle jobbe i, de tekniske rammene eller funksjonaliteten vi skulle lage, startet vi forsiktig med kun de kritiske funksjonene som er nødvendige for at løsningen skal dekke kjernebehovet.

Must-have: Må kunne tegne et søylediagram isom del av en oppgave. Etterhvert ble det tegne et søylediagramm og ha muligheten til å justere verdien til søylene.

På grunn av pandemien fikk vi ekstra tid, så “must have” listen inneholdt til og med should-have, Viktige funksjoner som øker verdien, men som kan nedprioriteres om nødvendig.bcould-have, nice to have-funksjoner. 

Research Concept

Vi startet med å samle innsikt fra flere brukergrupper:
– Oppgaveutviklere, som skulle bruke verktøyet til å lage og publisere oppgaver.
– Elever, som skulle løse oppgavene i selve prøven.
– Matematikksenteret som fungerte som fagspesialister, superbrukere og faglig kvalitetskontrollører. Gjennom intervjuer, observasjoner og workshops identifiserte vi de forkjellige brukergruppene, samt brukernes utfordringer, smertepunkter, behov og mål.

Innsikt ble dokumentert og strukturert i en kravspesifikasjon som dekket:
– Funksjonelle krav og innstillinger
– Tekniske krav og begrensninger
– Faglige behov/ kompetansekrav
– Hvilke ferdigheter det målte

Design Thinking og Brukersentrert Design

Parallelt brukte jeg Design Thinking og en brukersentrert tilnærming for å få en dypere forståelse av oppgaveutviklernes og elevenes prosesser, utfordringer, kontekst og motivasjon, og for å sikre at oppgaveformatet adresserte både funksjonelle og emosjonelle behov.

Utførte innsiktsarbeid og behovsanalyser for å avdekke underliggende brukerbehov og utfordringer i utdanningssektoren, for å sikre at løsningen traff reelle problemer – noe som resulterte i økt relevans, verdiskapning og bedre brukeropplevelse.

Observerte oppgaveutiklere når de jobbet i den nye gjennomføringsløsningen for å få forståelse for de forskjellige prosessene, smertepunktene, forbedringsmulighetene, ønsker og behov..

Gjennomførte dybdeintervjuer, brukertesting og feltobservasjoner for å få innsikt i hvordan de ulike brukergruppene navigerte i løsningen, med mål om å få bedre forståelse og deretter skreddersy design og interaksjon etter behov.

Utviklet personas for å presentere de forskjellige brukerne for resten av teamet.

Validation, prototype & usertesting

Basert på innsikten utviklet jeg visuelle skisser og klikkbare prototyper som vi testet kontinuerlig.
 Visualisering av ideer ble en svært effektiv metode for å avdekke nye funksjonelle og tekniske krav.

Når superbrukerne så prototypene, ble de ofte bevisst behov de tidligere ikke hadde uttrykt eksplisitt.
For å strukturere dette videre utviklet jeg et “bestillingsskjema for ny funksjonalitet”som alle fagmiljøer og interessenter måtte bruke når de oppdaget nye behov. Dette skjemaet var direkte koblet til kravspesifikasjonen og bidro til å effektivisere innsiktsfasen med opptil 40%.

Validate & update

Etter hver iterasjon testet vi løsningen med både oppgaveutviklere og fagspesialistene
Vi gjennomførte:
Geriljatester og manuelle A/B-tester for rask validering av konseptvalg
Dybdeintervjuer og observasjoner for å forstå hvordan brukerne løste oppgavene
Faglige vurderinger sammen med Matematikksenteret for å sikre at formatet støttet læreplanmålene.
Tilgjengelighetsvurderinger – sammen med DigDir og Statped.
Disse testene gav kontinuerlig læring og bidro til kontinuerlig justering og forbedring av design og funksjonalitet.

Visuelt design og designsystem

Refleksjoner

Ved å bruke Lean UX oppnådde vi:

Smidig utvikling og en dynamisk kravspesifikasjon.
En leveranse alle var fornøyde med og stolt av. Raskere iterasjoner og beslutningsprosesser

Tidlig validering av antakelser og krav

Økt tverrfaglig forståelse og styrkede relasjoner mellom design, utvikling og fagmiljø
En dokumentert og sporbar kravprosess som gjorde det enkelt å videreutvikle produktet, og utvikle andre produkter innen samme teknologi.
Metoden gjorde det mulig å bygge opp både produktet og forståelsen for produktet parallelt, i stedet for å vente med læring til etter lansering.

Prototype: sett navn på søylene!

For å engasjere og motivere elevene er det viktig å gi de visuell tilbakemelding på handlinger de utfører/valg de tar. I dette tilfellet fokuserte vi på nedtrekks menyen.

Den visuelle endringen som skjer når elevene har valgt et navn fra nedtrekksmenyen fungerer som en bekreftelse på handlingen de har gjort, I tillegg til at de øyeblikkelig skjønner hvordan oppgavetypen fungerer. Noe som igjen gir følelse av mestring. Blyant ikonet sikrer at de ikke føler stress, fordi det viser at de kan forandre avgitt svar om de ønsker.

Tidlige skisser – that didn´t make the cut.

Karriereveiledning på nett Kompetanse Norge

Det fantastiske teamet bak flybussen.no Read More

Digitalisering, Tjenestedesign og Innovasjon – Slik skapte vi magi!

Manuell utførelse av oppgaven: 17 dager

Digitalisert utførelse av oppgaven: 40 sekund.

Slik gikk vi frem:

Digitalisering av praksispool og tjenesteinnovasjon

Prosjektleder: Ståle Engen, Codewise. UX designer: Lillian Hansen Tjenestedesigner: Natalia Friis (Lead) og Lillian Hansen. Utvikler: Kenneth Solberg Kunde: Apotekforeningen

Bakgrunn

Siden 2004 har Apotekforeningen sørget for at alle farmasistudenter ved norske utdanningsinstitusjoner får praksisplass på apotek. Prosessen med tildeling av praksisplasser har imidlertid vært tidkrevende og utfordrende for alle involverte parter. For å gjøre prosessen mer brukervennlig, effektiv, trygg og for å redusere arbeidsbelastning til Apotekforeningen, studiested, apotek, praksiskontakter og studenter, fikk vi i oppdrag å digitalisere denne oppgaven.

Tjenestedesign: Planlegging, gjennomføring og etterarbeid knyttet til tjenestereise workshop. UX- og interaksjonsdesign

    

Min Rolle: Senior UX Designer og tjenestedesigner
Mine oppgaver:
  1. Planlegging, gjennomføring og etterarbeid knyttet til tjenestereise workshop.
  2. Definere roller handlinger, renskrive dagens tjenestereise og framtidig tjenestereise.
  3. Intervjuer/funn, flyt og designprinsipper.
  4. Screenflow (sammen med tjenestedesigner og ptosjektleder)
  5. Prototyping/ wireframes
  6. Gjennomgang av intraksjonsretning.
  7. Grafisk design
  8. Brukerteste/ justere interaksjon og grafisk design.
  9. Godkjenning av grafisk design og endelig design.Overlevering av design og teknisk implementering.

Workshop: kartleggedagens tjenestereise

Hensikt: Kartlegge dagens tjenestereise og hva en ny løsning bør ivareta. Skape felles visjon/målbinde, identitet, kartlegge stegene før, under og etter for student, studiested, apotek, apotekforeningen og kjedekontakt

Utdrag fra dagens tjenestereise for student som trenger praksisplass på apotek:

“Student får liste over apotek som tilbyr praksisplass en uke før. Listen har ingen informasjon om apotekene annet enn hvor mange praksisplasser de tilbyr, resten må studentene google selv. Når Apotekforeningen har fordelt plassene (trekning fra bøtte) ringer de studentene. Studentene har en slot på 20 minutter der de må svare telefonen. Hvis de ikke svarer mister de den utdelte plassen og havner bakerst i køen.”

Intervjuer og funn – dagens tjenestereise

Praksispoolen skal ha 5 brukere/roller (student, studiested, apotek, apotekforeningen og kjedekontakt). Jeg ringte 5 fra hver kategori.

«Opplevde tildelingen som rettferdig. Men også veldig stressende med kun 15 minutter å svare. Var i London da...»
Guri, tidligere student
Jeg synes det er vanskelig
å finne ut hvilket apotek jeg vil utplasseres på..skulle ønske jeg viste mer om de.
Tom, Student
Jeg synes det er dumt at vi kun får ønske oss et apotek..hva om det ikke er tilgjengelig..Hvor kommer jeg da?
Emilie, student

Designprinsipper 

  • 1. Hjelpsom og Enkel
    • Løsningen skal framstå som enkel og intuitiv.
    • Brukeren skal til enhver tid vite hvor han /hun befinner seg og hvilke oppgaver han/hun skal gjennomføre.
  • 2. Forutsigbar
    • Brukeren skal informeres om tidsfrister.
    • Brukeren skal vite at hun/han kan lagre det som er gjort hittil, for deretter komme tilbake å fullføre handlingen ved en annen anledning.
  • 3. Trygg og Rettferdig
    • Brukerne skal føle seg trygge når de bruker løsningen.
    • Løsningen skal bidra til å bygge tillit til at valgene/trekningen oppleves rettferdig.
    • Løsningen skal informere om hvordan prosessen utføres.
  • 4. Tilbakemelding
    • Brukeren skal få tilbakemeldinger på handlinger han/hun har utført.
    • Er handlingen utført riktig får brukeren en bekreftelse.
    5. Helhetlige Brukeropplevelser
    • Grensesnittet skal være konsekvent.
    • Brukerne skal oppfatte Apotekforeningen som avsender av tjenesten uavhengig av hvor de i løsningen de befinner seg – og uavhengig hvem de er logget inn som.
  1. Når studiested har registrert alle studenter sender de ut en forhåndsskrevet mail til de registrerte studentene om at det nå er tid til å registrere ønskeliste.
  2. Studentene logger inn (ved hjelp av en kode de får tilsendt på mobil) og registrerer ønskeliste.
  3. Studentene kan sette opptil 10 apotek på sin ønskeliste. Når dette er gjort klikker de «registrer ønskeliste».
  4. Studentene har 2 uker på å registrere sin ønskeliste.
  5. Trekningen må skje senest 4 måneder før det første studiestedet starter sin praksisperiode (studenter som skal flytte på grunn av praksis trenger tid til å si opp leiligheten sin + flytte).
  6. Systemet plasserer studenter på sine fortrukne plasser så godt det lar seg gjøre.
  7. Avvik: De som ikke har levert ønskeliste (å levere ønskeliste er ikke obligatorisk) blir plassert på plassene som er til overs. Om disse studentene ikke ønsker tildelte plasser, må de ta kontakt med studiested.
  8. System genererer mail til student, studiekoordinator og kontaktperson på apotek for å fortelle om hvem skal hvor.
  9. I studentenes mail står det med uthevet skrift at de nå må ta kontakt sitt apotek for å få info om uniform, oppstart etc.
  10. System genererer liste over årets praksisapotek.
  1. Når studiested har registrert alle studenter sender de ut en forhåndsskrevet mail til de registrerte studentene om at det nå er tid til å registrere ønskeliste.
  2. Studentene logger inn (ved hjelp av en kode de får tilsendt på mobil) og registrerer ønskeliste.
  3. Studentene kan sette opptil 10 apotek på sin ønskeliste. Når dette er gjort klikker de «registrer ønskeliste».
  4. Studentene har 2 uker på å registrere sin ønskeliste.
  5. Trekningen må skje senest 4 måneder før det første studiestedet starter sin praksisperiode (studenter som skal flytte på grunn av praksis trenger tid til å si opp leiligheten sin + flytte).
  6. Systemet plasserer studenter på sine fortrukne plasser så godt det lar seg gjøre.
  7. Avvik: De som ikke har levert ønskeliste (å levere ønskeliste er ikke obligatorisk) blir plassert på plassene som er til overs. Om disse studentene ikke ønsker tildelte plasser, må de ta kontakt med studiested.
  8. System genererer mail til student, studiekoordinator og kontaktperson på apotek for å fortelle om hvem skal hvor.
  9. I studentenes mail står det med uthevet skrift at de nå må ta kontakt sitt apotek for å få info om uniform, oppstart etc.
  10. System genererer liste over årets praksisapotek.

Trådskisser

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Skisser og brukerreiser

Student skal velge apotek – gammel tjenestereise:

Student får liste over apotek en uke før. Listen har ingen informasjon om apotekene annet enn antall praksisplasser.

Studentenes kommentarer til gammel brulerreise: “Jeg synes det er dumt at vi kun får ønske oss et apotek..hva om det ikke er tilgjengelig. Hvor kommer jeg da?” “Jeg synes det er vanskelig å finne ut hvilket apotek jeg vil utplasseres på..skulle ønske jeg viste mer om de forskjellige apotekene.”

Student skal velge apotek – ny tjenestereise:

Når student har logger inn får studenten full oversikt over alle apoteker i Norge. Hvert apotek har sitt eget profilkort som består av alt fra bilder av interiør til type resepter. Student kan også se apotek oversikten i liste view. Det er en rekke filtreringsvalg (postnummer, sykehusapotek osv). Student kan legge til ti apotek i ønskelisten sin.

Ny brukerreise: student legger apotek til ønskeliste

Gammel tjenestereise: Apotekforeningen deler ut praksisplasser til studentene.

Før: “Gjennomføringen av selve valget har inntil 2020 foregått pr telefon. Studentene fikk et klokkeslett de skulle ringe til praksispoolen og velge apotek basert på hvilken plass de hadde i valglisten. Avhengig av hvor mange studenter som var involvert i ett valg kunne denne prosessen ta 14-21 arbeidsdager for en ansatt i Apotekforeningen.”

Ny tjenestereise: Apotekforeningen deler ut praksisplasser til studentene.

Ny tjenestereise: Apotekforeningen starter ny valgperiode.

Apotek oppretter apotekkort mm.

Strategisk innholdsdesign økte antall økter med 332%

KUNDE: BODYFLYFROGNER    DATO: 2018

WWW.BODYFLYFROGNER.NO

WEBUTVIKLING, NETTSIDE DESIGN & STRATEGISK INNHOLDSDESIGN / SØKEMOTOROPTIMALISERING / MERKEVAREBYGGING
OM KUNDEN OG OPPGAVEN MIN

Bodyflyfrogner medisinsk senter tilbyr kosmetiske og helsebringende behandlinger. Senterets eksisterende nettside var gammel og lite oppdatert. og jeg fikk jobben med å utvikle og designe ny nettside.

KUNDENS FORRETNINGSMÅL

Øke etterspørsel og øke salg av nye og mindre kjente behandlinger med 30%.

Kundebase bestående av en mangfoldig og flerkulturell målgruppe i alderen 18 -100 år.

KUNDENS PROBLEM

Mer info kommer

BRUKERENS PROBLEM

Mer info kommer

SLIK SKAPTE JEG VERDI OG KONURRANSEFORTRINN FOR KUNDEN VED Å MØTE BRUKERENS BEHOV 

En av de viktigste årsakene til nettsidens suksess er strategisk innholdsdesign utviklet i tråd med bedriftens strategi – og brukerens behov.

Mer info kommer
MIN ROLLE OG ANSVAR

Dette var et freelance oppdrag så jeg var ansvarlig for alt: webutvikling, web design, visuelt konsept, innholdsdesign, strategi, informasjonsarkitektur, utvikling av tekst og valg av bilder.

6 grunner til at du skal bruke tid på innholdsdesign

Godt design er viktig, men det er innholdet brukeren kommer for. Innholdsdesign handler om å ha et bevisst  forhold til innholdet på nettstedet ditt. Finner brukeren det hen leter etter? Når budskapet ditt fram? Det er ikke vits å bruke masse tid på å skrive lange tekster hvis ingen leser tekstene dine. Innholdsdesign handler om å  presentere innholdet på en måte som gjør at flest mulig får med seg mest mulig.

1. Det hjelper virksomheten din til å nå sine mål.

Det første vi gjør er å utarbeide en strategi basert på innsikt og samtaler med deg. Strategien vil
inneholde en plan til aktiviteter og tiltak som har som mål om å nå virksomhetens langsiktige mål.

2. Kommunikasjonen mellom deg og bruker styrkes og effektiviseres.

Vi spisser innholdet og plasserer det viktigste først og sørger for at brukeren får relevant informasjon
til rett tid.

3. Ressurser frigjøres fordi du vil få færre support henvendelser.

Hvorfor besøker brukerne nettstedet ditt? Hva leter de etter? Hva ønsker den å gjøre? Vi finner ut hva brukerne er ute etter og tilrettelegger dette slik at det er lett å finne. Brukerne blir selvstendige og selvhjulpne, noe som igjen fører til færre support henvendelser.

4. Innholdet blir forståelig for alle og budskapet kommer fram.

Brukertilpasset klarspråk, formatert tekst, beskrivende overskrifter og mellomtitler. Vi sørger for at ditt budskap blir lest og forstått av alle.

5. Universelt utformet innhold sikrer at brukere får tilgang til nettstedet ditt.

Kvalitetsinnhold er innhold som er universelt utformet.

6. SEO – Google plassere deg høyere i organiske søk

Brukervennlig og universelt utformet kvalitetsinnhold gir deg høyere plassering i organisk søk. Alltid og helt gratis!

Kompetanse Norge – Digital karriereveiledning

Karriereveiledning på nett

Bakgrunn og utfording

Kompetanse Norge utviklet et verktøy for digital karriereveiledning og ønsket en nettside der brukerne enkelt kunne komme i gang med digital karriereveiledning. Designet skulle også forhindre at brukere kontaktet veilederne med irrelevante spørsmål. Interne forsøk på å løse denne oppgaven hadde ikke lykkes.

Gjennomførte  dybdeintervjuer av seks 19 -23 åringer for å forstå målgruppen, deres atferd, motivasjoner og smertepunkter knyttet til utdanning, karriere og livsendringer.
Resultatorientert designstrategi

Jeg tok utgangspunkt i en resultatorientert designstrategi, som handler om å samkjøre designprosesser og resultater med spesifikke forretningsmål og brukermål.

Så fort at tiltenkt metodikk, prototype og løsningsforslag ikke ville løse problemet. Utviklet og brukertestet prototyper basert på forprosjektet som validerte hypotesen.

UX Forskning og brukerinnsikt

Innsiktsfasen bestod av kvalitativ og kvantitativ innsikt. Vi brukertestet prototypen fra forprosjektet og  dybdeintervjuet 6 karriereveiledere, 6 personer under 30 år og 5 personer over 50. Den kvantitative innsikten bestod av spørreundersøkelser relatert til ungdom og videre utdanning

Kort om kunden og tjenesten

Utdanningsdirektoratet/Kompetanse Norge utviklet et verktøy for digital karriereveiledning ved hjelp av tjenestene chat, e-post og telefon. De ønsket en nettside der brukerne enkelt kunne komme i gang med digital karriereveiledning.

Et annet kriterie for designet var at det også skulle avlaste veilederne og forhindre at brukere kontaktet veilederne med irrelevante spørsmål.

Denne oppgaven ønsket de at vi skulle løse med å fronte flere at Kompetanse Norges jobbsøkerverktøy, informasjon om studier og svar på FAQ. Designforslaget skulle brukertestes av x antall elever og voksne, og resultatene fra brukertestingen var del av leveransen.

I lengre tid hadde Kompetanse Norge prøvd å designe denne startsiden selv, men klarte ikke lande et design som brukerne godkjente. Etter utallige forsøk ga de jobben til oss.

Hvem er “vi”?

Jeg var ansvarlig designer og hadde god hjelp fra en UX-designer kollega (Sindre) og brukertesting hjelp fra Janni, som også er UX-designer.

Oppgaven vår – på overordnet nivå

Å (a)designe en startside der brukeren på en enkel og intuitiv måte kan komme i gang med karriereveiledning

(b) Startsiden skulle også sikre at  brukere bestemte seg for å ikke kontakte karriereveieder likevel.

Målet var at tjenesten skulle brukes korrekt og effektivt av personer som faktisk ønsket denne type veiledning. Samt unngå henvendelser som handlet om tidsfrister til spesifikke universiteter, eller adressen til NAV ol, da dette er info karrierveilederne ikke har kontroll på.

Tilnærming

Strategisk innholdsdesign, Design Thinking og Lean UX.

Denne teksten er ikke ferdig

Konseptet vi landet på:
En karriereveiledningsside der veisøkerne kan kontakte veiledere eller veilede seg selv. Dette konseptet underbygger regjeringens ønske om å heve karrierekompetansen til det norske folk ved å tilby gratis karriereveiledning til alle mellom 0 – 100 år. Nettsiden skal føles «levende» for brukerne, da det alltid kommer til å være relevant og sesongbasert informasjon på den.
Visuelt Design

Kommer snart

Informasjonsarkitektur

Kommer snart.

Nettsidens innhold

Innholdet skal være brukergenerert. Det vil si: det som brukerne er opptatt av/spør om, det er det som skal bli innhold. Brukergenerert innhold har jeg jobbet med mye i NRK – og dette er en sikker måte å skape engasjerte brukere og gode brukeropplevelser. Noe av innholdet/informasjonen må utvikles over tid, når man vet mer om hva brukerne etterspør. Informasjonen skal også tilpasses de forskjellige sesongene.

Nettsiden skal føles levende

Informasjon og tekst legges til veldig enkelt uten at det affekterer design, formattering eller layout.

Målgruppeinngang – en inngang for voksne og en for studenter/ungdom 

Ved å skille mellom voksen og ungdom kan vi imøtekomme de forskjellige behovene disse to målgruppene har.Ja, det er mer jobb men det er slik vi skaper gode brukeropplevelsen.

Dessuten…ungdom liker ikke å mingle med «gamlinger» online..

En annen grunn til at jeg har vært nødt til å dele opp innholdet, er for å i det hele tatt få med meg ungdommen. Ungdommen er veldig kresne når det kommer til hvilke nettsider de gidder besøke, og det er ikke interessant å surfe på samme side som mamma og pappa.

Gode brukeropplevelser skapes når:
  1. Brukeren kjenner seg igjen i innholdet.
  2. Brukeren blir engasjert og motivert av innholdet.
  3. Innholdet gir verdi til brukeren.
  4. Brukeren føler at innhold/informasjon løser problemer og svarer på spørsmål brukeren måtte ha.
  5. Brukerne føler seg som hjemme på nettsiden og føler at nettsiden er skapt for (å hjelpe) dem.
  6. 6. Innholdet består av oppgaver brukeren forstår + klarer å løse – dette gir mestringsfølelse.

Relasjonsbygging for veisøkere og indirekte ekskludering av de med irrelevante hevndelser.

Teksten på de to inngangene har en funksjon. «Hva kan vi hjelpe deg med?» Ved å liste opp forslag på hva vi kan hjelpe brukeren med, skapes en relasjon. Brukeren føler seg sett og forstått. Disse forslagene har motsatt effekt på de som har tenkt å spørres om noe irrelevant (“typ: når får jeg dagpenger utbetalt fra NAV?”).

Tidligere versjon som vi brukertestet, og forkastet.

Akademiske ord skaper frustrerte brukere

Det var en pinlig opplevelse. Brukerne reagerte med «Hva er det vi skal brukerteste, egentlig? Hvorfor bruker dere en tekst som vi ikke skjønner noe som helst av!? Dere må forklare hva denne nettsiden handler om – vi skjønner det ikke!» Ordene «karriereveiledning», «kompetanse», «reflekterte karrierevalg» ble for komplisert for brukerne. De følte seg ekskludert og en (voksen mann) ble rett og slett litt sint.

Det er ikke mulig å skape gode brukeropplevelser og engasjerte brukere med fint design og snobbete språk.

Kansellistil skaper avstand og virker nedlatende. Vi ønsket å bygge relasjoner samt å gjøre brukerne selvstendige og bedre rustet til store endringer i livet.

Konseptet vi landet på:
En karriereveiledningsside der veisøkerne kan kontakte veiledere eller veilede seg selv. Dette konseptet underbygger regjeringens ønske om å heve karrierekompetansen til det norske folk ved å tilby gratis karriereveiledning til alle mellom 0 – 100 år. Nettsiden skal føles «levende» for brukerne, da det alltid kommer til å være relevant og sesongbasert informasjon på den.

Noen funn:

  • Mange brukere vet ikke hva karriereveiledning er.
  • Mange tror karriereveiledning er det samme som coaching, og forventer at veilederne skal sitte klar med klare svar på spørsmålene de måtte ha. Disse forventingene kan bli en utfordring for både veiledere og brukere.

Skjermbilde av Danmark sin nettside for samme tjeneste.

Slik ble NRK Super verdens mest brukervennlige nettportal

Produktutvikling og UX design

Slik fikk vi nrksuper.no så brukervennlig at barn ned til 4 år kunne bruke den uten voksenhjelp

“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

Frontendutvikling: optimalisering og kvalitetssikring av navigasjon, interaksjon, funksjonalitet og design på det innholdet vi skulle beholde. sikret at innhold var i tråd med startegi og retningslinjer. 

UX-designer: Brukerinnsikt, brukerinvolvering, analyse og hypoteser. Konkurrentanalyse, konseptutredning, konseptutvikling. interaksjonsdesign, prototyping, observasjoner, brukertesting, informasjonsarkitektur og content edit.

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.

Informasjonsarkitektur og content audit

Feltstudier – besøkte forskjellige barnehager og tilbragte hele dagen sammen med barna.

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 var nå et krav og forankret i overordnet strategi

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.”

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.

 

 

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.

  1. 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.
  2. Benchmarking: Her sammenlignet jeg (navigasjon, funksjonalitet, nivå av brukertilpasning, innhold)  NRK Supers eksisterende nettportal med konkurrerende aktører
  3. 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, brukerundersøleser og eksisterende design

Noen av retningslinjene vi utarbeidet for å sikre konsekvent, intuitivt og brukervennlig brukergrensesnitt

 

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

Entrepenørselskapet som får jobben gjort!

KUNDE: GUTTA I SLAGET AS  DATO: 2018

WWW.GUTTAISLAGET.NO

UTVIKLING & DESIGN AV NETTSIDE

Edens Eiendom – boligbyggeren som tilbyr livsstil og opplevlser

KUNDE: EDENS EIENDOM      DATO: 2017
UTVIKLING & DESIGN AV NETTSIDE / SØKEMOTOROPTIMALISERING / MERKEVAREBYGGING
OM KUNDEN

Edens Eiendom er et lokalt entreprenørselskap med fokus på utvikling av hyttetomter og boligtomter I Norges mest solrike by – Grimstad.

KUNDENS UTFORDRING

Kunden ville ikke tomtene skulle forsvinne blant masse andre tomter på en nettside. Kunden ønsket heller ikke en upersonlig standard presentasjon – uten sjel.

Han ønsket at potensielle kjøpere fikk kjenne på atmosfære og følelser, at tomtene og området rundt dannet et bilde om livsstil og opplevelser på Sørlandet.

HVORDAN JEG LØSTE PROSJEKTET

I tett samarbeid med Edens Eiendom markedsansvarlig, Tor Daniel Berge, skapte jeg en visuell nettside som oser av sol, sommer og sørlandsidyll.

Her skal besøkende kjenne duften av skjærgården og begynne å glede seg til de overtar den nye tomten.

Nettsiden har mye bilder og lite tekst, vi ønsker at besøkende skal drømme seg bort i bildene. For mer info om tomtene henviser vi til meglerens side.

Bevis på at læring er gøy – Du vet du er i puberteten når…

Kunde: NRK/ Ask Lara    Dato: 2014
Pedagogisk Spill/ Spillifisering/ Illustrasjon/ Konseptutvikling/ Animasjon

Læring er gøy når deg gjøres riktig!

Hva var problemet?

Barn og unge har høye forventninger og høye krav til nett innhold. De har null interesse i å sitte å lese tørre fagartikler om kroppslige funksjoner på fritiden sin. De ønsker å bli engasert og underholdt.

Er det mulig å lære 8-14 åringer om de kroppslige endringene som skjer med kroppen i puberteten – online – uten at de kjeder seg ihjel?

Og uten at gjeldende underside blir registrert som en “exit” side i Google analytics? Og er det mulig å få dette til uten å bryte copyright rettigheter? Ja!

Resultatet?

Siden skilte seg ut i Google Analytics ja. Den var den mest beøkte og den målgruppen var lengst på. Daværende redaktør var så fornøy at han beæret meg med eget quizz spøramål på sommeravslutnoningen. Hvem har laget storebarn innholdet som er mest besøkt på NRK Super sine nettsider akkurat nå? Svar: Lillian

Slike løste jeg problemet.

Selve formidlingen var mer visuell, trendy og relaterbar enn det den var pedagogisk. Jeg skaffet dyp innsikt i målgruppens preferanser, ønsker og behov. Og satt meg inn i gjeldende digitale trender.

Målgruppen til serien er jenter fra 8 – 14 år, og de liker å utforske når de er online. De er ofte veldig dramatiske i denne alderen og de synes pubertet er flaut. Forandringene kan oppleves som litt dramatiske ergo så valgte jeg å bygge videre på dette, og overdramatisere disse kroppslige forandringen.

Online kjeder de seg hvis ting blir for statiske. De liker å ha god tid, og i motsetning til guttene – har de ikke noe behov for å konkurrere mot andre. De liker ikke stress.

Jeg designet en interaktiv animasjon som de kunne utforske selv, når de ville og så lenge de ville. HVIS de ville. Trendye illustrasjoner sikret at de ville, uforutsigbarhet, interaktivitet, gamification og dramtikk sikret at de fortsatte å utforske.

Her er Lara og vennene hennes. Disse karkaterene er faste i BBC serien, så for å unngå copyright issues..

Ask Lara var en BBC Two animert utdanningsserie som var rettet mot 8 til 14-åringer. Serien handlet om en vennegjeng og om de fysiske og følelsesmessige endringene de opplevde i puberteten.

Copyright utfordingen løste jeg ved å designe to nye karakterer i samme visuelle stil:
Tommy og Agnes!

En liten gjennomgang av hvilke kroppslige forandringer jeg belyste hos gutta.

Dette er noen av forandringene jenter opplever:

 

Dette er noen av forandringene jenter opplever:

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google
Save