Let's build an amazing product
Reduce churn and grow your business with UX/UI subscriptions. Not sure where to start? Book a call with us and we’ll help you decide.
Confidential
Tokenised Design System for a SaaS company
Involvement
Prototyping
UX design
UI design
Strategy
Platforms
Web
Year
2023
The Client
The client is a tech company serving large enterprise clients in the finance industry. They offer many different products helping companies understand and predict their customers better.
The Problem
The client has multiple products that are separate from one another and didn’t share the same style. Each product had a different style, there was no consistency, design was not scalable and there were no systems in place to make it so. The client wanted redesigns of all of their products as well as a strong foundation built by us from scratch to support their whole company.
The Solution
We've crafted a flexible, adaptable design system that transcends platforms and can be easily themed. Consisting of thousands of distinct and interconnected elements, this Design System empowers our clients to effortlessly produce prototypes, even without our direct involvement.
By tokenising the whole Design System with Token Studio plugin and syncing it with Github and other dev tools like Storybook, we could make sure the consistency between design and code is there. With the help of design tokens the client’s design system can be themed easily based on which brand the components are for.
For a deeper insight into our approach to design tokens, read our article here. And for a detailed view of the common elements in our design systems, check out this article here.
The foundations - Tokens
In our quest for consistency and seamless design-to-code transition, design tokens play a pivotal role. These are the basic atoms of a design system, representing the values for a design attribute in a semantic and platform-agnostic way. They can include anything from colors, typography, spacing, to animation timings, and more.
They are small, individual pieces of design information used to define and communicate the style properties of a design system. More about design tokens here.
For us, Design Systems and Desing Tokens go hand in hand - when we're creating components, we rely on design tokens to make sure our designs are consistent, and create new tokens once there's a need. The time cost is significant, but the benefits are at least 10 times bigger than the initial investment.
Atoms and molecules
Once we have the foundations, we can start building the framework of our design system - atoms and molecules. Atoms represent the most basic functional units of a user interface. They're the building blocks that, when combined, create molecules. The perfect example of an atom is a Button.
Molecules are components made by grouping atoms together. They form functional sections and are used to build out organisms. The perfect example of a molecule is an alert banner, which includes multiple atoms, such as text field, buttons, icons, etc.
Connecting atoms and molecules into organisms, templates and pages
Now that we have all the main building blocks, we can start building the end components that have the biggest weight - organisms. Organisms are complex UI sections formed by grouping together molecules and/or atoms. They form distinct parts of a page and work together as a part of the whole.
Light, dark and any brand theme
Not only is the client's Design System is consistent with Frontend thanks to Tokens, Github and Storybook, but it's also Multi-brand. Not only is it ready for Light and Dark theme, but it can also be changed to fit any other brand a client has.
Clear documentation and super-easy handoff
We go the extra mile to ensure that the handoff process of our SaaS product designs and design systems is as smooth as possible, and we take it upon ourselves to ensure that our designs are easy to understand and implement. Handoff for us consists of quite a few steps, but some of the main ones are:
Clear and detailed documentation of every component within the Design System
Connection of this Design System with Documentation platforms such as Zeroheight, Storybook, etc
Transformation of Design Tokens into CSS, CS and other files via Style Dictionary for consistent design implementation for development teams. This includes constant synchronisation every time we make a change to a component or style in Figma.
For more information about our handoff process feel free to read our article here.
