Projekt / Designsystem + Tillgänglighet
SL:s designsystem
Stockholms kollektivtrafiks etablerade visuella identitet översatt till ett digitalt system för olika tjänster, skärmar och team.
Trafikförvaltningen / SL
Ansvarig för UI och designsystem
2 år
Designsystem, Tillgänglighet, Produktdesign
Vad behövde förändras?
SL hade nyligen lanserat en ny webbplats och app, men teamen arbetade i silor. Produkterna var bättre än sina föregångare, men gemensamma mönster och ett enhetligt varumärkesuttryck saknades. De digitala grunderna behövde respektera SL:s välkända identitet och samtidigt ge produktteamen praktiska verktyg som de faktiskt ville använda.
Mitt ansvar
Jag ansvarade för UI och designsystemet: ikonografi, digitala piktogram, typografi, färggrunder, produktprototyper för validering och återkoppling med produktteamen. Webbplatsen och appen var redan lanserade när arbetet började.
Så tog vi fram lösningen
Börja smått och lär i användning
Jag ansvarade för UI och designsystemet för SL. Vi granskade varumärkesmanualer och befintliga kontaktytor och valde att börja med en mindre grund i stället för att definiera alla komponenter direkt. En kort första utvecklingsfas gav teamen något konkret att använda och utvärdera.
Vi skapade återkommande samtal och kanaler för återkoppling med produktteamen. Det höll systemet nära det praktiska arbetet och gav oss möjlighet att förbättra det när nya behov uppstod.
Ett ikonspråk med rötter i varumärket
Jag tog fram ett nytt set med UI-ikoner inspirerat av SL:s eget typsnitt. Luft, hörnradie, linjetjocklek och pixeljustering blev gemensamma regler, så att ikonerna kändes som en familj i de digitala produkterna.
Jag dokumenterade uppbyggnad och användning för att göra det lättare att utöka setet utan att förlora dess karaktär.
Ta välkända stationssymboler till det digitala
Kollektivtrafikmiljön hade redan många piktogram. Jag inventerade dem och byggde om dem på en yta med 24 × 24 pixlar, med bibehållen identitet och anpassning till digitala gränssnitt.
Typografi och färg för fler skärmar
SL:s egna typsnitt behövde en skala som tog hänsyn till läsavstånd, inte bara telefoner och datorer. Jag definierade en typografisk hierarki med baslinjer och ett mjukt åttapunktsrutnät, med utrymme för kollektivtrafikens större format.
Färgsystemet utökade varumärkets färger med tydliga användningsområden, ljust och mörkt läge samt kontrastkontroller mot WCAG 2.1 AA. Avstånd, radier, layoutprinciper, tonalitet och användningsanvisningar kompletterade den första grunden.
Testa systemet före lansering
Innan systemet släpptes till produktteamen tog vi fram egna gränssnittsprototyper för olika plattformar, scenarier och lägen. Det avslöjade luckor i grunderna och ledde till ytterligare iterationer. Ett biljettflöde var ett av scenarierna vi använde.
Gör systemet användbart för teamen
Tidpunkten var den största utmaningen. Webbplatsen och appen var nya, så det var svårt att få gehör för ännu en förändring av arbetsflödet. Vi arbetade nära teamens aktuella behov, byggde förtroende genom praktisk hjälp och involverade designers och utvecklare i besluten om nästa steg.
Presentationer i organisationen förklarade systemets syfte, medan återkopplingen gav teamen inflytande över utvecklingen. Systemet var etablerat och redo för fortsatt utveckling när jag lämnade.
Ett beslut som formade arbetet
Vi kunde definiera ett komplett bibliotek före användning, eller släppa en mindre grund som teamen kunde prova i verkliga projekt. Vi valde att börja mindre och accepterade fler iterationer för att få konkret återkoppling och bättre förutsättningar för införandet.
Vad förändrades?
- Digitala grunder för ikonografi, piktogram, typografi, färg, layout och användning.
- En fungerande process för återkoppling och införande med produktteamen.
- Ett system testat i realistiska produktscenarier och förberett för fortsatt utveckling.
Konkreta exempel
- Gränssnittsprototyper för olika plattformar och lägen avslöjade luckor som åtgärdades före lansering.
- Dokumenterade regler för ikoner och piktogram gjorde det visuella språket återanvändbart.
- Återkommande återkoppling och presentationer i organisationen skapade en väg för fortsatt införande.
För ett etablerat tjänstevarumärke handlade arbetet lika mycket om att få systemet använt som att rita komponenter. En liten, användbar start gjorde det möjligt att lära tillsammans med teamen.