Creating a Product Design System in Sketch
My journey on creating the first Product Design System at Agorize.
Agorize is a Paris-based startup building a SaaS product to allow big companies to make open-innovation challenges and connect them with millions of innovators around the world.
I initiated and lead the effort — I defined design principles, visual attributes, wrote documentation, designed components, communicated both internally and externally.
Besides working on design systems, I also owned features of both B2C and B2B products from end-to-end of the design process.
I joined Agorize in January 2017 to help them make their products more consistent, deliver new products and build a design team.
A few weeks after I joined the team, another designer got hired, so we also needed to find ways to collaborate and deliver world-class products together.
After working together for some time, I identified several problems.
We had several problems such as:
• inconsistencies across products — we had several products based on different front-end frameworks
• inefficient workflow — designers would often do low-value repetitive tasks
• inefficient collaboration — without any naming conventions, file structure, file versionning or a shared components library, designers struggled to work together
• not enough time for research and prototyping — because of the lack of process we waste time on redesigning components and mockups
• no knowledge sharing across the product/tech team or the company
• bad collaboration with engineering
With those problems in minds, I started crafting a first styleguide while searching for ways to make this more systematic and rigorous. I learned many things about styleguides and design systems, I read books, articles, chatted with the design system community, and finally started the real work — designing the first bricks of the design system.
Define design principles
In order to build a solid design system with strong foundations, I wanted to define our core design principles, the principles we need to always have in mind while designing. I worked with the other product designer, brand designers and the marketing team.
We needed to sync-up with the marketing team and brand designers to make sure we define product design principles that align with the way they talk to customers. Also, some of our principles are similar to our company values, such as "Fun & friendly", "Pedagogic", "Innovative".
Define visual attributes
Visual attributes are:
To define a systematic colors system, I decided to work with HSB values to easily define colors variations.
We defined 9 necessary colors: our brand color (blue-brand), feedback colors (red, green, yellow) and gray scale colors. We then calculate the lighter and darker variations for these colors. Having those variations is really helpful in many ways — for instance, we use the lighter variation 1 for hover state. Agorize platform is also sold as white mark to many companies, so our clients only have to define their brand colors and their entire palette is systematically calculated.
After defining principles, visual attributes, and planning the components design, it was time to start building the components library. Here's how I designed cards molecules:
Designing cards molecules allow us to build many different cards across products that are very modulable and always consistent.
Building this design system — or at least the first bricks — has been very useful for Agorize and the product team.
There is a huge progress on the knowledge sharing — the team can easily refers to the System when doubting, or a new designer can easily understand how to design Agorize products by checking the design library and the documentation.
There is also a significant progress on the productivity and workflow of individuals. Designers now work better, and faster. They have time to focus on research as the design system allow them to prototype faster and collaborate better than before.
On the engineering side, the team killed the KSS Rails app and adopted a component-based development approach by switching to VueJS. There still is a lot of work on the engineering side but the team is on the right track.
The evolution of the industry has helped us a lot as well — Sketch Libraries and other design systems tools like Zeroheight got released while I was working on our design system, the timing was perfect.
Communicating and sharing learnings with the tech community
While working on the design system, I wrote an article to share my learnings with the design & tech community, to get feedback about our work and show how we work at Agorize, and also to connect with other design systems geeks.
It made the Top 20 of the day, counts thousands of views and claps, and got shared by several companies and leaders in the industry, such as Chris Coyier, the founder of Codepen and CSS Tricks.