Building the Design System at Capsifi

Role: Sole UX Designer

Timeframe: 2023 – 2025

Collaborators: Frontend Developers, QA, Product Manager, Dev Lead, VP of Tech, VP of Product

Tools: Figma, Miro, GitHub

Overview

When I joined Capsifi, UX was not part of the delivery process. There was no design system or standards, which left developers guessing what to build. This resulted in an inconsistent and inaccessible user interface.

Over the next two years, I led the creation of a design system from scratch. I collaborated with front-end developers to align designs with implementation, embed accessibility, and introduce structure. I focused on clarity and consistency, ensuring everyone understood what we were building and how it should function.

This design system became the foundation for features like the Navigation Tree, Value Stream, and Business Capability. It also enhanced team collaboration, reduced rework, and made the product easier to build and scale.

Goals

• Create a consistent and scalable design language that everyone can understand.

• Align design and development by utilising reusable tokens and components, as some designs have been created without sufficient attention to aesthetics.

• Incorporate accessibility into the foundation, starting with font size and colour contrast, even if not explicitly outlined in product requirements. I believe that components should still meet AA standards.

• Provide clear specifications and foster a shared understanding to close the design-development gap. Introduce changes gradually to avoid overwhelming developers.

• Enhance collaboration by ensuring the entire team has visibility into the design intent, as this has been a challenge in the past.

My Role

• Conducted a thorough audit of the user interface, identifying major usability and visual inconsistencies.

• Designed the visual foundations of the product, including spacing, color, typography, and interaction states.

• Built a comprehensive component library in Figma and collaborated closely with front-end developers on implementation.

• Integrated WCAG 2.1 accessibility standards into all components to ensure inclusivity.

• Organised design walkthroughs before every sprint to align developers, product managers, and quality assurance teams.

• Educated team members who were unfamiliar with UX and design systems, while also mentoring those interested in learning more.

• Advocated for UX at the leadership level and contributed to embedding it within the product delivery cycle.

The Process

1. Starting from Scratch

When I joined the team, the front-end lead briefed me on Capsifi 2.0. My first task was to establish a baseline that included fonts, colors, spacing, and buttons. While designing other features, I identified components that were frequently needed and explored ways to systematize them.

The front-end team quickly rolled out version 1 of the system using design tokens. However, due to tight deadlines, many components did not match the designs, creating a disconnect between what was intended and what was actually delivered.

2. UI Audit & Inventory

I conducted a comprehensive audit of the platform and identified the following issues:

• Mixed message types and unclear usage guidelines

• Inconsistent spacing and layout rules

• Poor contrast, particularly in the heatmap

• Inconsistent form patterns and excessive visual noise in tables

3. Foundations: Tokens & Layout Rules

4. Core Components

I created a reusable set of components, including:

• Buttons (primary, secondary, links, and disabled states)

• Inputs (text fields, drop-downs, and date pickers)

• Tables (both static and editable),

• Panels(Menu, second panel and fly-out)

• action list, overlays, Panels, and header

Each component is documented with usage guidelines, edge case handling, and accessibility considerations.

5. Design-Development Collaboration

To bridge the gap between design and development, I implemented the following strategies:

• I worked closely with developers to adapt designs within technical constraints, such as limitations of templates.

• We conducted joint reviews of components before implementation.

• I utilised real features like the Value Stream and Navigation Tree to test how components performed in context.

• I created a single source of truth in Figma, with documentation accessible to all teams.

6. Embedding UX into Delivery

• I introduced design walkthroughs before sprint planning to ensure developers understood what they were building.

• I collaborated with Product Managers to negotiate project scope based on design feasibility.

• I trained QA teams and Product Managers to evaluate builds against the design system.

• Overall, I facilitated a shift in our approach from "build first" to "design first," providing greater clarity throughout the process.📈 Outcomes

Outcomes

1. We have achieved a unified user interface across the Capsifi platform, although there is still more work to be done. I would estimate our alignment has improved from 20% to 80%.

2. We have significantly reduced rework by providing reusable, documented specifications. This has led to a 90% decrease in development rework; previously, every new feature would necessitate changes to older components.

3. Additionally, we have improved the onboarding process for new developers. In the past, there was no documentation available for the components, making it difficult to integrate newcomers.

4. We have also introduced user experience (UX) as a formal part of the delivery process. While our UX maturity still has a long way to go, the overall attitude towards UX has shifted from rejection to a more embracing approach as part of the process.

5. Finally, we have laid a solid foundation for scaling future features. This will provide better support for future designers who may want to expand the team.

Reflection

This has been an incredible learning journey. Building a design system from scratch as the only UX designer required me to take on multiple roles—strategist, educator, builder, and negotiator.

I'm proud of the close collaboration I have with developers while navigating various constraints. I advocate for user experience (UX) with leadership and strive to promote a shift in mindsets regarding its importance. I also educate teammates who may not have a full understanding of UX or design systems. Additionally, I mentor those eager to learn and take pride in witnessing their growth into advocates for the system. Finally, I excel at transforming messy, ambiguous designs into structured and scalable patterns.

One thing I wish for is a larger design team. With more designers, we could have scaled faster and further advanced the UX practice.

If I had more time, I would expand the system to include motion design, microinteractions, and more comprehensive documentation.