How soon should you have a design system?

Hello, I’m Michael, Lago’s founding Designer and Product Manager. Before joining Lago, I spent six years in product design at ContentSquare and then Qonto. 

I pushed to build a design system from day one at Lago, and I often get questions about it. Here is the back story!

Most companies start investing in a design system after their Series B. It makes sense: when you’re chasing your product market fit or trying to get a repeatable user acquisition process, the design system is definitely not a priority. 

You need to do things that don’t scale, as Y Combinator has been hammering. 

Well… we did not listen, and built a design system from day 1. Do we regret it? No, it was one of our best decisions so far. Should you do it? No idea, but we decided to share our thought process so that you could make a decision based on your very own context.

‍

First, what is a design system?

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Source: Design Systems 101 - Nielsen Norman Group

‍

This is what our design system looks like

‍

Why we decided to build one, from day one

Having a well-rounded design system won’t help you find product market fit per se. It helps you go much faster into the iterations. Here was our rationale:

• First impressions: when you’re just demonstrating a ‘Figma prototype’ (like we did at out Y Combinator’s interview), a clean design helps showcase the value you bring through the user journey
• Sets a group of standards and rules so that the team can focus on ‘cracking’ user needs
• Helps hire great engineers, and speeds up their onboarding: better than free beer or a ping pong table, we promise!
• Builds a common language between the ‘product design’ team and the ‘front-end engineering’ one.

‍

How to build a design system for the early days

Spend the minimum valuable time on it. You’ll probably have a part-time designer in the early days. Here are our tips:

‍

Don’t reinvent the wheel

Align with the front-end team on a library and base your design from it. We used Material UI, took inspiration from Spectrum design system. It’s all about speed, and knowing how to use components is a time saver.

‍

Don’t over engineer

Most Figma files or templates showcase design systems that are made for a team of 20 designers. If you only have one designer or a part-time one, their way is the best way. Improvements will come later. 

‍

Treat the design system as a feature

Do your homework, research, design your components with all the states and specify it for the implementation. Plan a smooth handover to the engineering team.

‍

Our takeaways, one year in

From the ‘Product Design’ perspective

• When we pivoted, we rebuilt prototypes at the snap of a finger, while keeping a consistent user journey
• We spent less time designing screens and more time on ‘discovery’, which was critical to reach product market fit 
• We had very few QA returns based on UI, and little rework
• We’ve been able to design a complex feature in a single day, it helped reshipping a whole Billing API with its UI in less than three months
• Speed, speed, speed: it really helped reducing the ‘white page’ syndrome
• Non-designers were able to use the design system to create screens too 

From Morgane and Alex, the ‘Front-end Engineering’ side

• The design system helps maintains everything faster: whether it is to fix a behavior or add an option, all we need to do is to change a component
• We spent less time on ‘plain design integration’ and more time on the logics and the quality of the code. It made it easier to bring newcomers to speed: full time employees or short-term contractors for specific projects 
• If we need to rebrand (to pivot), we could change a theme or a color in a centralized way 

The only drawbacks were that it was a bet at the beginning, so we had to take a leap of faith. 

It took us three to four weeks of my time (I’m a Product Designer) and two weeks of a front-end engineer to build this. This can be a considerable investment for an early-stage company. 

If you want to learn more about ‘design systems’, here are some pointers: 

• Blog posts from Adobe Spectrum, Shopify Solaris, the documentation of IBM Carbon Design System
• The French community ‘French Design System’
• I also learned a lot following Louis Ouriach (Design Advocate at Figma), Zander Whitehurst (The CEO of Memorisely, a remote UI/UX bootcamp), and Valentin Chrétien and the Specify team.

‍