Scaling SaaS Design
How a Unified System Boosted Consistency and Speed
Context
When I got to Vendoo, design was led by one of the founders. They only had one UX designer following his lead so they thought they didn’t need to have a design system. The UX designer left and once I got there I knew we had to build one because not having one would come back to hunt us sooner or later.
Even though it was scattered on multiple Figma files and there was no logic or order in place, the founder had built 20% of it. I built 80% of the web design system following his initial efforts and 100% of the mobile design system.
If you build it, they will come
Some components were scattered around on different Figma files and and the beginning of a Design System in place. I basically reversed engineered what we had, and built scalable components based on the
“Atomic Design” framework.This allowed us to start from the smallest part possible (atom) and finish all the way up with “Organisms” , “Templates” and “Pages”. This allowed to design in a modular way, reusing and mixing up different atoms, molecules and organisms to build different components for the ever coming features.
Once built, the new design team members got a head start on the way we do design in Vendoo, increasing efficiency when tackling new tasks. Plus, the engineering team now had consistent documentation and also clear design logic and consistency to rely on.
Screenshot of Vendoo's Design System built by me.
Screenshot of Vendoo's Design System built by me.
Screenshot of Vendoo's Design System built by me.
Screenshot of Vendoo's Design System built by me.
Keep it up!
This was hard to build, and I know it’s not perfect, it will never will be, but it’s even harder to maintain and to keep it updated without having someone working on this 100% of the time.
I’m still struggling with this step and it’s and ongoing effort and discussion on how to improve it but for now, every time a designer builds something new, they will communicate it to the design team and add or update the impacted components.
