Design system en huisstijl voor Belmondo.com My Journey App
In het kort
Problemen
- Geen duidelijke richtlijnen voor het ontwerp van de app.
- Componenten werden steeds opnieuw ontworpen.
- Ontwerp in de app en desktopwebsite liepen uiteen.
- Developers hadden moeite met ontwerpen implementeren.
Doelen
- Stel duidelijke richtlijnen voor de huisstijl van Belmondo op.
- Creëer een design system die het makkelijker maakt voor designers en developers om hun werk uit te voeren.
- Pas de nieuwe huisstijl door middel van de design system toe op de ontwerpen van de app.
Resultaten
- Nieuwe, overzichtelijke huisstijl ontworpen voor de My Journey App.
- Design system helpt designers om consistente ontwerpen te maken.
- Developers weten waar ze aan toe zijn.
- Ontwerp van app en desktop komt nu overeen.
Over Belmondo
Belmondo versterkt de relatie tussen werkgever en werknemer door middel van hun boeken en de My Journey App. De boeken en app helpen nieuwe werknemers bij onboarden, duurzame inzetbaarheid en bij interne communicatie.
Belmondo is een klein bedrijf met een klein groepje vaste, gemotiveerde medewerkers. Development van producten gebeurt niet in-house maar laten ze aan een derde partij over.
Ondanks de kleine groep werknemers is de app vaak van designer gewisseld gedurende twee jaren. Zonder een duidelijke huisstijl of richtlijnen begonnen de ontwerpen en wat live stond van elkaar te verschillen. Dit frustreerde iedereen die aan het project werkte.
Het probleem
Wij zagen dat het voor ons tijd werd voor een design system. Er was een groot verschil tussen het ontwerp van de app en die van de website. Dit verschil is gegroeid omdat er in de afgelopen twee jaar meerdere designers aan het ontwerp van de app en website hebben gezeten zonder een huisstijl of design system op te stellen. Elke designer probeerde de ontwerpen van de vorige designer beetje bij beetje aan te passen. Hierdoor leken de ontwerpen niet meer op elkaar. De developers wisten niet welke ontwerpen ze moesten aanhouden en besloten te doen wat voor hen goed aanvoelde.
De gebruiker
De voornaamste gebruikers zijn de designers. Zij gebruiken de design system op dagelijkse basis om de website en app te ontwerpen. De designers werken in Sketch en gebruiken Abstract voor versiecontrole. Het was noodzakelijk dat de design system in Sketch werd gemaakt.
De developers waren secundaire gebruikers. Zij hoefden niet direct met de design system te werken maar keken er wel vaak naar om hun werk te controleren. Developers moesten in de design system kunnen zien hoe groot borders, typografie en andere elementen moesten zijn.
Mijn rol
Ik was de design system manager en een van de twee UX/UI designers die de huisstijl zou ontwerpen en implementeren voor de app en website. Ik was al bekend met de app en hoe Belmondo werkte. Ik liep er al een jaar rond.
De andere UX/UI Designer op dit project was Rick Bos, hij hielp met het ontwerpen van de huisstijl en bij het implementeren van de huisstijl op de app en website. Verder hebben wij advies gekregen van Murray Wolters, die zo nu en dan bijsprong om zijn mening over beslissingen te geven en waarbij wij altijd ideeën mochten opgooien.
Onderzoek
Wij hebben de Atomic Design werkwijze gehanteerd. Dat betekende voor ons dat wij de gehele app uitkleedden tot het kleinste element. Het is in het begin veel werk maar dit geeft een duidelijk overzicht uit welke componenten pagina’s zijn opgebouwd. Hierdoor zie je ook snel waar verschillende stijlen voor hetzelfde component worden gebruikt. Er kan dan een keuze gemaakt worden welke stijl er gebruikt wordt of dat er mogelijk een andere stijl wordt gekozen als de huidige stijl niet werkt binnen de huisstijl.
Design system
Ik heb bij het opbouwen van de design system ook de Atomic Design principes gehandhaafd. De design system is eerst opgebouwd uit atomen: typografie, kleuren en iconen. Daarna worden deze atomen gebruikt om moleculen te ontwerpen: inputvelden, buttons, lijstelementen e.d. Deze komen vervolgens samen om organismes te vormen: navigatie, cards, tabellen, etc. Alle componenten heb ik zo ontworpen dat ze schalen als ze groter werden gemaakt. Een inputveld heeft niet altijd dezelfde breedte. Als een designer deze breder wilde maken, bleef het ontwerp consistent.
Implementatie
Nadat de basis van de design system stond, hebben Rick en ik ons gefocust op de pagina’s. Wij hebben de componenten gebruikt om de oude app- en websiteschermen opnieuw te ontwerpen. Dit ging niet in een keer goed. Soms paste een organisme niet in het totaalplaatje van een pagina. Dan kon het zijn dat de stijl niet helemaal overeenkwam of dat het organisme groter of kleiner was ontworpen dan de organismes eromheen. Dan gingen we terug naar de design system om het aan te passen. Zo zijn we steeds heen en weer gegaan tussen de design system en de ontwerpen voor de app en website totdat we trots waren op ons werk.
Reflectie
Ik vond het een fantastisch project om uit te voeren en om de leiding over te hebben. Ik denk dat we goed waren begonnen, met het uit elkaar halen van de oude app en website, maar het creëren van de design system en huisstijl hadden we slimmer kunnen aanpakken. Nu hebben we eerst de design system opgezet met wat basisregels, vervolgens de app en website ontworpen en de design system aangepast als we aanpassingen wilden maken. De laatste twee stappen hebben we meerdere keren herhaald. Op die manier is het mogelijk om te ontwerpen, wij hebben het gedaan, maar het werkt makkelijker als er al een duidelijk huisstijl is. Ook is er meer ruimte om te experimenteren als er geen design system is. We hebben het nu vrij safe gespeeld, ook door de strakke deadline die wij hadden, maar bij een volgende keer zou ik meer willen experimenteren vooraf met de huisstijl om daarna de design system op te zetten. Mocht er al een duidelijke huisstijl zijn, dan is een design system opzetten via Atomic Design honderd procent aan te raden.