Design System | B2B | SaaS | Web App

Sperta

Design System

Overview

Designing for Scale: Sperta’s First Design System

At-A-Glance

I built and documented Sperta’s first design system from scratch—unifying components, reducing design debt, and improving dev handoff speed.

This scalable foundation supported faster iteration and a more consistent UX across the platform.

My contribution

1.

Customer Insights & Ideation: Uncovering & translating valuable insights into actionable features that align with customer behaviors and motivations.

2.

Experience Strategy & Vision: Created frameworks, prototypes, and communicated a clear vision to align stakeholders, facilitating decision-making processes.

3.

Planning & Scope Definition: Balanced customer goals with business objectives, prioritized features for successful launches and future iterations with PM

4.

Design Execution & Validation: Developed design handovers, and build and maintain design system.

My Role

Design System
Onboaring Newhire

Team

PM x1
Eng x5

Timeline

San Francisco
March. 2022 – Sep 2023

Tool

Figma
Notion

Problem

Misaligned UI, Fragmented Experience

As Sperta scaled rapidly, our UI grew fragmented. Different designers, working across time and teams, shipped interfaces with inconsistent styles, behaviors, and components — with no shared design language to unify them. This created:

Visual inconsistency across pages and products

Inconsistent UI across pages and products

Duplicated work across design and engineering

Slow onboarding due to unclear design standards

Limited scalability, with every new feature built from scratch

My approach

Start Small, Scale Smart

A four-phase process that balanced immediate needs with long-term scalability.

Research

Audited UI and benchmarked top design systems.

Definition

Aligned on principles, patterns, and team needs.

Design

Built flexible, reusable components in Figma.

Document

Created clear, concise guides for team adoption.

Research

Understanding the Mess

We conducted a full UI audit and interviewed engineers and PMs to uncover system gaps. Components were mapped using the Atomic Design model to identify inconsistencies.

Key findings:

Duplicate components created extra design/dev work

Siloed teams lacked a shared token system

Conflicting guidelines in copy and UX conventions

Unclear visual hierarchy across platforms

solution

Built a Scalable System, From Tokens to Templates

Instead of patching inconsistencies, I built a system from the ground up — organizing our UI from foundational tokens to high-level page templates.

This modular approach enabled consistent design, faster handoffs, and easier onboarding for designers and engineers.

Token Library

I started by defining semantic tokens (e.g., text/primary, text/secondary) instead of raw hex codes, making our color usage scalable and developer-friendly.

Components

For every component — from buttons to input fields — I mapped out all possible states (default, hover, error, etc.) to ensure clarity and design coverage.

Patterns & Specs

I created reusable interaction patterns (e.g., modals, tables, navigation) and documented spacing, layout, and behavior down to the pixel — streamlining development and QA.

Page Templates

Using those building blocks, I structured templates to ensure cross-page alignment in layout, hierarchy, and responsive behavior.

Designing and Prototyping Responsively

To support handoffs, I used the Figma plugin "Responsive" plugin to generate adaptive layouts, making it easy to demo UIs across screen sizes with minimal lift.

Further Enhancement

Keeping the System Evolving with the Product

Even a well-built design system needs updates. As our product matured, certain components—like filters—no longer supported new workflows and user expectations.

Redesigned Filters to Match New Needs

I led a revamp of the filter component using our systemized approach. Based on A/B testing and team feedback, the old version lacked scalability and clarity.
The updated design better supports advanced use cases and aligns with our new patterns.

Click on that button to learn more about the filter components case study

See More

Document

Documenting for Scale, Clarity, and Collaboration

How do I document our design system?

To ensure consistency and easy adoption, I researched documentation best practices from leading B2B design systems like Google Material, Atlassian, IBM Carbon, and Salesforce Lightning.

Google material design

Atlassian

Carbon (IBM)

Lightning (Salesforce)

Preview of our documentation

Instead of building a full site from scratch, I created a centralized Notion library to quickly align the team. It included:

System foundations (color, type, spacing, etc.)

Usage guidance for components and patterns

Examples for real-world implementation

The documentation became our team’s go-to reference for onboarding, design QA, and handoff.

Outcome

Systemized UI = Scalable Growth

50%

reduction in duplicated design and dev efforts

120%

faster design decisions

40%

increase in brand consistency recognition

Takeaway

Lessons I've learn

Collaboration = Alignment

Building a design system taught me how to drive alignment across cross-functional teams through clear documentation and shared language.

Consistency = Scalability

I saw firsthand how consistent UI patterns reduce complexity and enable faster, scalable product development.

Iteration = Relevance

A great system evolves. I learned to gather feedback, prioritize needs, and improve components over time to keep the system useful and relevant.

Sperta
Branding

The decision making platform

Type

SaaS

Timeline

March. 2022 -
present

My role

Strategy
Planning
Design + Execution
Management
Coaching

About the project

In designing Sperta, an enterprise SaaS application, we encountered the challenge of inconsistent design elements, such as multiple versions of buttons, fonts, icons, and varying font sizes. Despite our rapid growth within a year, we realized the importance of consistency in creating a cohesive user experience and building effective mental models to retain users on the platform.

My contribution

As the leader responsible for establishing and maintaining Sperta's design systems, I orchestrated the planning and execution process. Additionally, I guided team members on various aspects, including accessibility, maintaining semantic integrity in color and typography, and implementing design tokens.

Platform Case
Branding Case

The problem

Lack of unified design principles and component library

With the exponential growth of Sperta, we had let a lot of design debt build up for the product. One of the major problems we were facing was that a lot of pages, products, features, and components were not in sync with each other in terms of UI and UX. This happened because all these parts of the apps were designed at different times, by different designers having a different context. There was no unifying design principles or a component library to guide them. Actions before things get too messy.

