Design System for a fast-paced fintech startup
or how I sped up development process by 2x
Queens Lane Consultants (QLC) is a startup specialising in R&D tax claims for businesses across the UK. QLC has developed proprietary software to handle both client-facing processes and internal operations, ensuring efficiency and accuracy in every claim
Queens Lane Consultants (QLC)
Design System
User Research
As it usually happens with startups who grep up quickly and had no designer from the start, there was a lack of documentation. the platform’s design was fragmented, with inconsistent elements across both the client-facing portal and the internal system. The absence of a cohesive design system was leading to inefficiencies in development, inconsistencies in user experience, and a disjointed visual identity—particularly critical for a fintech company dealing with sensitive financial data.
Recognising the opportunity, I set out to build a scalable design system tailored for QLC’s fintech platform.
Phase 1
Before I could begin building the design system, I conducted a thorough audit of the client portal and QLC's website. I searched for recurring patterns in:
Typography (font styles, sizes, weights)
Icons
Buttons (shapes, colors, hover states)
Backgrounds and layouts
I also identified where these patterns were broken, which highlighted the inconsistencies in the product’s design. This audit was crucial to building a consistent foundation for the system.
Phase 2: Building Core Elements
With the audit findings in hand, I set out to build the foundational elements of the design system. Recognizing the need for speed and scalability, I used the Uber Base Design System as a key reference, adapting its structure and principles to fit the unique needs of our platform.
Defining the Foundations
To ensure the system could be both immediately impactful and expandable over time, I began by:
Establishing a Grid System: I implemented a responsive grid system inspired by Uber Base's approach, creating consistent layouts across web and mobile platforms. This provided developers with a solid framework and reduced iteration cycles.
Creating a Components Library: Starting with high-priority components like buttons, input fields, and modals, I focused on reusability and flexibility. I ensured that each component was designed with accessibility, scalability, and developer usability in mind.
Developing a Style Guide: I standardized typography, colors, and spacing rules, ensuring that the system adhered to brand guidelines while maintaining clarity and readability.
Developer Collaboration: Each component was designed with implementation in mind, reducing back-and-forth between design and development. I partnered with developers to ensure handoffs were seamless and components were easy to code.
Marketer Input: By incorporating feedback from the marketing team, I ensured the design system supported marketing campaigns, improving consistency across client-facing materials.
Efficiency Gains
By focusing on these core elements, the design system delivered immediate results:
Reduced design and development time for new features by 50%.
Increased consistency across platforms, improving the user experience.
Simplified the design process, allowing teams to focus on solving user problems rather than aligning visual elements.
Scalability
The system was designed to evolve. As new components were added, they followed the same principles established in the core, ensuring the system remained cohesive while expanding to meet future needs.
Since I started small, there was no pressure on developers to immediately overhaul the platform.
I initiated a gradual rollout of the design system, beginning with key features such as the login redesign, and communicated plans for its expansion across the entire platform over time.
I also created internal documentation with small notes on how each component should be used, helping developers integrate the system easily. This documentation, combined with a gradual rollout, made the process seamless and stress-free for the team.
As the first product design hire, I took ownership of the entire process, from auditing existing designs to collaborating with development and product teams to ensure the system's successful implementation. This project taught me how to balance immediate business needs with long-term design scalability, ultimately delivering a solution that improved efficiency, consistency, and user experience across the platform.
It's important to note that now QLC's design system is a living instrument that rapidly changes. It is not just a collection of components; it's a scalable foundation that has allowed the team to work faster and more efficiently while maintaining a cohesive brand identity. As I continue refining and expanding the system, I’m confident it will support QLC’s growth for years to come.
