Saible

Saible

Building a Design System from Zero to Production

Building a Design System from Zero to Production

Client: Saible Ltd (Construction Fintech)

Timeline: November 2023 - June 2025

My Role: Lead Product Designer & Design System Architect

Team: Product Manager, 3 Software Engineers, Construction & Finance Stakeholders

Project Type: Full-time engagement, first design hire

Project Overview.

Project Overview.

Project Overview.

Saible is a fintech initiative set to revolutionise how the construction industry handles project payments. In my role, I led a design-driven product development effort that blended UX, UI, and end-to-end product strategy. Working through extensive user research, wire-framing, prototyping, and user flow iterations, the aim was to build a secure, transparent, and intuitive payment platform.

This platform fulfils a clear industry need, setting the stage for a future where digital payment solutions reduce friction and build trust among contractors, clients, and financial stakeholders.

The Challenge & Context.

The Challenge & Context.

The Challenge & Context.

Saible approached me as their first dedicated design hire to solve a critical scaling problem. Their construction fintech platform was growing rapidly, but inconsistent design patterns were creating usability issues and significantly slowing development. Each new feature required extensive design decision-making from engineers, leading to fragmented user experiences and frustrated developers.


The target users were construction managers, project supervisors, and finance teams who needed to make critical financial decisions quickly while managing construction projects. These users had varying levels of technical comfort and often worked in less than ideal conditions for mobile interaction.


Business constraints included a small team with aggressive growth targets, the need to maintain development output while improving consistency, and accessibility requirements for users operating in high-stress, physically demanding environments. The company had never had dedicated design resources, meaning there was no existing design culture or systematic approach.


What made this particularly challenging was building a design system from scratch while the product was actively being used by customers, requiring careful migration planning and backwards compatibility considerations whilst still adhering to native iOS, Android, and web constraints.

Business Impact
Inconsistent interfaces were causing user errors in financial approvals, and development velocity was decreasing as the team grew.

Inconsistent UI patterns across the platform which was reviewed and amended with a consistent style, leveraging Material 3.

My Strategic Approach.

My Strategic Approach.

My Strategic Approach.

Research & Discovery
Rather than jumping into component creation, I started by understanding both the users and the technical constraints. As the first design hire, I began with a comprehensive audit of all existing interfaces across Saible, documenting inconsistencies and cataloging existing patterns. I then conducted user interviews with public and private sector prospective clients, observing how they currently interact with financial software on actual projects in the construction industry. I discovered that user personas varied extensively, and interviews provided insight into the types of users we would need to accommodate for. From architects to quantity and quality surveyors, construction managers, finance teams and painters & decorators on site, to labourers, developers (the property kind), lenders and funders. This level of variation in user types was an exciting challenge - we needed to create one product that fit all contexts.

I also embedded with the Flutter development team to understand their workflow and technical constraints. This revealed they were making design decisions in isolation because there was no systematic design guidance.

User interviews, whiteboard sessions, and discussions with the development team.

Ideation & Concept Development
Utilising the rich data I had acquired during user research, I developed a systematic methodology that would connect design decisions to real user needs and technical constraints. I facilitated workshops with stakeholders to define design principles specific to construction fintech - prioritising clarity under stress, mobile-first interactions, and rapid task completion.

System Architecture and Strategy with Developer Collaboration
My background in both design and frontend development proved crucial here. Instead of creating a traditional component library that developers would struggle to implement, I designed a token-based system that integrated seamlessly with Flutter's Material Design architecture. I wanted to be able to have an existing design system mirror in our codebase as it did in Figma, encouraging rapid development.

I started with the most critical user workflows, designing and testing components in the context of real user tasks. I created multiple variations of key components like states, form inputs, and navigation elements, testing each with stakeholders and early adopters.

Customer journey map of a top level user persona; such as a developer, funder and/or lender.

Developing user flows to ensure RBAC permissions are secure and align with the technical teams expectations.

Through iterative testing, I refined components and maintained an embedded approach with the development team to implement updates and enforce consistency. This allowed the team to focus on third party integrations and logic without falling behind on UX and UI improvements.

As a result, developers could implement consistent interfaces without waiting for design specifications, and I could enforce the quality and accessibility standards I established.

Iteration process and evolution of key state components.

Implementation & Handoff
My unique contribution was creating a design system that bridged design and development seamlessly. I worked directly with the Flutter development team to understand Material Design constraints and opportunities, ensuring that design mapped directly to Flutter's theming system. In integrating with the development team's existing workflow, design system adoption felt natural rather than imposed.

Results & Strategic Impact.

Results & Strategic Impact.

Results & Strategic Impact.

  • 80% reduction in design inconsistencies across all platforms the Saible product was developed against, creating less friction amongst users and quicker implementation of new features via existing components.

  • Refined sprint planning sessions as a result of streamlining process for new feature design and implementation; subsequently resulting in a better defined product roadmap.

  • Confidence in early adoption by both Saible investors and it's users due to the robust nature of the design system and it's code components. The reusable nature of the components enabled unit and integration tests to be reliable and code updates during production use to have decreased in risk exponentially.

  • Saible successfully acquired 2 private sector development projects based in London and the North West, and a public sector project; updates and new features are happening on a rolling basis based on client feedback with consistency and speed.

  • 80% reduction in design inconsistencies across all platforms the Saible product was developed against, creating less friction amongst users and quicker implementation of new features utilising the design system created.

  • More success in sprint planning due to the lesser initial overhead of "reinventing the wheel" for new feature design and implementation; subsequently our product roadmap became better aligned.

  • Confidence in early adoption by both Saible & it's users due to the robust nature of the design system and it's code components. The reusable nature of the components enabled unit and integration tests to be reliable and code updates during production use to have decreased in risk exponentially.

  • Saible successfully acquired 2 private sector development projects based in London and the North West, and a public sector project; updates and new features are happening on a rolling basis based on client feedback with consistency and speed.


  • 80% reduction in design inconsistencies across all platforms the Saible product was developed against, creating less friction amongst users and quicker implementation of new features utilising the design system created.

  • More success in sprint planning due to the lesser initial overhead of "reinventing the wheel" for new feature design and implementation; subsequently our product roadmap became better aligned.

  • Confidence in early adoption by both Saible & it's users due to the robust nature of the design system and it's code components. The reusable nature of the components enabled unit and integration tests to be reliable and code updates during production use to have decreased in risk exponentially.

  • Saible successfully acquired 2 private sector development projects based in London and the North West, and a public sector project; updates and new features are happening on a rolling basis based on client feedback with consistency and speed.


Strategic Value Delivered
The design system enabled Saible to scale their design function without proportionally scaling their design team. More importantly, it established a design-conscious culture that continues to influence how the company approaches product development.

Strategic Value Delivered
The design system enabled Saible to scale their design function without proportionally scaling their design team. More importantly, it established a design-conscious culture that continues to influence how the company approaches product development.


Strategic Value Delivered
The design system enabled Saible to scale their design function without proportionally scaling their design team. More importantly, it established a design-conscious culture that continues to influence how the company approaches product development.