Gorgias Design System

Designed for

Gorgias – All-in-one helpdesk & live chat, designed for e-commerce stores.

Project Info

Gorgias is a growing company that used to – until January 2021 – work with design contractors in order to produce all the assets necessary. While it's handy and fast to get them, they weren't built with reusability in mind nor that a team would have to share these components in multiple instances.

Back at this time the team consisted of two newly hired designers that would have to keep projects moving forward while keeping everything consistent. The solution seemed obvious to us: we had to create a design system.

Done in collaboration with Antonio Lapa.

Scaling initial designs

The great mapping – Component inventory

The first step of the process was identifying and making an inventory all the pieces of the puzzle: every text style, colour variation, button, input, checkbox (...)

With that in place we started rebuilding them in Figma to make it easier for our internal use inside the design team.

The foundation – colours & text styles

Before anything else we have to establish our foundation, standard text styles that we can reuse both inside basic components and throughout the product itself. Also the colours, we mapped them and started trying to trim down the amount of redundant appearances.

One product, one brand

One important fact is that by the time we joined, the inner part of the product and the marketing website were two completely different things and to this point they still are. The design system project doesn't just aim to make everything scalable but also to converge product and brand further in the future by leveraging design tokens and theming.

Typography change from Söhne to Inter

To begin with, the typography on both the marketing website and in the product were different. The website used a paid font called 'Söhne' and the product used the beloved 'Inter', which is open source and updated frequently.

By running a side-by-side comparison we saw the the look and feel didn't change that much and that it was better to strive for consistency instead of doubling down on a paid font and having to upgrade our license, essentially paying a much higher cost for little added value. As you can imagine the decision was clear and taken: we moved from Söhne to Inter in the website in order to match the product font.

Building and rebuilding

Our Lego blocks – Building basic components

I can't stress enough how important it is to have a consistent component library, at least for basic components such as:

Buttons
Input fields
Radio buttons & check boxes
Drop-downs
Lists
Notifications & banners
Tooltips
Tags & badges

With that in mind, we took the approach of dividing and conquering by refactoring existing designs one by one in order that they showed necessary based on project priority.

Using less dev power – Connecting with code

As soon as we started making changes to colours, it became clear that this would take a toll in development time when we decide to align brands, for example.

Connecting Figma to production – Design tokens

With that in mid, we took a step back and implemented the design tokens feature from Zero Height in order to connect Figma directly to production and never needing to create small boring tasks for developers to update a hex code from #9AC8FF to #4A8DF9.