ABN AMRO
Product strategy
Personas
Customer journey mapping
Product roadmapping
Workshops faciliteren
Design sprint workshops
Design Thinking
Innovation sprints
Speed boat methode
MoSCow canvas
User Experience (UX)
Double diamond
Card sorting
Tree testing
Interviewing
Informatie architectuur
User flows & scenarios
Usability testing
A/B experimenten
Lean, Agile en Scrum
User Interface (UI)
Wireframing
Visueel en UI ontwerp
Online (re)branding
Interactie patronen
Design systems
Design tokens
Prototyping
WCAG 2.0 accessibility
Documentatie
Micro-animaties
Schaalbaar design systeem voor Grip
Klant | ABN AMRO |
Jaar | 2021 |
Bijdrage | Design specs ophalen bij developers, opzetten van het design systeem, design tokens definiëren, componenten documenteren, tweeweekse (UX) update geven |
Leestijd | 2 minuten |
"Een design systeem definieer ik als een centrale plek (bibliotheek) waarin herbruikbare componenten worden verzameld. Het zorgt voor consistentie en zal de processen binnen teams versnellen."
Toen ik bij ABN AMRO begon, waren er geen up-to-date artboards beschikbaar die overeenkwamen met wat er in de appstores live stond. Voor veel gebruikers leek het ook dat er verschillende vormgevingen waren toegepast. Er was geen afstemming in visuele hiërarchie, spacings, margins, kleuren, iconen, symbolen etc. om maar een paar problemen te noemen.
Er was duidelijk behoefte aan een design systeem met design tokens en documentatie om op een consistente, snelle en gemakkelijke manier interfaces te bouwen!
Atomic design
Naast mijn UX werkzaamheden begon ik met terugwerkende kracht aan het definiëren van ‘atomen’ om daarmee moleculen op te zetten. Met het combineren van meerdere moleculen kon ik weer geleidelijk de complexiteit en functionaliteit vergroten om grotere componenten (ook wel organisms genoemd) te maken. Ieder component werd voorzien van guidelines, patterns en specs zodat er in Figma (of in een ander workspace) een single source of truth ontstond.
Oplossing voor de gebruiker
Een consistente beleving bij de doelgroep(en)
Business goals
- Kostenbesparing en werkbesparing
- Efficiënte samenwerking tussen designers en (front-end) developers