Ett gemensamt white label-designsystem för flera plattformar.
- Designsystem
- Figma
- Produktdesign
- iOS
- Android
- Webb
- Responsivt
- Tillgänglighet
- Användartester
- Designtokens
- AI-arbetsflöden
- Optimering
- Illustration
- Ikondesign
- Varumärken
- Designförankring
- Kund
- Entercard Group AB
- Roll
- Designansvarig
- Tidsperiod
- 5 år (pågående)
Problemet
Entercard hade en white label-produkt med flera varumärken, språk och plattformar. Det befintliga arbetssättet var inte hållbart.
Mål
- Skapa bättre samarbete mellan utveckling och design.
- Skaffa bättre designverktyg.
- Automatisera manuella och tidskrävande arbetsflöden.
- Skapa tydligare fokus i designteamet.
- Ta fram och förankra designprinciper.
- Dokumentera komponenter och mönster så att de skalar och följs över tid.
- Uppdatera det visuella språket så att det passar produkten bättre.
- Öka kunskapen om och efterlevnaden av tillgänglighetskrav.
Utmaningar
- Mycket låg designmognad i organisationen.
- Ett utvecklingsteam helt baserat utomlands.
- Begränsade designresurser.
- En föråldrad uppsättning designverktyg.
Grunden
En gemensam riktning
Att införa ett designsystem i en organisation med låg designmognad är utmanande, och vi visste att felmarginalen var liten. Därför ledde jag workshoppar och genomförde enkäter för att förankra arbetssättet innan vi började.
Det gav oss en stabil grund och gjorde det möjligt att införa systemet stegvis över tid.
Arkitektur
Gemensamma delar, utbytbara varumärken
Vi använde atomära designprinciper och skilde grunderna från komponenter och produktproduktion. Varumärkes-, typografi- och ikonlager kunde snabbt bytas ut, vilket gjorde det praktiskt att testa olika visuella riktningar utan att bygga om gränssnittet.
Den modulära strukturen fungerade för både appar och webb och gjorde systemet enklare att underhålla när fler plattformar och varumärken tillkom.
Ikonografi
En egen familj av UI-ikoner
Jag skapade ett ikonset med gemensamma stödlinjer och enhetlig anatomi och definierade sedan hur ikonerna skulle användas för att undvika inkonsekvenser. Jag tog också fram exportvänliga versioner med enklare lagerstruktur. Det minskade filstorleken i produktion utan att göra designoriginalen svårare att redigera.
Illustrationer
Illustrationer för flera varumärken
Jag skapade ett illustrationsset som var:
- Tillräckligt generiskt för flera olika varumärken.
- Tillräckligt genomarbetat för att uppskattas av intressenterna.
- Enkelt att underhålla och utöka över tid.
- Enhetligt med systemets övriga grafiska element.
Tokens
Varumärkesvariation utan avvikelser
En central del av att förena kod och design är att använda samma källa och minska manuell överlämning. Designtokens spelade en viktig roll. De hjälpte oss att undvika fel färger och fel typografi i kod och samtidigt minska arbetet med underhåll och kvalitetssäkring.
"Primary": {
"ds__color__primary": {
"$value": "#f28d00",
"$type": "color",
"$description": "Default brand color"
},Tillgänglighet
Tillgänglighetsdirektivet som katalysator
Systemet byggdes med tillgänglighet i åtanke från början. När det europeiska tillgänglighetsdirektivet (EAA) blev en prioriterad efterlevnadsfråga använde vi det som stöd för ytterligare investeringar: en utvecklare med fullt fokus på designsystemet och en förfinad teknisk grund för webben.
- Figma
- Tokens Studio
- Style Dictionary
- Komponentbibliotek
- NPM
- Storybook
Förändring
Designmognad är ett gemensamt arbete
Systemet växte fram i en organisation som nyligen hade börjat anställa designers. Jag coachade utvecklare och designers och förklarade värdet av en bättre användarupplevelse och stabila grunder för intressenter.
Konkreta produktexempel fungerade bättre än en abstrakt framtidsbild. Dokumentation och genomtänkta beslut tar tid i början, men ger teamen en pålitligare grund för fortsatt arbete.
Framåt
Snabbare arbete med AI
När språkmodeller blir bättre på att koda har vi börjat använda dem för att föra design och utveckling närmare varandra, med målet att korta tiden till lansering och höja kvaliteten. Exempel på hur vi använder AI i designsystemet är:
- Efterlevnad av tillgänglighetskrav.
- Underhåll av kod.
- Kvalitetssäkringsprocessen.
Resultatet
Resultat
Ett designsystem blir aldrig färdigt. Det viktiga framsteget var en enkel och trovärdig grund som teamen kunde använda medan organisationens designarbete mognade.
- En modulär grund för gemensamma komponenter i flera varumärken, webbportaler och native-appar.
- Designtokens och ikonografi kopplade till produktionens behov.
- En fungerande grund som kan utvecklas över tid.
- En fungerande prototyp visade hur biblioteket kunde anpassas till olika varumärken och plattformar.
- Tokendefinitioner i GitHub gav utvecklingsteamen en konkret referens för implementation.
- Det gemensamma biblioteket började användas internt medan det bredare systemet fortfarande utvecklades.