Herontwerp van het Design Systeem
Een herontwerp van de stijl terwijl applicaties al in productie staan
Periode: verspreidt over een jaar
Rol: designer
Context
Het Design Systeem voor OutSystems applicaties van het Rode Kruis is gebaseerd op het OutSystems UI templete. Deze heeft de huisstijl meegekregen van het Rode Kruis, maar in de praktijk blijkt dat er geen duidelijke toepassingsvoorschriften zijn, de signaalkleuren worden genegeerd en nog een goede samenwerking moet onstaan tussen de afdelingen. Om een gewenst resultaat te krijgen heb ik gewerkt met Excel, Figma en Teams.
Verfijning
Het herontwerp van design systeem staat op de schouders van een basis template.
Samen
Een samenwerking tussen development vrijwilligers, developers en communicatie.
Toekomst
Een systeem dat weinig werk nodig heeft om ook in de toekomst relevante designs te kunnen faciliteren.
De uitdaging
Het beste plan
Voor het herontwikkelen van het design systeem lag de uitdaging niet bij het ontwikkelen van nieuwe UI elementen, want deze waren al van te voren bepaald wegens het gebruik van OutSystems. De uitdaging lag juist bij het doorvoeren van het nieuwe design systeem.
Om ervoor te zorgen dat de uiteindelijke uitrol zo soepel mogelijk zou verlopen, is er met de developers en de hoofd van de afdeling besloten dat het design systeem gefaseerd wordt uitgerold. Dat betekende dat extra templates werden ontwikkeld waar nieuwe applicaties meteen worden ontwikkeld, en de applicaties in productie gefaseerd over kunnen gaan.
Verbeteringen doorvoeren
Het bestaande design systeem maakte gebruik van een rode primaire kleur. Gezien het feit dat het een design systeem voor het Rode Kruis is, is dat een logische keuze. Maar, omdat in de applicaties voor onrust zorgt. Rood blijft immers een signaalkleur voor fouten. Daarbij komt kijken dat een andere OutSystems applicatie afwijkend in kleur was.
Om consistentie door het hele applicatie landschap te waarborgen, is er voor de goedgekeurde blauw vanuit het vastgestelde stijl guide. De keuze tot blauw is voort gekomen uit de profasionaliteit en rust uitstraalt. Maar, zonder duidelijke richtlijnen, kan het nog voorkomen dat de kleur alsnog verkeerd wordt ingezet. Om dit te voorkomen heb ik een onderscheid gemaakt in visuele hiërarchie. Uit analyses van een groep van de live staande applicaties blijkt dat in de buttons vaak een uitdaging zit. Daar heeft dan ook een grote focus gehad.
Daarnaast heb ik de grote van iconen aangepast. Deze waren vaak groter dan de tekst waar het naast stond. Dit zorgde voor een onrustige interface. De iconen mogen in het nieuwe design systeem niet groter zijn dan de tekst waar het naast staat. Indien een icoon losstaat, kent deze een maximale grote waarbij rekening word gehouden met de click target voor mobiele apparaten.
En terwijl ik het design systeem heb geoptimaliseerd aan de hand van de analyses op de bestaande applicaties, heb ik ook gekeken naar een open en minimalistisch toepassing. Dit is van belang omdat de applicaties een grote informatie dichtheid kennen.
Na het succesvol opleveren van het design systeem in Figma (nu ook toegankelijk is geworden voor anderen) zijn er verschillende basis thema’s in OutSystems gemaakt door de developer. De diverse thema’s zijn van belang om :
- Het design systeem gefaseerd te kunnen uitrollen in overleg met de functioneel beheerder van de aan te passen applicaties.
- Er (onderdelen van) applicaties die direct op het internet zichtbaar zijn. Dit zijn (onderdelen van) applicaties die vallen onder de eindverantwoordelijkheid buiten mijn afdeling. Hiervoor zijn andere regels waaraan heb ik mij gehouden.
- Het maakt het mogelijk om in de toekomst een dark theme uit te rollen.
- Nieuwe applicaties direct gebouwd kunnen worden met een van de gewenste templates.
De uitrol vindt gefaseerd plaats. Ik heb de keuze gemaakt om eerst te kleine applicaties eerst te laten doen om de lessons learned mee te kunnen nemen. Het testen of de user interface niet “kapot” gaat, ligt bij de functioneel beheerders van de applicaties zelf. Indien zij vragen hebben, mogen zij mij benaderen. Dit wordt duidelijk gemaakt tijdens een van de gesprekken die ik met hen voer rondom het omzetten van hun applicatie. Bij een aantal applicaties is het overzetten van het oude thema naar nieuwe thema niet voldoende. Dan moet er ook een nieuw ontwerp komen omdat applicaties. Wanneer dit het geval is, maak ik de nieuwe ontwerpen.
Het proces
De oplossing
Nieuw systeem; “nieuwe” applicaties
Het nieuwe Design Systeem heeft voor meerdere basis thema’s gezorgd die:
- Flexibel zijn in gebruik;
- Rekening houden met de wensen van de eindverantwoordelijke in een andere afdeling;
- Een toekomstig dark theme mogelijk maken;
- Bruikbaar is voor andere designers en niet designers.
Inmiddels loopt de uitrol gestaagd door. Een nieuwe consistentie tussen de OutSytems applicaties begint te ontstaan. Geïnteresseerde functioneel beheeders en designers nemen een kijkje en indien gewenst beginnen zij er ook mee te werken.
Geen Big Bang
Dankzij de gefaseerde uitrol hebben de eindgebruikers geen grote schok te verwerken. Dit zorgt voor een aangename verandering waarbij zij zich hopelijk gesteund voelen door de applicatie.
Reflectie
Hoewel het maken van het design systeem in Figma voor mij een steile leercurve kende, staat deze nu wel. Omdat ik het ontwikkelen van het design systeem naast mijn andere projecten heb gedaan, heeft het een langere doorlooptijd gehad dan nodig. In de toekomst zou ik dit meer prioriteit geven zodat dit sneller af was. Ook zou ik in de toekomst eindverantwoordelijke voor applicaties die direct bereikbaar zijn op het internet eerder betrekken. Hierdoor had er minder frustratie hoeven te zijn, maar onderaan de streep is ook hij content. Daarbij zijn de banden tussen onze afdelingen ook weer aangehaald.