Electrolux

Electrolux Shape – ett designsystem före sin tid

Design System,
Design Audit,
Design Governance,
Workshops,
Enterprise UX,
UX/UI Design

När designsystem fortfarande byggdes för hand

2018 i designvärlden före Figma, före variabler och tokens, före Zeroheight, Supernova och plattformar som idag är självklara när man bygger ett designsystem. Sketch och Adobe XD dominerade, men de hade inga delade bibliotek online, ingen versionshantering och ingen koppling till kod. Om man ville ha ett designsystem, behövde man bygga det själv. Från grunden. Det var precis det Electrolux bad oss om – och det blev ett av Intunios första riktigt stora designsystemprojekt. Vi designade inte bara färger, komponenter och ikoner – vi byggde hela systemet runtomkring: webbplattformen, strukturen, biblioteket, processerna och organisationen som skulle förvalta det.

Från fragmentering till gemensam riktning

För att starta projektet samlade vi Electrolux designchefer och UX-ansvariga från Sverige, Europa, Sydamerika och Asien till en fyra dagar lång workshop i Stockholm. Målet var att skapa en gemensam syn på varför ett designsystem behövdes och samtidigt påbörja arbetet tillsammans – inte bara strategiskt, utan praktiskt.

Den mest avgörande och minnesvärda delen blev en gemensam fullskalig designaudit. Inför workshopen hade vi skrivit ut hundratals skärmar och komponenter från Electrolux alla digitala produkter. När allt låg utspritt över bordet – över fyrtio olika varianter av knappar, färgpaletter som aldrig varit avsedda att samexistera, olika typografier, grids och stilar beroende på region, team och produkt.

Det var inte längre en fråga om man borde ha ett designsystem, utan hur snabbt det kunde tas fram.

Hur systemet tog form

Vi inspirerades av de få publika system som fanns då: IBM Carbon, Microsoft Fluent och Googles Material Design. De visade hur komponenter, principer och riktlinjer kunde samlas i en öppen plattform – men inga sådana verktyg fanns ännu. Vi behövde bygga vår egen version från grunden.

Vi skapade därför en intern webbplattform där hela designsystemet samlades – struktur, komponenter, färg- och typografisystem, exempel och guidelines. Varje komponent fick en egen sida med beskrivning, visuella tillstånd, användningsprinciper och rekommendationer. Plattformen byggdes med ett enkelt CMS så att Electrolux själva kunde uppdatera och vidareutveckla innehållet, även efter vår leverans.

Parallellt tog vi fram två kompletta UI-bibliotek – ett i Sketch och ett i Adobe XD – eftersom designers globalt arbetade i båda verktygen. Alla komponenter byggdes som symboler med smarta overrides, anpassningsbart grid och manuellt definierade spacing- och typhierarkier. Det var långt innan design tokens, men principen var densamma: återanvändbara byggstenar och gemensamma regler, tillgängliga för alla

Vi byggde också ett sökbart ikonbibliotek med hundratals ikoner i flera format, så att team över hela världen enkelt kunde hitta och använda dem. För första gången låg designen på Electrolux inte utspridd i isolerade filer – den blev ett gemensamt och delat verktyg för hela organisationen.

Ett system kräver också ägarskap

Vi visste att ett designsystem inte överlever om ingen äger det. Därför etablerade vi tidigt represenatater med specifika ansvarsområden inom Electrolux – ett team med ansvar för att godkänna komponenter, förvalta biblioteket och driva vidareutvecklingen. Vi satte även en enkel men tydlig process: hur komponenter föreslås, dokumenteras, testas och publiceras.

Vid den här tiden var governance i designsystem något som bara ett fåtal bolag pratade om, och inom industriföretag var det i stort sett oprövat. Men utan struktur och ägarskap skulle systemet inte överleva sin första version – därför var det viktigt för oss att också etablera processen.

Starten på ett längre samarbete

När den första versionen lanserades började Electrolux använda den i riktiga projekt – och det blev snabbt tydligt att systemet gjorde skillnad. Dubbelarbete minskade, visuella avvikelser blev färre och team i olika länder kunde utgå från samma grund. Det här blev också starten på ett längre samarbete mellan Electrolux och Intunio. Under de följande åren har vi fortsatt att utveckla systemet tillsammans med deras interna team – vi byggde nya komponenter, uppdaterade strukturen, förbättrade dokumentationen och etablerade riktlinjer för hur systemet skulle användas i både design och utveckling. Med tiden tog vi även steget vidare in i nya verktyg och tekniker: från Sketch och Adobe XD till Figma, från statiska komponentbibliotek till design tokens, variabler, teman och kodkopplade komponenter i Supernova.

Parallellt har vi arbetat med flera produkt- och prototypprojekt inom organisationen. Designsystemet gjorde att varje nytt initiativ kunde starta snabbare, hålla högre kvalitet och kännas som en del av samma produktfamilj.

Det vi byggde 2018 var inte ett komplett modernt designsystem – men det lade grunden. Det skapade struktur där det tidigare fanns fragmentering, och det visade att ett industriföretag kunde arbeta med design på samma nivå som de stora teknikbolagen.

Kundens egna ord

❝ Working with Tobias and the Intunio team was really enjoyable. They were professional, collaborative and always delivered high-quality work. The Shape project became an important starting point for how we developed our design system work at Electrolux, and many of the principles we established together are still relevant today.