Continuity Build Trust
Isn’t that exactly what modern banking needs? This is how I tackled the challenge of transforming the LUKB Sketch component library into a fully integrated Figma Design System.
Reading time about 3 min.
Start: September 2022
Timeline: 10 months
Client: Luzerner Kantonalbank (LUKB) is the leading bank in Canton Lucerne. As a classic, full-service bank, LUKB offers all the services you expect from a modern bank for discerning clients.
Services: Ideation, UX Research, Wireframing, UI-Design, Prototyping, Figma, Sketch, Design-System
Platform: Responsive Website
These case studies exclude confidential information and reflect only my personal design work. They do not represent the official views of my clients.
The job to be done
How might we, turn a fragmented Sketch library into a comprehensive Design System?
When I joined LUKB as an external UX/UI Consultant & Designer, the team was still working with Sketch and a basic component library—which led to usability issues and inconsistencies across projects. The decision to move to Figma became the perfect trigger for rethinking and rebuilding a structured, scalable system.
The result
A foundation for building future user experiences.
Over my 12-month contract, we successfully established the foundation of a unified Figma Design System, integrating all LUKB applications and use cases.
The system’s atomic structure ensured:
- Ease of use – Streamlined design workflows.
- Flexibility – Application-specific styles and components.
- Scalability – A sustainable system ready for future expansion.
Through workshops and usability tests with designers, we continuously optimized the system for real-world usage. Close collaboration in critical areas like data visualization and diagram design helped align development and design needs.
Overall, the system was easy to use, speed up the design process, streamlined development handoffs, and built a strong foundation for future growth.
My Role
UX/UI Designer & Consultant
I supported LUKB’s in-house design team, creating mockups for various mobile and desktop applications. I also led the UX/UI perspective in workshops for developing and implementing a Consultant Application and worked closely with internal and external stakeholders.
Beyond that, I was responsible for developing and implementing the LUKB-wide Design System, ensuring long-term consistency and usability.
Team: Christophe Vouillamoz, Peter Matura, Manuela Sidler
Tools: Figma, FigJam, Sketch, Illustrator, Miro, InVision
Applied skills: UX-Design, Interaction-Design, User Interface Design, Design-Workshops, Design-System
In short, the process
Transform the now.
The existing Sketch system was built on Angular Material UI components with custom extensions. However, the components were often unlinked, leading to inconsistencies across design files. The transition to Figma provided the perfect opportunity to rebuild a structured system from the ground up.
How We Did It
- Collaborated with the UX team to build an atomic library structure in Figma.
- Analyzed existing design files to identify component usage.
- Reduced core components to only what was actively used.
- Developed clear naming and documentation conventions for ease of use.
- Incorporated states and governance rules as a workflow for updating or creating new elements.
- Established core-style libraries and tested them in actual use cases.
- Built application-specific components and additional libraries.
- Tested the system with the design team and refined workflows.
- Optimized and expanded libraries based on real-world usage.
- Defined state management and responsibility guidelines for maintaining components.
- Led workshops on effectively working with the Design System.
Insights & Learnings
Brad Frost's Atomic Design Methodology and its principles guided our development process. To streamline development and design. I also explored emerging trends in token systems and experimented with Figma Token Studio for a while.
Unfortunately, due to internal regulations regarding Figma plugins, I couldn't convince the design team to adopt these token systems.
Note: Figma Variables weren't available at this time
Make It Easy to Use
The system is a tool—designers should enjoy using it.
We focused on making the Design System intuitive and expandable. We prioritized reusable elements and structured them within an atomic framework, making it easier to scale from Molecules to Templates and full Pages:
- Atoms – Text, icons, colors, spacing
- Molecules – Headings, paragraphs, buttons, input fields
- Organisms – Forms, tables, diagrams
- Templates – Navigation, footers, onboarding, login flows
- Pages – Mobile, desktop, large screens
To make the components accessible and provide clarity of use, we started by documenting their usage and providing necessary information about states and authors. The most challenging part was finding the right search labels to make components easily discoverable in the asset inspector. Together with the team, we collected all the terms they commonly used to create a comprehensive list of possible search labels.
Reduce to the max
Eliminate what isn’t used—streamline what is.
Analyzing existing design files revealed many unused styles and components. Our first step was to remove redundant elements and separate corporate styles (fonts, colors) to create a unified core library applicable across all LUKB applications.
By minimizing and merging definitions, things become clearer and more streamlined. Questioning new components or core styles also opens space for communication and problem-solving.
Focus on consistency
Standardized spacing and alignment for a seamless experience.
One of the considerable inconsistencies was spacing and element distances. Because white space is one of the most defining elements of LUKB’s appearance.
This caused several usability issues, such as:
- Headlines jumping when navigating between pages
- Pop-ups with inconsistent padding and element alignment
- Floating containers with varying whitespace
- Inconsistent vertical rhythm across content pages
By integrating structured rules for margins and padding into atoms and molecules (like headings, buttons, and cards) and incorporating component swaps for elements that can hold different types of content, we improved consistency and sped up the design process.
For example, in Pop-ups, using auto-layout settings and swapping components for content or interaction components, we were able to ensure that the main structure of the containers and padding, as well as the global customization options, were preserved.
Note: At this time, defining values for auto layout spacing using styles or tokens was impossible.
What the project taught me
Collaboration Is Key to a Successful Design System
Each designer and developer has unique needs and workflows. To ensure adoption, we had to understand and accommodate their behaviors—turning the Design System into a tool they wanted to use.
A system only works when people use it.
What I learned
- Align expectations early—a successful system starts with a shared purpose and common understanding.
- Start small, then scale—begin with a minimal but highly usable component set, then expand.
- Keep it flexible and intuitive—a Design System should feel explorable, understandable, and adaptable.
What I would do more
- I conducted workshops, but in hindsight, building a Design System from scratch within an existing ecosystem required even more collaboration and alignment from the start.
- While we successfully implemented the system within the UX design team, I would push for deeper engagement with developers and other departments to ensure long-term adoption and impact by incorporating design-to-code parity (e.g., Figma Tokens, using Storybook)
- Some design system users lack Figma experience, which can lead to workarounds that compromise the system's effectiveness. To address this, I would provide comprehensive training to help all users develop the skills needed to use the system effectively.
Related projects
Dive deeper into my work
Inspire and challenge the audience
Collaborate
… SOON
© 2025 Matze Lenz. All rights reserved. Imprint