Se om du kjenner deg igjen i følgende:

I virksomheten du jobber i, har dere svært ulik stil på tjenestene og produktene dere tilbyr. Dette omfatter både typografi, illustrasjoner, bilder, fargebruk og språk.

Å bruke tjeneste X oppleves som noe helt annet enn å bruke tjeneste Y. På tjeneste X har dere lysere og sterkere farger, andre illustrasjoner og en litt mer leken skriveform hvor utropstegnene sitter løst. På tjeneste Y, på den annen side, framstår dere litt strammere i både språk og design, mer seriøse og litt mer “juridiske”.

Hva som er best er i mange tilfeller subjektivt, og avhenger i stor grad av hva som er strategien deres. Men det at produktene fremstår som så lite beslektet med hverandre som de gjør i dag, bidrar i hvert fall ikke til at identiteten deres blir sterkere – snarere tvert imot.

Spoler man noen år fram i tid, hvor dere kanskje har lansert ytterligere to-tre produkter eller tjenester som alle skal ha hver sin unike identitet, forsterkes dette problemet ytterligere…

Kjenner du deg igjen?

Det du trenger er et designsystem.

Da oppstår det noen spørsmål:

• Hva er et designsystem?

• Trenger VI et designsystem?

• Er det verdt investeringen?

• Hvordan kommer vi i gang?

La oss ta for oss dette i tur og orden.

Hva er et designsystem?

Et designsystem er en samling av retningslinjer, verktøy og komponenter som hjelper team med å utvikle og videreutvikle digitale produkter, hvor målet er å hjelpe teamene til å bevege seg i samme retning.

Tenk på et designsystem som et LEGO-sett. Du har ulike farger og former på klossene, samt en instruksjonsbok som viser hvordan du kan bygge en spesifikk modell. Selv om det ligger klare føringer i instruksjonsboken på hvordan byggeklossene bør settes sammen, har du friheten til å bruke de samme byggeklossene for å bygge noe helt eget, noe nytt.

På samme måte gir et designsystem deg de grunnleggende "byggeklossene" (komponenter, farger, typografi osv.) og "instruksjonene" (retningslinjer, beste praksis) du trenger for å bygge en digital tjeneste. Men det gir deg også rom for å være kreativ og tilpasse designet til spesifikke og nye behov.

Om alle teamene i en stor organisasjon skuler til designsystemet før de skal lage noe, og bestreber seg på å følge retningslinjene, vil tjenestene de lager framstå som “i familie”, med det resultat at identiteten blir styrket – ikke svekket.

Eksempler på designsystemer

Norske designsystemer:

• Designsystemet – felles designsystem for offentlige tjenester

• Elsa – Domstolenes designsystem

• Aksel – designsystemet til NAV

• Origo – designsystemet til Oslo Kommune

• Hedwig – designsystemet til Posten og Bring

• Skatteetaten

• Altinn

• EnTur

Store, internasjonale designsystemer:

• Material Design fra Google

• Human Interface Guidelines fra Apple

• Fluent Design fra Microsoft

Trenger VI et designsystem?

La oss si at dere har disse tjenestene:

• Nettstedet deres

• Tjeneste X

• Produkt Y

...og en haug med andre tjenester.

Gitt at dere har et stort nettsted og flere digitale tjenester som i liten grad følger de samme retningslinjene, vil et felles designsystem være svært nyttig.

Designsystemet vil bidra til å gi en konsistent brukeropplevelse på tvers av alle tjenestene dere tilbyr. I tillegg vil designsystemet kunne effektivisere arbeidet med å bygge nye tjenester og videreutvikle de tjenestene dere allerede har.

La oss ta et eksempel...

Mange av komponentene vi har bruk for på nettstedet vårt trenger vi også i Tjeneste X og Produkt Y, f. eks. knapper, tabeller og skjemaelementer.

Vi ønsker ikke nødvendigvis at disse komponentene skal være helt identiske på tvers av produktene. Men vi ønsker at de skal være like brukervennlige, møte de samme kravene til universell utforming og at de skal være “i familie” når det gjelder design.

Om vi lager og dokumenterer komponentene ett sted, i designsystemet, og samtidig lager dem fleksible nok til å kunne brukes i forskjellige varianter i forskjellige kontekster, kan vi bruke de samme komponentene på tvers av produktene og tjenestene våre.

Eksempler på fleksibilitet:

• Ulike fargetemaer

• Ulike størrelser

• Ulik plassering

• Ulik bredde og høyde

En knapp kan eksempelvis være både grønn (nettstedet) og blå (Tjeneste X), og stor noen steder og liten andre steder, men fremdeles være den samme knappen. Koden til knappen kan være nøyaktig den samme, så lenge koden tar høyde for at knappen kan ha ulikt utseende i ulike kontekster.

