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
Fotogallerij
