Building a SaaS Design System

Ownership of the project and brought about company buy-in on a problem that is preventable.

Led the design system initiative for a 20-person company, serving 50+ users across 1 designer and 6 developers. Presented the business case to company owners and product owners, demonstrating how the system would accelerate both design and development workflows while maintaining visual consistency.

👉 Internal Solutions

We are building a backoffice suite that consisted of many products and their teams.

Design, organisation and brand fragmentation would occur without a foundation for all parties to rely on.

A design system holds together the rules that a designer is suggested to use. It helps the teams stay organised and facilitates the reuse of components.

This helps us remain efficient by helping us spend less time designing and developing components that could only be marginally different.

Scale Challenge: As the sole designer supporting 6 developers and 50+ users, it would have been impossible to design every feature detail while maintaining consistency. The design system became essential for enabling rapid development without sacrificing quality.

🦴 The backbone of the Design System for the design team is the component library.

It is where I began putting together the elements needed to form a solid foundation.

The elements include Atoms, Molecules, Organisms, Templates and Pages.

Further reading into Atomic Design by Brad Frost is highly recommended.

Scale & Implementation: Built approximately 5,000 components including nested variations over 2 months, with development accelerating as more reusable tokens and components were created. Used Material UI and Figma as primary tools, with the system still in active use 7 years later after one major code refactor.

🤖 To facilitate speedy front end developer handoffs, and cohesion once the team scales up. We followed a naming convention

theme_platform_type_variant_status

For example: dark_web_button_primary_active or light_mobile_input_text_focused

🪐 Uniform spacing rules allow the interface to always be consistent. I used the 8pt system, which helped keep everything easily divisible so widths and heights would always fall on the 8pt grid. Half pixels be gone!

📚 Beautiful typography that scales and falls on gridlines defines the way a product feels.

When deciding on the type-face I paid particular attention to the end-user personas.

A lot of external resources are already available today, which helped guide me in sizing, line heights and margins.

I used web resources and secondary evidence research as a quick start in helping our small team get off the ground.

Much thanks to:
IBM – Carbon Design System
Apple – Human Interface Guidelines
Google – Material Design

🎨 Brand

Colours taken from the branding, are used as an accent, usually reserved for graphics, it portrays the friendly inviting nature of the company culture.

📈 Charts

Being an information rich SaaS platform we needed colours that could be used to help categorise and provide visual cues to help the user understand related data.

The colours were chosen to keep harmony with the existing colour pallete with a slight leaning towards more saturation to help it stand out from the interface.

🚀 Action

Action colours are signifiers that help the user identify locations of the interface that have interaction significance. A complimentry colour to the brand was chosen to allow the call to actions to stand out.

😐 Neutral

Usually in greyscale, it is a decision based on the principle that content is king. I wanted the content and the call to actions to remain the focus. This pallette helps form the largest part of the interface, as these colours are used to help separate the layout. It was important to get right with naming and organisation to aid easy colour changes when we move on to building a dark mode.

🧻 Surfaces

Much like the Neutral colour set surfaces was seperated out in preparation for allowing the interface to support more surface colours. A surface group would not have been needed but I wanted the flexibility to use more colours if the situation called for it. This decision was made purely for scalability and flexibility.

👋 Response

This colour set provides the response messaging, where the user has direct feedback from their interaction. It is split into Positive, Negative and Informative.

👇 Buttons

👍 Inputs

📀 Tables could be seen as a large part of the component library in a SaaS platform.

It is still the most efficient way to present a large amount of detailed data to users, and is well understood in its handling. From a usability perspective it minimalised the learning curve.

Within HTML there are 2 methods of organising, in rows and columns. This would depend on the data it is presenting and how that data is related to each other.

In the component library I had to account for these situations and build the design in a way to allow templates to be made with fluidity, and without disconnecting from the component library.

🦁 The header and menu form the core of the user navigational system.

A key feature is allowing our users to switch the brands they manage. This helped to keep the menu bar concise and reduce repeated sections.

The brand switch freed space to allow for a future marketing feature to be placed which cross sells other product modules that we believe could be beneficial for our users workflows.

⚡️In order to provide a quick start guide, base templates were made.

These templates facilitates bringing together teams to communicate the aims of their product/feature. It acts as a sticker sheet to immediately start a conversation, in order to gain insight and produce a brief for the design team to begin thinking in already pre made user flows.

📱Mobile Translation.

As a data heavy product a mobile translation is often a challenge. Using user interviews to focus on what information is needed the most would be the ideal path. A grid system was used in development to pre-empt this optimisation phase.

⚙️UI Component Testing

As the teams grow, potential inconsistencies with UI design and the implementation of components also grows. Closing the gap between the team is now vital for continued growth and keeping abreast of efficiencies.

🥡 A design system is never fully completed and will continue to evolve and optimise as the needs of the business and market trends continue to develop and pivot.

The foresight of solid foundations allow for smooth transitions of requirements will save time and effort. It can then be invested into growth of the team and it's skillset.

As the design team grows we allow the team members to concentrate on building better user experiences. This concentration of effort allows our SaaS to be continuously improved maintaining our client base.

The product needs to continuously serve its purpose, build trust and delight in order to succeed.

Long-term Success: The design system has proven its value by remaining in active use for 7+ years, supporting the company's growth while maintaining the original foundations. The initial 2-month investment continues to pay dividends through consistent user experience and accelerated development cycles.

Team Adoption: While initial adoption required education on the importance of visual details for business tools, the system ultimately enabled faster development and better user trust. Developers benefited from repeatable patterns, while users gained a more consistent and reliable interface.