Verdensdagen for psykisk helse: Strukturert innhold og scrollytelling

UX/UI

Verdensdagen for psykisk helse er en nasjonal befolkningskampanje som fremmer åpenhet, kunnskap og forståelse for psykisk helse. Som lærling fikk jeg ansvar for å videreutvikle sjekklisten for psykisk beredskap og temasiden, med mål om å gjøre innholdet mer interaktivt, engasjerende og gjenbrukbart gjennom strukturert innhold.

KundeVerdensdagen for psykisk helse
SamarbeidArbeid gjort som lærling i Kult Byrå
LeveranseDesign og videreutvikling av moduler og mal for temaside
Periode2026

Utfordring

Som del av Verdensdagen for psykisk helse sitt tredje år med «Psykisk beredskap» var det behov for å videreutvikle en allerede godt etablert sjekkliste til et mer interaktivt og nyttig verktøy, med koblinger til relevante ressurser som bland annet aktiviteter, undervisningsopplegg og podcast.

Samtidig så vi et behov for å gjøre temasidene mer opplevelsesbaserte og engasjerende, og for å gi dem et tydeligere visuelt og funksjonelt skille fra de øvrige, statiske undersidene.

Sjekkliste før

Sjekkliste før

Sidetopp før

Innsikt og strukturarbeid

Arbeidet startet med å sette meg inn i hvordan sjekklisten var bygget opp, både teknisk og strukturelt. Jeg gikk gjennom modulbiblioteket i Sanity for å kartlegge hvilke komponenter som allerede fantes.

Sjekklisten var allerede strukturert som en tidslinje, med et begrenset sett interaktive elementer som dropdowns, knapper og lenker. Dette ga et tydelig utgangspunkt for det videre arbeidet. Hva kunne gjenbrukes, og hva måtte videreutvikles for å løfte både funksjonalitet og brukeropplevelse?

Neste steg var å koble innholdstyper til hvert punkt i sjekklisten, og definere hvordan disse best kunne presenteres visuelt. Aktiviteter og undervisningsopplegg kunne for eksempel presenteres i samme type komponent, med bilde og tekst, men skilles tydelig med tags og farger som indikerer innholdstype.

Til slutt landet jeg på tre hovedkomponenter.

  1. Bilde og tekst: aktiviteter, plakater og undervisningsopplegg
  2. Informasjonsboks: gjesteinnlegg
  3. Spotify-komponent: lenker til podcast

Interaktiv sjekkliste for psykisk helse

De første skissene hadde innholdet plassert direkte inni hvert punkt i tidslinjen. Det ble tydelig at komponentene tok mye plass og krevde mye scrolling, noe som gjorde sjekklisten tung å navigere.

Løsningen ble å beholde komponentene, men presentere dem i dropdowns. På den måten ble innholdet mer kompakt og mindre visuelt dominerende i listen, og brukeren kunne selv velge hvilke deler de ville utvide og fordype seg i.

Sjekklisten fikk også en tydeligere introduksjon, med tittel og ingress i toppen, slik at det ble enklere for brukeren å forstå hensikten med siden.

I tillegg ble det designet to varianter av en gjenbrukbar innholdsmodul for sjekklistepunktene. Modulen kan brukes på tvers av nettsiden, ikke bare på temasiden, noe som gir større fleksibilitet. Sjekklisten kan dermed fungere både som kampanjeverktøy og i andre sammenhenger, for eksempel undervisningsopplegg. Valget falt til slutt på alternativ 2.

  1. Alternativ 1: En enkel visualisering av hvert punkt med tittel og tekst
  2. Alternativ 2: En mer omfattende variant med trekkspillmenyer og tilhørende ressurser

Kompontenter til sjekkliste

Alternativ 1: En enkel visualisering av hvert punkt med tittel og tekst

Alternativ 2: Trekkspillmenyer og tilhørende ressurser

Scrollytelling-modul

Temasiden hadde et tydelig behov for å løftes fra en statisk informasjonsflate til en mer opplevelsesbasert side. Løsningen ble en modul inspirert av scrollytelling, der bilde og informasjonsbokser beveger seg over en sticky bakgrunn ved scroll. Dette gir mer rytme og en tydeligere progresjon i innholdet.

Siden sjekklisten allerede bestod av gjenbrukbare komponenter, kunne disse integreres i modulen. I tillegg åpnet dette for mer bevisst bruk av flyt og dramaturgi, gjennom farger, plassering og variasjon i innholdsoppsett. Alt dette er redigerbart i Sanity, slik at redaktørene selv står fritt til å tilpasse farger, plassering og innhold uten å være avhengig av utvikler.

Redesign av sidetopp

Jeg designet også en ny sidetopp til temasiden, i samme uttrykk. Den gamle samlet mye innhold i toppen, video inkludert, og ga et statisk førsteinntrykk.

I den nye sidetoppen er scroll-effekten videreført, slik at overgangen til resten av temasiden oppleves sømløs. Video er samtidig flyttet ut i en egen modul med egen tittel og beskrivelse, noe som gir bedre kontekst og større fleksibilitet i bruk.

Sidetopp før

Sidetopp etter

Scrollytelling-effekt i sidetopp

Resultat

Sluttresultatet er en temaside som oppleves levende og engasjerende, i stedet for statisk og informasjonstung. Scrollytelling gir siden fremdrift og skaper nysgjerrighet underveis, mens den strukturerte oppbyggingen gjør at brukeren alltid vet hvor de er og hva som kommer.

Sjekklisten har gått fra å være en lang liste til å bli et reelt navigasjonsverktøy, der innholdet er organisert slik at brukeren selv styrer hvor mye de vil fordype seg i hvert punkt. Dette gjør siden mer tilgjengelig for ulike behov, enten man vil skumme raskt eller gå i dybden.

For redaktørene betyr de nye komponentene og modulene økt frihet. Innhold, farger og plassering kan justeres direkte i Sanity, uten behov for utvikler, noe som gjør det enklere å holde siden oppdatert og tilpasse den til nye behov over tid.