Prosessen
Helsedirektoratet startet utviklingen av designsystemet Frisk som et initiativ fra frontendutviklerne høsten 2022. Siden oppstarten har det vært mange dyktige konsulenter fra twoday som har jobbet tett sammen for å få til dette, sammen med en styringsgruppe fra Helsedirektoratet selv. Med en teknisk proof of concept på plass, ble designsystemet lansert i starten av 2023. Prosjektet ble gjort "open source" internt slik at alle som ønsker kan bidra. På denne måten styrkes også eierfølelsen til designsystemet, noe som var et ønske fra Helsedirektoratet.
Designsystemet er et felles initiativ og vokser stadig i takt med bidrag fra hele porteføljen til Helsedirektoratet. Før komponentene blir innlemmet i designsystemet går de igjennom flere ledd med kvalitetskontroll; både automatiserte quality gates og manuell fagfellevurdering av de teknisk ansvarlige. I tillegg gis det en overordnet godkjenning av produkteier.
– Vi har regelmessige møter med kun de ansvarlige, åpne møter der alle interessenter kan delta og en åpen Slack-kanal. Her diskuterer vi ønsker, behov og løsningsforslag og sørger for at komponentene utformes og utvikles slik at de er nyttige for alle, sier Pernille.
Løsningen
Designsystemet Frisk ble utviklet for å oppnå høyere kvalitet, en mer gjennomført visuell profil og bedre universell utforming. Designsystemet er organisert i tre deler; Figma, Storybook og Zeroheight.
Figma brukes til å brainstorme, utforme, forberede og dokumentere komponenter før utvikling. Hos Helsedirektoratet er det behov for støtte for flere tema i designsystemet – blant disse er profilene til Helsedirektoratet, Helfo og Pasient- og brukerombudet. Det er brukt ulike variabler (design tokens) til å sette opp utformingen til de ulike temaene. På den måten kan prosjektene utvikles med samme komponenter og samtidig bruke det variabelsettet de selv ønsker.
Storybook gir en kodenær dokumentasjon og live visualisering av komponentene. Gjøres det en oppdatering i designsystemet vil den umiddelbart reflekteres i Storybook.
Zeroheight brukes til generell dokumentasjon, inkludert retningslinjer og best practices. Her presenteres for eksempel komponenter fra Figma, interagerbare komponenter hentes inn fra Storybook og retningslinjer innen universell utforming dokumenteres.
