Vad är designsystem bra för?KANs UX-specialist Fredrik Broman berättar

Den här typen av problem brottas många organisationer med. Dessbättre finns det en lösning. Den kallas designsystem. Fredrik Broman är UX-designer här på KAN. Han kan det här och förklarar:

”System handlar per definition om saker som hänger ihop. Så designsystem handlar om att jobba med design på ett systematiserat sätt. Det här passar bra för många av våra kunder, som har flera olika digitala tjänster.”

En ledstång att hålla fast i

Fredrik har jobbat mycket med E.ONs designsystem. Energibolaget har många olika e-tjänster, som olika team ansvarar för. Men helst ska slutanvändaren – kunden – uppfatta att det är en och samma avsändare som ligger bakom allt. Och då kan det behövas något att hålla fast vid. Och den där ledstången, det är designsystemet – designfiler, gemensam kod, dokumenterade beslut med mera.

Som grafiska guidelines, fast mycket mer?
”Precis. En grafisk guideline ingår förmodligen. Men den hanterar egentligen bara det visuella, och kanske det branding-mässiga. I designsystemen lägger du på kodrelaterade saker. Färdigkodade komponenter och guidelines för hur och när de ska användas, till exempel. Det har också med infrastruktur att göra. I stora organisationer behöver utvecklarna ha tillgång till ungefär samma verktyg och samma saker. Det gäller allt från typsnittsfiler till kod. Och med många inblandade blir det också viktigt att ha koll på versionshanteringen, och att alla känner till de beslut som gäller. Allt detta binds samman i system, och det är designsystemet.”

Vilka verktyg som är lämpligast kan variera, menar Fredrik. I E.ON-fallet används Figma. Designteam från både E.ON- och KAN-sidan delar Figmafiler. Det finns också ett kodbibliotek som alla utvecklare använder sig av. Ett team ansvarar för själva designsystemet och ser till att både Figma och kodbiblioteket håller jämna steg. De säkerställer också att alla beslut dokumenteras.

Många fördelar

Enhetlighet skapas, tid sparas och förvirring undviks. Finns det andra inte lika uppenbara fördelar?
”Ja, ett enhetligt varumärke är ett stärkt varumärke. Så det är ju ett affärsvärde i sig. Sparad tid betyder också sparade kostnader, och man blir också lättrörligare. Mer flexibel. Det blir lättare att snabbt komma ut med saker, eftersom så mycket av designbesluten redan finns på plats. Vi som sitter och bygger på baksidan märker också att det växer fram en kultur av att leverera värde. Man kan inte bara ad hoc hitta på grejer för att man tycker det är snyggt. Relevant är vad som funkar. Och det får vi till exempel reda på via användartester eller SEO-analys.”

Näringslivet pratar ibland om ”levande dokument”. I själva verket visar det sig relativt ofta att de där dokumenten inte är det minsta levande. De uppdateras aldrig och är istället stendöda. Men du skulle säga att det verkligen är rätt att prata om ”levande system” här?
”Ja, det tycker jag absolut. Det är hela poängen. I E.ONs fall så är det verkligen så. Vi ändrar hela tiden.”

För att man ser nyttan?
”Ja, det tror jag. På ledningsnivå ser man ofta fördelarna med designsystem. Bara kör, jättebra, liksom. Det kan vara lite mer jobb att få med alla utvecklare och designers. Vissa vill jobba i sin miljö. Sånt måste de släppa när de ska jobba i sådana här system.”

Är det en förutsättning att organisationen har en viss storlek? Eller kan designsystem löna sig även i mindre grupper?
”Jag ser nyttan om du har flera produkter. Det behövs ingen jätteskala, men nyttan är ju större och tydligare när det finns olika team, med olika produktansvar, som ska samarbeta. Och vi försöker tänka: så fort vi bygger nåt ska det gå att bruka av alla.”

Fördelar med designsystem:

• Hela organisationen har tillgång till – och använder – samma beslut, verktyg och filer
• Med designbeslut på plats sparas tid och kostnader
• Ett stärkt och enhetligt varumärke
• Bygger förutsättningar för en värdelevererande kultur

Hur kan designsystem hjälpa dig och din organisation?
Hör av dig så pratar vi!