Creating a design system from scratch
MEDIUM – UXDESIGN.CC / TOP 20 OF THE DAY 🔥

Creating a Product Design System in Sketch

My journey on creating the first Product Design System at Agorize.

Company

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.




Role

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.




Context

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.




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


Discovery

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



Design Principles

Design Principles at Agorize

Define visual attributes

Visual attributes are:
• Colors
• Typography
• Icons
• Spacing


Colors

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.
The lead front-end engineer, Adrien Moretti, wrote JavaScript functions to convert HSB values to HSLa for SCSS.



Color palette

Color palette in Sketch

Typography

While defining typography and text styles, we decided to keep the typography we had: Lyszt. This grotesque typeface worked pretty well for us.
We redefined text styles to keep only font-sizes and font-weights that are really necessary.



Text styles

Text styles for Agorize Design System

Icons

We used Material icons to create a SVG-based webfont with Icomoon, as we needed a large set of icons and didn't had the time to do custom iconography at this moment.



Design System documentation/living styleguide

Design System documentation/living styleguide

UI Audit & Design System backlog

When doing the inventory of all our components, I realized how big the project will be. After we decided which components need to be created, redesigned or deleted, I quickly created a spreadsheet to plan tasks and track our progress.



Design System Backlog

A quickly made design system backlog

Design components

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:


Cards molecules

Designing cards molecules allow us to build many different cards across products that are very modulable and always consistent.



Cards overrides

Easily modifying a card with symbols overrides

Impact

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.


Agorize - Design System

Agorize Design System in Sketch

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.



Recommendations

Recommendations from Pierre, Product Designer, and Yohan, Product Manager.

Using the system

Here are some examples of screens I designed with the design system when working on features.



Agorize - Admin & Mentors


Agorize - Translation Center


Agorize - My Messages


Agorize - Challenge builder


Agorize - Challenge builder

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.

Top 20 of the day on Medium

Medium article stats