Blog

Derfor skal I have jeres eget design system

Kreativt kaos og ineffektiv produktudvikling

Interaktionerne mellem virksomheder og kunder er eksploderet i takt med at virksomheders forretning, services og arbejdsgange bliver mere digitale. Landskabet med digitale løsninger vokser og løsningerne bliver nu skabt i et samspil mellem forretningsudviklere, designere, udviklere og slutbrugere.

At udvikle digitale løsninger kan derfor hurtigt resultere i kreativt kaos og ineffektive processer. I har måske oplevet det som følgende symptomer…

  • Udviklingen af digitale produkter kræver mere tid og flere ressourcer end nødvendigt
  • Der er ingen konsistent brugeroplevelse; hverken i jeres enkelte løsninger eller på tværs af dem
  • Jeres branding i de digitale løsninger er usammenhængende og modstridende
  • I har decentraliserede teams, hvor løsninger designes, udvikles og vedligeholdes på forskellige måder
  • I har ingen klar metode til at forbedre og vedligeholde jeres digitale løsninger

Overordnet kan den digitale produktudvikling føles som at genopfinde den dybe tallerken igen og igen.

Her kommer design systemer ind i billedet. Et design system danner fundamentet for at udvikle et produkt effektivt, uden at gå på kompromis med brugeroplevelsen – tværtimod, er det systematiske arbejde med design nøglen til at skabe en sammenhængende brugeroplevelse på tværs forskellige kontaktpunkter.

Hvad er et design system? 

Et design system er en samling af digitale, genanvendelige og funktionelle elementer, guidet af tydelige retningslinjer som produktteams bruger til at skabe en sammenhængende brugeroplevelse på tværs af digitale løsninger. Design systemer er et centralt bindeled mellem fagligheder, hvor det optræder som et fælles sprog, der guider produktudviklingen. Et design system består af:

  • Visuel design af elementer som knapper, inputfelter, menuer osv.
  • Kode tilhørende elementerne, som udviklere kan anvende
  • En lettilgængelig dokumentation med overblik og beskrivelse af elementerne
  • Biblioteker, som designere og udviklere kan tilgå elementerne fra

Internationale organisationer som Google, Airbnb, Microsoft og Spotify har udviklet deres egne design systemer, og herhjemme er Digitaliseringsstyrelsen gået sammen med Erhvervsstyrelsen om at udvikle Det fælles designsystem til borger.dk.

 

"Når brugerne genkender designet på tværs af selvbetjeningsløsninger bliver de mere effektive i deres interaktion med løsningerne."

Det fælles design system

Designsystem.dk

Men design systemer er ikke kun noget for de helt store organisationer. Vi har senest samarbejdet med Garuda om at skabe et design system, der understøtter deres digitale services indenfor HR-processer. Fælles for alle de her organisationer er, at de har flere digitale løsninger, der skal vedligeholdes og leve i lang tid. Her har design systemer følgende seks fordele:

1. En ensartet brugeroplevelse 

Inkonsistente brugeroplevelser resulterer i forvirring, hvor det er svært for brugerne at lære systemet at kende. Ved at have standardiserede elementer kan der skabes mere genkendelige og forståelige sammenhænge: både i og på tværs af systemer. Dette resulterer i en nemmere og hurtigere gennemførelse af arbejdsopgaver, der i sidste ende giver tilfredse brugere. Ensartethed skaber ikke kun gode brugeroplevelser, men kan også bruges af virksomheden til at skabe et sammenhængende brand på tværs af forskellige digitale løsninger og services. Således kan designsystemer også bruges til at forene brandet med brugeroplevelsen, og sikre et tydeligt aftryk af den visuelle identitet.

2. Effektiv, skalerbar og agil produktudvikling 

Design systemer består af elementer med genanvendelig kode – digitale byggeklodser. Disse er uafhængige af den specifikke brugskontekst og kan derfor bruges i forskellige sammenhænge. Når man har et overblik over byggeklodserne og ved hvordan de skal bruges, så er det meget nemmere at bygge det ønskede produkt. Med andre ord, så behøver man ikke at kode det samme flere gange.

Dette er særligt fordelagtigt ved decentraliseret design, udvikling og vedligeholdelse af systemer. Det kan være i form af teams, der arbejder med forskellige digitale løsninger som en webside, kundeportal osv. Det kan også være, hvis man har flere leverandører, der arbejder med de forskellige digitale løsninger.

Effektiviteten kommer ikke kun til udtryk i udviklingen, men også i designprocessen. Det er ikke længere nødvendigt at lave utallige, detaljerede designoplæg, da design systemet nu gør det muligt for udviklere at skabe nye sider udelukkende på baggrund af wireframes. Det boost, som design systemer giver i udviklingsprocessen, medfører også, at man hurtigt kan komme i gang med en prototype, og det åbner nye muligheder for at være eksperimenterende og opnå læringer tidligt i forløbet.

3. Styrker samarbejdet mellem fagligheder  

