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: