My Role: UX/UI Designer & Consultant
Services: UX Research, Wireframing, UI-Design, Prototyping, Design-System
Platform: Figma Design System
Employer: Luzerner Kantonalbank (LUKB)
Timeline: 10 months, September 2022 – June 2023
Unified design system – through atomic structure
LUKB's fragmented Sketch library created inconsistencies across all banking applications. Through atomic design methodology, collaborative workshops, and systematic documentation, we built a scalable Figma design system that accelerated workflows and ensured consistency. One source of truth. Zero ambiguity. Measurable adoption.
Core shift: From component chaos to atomic clarity – through structured governance.
3 Min. Read
How we solved problems
Three challenges, three breakthroughs
Designers don't adopt systems. They adopt tools they trust.
The existing Sketch library was broken. Unlinked components. Inconsistent spacing. Designers working around the system instead of with it. We didn't just migrate to Figma – we rebuilt trust. Started with core styles everyone needed. Tested with real projects. Iterated based on actual pain points.
Result: system adoption across the entire design team. Trust beats perfection. Every time.
Complexity compounds. Simplicity scales.
The old library had 200+ redundant styles and unused components. Analysis revealed most were never touched. We applied atomic design – broke everything down to essential building blocks. Atoms became molecules. Molecules became organisms. Clear hierarchy. Predictable patterns.
Reduced core components by 40%. Not by removing features. By removing decisions.
Documentation isn't optional. It's the system.
Designers struggled to find the right components. Not because they didn't exist – but because discovery was broken. We documented usage patterns. Added search labels. Created visual examples. Made components explorable.
The system became intuitive because we made it discoverable. Architecture without navigation is just chaos with structure.
Final Designs
Consistency matters. A good brand experience covers every interaction.
Atomic Structure: From Atoms to Pages
We structured the system following Brad Frost's Atomic Design methodology. Each level builds on the previous – creating a predictable, scalable foundation.
1. Atoms – Text, icons, colors, spacing
2. Molecules – Headings, paragraphs, buttons, input fields
3. Organisms – Forms, tables, diagrams
4. Templates – Navigation, footers, onboarding, login flows
5. Pages – Mobile, desktop, large screens
Standardized Spacing & Alignment
One of the biggest inconsistencies was spacing. We integrated structured rules for margins and padding into atoms and molecules – improving consistency and speeding up design workflows.
Key Learnings
What this project taught me
Building design systems without user buy-in is building for nobody
We had the structure. We had Figma. But designers kept reverting to old patterns. The pain: pushing a system nobody wanted to use. What helped: stopping development, running workshops, and rebuilding based on actual designer workflows – not ideal ones.
Atomic design works – but only if you start small and scale deliberately
We tried building the entire system at once. Massive scope. Slow progress. Zero adoption. What saved me: cutting scope to core components only, proving value fast, then expanding iteratively based on real project needs.
Documentation is design work – not an afterthought
Designers couldn't find components even when they existed. Search labels were inconsistent. Usage examples were missing. The pain: watching people rebuild existing components. What worked: treating discoverability as a first-class design problem with collaborative naming workshops.
Why this still matters
A system only works when people use it
Design systems fail not because of bad architecture, but because of bad adoption. The best component library in the world is useless if designers can't find what they need, don't trust it, or don't understand how to use it. Build for humans first. Structure second.
Thank you for reading
Related projects