Resultatet blir en mye bedre brukeropplevelse for brukerne våre, som i mange tilfeller veksler mellom nettstedet vårt og de ulike produktene våre.

Er det verdt investeringen?

Antagelig. Dette er hvorfor:

Økt effektivitet: I stedet for at hvert team sitter på hver sin tue og designer og utvikler nye ting, kan vi gjenbruke design og kode som er laget tidligere.

Økt kvalitet: Når man gjenbruker design og kode som allerede er kvalitetssikret og gjennomtestet, sikrer vi at det blir høy kvalitet også på de nye tingene vi lager.

Økt kompetanse: Hvis et team har lykkes med å lage noe som fungerer, er det stor sannsynlighet for at andre team vil ha nytte av det samme – være seg prosessen, designet eller koden som ble laget. Få det inn i designsystemet!

Unngå dobbeltarbeid: Hvorfor finne opp kruttet på nytt, hvis et annet team har laget noe som du ser du har bruk for?

Raskt ut i produksjon: Når design er godt dokumentert i et designsystem, går det mye raskere å få realisert designet og få det ut i produksjon.

Enklere skalering: De fleste løsninger starter i det små, og hvis små og store designavgjørelser blir dokumentert i et designsystem, blir det lettere å se det store bildet og skalere på en god og effektiv måte.

Single source of truth: Én fasit sikrer en helhetlig opplevelse av merkevaren deres, på tvers av alle flater – være seg analoge eller digitale.

Hvordan komme i gang med et designsystem?

Her er noen råd:

Kort sikt

• Begynn med å gi noen i virksomheten din ansvaret for utarbeide et designsystem.

• Finn de riktige partnerne. De færreste har all kompentanse på huset.

• Kom tidlig i gang med å faktisk lage noe, og juster underveis.

  Utarbeide grunnleggende…

  • design

  • komponenter

  • maler

  • retningslinjer

• Inngå noen kompromisser ved å adoptere design på tvers av nettstedet deres og produktene dere tilbyr.

Dette er eksempler på justeringer som er enkle å implementere i en førsteversjon av designsystemet:

1. Sørg for at typografien er lik på alle sidene, ved å lage et enkelt regelsett for hvilke fontstørrelser som skal brukes, samt noen føringer på når og hvordan bruke de ulike fontstørrelsene.

2. Bruk de samme illustrasjonene og bildestilene på tvers av produktene. Framfor å introdusere en ny stil, kan dere vurdere å bruke samme strek/stil som dere allerede har.

3. Bruk det samme fargetemaet – bli enige om hvilke farger som “er” dere, og sørg for at disse fargene brukes konsekvent overalt. Her kan produktene få egne sett med farger (temaer) som viser “slektskap” til virksomheten, men som samtidig skiller seg ut.

4. Lag noen enkle regler på tone-of-voice: Hvem er egentlig VI? Hvilken stemme har VI? Sørg for at alle nye tekster som skrives følger disse reglene, og jobb kontinuerlig med å forbedre eksisterende tekster.

Lengre sikt

• Opprett en faggruppe som får i oppdrag å forvalte designsystemet. Gruppen bør bestå av representanter for forskjellige team i virksomheten, som til daglig jobber med de forskjellige produktene og tjenestene vi tilbyr.

• Faggruppen bør ha jevnlige møter hvor de diskuterer behovene til de ulike teamene i virksomheten, og sørger for at designsystemet gir teamene de verktøyene de har behov for.

• I tillegg bør faggruppen holde seg oppdatert på design og designsystemer ved å sette av noe tid til kompetanseheving.

• Medlemmene av faggruppen bør være rådgivere og sparringspartnere for alle som skal bruke designsystemet.

• Bygge felles eierskap til systemet, ved å etablere arenaer hvor alle i virksomheten kan bidra med problemstillinger og løsninger.

Hjelp! Jeg fikk ansvaret for designsystemet! Hva gjør jeg nå?!

Som eier av designsystemet, bør du blant annet bruke tid på disse tingene:

• Sette deg inn i hva designsystemer gjør og hvorfor de fungerer så godt.

• Følge med på all produktutvikling i virksomheten din.

• Jobbe for at teamene i virksomheten samarbeider når noe skal lages eller videreutvikles.

• Jobbe for en kultur i virksomheten hvor det er naturlig å dele det man lager med de andre.

• Invitere til og gjennomføre ukentlige møter med alle produktteamene.

• Sørge for at felles designavgjørelser blir dokumentert i designsystemet.

• Ha den endelige designavgjørelsen når det må inngås kompromiss!

• Lede utviklingen av selve designsystemet.