Establishing a scalable Design System
Year
2024
Device
Mobile and Desktop
Team
Product Team, Developers
About Zempler Bank
Zempler Bank (formerly Cashplus Bank) is a UK-based fintech company providing banking solutions tailored for Small and medium-sized enterprises (SMEs).
About Zempler Design System
When I joined Zempler in December 2022, I noticed inconsistencies across platforms and teams. To address these, I proposed a design system that was later integrated into the 2024 rebranding from Cashplus to Zempler. This system established a scalable foundation to improve efficiency, consistency, and accessibility.
My role
As a Lead Designer, my goal was to create a scalable, efficient, and accessible design system that streamlined workflows, ensured consistency across platforms, and integrated seamlessly with the 2024 rebranding.
The Impact
Introducing a scalable framework that improved team efficiency by 25% and reduced resource time. The system enhanced consistency across products, streamlined workflows, and supported the 2024 rebranding with reusable components and clear documentation, significantly accelerating delivery timelines.
90%
increase in consistency across products after implementation.
80+
scalable and flexible components added to the library
2x
accelerated time to market saved in creating new features
Image above: Input field style for App
The problem
Building a design system from scratch came with multiple problems:
Lack of an existing design system - Inconsistencies emerged across products, making UI and UX fragmented.
Accessibility issues - Poor colour contrast, typography inconsistencies, and usability gaps affected user experience and compliance.
Alignment with rebranding - The 2024 rebranding added complexity, requiring the system to integrate a new visual identity without disrupting ongoing projects.
Limited resources and prioritisation - With a lean team, it was necessary to prioritise efforts and make strategic decisions on implementation.
Cross-functional collaboration - Bridging gaps between design and development teams was crucial to maintaining consistency and efficiency.
The goal
The goal was to establish a strong foundation covering common use cases while seamlessly integrating the new style guide, rather than redesigning every screen.
Unify the design language - Standardise UI components to maintain consistent experience across products.
Enhanced accessibility - Established WCAG-compliant design standards.
Optimised Workflows - Reduced redundant work and improved efficiency.
Facilitated collaboration - Strengthened design-to-development communication and also documentation.
Supported growth - Built a scalable system adaptable to future needs.
Some hightlights from the design system
Image above: Typography style for App. We also have a separate fro desktop
Image above: Custom icon style guide
Image above: Button styles for App. We also have a separate fro desktop
Image above: Colour guide Local variables
This is a brief overview. For the full case study, feel free to