Et design system giver teammedlemmer en fælles platform til at bygge digitale løsninger sammen. I stedet for at have forskellige navne for samme element, vil teamet nemmere kunne samarbejde med et fælles sprog. Desuden skaber et design system også gode forudsætninger for at holde sig opdateret. Hvis nogen introducerer en ændring i design systemet, eksempelvis en tilføjelse af et element, burde alle teammedlemmer blive notificeret om dette. Udover at være et vigtigt kommunikationsværktøj mellem designere og udviklere, så er design systemer også et vigtigt led i at bryde siloer mellem produktteams. Design systemer kaster lys over de elementer, som ellers kun plejede at leve i isolation i de enkelte digitale løsninger. Derfor styrker det også vidensdelingen mellem henholdsvis udviklere og designere, der arbejder på forskellige løsninger.

4. Struktureret indkapsling af læring og velafprøvede elementer 

Et design system udgør en levende base, som man skal tilpasse og forbedre, i takt med at man bliver erfaringer rigere, og ens behov ændres. Dette giver en kæmpe gevinst for brugeroplevelsen, da et design system, og derved de digitale løsninger, med tiden vil bestå af elementer, der er gennemtestede i forskellige sammenhænge. Et design system skaber på denne måde gode forudsætninger for at bygge videre på erfaringer, og konstant forfølge den bedste brugeroplevelse. Denne dokumentation af viden er også fordelagtig som en del af onboarding-processen for nye kollegaer. Det er en oplagt måde at forankre design systemet i organisationen, og medarbejderen vil allerede fra begyndelsen forstå de fordele som design systemet giver.

5. Frigiver ressourcer til at skabe mere værdifulde løsninger 

Man kan ved første indtryk fejlagtigt komme til at tro, at design systemer hindrer kreativiteten for en designer og overtager vedkommendes opgave. Systemer vil nu se mere ens ud, og en udvikler kan komme meget længere selv på kortere tid. Men tværtimod faciliterer design systemer et arbejdsmiljø med kreativ tænkning på et højere plan. Designere behøver nu ikke længere at bruge tid på at vælge den rigtige farve hver gang, eller designe en knap, der findes i næsten samme afskygning et andet sted. Han/hun kan i stedet bruge ressourcer på nye, mere komplekse problemer som at gentænke en brugerrejse, eller designe en innovativ feature, der løser et brugerbehov. Således kan designeren fokusere på det, han/hun gør bedst, og skabe mest værdi for brugeren, fremfor at løse samme problem igen og igen.

6. Gode forudsætninger for overholdelse af tilgængelighed

Design systemer giver en unik mulighed for at designe brugeroplevelser, så de bedre overholder krav om tilgængelighed. Ved at sikre at både elementernes design og dertilhørende kode overholder WCAG, kan udfordringer for brugeren mindskes. Men selvom individuelle elementer lever op til krav om tilgængelighed, er det dog ikke ensbetydende med at hele brugeroplevelsen automatisk vil gøre det. Når elementerne sættes sammen, udgør de nemlig en side eller et flow, hvor der også skal tages højde for tilgængelighed. Ved at forholde sig til tilgængelighed i design systemet danner man altså et solidt grundlag, men arbejdet fortsætter også i brugen af elementerne.

Organisationer investerer i design systemer 

Ifølge en undersøgelse foretaget af Forrester (2020), investerer 86% af organisationer, der arbejder med design eller UX, stort i design systemer. Cirka halvdelen af disse organisationer har lanceret deres design system og har fokus på forankring af det, mens den anden halvdel oplever en forankring af det i organisationen, og nu har fokus på at skalere det. De organisationer, der er længst i denne proces, oplever særligt tre gevinster: en højere kundetilfredshed, en mere effektiv produktudvikling og en forbedret time-to-market.

Hvad så nu? 

At udvikle et design system og forankre det i organisationen kan være en større investering. Det kan omfatte en række digitale løsninger, der kan være en del involverede aktører, og det er noget, der skaber en stor forandring i processerne omkring produktudvikling. Samtidig slutter arbejdet ikke efter at design systemet er lavet, da en vigtig del også er at implementere, anvende og vedligeholde det. Men vi har erfaret, at når fundamentet for et design system er skabt, så giver det en række forretningsmæssige fordele, der er værd at forfølge.

Hvis I har en digital løsning med et lille team omkring det, i mindre grad tænker digitalisering som en del af organisationen og/eller primært bruger standardprodukter, så kan værdien med et design system være lav. Hvis I tværtimod oplever, at digitalisering har et større fokus i organisationen, og der er et stigende behov og muligheder forbundet med det, så kan design systemer være med til at skabe de bedste betingelser for digitalisering. Vil I vide mere om, hvordan vi har hjulpet bl.a. VIA University College med netop det, eller hvordan vores eget design system har været en fast del af vores digitale projekter i snart 3 år, så er I velkomne til at tage en snak med os.

Mere information om Embla?

Læs mere

"Vi har fået et design system med alle de nødvendige byggeklodser til at sikre en sammenhængende digital identitet, samt lidt ekstra der kan hjælpe os med at skalere i fremtiden"

Kristina Larsen

UX specialist, VIA University College

Kickstart udviklingen af jeres design system 

Hvis I er ivrige efter at komme i gang (forståeligt nok), så har vi skabt en guide, som I kan bruge til at kickstarte processen. Guiden består af en tjekliste med de elementer, som et design system kan indeholde, og en workshopøvelse så I kan danne et konkret, fælles billede af jeres fremtidige design system. Således får I bedre mulighed for at involvere resten af organisationen og evt. samarbejdspartnere allerede fra begyndelsen, og I kan lave en plan for realiseringen af design systemet.  

Kom i gang med Jeres design system

LÆS MERE