Eksamensprosjekt i User First – UX Essentials ved ONF.
Designet ble en responsiv side med design for mobil, tablet og nettside, utviklet med eget design system for variables, design tokens og komponenter.
Oppgaven ga meg trygghet og kunnskap om UX-prosessen, og lot meg teste mange forskjellige varianter av brukerundersøkelser og research.
Lenke til prototypen i Figma
Brief:
Gruppeprosjekt med fokus på UX research og brukeropplevelse. Studentvalgt prosjekttema: BeredSkapet, en nettside for beredskap for nordmenn i alle aldre.
Opprinnelig problem statement:
Problem statement:
Det er 2026, og kriger nærmer seg nesten alle rundt om i verden, og ekstremvær truer. Nordmenn ønsker å være forberedt på nødsituasjoner, men sliter med å vite hvor de skal begynne, hvilke forsyninger de trenger og hvordan de skal opprettholde beredskapen over tid. Under faktiske kriser trenger de umiddelbar tilgang til nærliggende tilfluktsrom og beredskapsressurser, men denne informasjonen er fragmentert på tvers av flere kilder og vanskelig tilgjengelig under stress.
Mål:
Denne oppgaven hadde fokus på prosessen frem til et design, og gruppen brukte derfor store deler av semesteret på research og utvikling av deliverables. Vi utførte brukerintervjuer, flere runder med brukertester, lagde personas, user journeys, fant pain points og brukerønsker.
Gruppen besto opprinnelig av 4 studenter, men etter sykdom i nærmeste familie til et av medlemmene ble den redusert til 3 halvveis i semesteret. Vi fokuserte tidlig på lik fordeling av oppgaver og erfaring, og valgte å jobbe med hver vår del av siden slik at alle skulle få jobbe med de samme oppgavene.
Research-fasen:
Vi utviklet et brukerintervju med 25 spørsmål, rettet mot nåværende egenberedskap, opplevelse av tilgjengelig informasjon og ønsker om framtidig informasjon. Vi intervjuet til sammen 16 personer, i alder fra 23 til 71 år. Menn og kvinner, gifte og ugifte. Målet med intervjuene var å finne pain points, ønsker og behov. Etter intervjuene samlet vi funnene våre i like temaer.
Noen hovedfunn var blant annet:
- De følte at informasjonen var spredt og fragmentert
- De fleste følte seg noenlunde forberedt, men når man spurte videre viste det seg at de manglet viktige ting som nok vann, mat som ikke må kokes eller varmes, eller alternativ strøm.
- De fleste føler at Norge er trygt, men at økende uro i verden gjør dem mer bevisst på behovet for egenberedskap.
- De ønsket seg enkle sjekklister og måter å huke av for det de selv eier.
Vi utviklet tre personas til vårt prosjekt, i tre forskjellige livsstadier. Vi ønsket å utforske behovene til forskjellige grupper, og prøve å dekke inn flere målgrupper med det endelige resultatet.
Vi opprettet så en foundation der vi bestemte oss for product mission, product vision og product strategy, og siden dette var et skolearbeid som skulle opprettes over en kortere periode, et forenklet roadmap over når ting burde gjennomføres og ferdigstilles.
Vi gikk så inn i ideation og brukte post-its og tankekart til å finne ideer på hva vi ønsket at vår side skulle inneholde for å treffe noen eller de fleste av funnene våre. Vi gikk så gjennom flere runder med prioriteringer og nedskalering for å finne vår MVP, blant annet med MoSCoW-metoden. Våre Must Haves var: utstyrslister som kan skrives ut, enkel navigasjon, påminnere for utbytting av beredskapsvarer og skjema for å registrere seg.
Vi gikk også gjennom flere iterasjoner av et site map for å finne oppbyggingen vi ville bruke før vi gikk inn i design-fasen. Skjermbildet her viser utgavene vi gikk gjennom.
Design-fasen
Etter research-fasen var over, gikk vi over til Figma for å begynne på designet. Vi begynte med forenklede skisser over mulig oppsett, og gikk over til å sette opp LowFid wireframes med dette oppsettet.
Etter LowFid gikk vi videre til å lage en fungerende MidFid prototype, som vi tok med til 6 brukere og testet brukerflyt og forståelse av komponentene. Fokus her var på å designe våre MVP-features og å gjøre prototypen fungerende for å gjennomføre testene.
Etter testene og tilbakemelding fra brukere, gikk vi så videre til vår HighFid prototype, som ble vår innleverte prototype. Vi endret noen elementer basert på tilbakemelding. Blant annet fikk vi tilbakemelding på at det var forvirrende med to sett med redigerbare sjekklister, så vi gikk over til å ha redigerbare lister kun for innloggede medlemmer, og enkle punktlister basert på informasjon fra DSB for brukere uten innlogging.
Her utviklet vi både mobil-, tablet- og webversjon, vi utviklet en fargepalett, logo og prototype med tilnærmet full funksjonalitet. Vi opprettet variabler og komponenter som ble brukt i hele prototypen uavhengig av hvilken student som laget siden. I denne case studien viser jeg kun mine egne skjermer, men lenken til den fulle prototypen ligger i toppen, der man kan se flyten på tvers av prosjektet.
Designsystemet:
Vi brukte primitives og semantic for inndeling av farger, størrelser og typografi.
