Vi ble kjent med nettsiden for å danne oss en oversikt over hvordan nettsiden fungerte og hva som befant seg der og hvor. Deretter gjorde vi en evaluering der vi så på hvordan nettsiden var i forbindelse med «Jacob’s Ten Usability Heuristics», og om nettsiden oppfylte lovgitte WCAG krav.
Deretter brukte vi «think-aloud» og dybdeintervju når vi satte i gang med brukertesting med vekt på brukervennlighet. Vi fant brukere til testing av nettsiden, som var innenfor målgruppen – både unge voksne samt unge og eldre foreldre.
Think-aloud metoden er en prosess hvor testpersonene snakker høyt om hva det er de tenker og føler mens de utfører en oppgave. Det er en metode som er vanlig å bruke for brukervennlighetstester. Vi valgte å følge opp brukertesten med et intervju hvor vi stilte diverse spørsmål om opplevelsen og tankene deres.
MIRO hjalp oss med å organisere og forstå problemene bedre. Vi fordelte informasjonen på post-it lapper og gjorde affinity diagramming. På denne måten fikk vi en oversikt over brukerens behov og ønsker, og hvilke funksjoner vi skulle ta med videre i en sitemap. Hovedfunnene våre var at det var vanskelig å finne fram til spesifikke aktiviteter, ikke så effektiv nettside, ikke så lett å finne kontaktinfo, vanskelig å skumlese og manglende filtreringsmuligheter.
Vi gjorde MOSCOW prioriteringsplan ut fra affinity diagramming, hvor vi prioriterte funksjoner vi ønsket å ha med fra mest til minst viktig. På denne måten fikk vi en oversikt over hva som er best å fokusere på og inkludere med i løsningen.Sitemap lagde vi basert på MOSCOW prioriteringen. Sitemap har oversikt over alle funksjonene/sidene som skal inkluderes i løsningen.
Personas var også viktig å lage, slik at vi kunne lage realistiske scenarioer som vi kunne jobbe med videre i Figma. Personas er dybdeprofiler for fiktive personer i målgruppen vår.
Scenario 1:
Hanne kjeder seg alene mellom to forelesninger og driver å scroller mobilen. Hun vil ha noe å gjøre på fritiden (og være med noen), og bestemmer seg for å søke etter aktiviteter i nærheten. Da kommer hun over nettsiden ungfritid.no og klikker seg innpå for å sjekke ut aktivitetene de tilbyr. Hun oppdager at de tilbyr støtteordninger, og klikker seg inn for å sjekke det ut. Finner Hanne aktiviteter som er rimelig, i nærheten av der hun bor og som passer for folk på hennes alder?
Scenario 2:
Yngstedattera til Geir er mye alene etter skoletid. Etter at hun startet på barneskolen har hun blitt mye mer sjenert, og Geir skjønner at hun syns det er vanskelig å skaffe seg nye venner og å være med i leken med de andre barna. Foreldrene har fått et skriv fra skolen om nettsiden til ungfritid.no og Geir bestemmer seg for å sjekke den ut sammen med dattera for å finne en aktivitet som kan passe for henne.
Vi lagde papirskisser for å komme i gang med ideeringsfasen og visualiseringen av nettsiden, og da gjorde vi crazy-8, altså lage enkle og kjappe lo-fi skisser. Deretter tok vi skissene over i figma og lagde digitale versjoner av dem. Vi gjorde en dot-voting av lo-fi prototypene av hva vi likte best og ville ha med videre. Slik jobber vi med mid-fi skissene også, de litt mer detaljerte skissene. Vi begynte å jobbe mer med de ulike funksjonene fra site-mapen i dette stadiet.
Underveis og før mid-fi-skissene, skisset vi på designsystem for å gå videre til hi-fi der man har det endelige produktet.
Designskissene var mange, men her ser vi noe av det. Vi skisset på skrifttyper, farger, knapper, «cards» og logo. Vi ønsket å gå for de beste valgene for brukervennlighet og lekenhet.
Videre lagde vi lagde et fullstendig designsystem med retningslinjer, standarder og prinsipper samlet på en plass. Vi lagde en rekke komponenter med ikoner, knapper og komponentbibliotek med ulike skjemaer og andre elementer. Vi lagde også logo, fargepalett og valgte passende typografi.
Resultatet ble slik:
