På rett kjøl med Kystverkets designsystem
Kystverket har bygget sitt designsystem "Styrbord" på fundamentet fra Designsystemet, og bruker det som felles utgangspunkt for nye digitale tjenester.
Kystverket har bygget sitt eget designsystem, Styrbord, på fundamentet fra Designsystemet. Der har de samlet egne komponenter, mønstre og profiltilpasninger for nye digitale tjenester. Styrbord er åpent tilgjengelig på GitHub.
Vi har stilt Kystverket noen spørsmål om hvorfor de valgte å bygge videre på Designsystemet, hvordan de bruker det i dag, og hva de har lært underveis.
Hva var bakgrunnen for at Kystverket begynte å bruke Designsystemet?
Da vi startet arbeidet med en ny søknadsportal, fikk vi raskt behov for et felles komponentbibliotek. Ingen av oss ønsket å implementere enda en knapp fra bunnen av, så valget falt først på Mantine, som på det tidspunktet var et trygt alternativ.
Samtidig fulgte vi med på utviklingen av Designsystemet, og så raskt verdien av å bygge på et felles fundament for offentlig sektor. Da Designsystemet kom i versjon 1.0, begynte vi å lage Styrbord og bytte ut komponentene vi brukte, én etter én.
Vi så både verdien av kortere vei til support og styrken i å bruke det samme som andre offentlige virksomheter. Noe av det beste med utvikling i offentlig sektor er delings- og samarbeidskulturen: Koden vår er ikke en forretningshemmelighet, men et produkt for samfunnet. Derfor ser vi Designsystemet som en svært god og relevant byggekloss når offentlige tjenester skal utvikles.
Hvor og hvordan bruker dere Designsystemet i dag?
Vi bruker Designsystemet som grunnlag for vårt eget komponentbibliotek, Styrbord, og stiller det nå som krav i alle nye prosjekter, både interne og eksterne. Vi oppfordrer også eldre prosjekter til å ta det i bruk der det er hensiktsmessig. Nylig hadde vi over 15 sommerstudenter som utviklet ulike prototyper på syv uker. Alle brukte Designsystemet gjennom Styrbord, og det var veldig positivt å se at løsningene fikk et enhetlig uttrykk og tydelig fremsto som Kystverket.
Konkrete eksempler på tjenester der vi bruker Styrbord er:
- Selvbetjening, der brukere kan sende inn søknader og varsler
- HAIS, som brukes til å bestille uttrekk av historiske AIS-data
- Kystdatahuset, som gir tilgang til sjøtrafikkdata
Hvordan har dere tilpasset Designsystemet til Kystverkets egen visuelle profil og behov?
Vi har særlig jobbet med fargetilpasning, siden Kystverkets primærblå ikke uten videre lar seg oversette til en vanlig fargeskala. Derfor har vi justert fargeskalaene manuelt der det har vært nødvendig. Vi har også tilpasset skrifttypene til det vi allerede bruker på nettsiden, og redusert skriftstørrelsen ett nivå.
Noen komponenter har vi utvidet med flere valg og varianter, for eksempel knapper med stripete kantlinje og avatarer med flere farger og kantlinjetyper. Andre komponenter har vi bygget med Designsystemet som utgangspunkt, som vår DatePicker. Den bruker en Input med typen date, og legger til en knapp som åpner den innebygde datovelgeren der det er mulig.
I praksis ser vi Designsystemet som et solid fundament for vårt eget komponentbibliotek. Det gir oss et felles utgangspunkt, samtidig som vi kan tilby flere og mer tilpassede komponenter. Designsystemet må naturlig nok være litt konservativt, mens vi kan tillate oss å lage komponenter som er mer spesialiserte, og av og til litt sære.
I utviklingen av nye komponenter spør vi oss selv oftere og oftere: Hvordan har Designsystemet løst det, eller hvordan ville de ha løst det?
Hva opplever dere som de største gevinstene ved å bruke et felles designsystem i bunn?
Når offentlige virksomheter bygger på det samme designsystemet, får de et felles fundament for brukeropplevelse, samtidig som det fortsatt er rom for egne visuelle uttrykk. Når vi samler oss om felles mønstre og retningslinjer, blir tjenestene enklere å kjenne igjen og bruke. Det gir også et slags konkurransefortrinn at vi kan samarbeide og dele erfaringer på tvers av etater og offentlige virksomheter.
De største gevinstene er at utviklere trenger å ta færre designvalg og kan bruke mer tid på funksjonalitet. I tillegg har vi solid dokumentasjon å vise til, noe som gjør det enklere å onboarde konsulenter og nyansatte, og sikre at vi bruker de samme prinsippene for komponenter og stil. Et felles uttrykk bidrar også til samhold i en stor og variert organisasjon.
Hva har vært mest utfordrende?
Det har stort sett vært uproblematisk å ta i bruk Designsystemet. Det vi særlig har måttet løse selv, er toppmeny, navigasjon, kart og skjema. Skjema er et eget fagområde, med alt fra validering og oppsummering til gode tilbakemeldinger til brukeren.
En ting vi har savnet, og derfor laget selv, er en komponent for å stable og gruppere andre komponenter. Mantine har for eksempel Stack og Group, mens vi har laget vår egen variant, Box. Den er i praksis en flex-container som gjør det enkelt å sette grunnleggende flex-regler som direction, gap og padding. Det hadde vært nyttig med en felles komponent som blant annet kunne gi standard avstand mellom komponenter i et skjema.
Hva ønsker dere fra Designsystemet fremover?
Selv om vi alltid ønsker oss flere komponenter, hadde det vært minst like nyttig med enda flere gode retningslinjer for skikk og bruk innen brukeropplevelse. Vi ønsker oss også mer støtte for komposisjon av komponenter.
Et annet ønske er en bedre måte å bruke den gode dokumentasjonen som allerede finnes, men med egne tilpasninger. Da vi bygget opp vår Storybook, tok vi en snarvei ved å kopiere inn stories fra Designsystemet og justere dem ved behov. Det fungerer fint én gang, men blir tungt å vedlikeholde over tid. Vi er usikre på nøyaktig hvordan det bør løses, særlig når vi har lagt til egne valg og varianter.
Bidragsytere