3 steg så lyckas du med ditt designsystem

Okej, så ert designsystem är på plats. Ni har era färdiga komponenter i kod och design, samt ett dedikerat team som arbetar aktivt med designsystemet. Men hur ser man till att det faktiskt används så att det får den effekt man vill åt? 

De viktigaste framgångsfaktorerna för ett designsystem är en hög användningsgrad, och en aktiv involvering från olika intressenter i att utveckla designsystemet (Sparkbox survey 2021)

  • Hög användning innebär hur stor andel av de applikationer och hemsidor man har som är byggda med designsystemets komponenter.
  • Hög involvering innebär hur ofta designsystemets användare själva bidrar till designsystemet, t ex genom att lägga till nya eller ändra i befintliga komponenter.

Men att lyckas med detta är också de största utmaningarna med ett designsystem. Därför har vi sammanställt tips och råd som ger dig och din organisation en tjuvstart.

Framgångsrika designsystem har en hög användning där användarna själva aktivt bidrar till designsystemet. Men det är också de största utmaningarna.

Emma Långström , UX-designer på Antrop

1. Säkra en hög användning

För att öka användningen av designsystemet finns det några viktiga områden att jobba med. 

Onboarding till designsystemet

En nyckel för att få personer att använda designsystemet är att de förstår hur det ska användas. Att hänvisa till en dokumentationstung hemsida eller Confluence (wiki) kan kännas enkelt och bekvämt som designsystemansvarig, särskilt om man ägnat många timmar åt att skapa detaljerad dokumentation. Men det är sällan det som skapar bäst förståelse eller högt engagemang. 

Fundera på hur du kan göra det roligare och mer minnesvärt att lära sig om designsystemet, utan att du som ansvarig ska behöva hålla i timslånga introduktionsmöten och workshops. 

Våra lärdomar utifrån erfarenhet av att ha implementerat designsystem i mängder av uppdrag är att:

  •  Skapa interaktiva tutorials för både utvecklare och designers, ett startpaket med övningar där de praktiskt får använda designsystemet för att bygga ihop olika sidor och flöden (Netflix har gjort ett grymt jobb med detta)
  • Använda korta videos för att beskriva olika delar av designsystemet och dess byggstenar
  • Visualisera riktlinjer med tydliga do’s and dont’s som tydliggör hur man följer designriktlinjerna på rätt sätt
Vår kund SJ har en helt publik dokumentationssajt vilket gör det enkelt att komma åt dokumentationen.

Vår kund SJ har en helt publik dokumentationssajt vilket gör det enkelt att komma åt dokumentationen.

Se till att det är lättillgängligt och samlat

För att öka användningen av designsystemet får det inte vara krångligt att komma åt dokumentationen. När man väl behöver hitta information, t ex om hur vi placerar sekundärknappar, behöver informationen vara nära och kontextuell – vid snabba releaser har man inte tid att gräva runt efter lösenord, i spaltmeter med text eller på olika platser.

Därför är det bra att länka direkt från enskilda komponenter i Figma (eller relevant designverktyg) till dokumentation om komponenten. Om möjligt, använd publika länkar som inte kräver konto och inloggning. Ett exempel är vår kund SJ, som har en helt publik dokumentationssajt.

Helst bör dokumentationen finnas på en och samma plats både för designers och utvecklare. På så vis främjar man samarbete och samsyn kring komponenterna, och har en plats att hålla uppdaterad, även om det kan vara en utmaning att möta båda målgruppernas behov på ett bra sätt.

Organisationer som skapar system är begränsade till att skapa sådant som speglar organisationens struktur.

Conway’s Law

Främja självständig användning

Flaskhalsar är en riktig designsystem-dödare. Systemet är till för att effektivisera arbetet med design och utveckling, men det är inte ovanligt att det istället upplevs som en flaskhals.

Till viss del är detta ofrånkomligt då ett sammanhållet och kvalitetssäkrat designsystem kräver en viss process, men försök att bygga ditt designsystem så att det kan användas utan stöd från de ansvariga.

Det handlar främst om att våga släppa lite på kontrollen och möjliggöra för användarna att skapa, ändra och släppa nya komponenter till designsystemet samt uppdatera dokumentation – men med tydliga instruktioner och check-points längs vägen.

Kommunicera mera

