SJ:s designsystem omformar framtidens resande

40 olika versioner av den gröna SJ-knappen. Det var bara en av utmaningarna för tågjätten innan designsystemet kom på plats. Idag håller den grafiska designen ihop i alla kanaler och UX-designers och utvecklare kan lägga mer tid på saker som gynnar användarna och affären.

Ett designsystem säkerställer konsekvent användarupplevelse, uppfyllande av tillgänglighetskrav och varumärkesidentitet i alla digitala kanaler. Det effektiviserar arbetet med att både underhålla befintliga digitala tjänster och ta fram nya. I SJ:s fall var det två år efter att arbetet med designsystemet påbörjades tjugo system som använde sig av det.

SJ:s designsystem är publikt och alltså öppet för alla att ta del av.

Kund: SJ
Vi arbetade med: Tjänstedesign, UX-design, Designsystem

Illustration som visar hur ett designsystem består av filosofi, principer, riktlinjer samt design- och kodkomponenter.

En komplex affär med många system

Idag sker nästan hela SJ:s försäljning i digitala kanaler. Det är en komplex affär med många system och verktyg som behöver fungera tillsammans. I samband med att Antrop kom in för att leda arbetet med designsystemet skulle ett stort antal av systemen också byggas om. Vid den tidpunkten hade SJ precis börjat använda gemensamma komponenter som kunde återanvändas över team- och kundflöden, men det saknades styrning och många komponenter skilde sig åt i utveckling mot design. Den första utmaningen var därför att återta ägandeskapet, effektivisera och beta av designskulden för det som redan hade utvecklats. Arbetet med en långsiktig vision behövde ske parallellt med daglig stöttning av flera utvecklingsteam.

Exempel på knappkomponenter i SJ:s designsystem.

Strategi och mål för designsystemet

Innan strategin formulerades var det viktigt att ta reda på vad SJ ville med designsystemet och vilka behov utvecklingsteamen hade.
För att få svar gjorde Antrop intervjuer om SJ:s befintliga komponentbibliotek och processer. En brist som blev tydlig var att olika komponenter utvecklades av olika team. Detta gjorde att många medarbetare la mycket tid på att uppfinna hjulet gång på gång och att resultatet blev spretigt. Lösningen blev att formulera en långsiktig vision för designsystemet som produkt och bestämma arbetssätt, roller och ansvar för att ta sig dit.

Ny teknisk plattform och organisation

Insikterna om vad som behövde förändras resulterade både i en ny teknisk plattform och en produktägare för designsystemet. Att börja se designsystemet som en egen produkt var ett viktigt skifte på många sätt, inte minst för fortsatt utveckling i en värld som snurrar snabbt. SJ:s designsystem gör det redan idag möjligt att till exempel testa snabbare och enklare anpassa komponenter efter krav på tillgänglighet, men det är bara början.

Statistik från SJ:s designsystem: 14 team, 512 komponenter, 145 stilar och 46 000 inserts.

Nya effektivare arbetsprocesser

Tydliga rutiner och riktlinjer behövde utvecklas parallellt med att designsystemet togs fram. I processen som togs fram skapas nya komponenter centralt och kan sedan användas av alla team. Det togs fram en gemensam plats för versionshantering så att alla kan se förändringar per komponent. Detta gör att utvecklingsorganisationen behöver lägga mindre tid på detaljer i gränssnittet och kan fokusera mer på de mål som SJ har. Två år efter att arbetet med designsystemet påbörjades var det 20 olika system som använde sig av det.

— Under de två åren som vi har arbetat med designsystemet har vi steg för steg tagit oss mot visionen som vi tog fram i början, säger Erik Markensten, Head of design på Antrop.

Mobilvy som visar ‘Dina resor’ i ljust och mörkt läge i SJ:s app.

Viktiga leveranser i projektet har varit:

Versionhantering på komponentnivå
Förbättring av automatiserade testrutiner
Visuell regressionstesting
Införande av designtokens
Stöd för darkmode
Statisitik om användning
Påbörjat arbetet med en källa – En produkt som är byggd med designsystemets komponenter och som integrerar och samlar allt om designsystemet på ett ställe.

Nu stannar vi på marken

Vi är stolta över att ha fått spela en så viktig roll i framtagandet av SJ:s designsystem. Att resa med tåg är att resa hållbart och SJ tar ett stort ansvar i att göra det till ett alternativ som fler väljer.