ETT DESIGNSYSTEM FÖR
FRAMTIDEN
KUND
Visit Sweden "www.visitsweden.com"
PROJEKTBAKGRUND
Projektet handlade om att migrera Visit Sweden design från Sketch till Figma och skapa ett nytt heltäckande designsystem som uppfyller branschstandard. Slutresultaten blev en högkvalitativ komponentbibliotek och en välbyggd local style som hjälpte designteamet att öka konsekvent och effektiviteten i designprocessen.
PROBLEMFORMULERING
Designen för Visit Sweden fanns tidigare i Sketch, men den saknade en omfattande designsystem och style guide. Vilket leder till inkonsekvent design och dålig användarupplevelse för alla som jobbar med projektet på Fröjd Digital Byrå.
MÅL
Målet var att migrera den befintliga designen från Sketch till Figma och etablera ett omfattande designsystem samt style guide som följer de moderna designprinciperna. Dessutom var målet att göra designsystemet lätt att använda och förstå för alla team medlemmar på Fröjd.
UTMANINGAR
Det var en utmaning att se till att alla designelement var konsekventa, vilket krävde noggrann uppmärksamhet på varje detalj. Dessutom var det en utmanande uppgift att implementera och facilitera ett designsystem som är skalbart och kan hantera framtida tillväxt samt utveckling.
ROLL
Jag var UX Designer praktikant på Fröjd digital byrå. Dessutom vill jag framföra min tacksamhet till projektledaren och Design lead för deras förtroende samt för det stödet som de gav.
DATUM
Mars - April 2023
OBSERVERA
"Den befintliga designen för Visit Sweden skapades inte av mig. Min roll i det här projektet var att migrera designen och skapa ett designsystem som är baserat på den befintliga designen".
5 MINS LÄSTID
DESIGN AUDIT
DEFINERA
DESIGNA
PROCESSEN
En icke-linjär designprocess som består av definering, design audit och design för att bygga upp ett effektivt samt långsiktigt designsystem.
Processen
En designprocessen som består av design audit, definering och desgin för att bygga upp ett effektivt och långsiktigt designsystem.
I definiering fasen samarbetade jag nära med projektledaren, art director och utvecklare för att identifiera deras behov och mål. Genom att involvera målgruppen tidigt i processen kunde jag anpassa designsystemet till kundens och Fröjd medarbetare behov. Jag etablerade också effektiva kommunikationsstrukturer för att säkerställa smidig samverkan och hantera eventuella utmaningar på ett snabbt och effektivt sätt.
VIKTIGA LÄRDOMAR
- Visuell enhetlighet: Art directorn betonade vikten av att upprätthålla visuell enhetlighet.
- Effektiv utveckling: Utvecklaren uttryckte behovet av väldokumenterade designkomponenter.
- Storybook: Designsystemet I Storybook är ej uppdaterad och är 8 år gammal.
- Gammal Sketch designfil: Style guiden och komponenter var i Sketch och inte alls uppdaterad samt saknade dokumentation.
- Skalbarhet: Teamet uttryckte behovet för ett designsystem som kan anpassas och skalas.
- Framtida projektutveckling: Projektledaren lyftade fram behovet av ett designsystem som uppfyller de specifika kraven för framtida projektutveckling.
DEFINIERA
Efter Design audit fick jag en detaljerad översikt över varje komponent style och det fanns inga större skillnader mellan den migrerade designen och den aktuella webbplatsen. Med design audit resultat och målgruppen behovs i åtanke var det dags att gå vidare till nästa steg, vilket innebar att byggas I princip allt 😄.
RESULTAT
Processen inleddes med att prioritera dem grundläggande elementen i designsystemet, inklusive en tillgänglig färgpalett, typsnitt, grid och avstånd samt knappar osv. Därefter fokuserade jag på utvecklingen av mer inriktade komponenter som molekyler, organismer, mallar och sidor. Detta för att skapa ett omfattande och sammanhängande designsystem.
DESIGNA
Det andra steget bestod av att samla in material och att gå igenom detaljerna för varje komponent vid olika brytpunkter. Jag undersökte designmaterial som färger, textstilar, storlekar och avstånd som ledde till att ha en överblick över varje komponent på webbplatsen. Att samla in allt material var utmanande och tidskrävande, men med rätt Figma-plugins, Chrome extension och andra HTML/CSS-verktyg blev jobbet enklare.
STEG 2
-
Alla komponenter och varianter är byggd med "Custom properties".
-
"Nested components" för att minska antal komponenter i projektet .
-
Jag använde mig av Auto Layout i Figma för att bygga alla komponenter så att jag kan återanvända dem i olika enheter eller layouter.
-
"States" för komponenter såsom: hover, focus, error, och disabled state.
-
Kontroll av färg tillgänglighet vid skapandet av färgstilen och varje komponent.
-
Första steget i komponent dokumentation omfattades av: variant, anatomy, layout och spacing.
KOMPONENT PLAYGROUND
Variant "Inactive"
Variant "Active"
Boolean "Toogle"
COOKIES
Variant "Primary"
Boolean "Ikon"
Text
PRIMARY BUTTON
Variant "Selected"
Boolean "Höger Icon På"
Text
ACCORDION
Testa en property
ETT SYSTEM I ETT SYSTEM
Genom att skapa en style guide bidrog det till ett enklare sätt att bygga nya komponenter och jobba vidare med att skapa template samt pages.
ATOMS
MOLEKYLER
ORGANISMER
MALLAR
SIDOR
Designsystemet är ett pågående projekt och än så länge har vi en uppsättning av komponenter klara, vilket kan vara avgörande när det gäller effektivitet, vara konsekvent och för framtidsutvecklingen.
Nästa steg kan vara följande:
-
Design tokens.
-
Slutföra dokumentationen av komponenter.
-
Kontinuerlig uppdatering av design systemet.
NÄSTA STEG
Under min praktik som UX/UI Designer på Fröjd digital byrå, ansvarade jag för att migrera designen för visitsweden.com från Sketch till Figma och skapa ett omfattande designsystem samt style guide. Utmaningarna inkluderade att säkerställa konsekvent designelement och att skapa ett skalbar designsystem för framtida tillväxt. Jag definierade målgruppens behov, genomförde en design audit för att utvärdera och fastställa befintliga designelement samt byggde hela designsystemet från grunden i Figma. Dessutom skapade jag en sammanhängande designsystem med olika komponenter och varianter genom att använda Custom properties, Nested components och Auto Layout.
SAMMANFATTNING
© 2023 Skapad med massor av 🩶 och ☕️
Först började jag med att migrera designen från Sketch till Figma och efter migrering gjorde jag en visuell designbedömning eftersom designdokumentation och style guide saknades. Denna bedömning bestod av att utvärdera och fastställa vad jag för närvarande har i Figma samt vad som behöver skapas. Det var också viktigt att bedöma om komponenternas storlek, färg och text style stämde överens med den befintliga webbplatsen.
STEG 1
Att utveckla ett designsystem med fokus på användarupplevelse innebar unika utmaningar, särskilt med tanke på de begränsade resurserna och den snäva tidsramen. Det här projektet krävde ett varierat tillvägagångssätt och jag hade tre olika hattar på mig:
- UX Designer hatten för att säkerställa en användarcentrerat design som är baserat på målgruppen behov och utmaningar.
- UI Designer hatten för att skapa visuellt tilltalande och konsekventa element.
- Utvecklarhatten för att skapa ett designsystem som kan överföras till Storybook.