01
Bachelorprosjekt · UX-design · 2026
Oppdragsgiver
Ekstern oppdragsgiver
Rolle
UX-designer
Team
2 designere + 2 utviklere
Verktøy
Figma
Prosjektet kort oppsummert
Som én av to UX/UI-designere bidro jeg til å redesigne Hoolsys mobilprototype fra bunnen av. Jeg jobbet med brukerinnsikt, intervjuer, brukerreise, wireframes, prototyping og brukertesting. Vi utviklet også et nytt designsystem med gjenbrukbare komponenter og et helhetlig visuelt uttrykk.
28
Svar på spørreundersøkelsen
6
Deltakere i brukertesten
7 min 13 sek
Kortere gjennomsnittlig tidsbruk med Hoolsy enn ved vanlig internettsøk i brukertesten
Resultatene er fra en begrenset brukertest og må tolkes med forsiktighet.
01
Prosjektoversikt
Hoolsys eksisterende prototype hadde utfordringer med navigasjon, informasjonsstruktur og visuelt hierarki. Målet vårt var å utvikle en mer brukervennlig og sammenhengende løsning som gjorde relevant informasjon lettere tilgjengelig, samtidig som designet skulle legge til rette for videreutvikling.
Problem
Brukere måtte forlate film- eller serieopplevelsen for å søke etter informasjon om skuespillere, produkter og steder på flere ulike plattformer.
Mål
Undersøke om en second-screen-opplevelse kunne samle informasjon i én løsning og redusere behovet for plattformbytte.
02
Rolle og team
Det jeg jobbet med
—
Brukerintervjuer
—
Wireframes
—
Designsystem
—
Brukertesting
—
Interaktive prototyper
—
Komponentbibliotek
Team Leveranser
—
Interaktiv Figma-prototype
—
React Native MVP
Team
Min rolle – UX/UI-designer
Jeg var én av to designere i et team med fire personer. Vi hadde delt ansvar for å redesigne hele grensesnittet og utvikle et designsystem med gjenbrukbare komponenter.
Jeg jobbet med brukerinnsikt, intervjuer, wireframes, prototyping og brukertesting, i tillegg til det visuelle designet i Figma. Vi samarbeidet med de to utviklerne om å få designet over i en fungerende løsning.
03
Research og metode
Slik undersøkte vi brukerbehovene
Vi ønsket å finne ut hvordan folk lette etter informasjon om film og TV, og om en samlet løsning kunne gjøre det enklere. Derfor kombinerte vi spørreundersøkelse, brukertesting og oppfølgingsintervjuer.
28
svar i spørreundersøkelsen
Kartla medievaner, mobilbruk og informasjonsbehov
6
deltakere i brukertest
Fire oppgaver i to ulike løsninger
3
metoder
Spørreundersøkelse · brukertest/observasjon · intervju
Ved å sammenligne vanlig internettsøk med den klikkbare prototypen kunne vi undersøke både om løsningen fungerte og om den reduserte behovet for å bytte mellom flere plattformer.
Metoder
Spørreundersøkelse
Vi undersøkte medievanene til 28 personer. De fleste brukte mobilen mens de så på film eller serier, og mange søkte etter informasjon om det de så på. Samtidig oppga flere at mobilbruken gjorde dem distraherte.
Dette ga oss et bedre bilde av hvordan Hoolsy kunne gjøre informasjon lettere tilgjengelig, uten å skape unødvendige avbrudd.
Brukertest og observasjon
Deltakerne løste fire oppgaver først med vanlig internettsøk og deretter i den klikkbare prototypen.
Semistrukturerte intervjuer
Dette registrerte vi
Tidsbruk
Oppgavesuksess
Plattformbytter
Navigasjon og atferd
Opplevd kognitiv belastning
Brukerreise – Johanne
Basert på innsikten fra undersøkelsene utviklet jeg en brukerreise for personaen Johanne. Her visualiserte jeg brukerens mål, behov og utfordringer gjennom ulike steg, for å få en bedre forståelse av hele opplevelsen og hvor løsningen kunne forbedres.
04
Innsikt og testresultater
Brukertestene viste at deltakerne fant informasjon raskere og med færre plattformbytter når alt var samlet i én løsning. Samtidig opplevde enkelte at informasjon som dukket opp automatisk, kunne være distraherende.
VANLIG INTERNETTSØK → PROTOTYPE
9:43
→
2:30
Tidsbruk
Gjennomsnittlig tid for å løse de fire oppgavene ble redusert med 7 minutter og 13 sekunder.
5,8
→
1,5
Plattformbytter
Deltakerne måtte navigere mellom betydelig færre sider og tjenester med prototypen.
79%
→
100%
Oppgavesuksess
Alle deltakerne fullførte de fire oppgavene ved bruk av prototypen.
Testen ble gjennomført med seks deltakere som prøvde vanlig nettsøk først og deretter Hoolsy-prototypen. Resultatene er lovende, men det lille utvalget og testrekkefølgen gjør at de må tolkes med forsiktighet.
Mindre friksjon i informasjonssøket
Deltakerne slapp i større grad å formulere egne søk, lese lange tekster og gå fra nettside til nettside. Relevant informasjon og valgmuligheter var synlige direkte i løsningen, noe som reduserte behovet for å lete og huske hvor informasjonen fantes.
Automatikk krever kontroll
Den automatiserte presentasjonen av informasjon ble i hovedsak opplevd positivt, men enkelte deltakere mente at innhold som dukket opp automatisk kunne trekke oppmerksomheten bort fra filmen eller serien. Løsningen måtte gjøre det tydelig hva systemet gjorde og la brukeren styre hva som åpnes, lagres eller kjøpes.
Designprinsipper fra funnene
01
Mindre manuelt søk
02
Tydelig systemstatus
03
Gjenkjennelige og konsistente interaksjoner
04
Brukerkontroll
05
Et oversiktlig og minimalistisk grensesnitt
05
Fra innsikt til designvalg
Vi redesignet hele grensesnittet med fokus på tydeligere navigasjon, bedre informasjonsstruktur og et mer konsekvent visuelt uttrykk. Designvalgene tok utgangspunkt i utfordringene vi så i den opprinnelige prototypen, brukerinnsikten og tilbakemeldingene fra Hoolsy.
Brukerne måtte lete på tvers av flere tjenester
Samlet relevant informasjon i én sammenhengende brukerflyt, fra synkronisering til produktinformasjon og simulert kjøp.
Automatisk informasjon kunne oppleves distraherende
Gjorde systemstatus tydeligere og ga brukeren mulighet til å pause, gå tilbake, lukke og avbryte.
Ukjente ikoner og mønstre skapte usikkerhet
Brukte kjente mobilmønstre og fast bunnavigasjon. Testene viste samtidig at enkelte ikoner og funksjoner burde forklares tydeligere.
Mye innhold konkurrerte om oppmerksomheten
Prioriterte innholdet visuelt, reduserte støy og organiserte informasjonen i tydelige kategorier og kort.
Brukerflyt
Vi prioriterte én sammenhengende brukerflyt, fra opprettelse av konto til et simulert kjøp. Målet var å vise hvordan de viktigste funksjonene hang sammen, fremfor å utvikle flest mulig funksjoner.
01
Opprette profil
02
Synkronisere innhold
03
Utforske informasjon
04
åpne produkter
05
Gjennomføre simulert kjøp
Tydelig systemstatus
Synkronisering, lagring og kritiske handlinger gir synlig tilbakemelding, slik at brukeren forstår hva systemet gjør.
Konsistente mønstre
Produktkort, personkort, knapper og navigasjon følger de samme prinsippene på tvers av løsningen.
Bedre trykkflater
Interaktive elementer ble utformet med tydelig avstand og minimum 44 × 44 pt trykkflater for å redusere risikoen for feiltrykk.
06
Endelig løsning
Resultatet ble en klikkbar Figma-prototype med nytt visuelt design, tydeligere navigasjon og gjenbrukbare komponenter. I samarbeid med utviklerne ble deler av designet også realisert som en MVP i React Native.
Figma-prototypen viser den mest komplette versjonen av designet, mens MVP-en demonstrerer de viktigste funksjonene.
Se hele brukerflyten
07
Refleksjon
01
Jeg lærte å designe for kontroll, ikke bare effektivitet
Testingen viste at prototypen gjorde informasjon enklere å finne, men at automatisk innhold også kunne trekke oppmerksomheten bort fra filmen. Derfor ble det viktig å vise tydelig hva systemet gjorde, og gi brukeren mulighet til å pause, lukke og gå tilbake.
02
Jeg ville testet flere ganger
Vi hadde et lite utvalg og rakk bare et begrenset antall testrunder. Med mer tid ville jeg testet flere deler av løsningen, ikke bare kjøpsflyten, og gjort nye tester etter endringene vi gjorde.
03
Design og utvikling burde vært tettere koblet fra start
Design og utvikling foregikk parallelt, og utviklerne måtte starte før designet var ferdig. Det skapte ekstra arbeid. Neste gang ville jeg fått på plass de viktigste komponentene og avklaringene tidligere, så begge teamene hadde hatt et tydeligere utgangspunkt.
Neste prosjekt
Tilbake til forsiden
Mari Sann
UX-designer · Oslo / Nittedal
Designed in Figma · Built in Framer · ©2026