Design system

Sperta

Overview

Designing, documenting a design system for Sperta Rules Engine Platform

At-A-Glance

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

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

Strategy
Planning
Design + Execution
Management
Coaching

Team

Product Manager x1
Tech Lead x1
Front-end Eng x2
QA x2

Timeline

San Francisco
March. 2022 – Sep 2023

Tool

Figma

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

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.

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, 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.

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.

Designing and Prototyping Responsively

For web applications like Sperta, responsive design is essential. While building responsive components is straightforward, mocking them up can be challenging.
To streamline this, I utilized the Figma plugin "Responsive". With minimal setup, I quickly generated responsive UIs, enabling clear presentations to stakeholders and precise handovers.

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.

Takeaway

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.

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 Branding

Copilot - RoboForce

Sperta Rules Engine Platform

HamsaPay

RoboForce Website

Sperta Website

Titan - RoboForce

Sperta Design System

Fliptrip