Helping an Enterprise B2B unicorn scale and grow to $100m ARR

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

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.

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.

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.