För att teamen ska använda komponenterna, behöver de veta att de finns. Se till att kommunicera ändringar och uppdateringar i de kanaler som når ut till er målgrupp. Håll regelbundna demos av nya komponenter och dokumentera era releaser i en hittbar struktur.

Motverka breaking changes

Det kan vara läskigt att uppdatera kodkomponenter, särskilt om de är paketerade tillsammans – uppdaterar jag en måste jag uppdatera alla. Det blir därmed svårt att överblicka och styra uppdateringar vilket innebär att mer tid krävs för att kontrollera att inget har gått sönder.

För att komma runt denna problematik är det en fördel att ha versionshantering och konsumtion på komponentnivå. Ett bra verktyg för att åstadkomma just det är Bit.dev. Ett sätt att ytterligare driva team till att använda den senaste versionen av en komponent är att inte supportera flera parallella versioner.

2. Öka involveringen

Den andra viktiga framgångsfaktorn är ett högt bidragande till designsystemet från dess användare. Så hur får man till det?

Tydliga processer för hur man kan bidra till designsystemet

Det viktigaste av allt när det kommer till att öka involveringen är att se till att användarna vet hur de ska bidra. Det innebär att ha tydliga processer på plats som svarar på hur komponenter uppdateras och vem som ansvarar för vad i vilket skede. Från att behovet uppstår av en ny eller förändrad komponent, tills att den är färdigutvecklad och testad.

Vi rekommenderar ofta den cykliska förvaltningsmodellen till organisationer som har kommit en bit med sitt designsystem. Det innebär att det finns ett centralt designsystemteam som jobbar med löpande förbättringar, kvalitetssäkring och distribution av befintliga komponenter – medan teamen själva får utveckla sina egna komponenter, med det centrala teamet som stöd.

Oavsett vilken väg man väljer behöver den process man har vara tydligt beskriven, överenskommen och kommunicerad till de som använder designsystemet.

Emma Långström, UX-designer på Antrop

Involvera användarna i produkt- och processutvecklingen

Precis som i vilken annan produktutveckling som helst är det viktigt att involvera slutanvändarna, men inte bara för att bygga rätt saker på rätt sätt, utan också för att skapa ett högre engagemang och delaktighet.

Gör research och prata med användarna, se hur de använder designsystemet till vardags och testa nya komponenter med designers och utvecklare i deras miljöer. Det kan även vara bra att följa upp med kvantitativa undersökningar, om nöjdhet och förbättringar, och följa upp statistik på användning av komponenterna.

Skapa utrymme för feedback och påverkan

Många förbättringar och behov kan fångas upp genom tidigare nämnda research, men det är även viktigt att skapa utrymmen för spontan feedback och löpande kunna ge input på designsystemets prioriteringar, innehåll och riktning.

Det kan man göra bland annat genom; 

  • Meet-ups och skråträffar för exempelvis designers och utvecklare för att diskutera hur man arbetar med designsystemet och dela tips och råd
  • Skapa en stark designkultur, prata och workshoppa regelbundet om design, vad god design är för företaget, varför vi designar som vi gör och vad vi strävar efter att uppnå med vår design
  • Ha en transparent och lättåtkomlig backlog, sprid förståelsen för hur saker prioriteras och gör det möjligt att påverka prioriteringen
  • Tillåt lite luft i sprintarna för att kunna agera på snabba puckar och frågor

3. Det bästa designsystemet är anpassat efter din organisation

Vilka av dessa verktyg som kommer fungera bäst beror på hur din organisation är utformad. Hybrida och stora organisationer ställer större krav på en skalbar, digitaliserad och tydlig process, jämfört med en liten start-up där en handfull personer jobbar nära varandra. Troligen känner du redan nu inom vilka områden ni har de största gapen och kan göra de största vinsterna.

Men det är inte alltid en spikrak väg, behöver ni stöd med design, implementering eller processer kopplat till ert designsystem – tveka inte att höra av dig!

Se inspelat webbinarium: 4 steg till att lyckas med ert designsystem

Med ett designsystem blir kundens upplevelse av din tjänst sammanhållen och användarvänlig, och designarbetet blir både roligare, snabbare och mer effektivt. Så hur gör man för att få ut det mesta ur sitt designsystem? Våra experter Erik Markensten och Emma Långström berättar.

Se inspelningen här (Youtube)