My approach

Build something small and useful, but keep the big picture in mind

The process followed when solving this problem consisted of 4 phases, below is an overview of the latter:

Research

We learnt the common standards that represent a successful design system.

Definition

We defined the elements structure and guide of use.

Design

We designed the components and created an organized library in Figma.

Document

We keep every detail for each component, especially important for new fellow designers

Research

Picking up the pieces

To better understand the different problems in our product, we need to:

  • Identify all the design issues in our product

  • Learn the common standard and principles of a successful design system

Visual analysis:

We started by auditing our product; i.e, we listed out all instances of particular components (Buttons, dropdowns, input fields…) on the different pages and flows following the Atomic Design model to organizer our process.
Besides, we interviewed a couple of front-end developers and stakeholders to understand their main goals and pain points.

List of the inconsistent components during our research phase.

Key findings:

  • Duplication of common components which leads to repetitive work for both design and dev team
  • Siloed teams working with disjointed communication: design token is needed!
  • Conflicting guidelines and direction, including inconsistent UX copy writing
  • Unclear hierarchy for existence buttons used across platforms

Definition

Craft library from atoms, molecules, organism to pages

Having a preset library of buttons, inputs, styles, etc. reduces the risk of elements being repeatedly redesigned. And working with established patterns and components frees us to focus on user experience, problem solving, and building meaningful features and products.

Glam token library

First things first the most inconsistent was the branding color, so I started off by defining my token library consisting of all colors that will be used with the platform.

Then, per feedback from our dev team, they preferred to name the colors based on various use cases like "Text/primary" "Text/secondary" instead of "Grey 500" "Grey 600".

Finally, on the pursuit of consistency, I revisited all the Figma frames and re-organized the color palette.

A preview of our Sass and CSS based digital brand colour system

Similar to how I created my color token library, I re-defined our foundational elements like typography, shadow, as well as components, patterns

Components

include buttons, inputs, toggles, avatars and tooltips. I accounted for all states for each component.

For example, an input has a inactive, hover, focused, inactive & populated, error, submitted and disabled state.

Patterns

include navigation, cards, tables, empty or loading states, notifications, alerts and modals.

I also created detailed UI components specs, which aim to cover all states, and also px values, dimensions and basic CSS.

On responsiveness

It is crucial to be designed to be responsive, especially for the web applications like Sperta. While it’s simple to build responsive components, it’s not so simple to mockup responsively.

Fortunately, I found a Figma plugin called “Responsive”. With simple settings and frame groups, I could easily create a basic responsive UI, present it to my stakeholders, and handover the deliverables precisely

Thus, I created our library to be responsive, from organism components like sidebars to pages like card list pages, and table pages.

Design

Maintain the design library as our bussiness grows

While the established design system served our purpose perfectly for quite a long time, some components like filters no longer met the digital requirements due to our fast-past evolvement as well as the business’ needs, our requirements changed.

Rethink the filter experience using the design system methodology

The filter component's performance was abysmal from the results of A/B testing and feedback from users and stakeholders. It wasn’t scaleable enough to support the ever-growing complexity of our product. Read more about the design process of the filter components here.

Document

Documenting the foundations

Literally documenting the design system was the biggest challenge for me on this project. While I had created brand design guidelines and annotated spec, things can still be missed or misunderstood especially when a new or replacement designer or front-end developer steps into our teams.

How do I document our design system?

I started out reading and researching how other teams had done this. Fortunately, the Internet is full of answers for this, and many companies have made their documentation public.

Google material design

Atlassian

Carbon (IBM)

Lightning (Salesforce)

My ultimate goal was to create a website to document the system, specs, showcase example uses, and specify guidelines for all patterns and components. It would act as a quick reference, or a bible to study in detail.
However, I didn’t want to be held back by the design, build and time constraints of creating a website for this. So I simply start by creating a new Notion doc which was easily accessible by all our team and embed with various resource quickly.

Preview of our documentation

As the documentation is in a private Notion doc, I’ve captured some screenshots below to give an overview of how it was constructed, laid out, and what it contains.

A few sample pages from the Notion Doc

Key takeaways & insights

How did this help Sperta and all the stakeholders

Company:

We achieved the goal of making all the businesses look consistent across platforms

Product:

Today we are able to build and ship things faster than we use to. The quality of the shipped product has increased while the time taken to ship has drastically gone down.

Designers:

It has become a lot easier to create, share and synchronize quite an extensive set of components at a much faster rate.
Also, going forward it will eventually help us in easy knowledge transfer to the new team members.
Last thing but not least, the design system allowed us to quickly build prototypes, test more ideas than before, quickly evaluate our hypotheses, and even create more variations to A/B test.

Developers:

The component library they created based on the UIkit helped them maintain the sanity of code and consistency in the final product.

Lessons I've learn

It is vital to create a design system using products it will be applied to, with real data and problems.
Consistent UI patterns and components make a huge difference in guiding a user through a product.
Working with established patterns and components frees us to focus on user experience, problem solving, and building meaningful features and products.
Having a preset library of buttons, inputs, styles, etc. reduces the risk of elements being repeatedly redesigned.

NEXT
Sperta Website

RoboForce – Copilot for AI Robots

Sperta – Financial Decision-Making Platform

HamsaPay – Invoice Financing Platform

Sperta – Scalable Design System

RoboForce – Brand & Website

Sperta – Brand & Website

RoboForce – Titan: Robotics Concept Design

Fliptrip – Trip Itinerary Planner