Nådens år 2020 lider mot sitt slut. Det där uttrycket, ”i nådens år” låter lite ålderdomligt och apokalyptiskt. Tydligen skrev man så förr för att komma ihåg att varje nytt år är en oerhört fin och generös gåva från Gud. Tack för 2020. Dags att reflektera över vad som varit och hoppas på en lite bättre gåva nästa gång.
Under 2020 har Hemnets sex produktutvecklingsteam tagit stora kliv i skapa ett designsystem. Vi har idag en gemensam webbplattform med delade webbkomponenter som kan användas överallt. Vi har infört komponenter och vår nya grafiska profil på många ställen både i våra appar och på webben. Vi har kommunikationskanaler och forum där vi jobbar fram gemensam design, principer och komponenter.
Vi har gjort det här gemensamt och parallellt med annat produktarbete, utan att ha något team som ansvarar för designsystemet. Här tänkte jag berätta hur vi har gjort.
Hur allt började
När den här historian börjar (sisådär två år sedan) hade vi en webb-styleguide med lite gemensam styling och guidelines för hur vi använder bland annat typografi och färger. En bra grej men tyvärr hade den inte uppdaterats på ett tag, den användes bara av en av våra webbplatser (hemnet.se) och var webbspecifik. Designers använde den inte heller utan hade sina egna komponenter i Sketch. Både front end-utvecklare och designers ville göra detta bättre och mindre initiativ började poppa upp.
Vi började prata en del om fördelarna med gemensamma designguidelines och komponenter. Mindre dubbeljobb när byggstenarna redan finns, bättre kommunikation mellan utvecklare och designers, lättare för alla teammedlemmar att jobba självständigt och ta egna designbeslut.
2019 tog Hemnet fram en ny grafisk profil med hjälp av varumärkesbyrån Bold. Den innehöll bland annat nya färger, typografi och en tweakad logga. Vi ville förstås få det här att synas i våra webbar och appar men mycket återstod. Vi behövde komma fram till vad profilen innebär digitalt.
Det blev naturligt att dra igång på allvar med ett bättre designsystem och samtidigt införa den här nya grafiska profilen. Vi bestämde att designsystemet skulle bygga helt på den nya grafiska profilen. Det skulle också öka incitamenten för teamen att införa komponenter från designsystemet. Man kan använda färdiga byggstenar och får dessutom nya fräscha färger och typsnitt.
Verktyg och infrastruktur
Vår nya grafiska profil levererades i Frontify, en plattform för varumärken och grafiska profiler. Vi bestämde oss för att fortsätta använda den som ett innehållssystem för designsystemet och skapade tre delar:
- Identity: Vår grafiska profil, det grundläggande som färger och typsnitt
- Components: Gemensamma byggstenar för våra webbar och appar, plus guidelines för dem
- Text: Guidelines för hur vi uttrycker oss i text och vilka ord vi använder
Vi använder Frontify som en samlingsplats för allt Hemnet-designrelaterat. Alla på Hemnet har tillgång och det går enkelt att editera text eller ladda upp bilder.
En stor del av designsystemarbetet har handlat om att göra det möjligt att skapa delade webbkomponenter som vi kan använda på olika webbplatser. Våra viktigaste webbar är hemnet.se och Kundportalen där mäklare loggar in och bland annat kan administrera bostadsannonser.
Kort om hur webbkomponentbiblioteket fungerar tekniskt:
- Våra webbkomponenter utvecklas i ett eget Git repository, paketeras och importeras till våra applikationer (som Hemnet.se och Kundportal) med hjälp av npm.
- Vi använder Storybook för att testa och visa upp komponenterna.
- En komponent kan användas via React eller HTML/CSS – Storybook innehåller kodexempel för båda.
- I Frontify visas guidelines för varje komponent, och själva komponenten från Storybook (delen med grå bakgrund i bilden ovan).
För våra native appar (iOS och Android) finns förstås också komponenter men de är svårare att visa upp på webben. Där har vi i nuläget bara tagit skärmdumpar för att visa hur komponenten ser ut.
Våra designers jobbar numera i Figma. Där speglar vi (manuellt) komponenterna för att kunna använda i skisser och prototyper men det är de riktiga kodade komponenterna som är sanningen.
Hur vi jobbat
Vi har jobbat med det här i lite olika former under året.
I början behövde vi göra grundläggande arbete för att sätta upp Storybook och få våra webbar att använda gemensamma komponenter. Några representanter från olika team jobbade fokuserat med det under några veckor.
Under större delen av året har det handlat om att införa komponenter (inklusive ny grafisk profil) överallt, ta fram nya komponenter och vidareutveckla designprinciper. Vi har jobbat stegvis del för del och prioriterat de komponenter som används mest och gör mest skillnad visuellt, till exempel rubriker och knappar. Vi har prioriterat att införa komponenterna där de syns och märks mest.
En eller ett par utvecklare per team har varit designsystem-representant och fokuserat på detta någon dag i veckan. Ibland har vi haft en fast dag där alla jobbar tillsammans, ibland har det varit upp till teamet. Men vi har hela tiden haft ett möte varannan vecka där vi sprider vad vi jobbar med på designsystem-fronten och lyfter problem. Vi har också ett annat forum varannan vecka mer dedikerat till att diskutera designdetaljer.
I övrigt sker mycket av kommunikationen kring designsystemet i Slack. I kanalen #designsystem postar vi allt från frågor kring designdetaljer till tekniska frågor kring webbkomponentbiblioteket.
Allt det här har fungerat bra, mycket tack vare några personer (både utvecklare och designers) med extra engagemang för designsystemet. Tack!
En annan framgångsfaktor tror jag har varit vår inställning, att allt alltid kan ändras och inte behöver vara perfekt från början. Det är ju faktiskt tvärtom, nu när vi har gemensamma komponenter kan en smart förbättring införas överallt med en knapptryckning. Typ.
En tredje framgångsfaktor tror jag är att utvecklare och designers jobbat tillsammans hela tiden. På Hemnet är vi rätt vana vi det med det är ingen självklarhet överallt. Att designa och bygga saker funkar absolut bäst när alla inblandade har förståelse för både teknik och design.
Tips
Avanzas resa till designsystemteam
InVisions gratis Design Systems Handbook
Shopify Polaris – ett designsystem vi inspirerats av
Material Design – ett annat designsystem vi inspirerats av