ABN AMRO
Product strategy
Personas- Customer Journey mapping
- Product roadmapping
- Competitive UX benchmarks
- Design sprint workshops
- Innovation sprints
- Speed boat technique
- MoSCow canvas
User Experience (UX)
- Double diamond
- Card sorting
- Tree testing
- User flows
- Interviewing
- Information architecture
- Usability evaluation
- A/B experimentation
- Smoke tests
User Interface (UI)
- Wireframing
- Visual / UI design
- Interaction patterns
- Design systems
- Ideation
- Prototyping
- Micro animations
- Documentation
Schaalbaar design systeem voor Grip
Leestijd: 2 minuten
Een design systeem is een centrale plek waarin herbruikbare componenten worden verzameld. Het zorgt voor consistentie en zal de processen binnen teams versnellen.
Toen ik bij ABN AMRO begon, was er voor de Grip-app geen up-to-date artboards (schermen) beschikbaar die overeenkwamen met wat er in de app store live stond. In plaats daarvan werden er screenshots gebruikt. Ook was er geen afstemming tussen kleuren, iconen, symbolen, specs.. etc. om maar een paar voorbeelden te noemen.
Er was duidelijk behoefte aan een systeem met documentatie om op een consistente, snelle en gemakkelijke manier interfaces te bouwen!
Atomen
Naast mijn UX werkzaamheden begon ik dus met terugwerkende kracht het definiëren van ‘atomen’ om daarmee moleculen (componenten) op te zetten. Met het combineren van meerdere atomen en moleculen kon ik geleidelijk de complexiteit en functionaliteit vergroten om grotere componenten (ook wel organisms genoemd) te maken. Ieder component is vervolgens voorzien guidelines, patterns en specs zodat er in Figma (of een ander workspace) een single source of truth ontstaat.
Bijdrage aan het project
Design specs ophalen bij developers, opzetten design systeem, componenten documenteren, tweeweekse (UX) update geven
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
