Project presentation

‍

Project Overview

‍Gorgias, a rapidly growing company, relied on design contractors for asset creation until January 2021. However, the lack of reusability and consistency prompted the need for an internal design system. Facing the challenge of maintaining cohesion with a small design team, we embarked on a transformative journey to create a scalable and unified design language.

‍

Scaling initial designs

The great mapping – Component inventory

We meticulously identified and inventoried every design element, from text styles to buttons and checkboxes. Transitioning to Figma, we rebuilt these components, setting the stage for seamless internal collaboration.

‍

Establishing the foundation

To ensure uniformity, we established foundational text styles and color variations, streamlining their application within basic components and across the entire product. This foundational step was crucial for consistent branding.

‍

Aligning product with brand

Addressing the disparity between the product and marketing website, our design system not only sought scalability but aimed to converge the two entities. Leveraging design tokens and theming, we envisioned a future where the brand and product seamlessly intertwined.

‍

Typography unification

Recognizing the divergence in typography between the website and product, we transitioned from the paid 'Söhne' font to the open-source 'Inter.' This decision not only enhanced consistency but also minimized costs associated with licensing.

‍

Streamlining Development Efforts

Connecting with Code

Design Tokens: Anticipating the impact of color changes on development time, we implemented design tokens from Zero Height, linking Figma directly to production. This eliminated tedious tasks for developers, ensuring efficient updates without compromising on quality.

Enhancing User Experience

‍More Options, That's Great! – Enable Theming

‍By enabling theming within the system, we introduced four embedded themes: Modern (website colors), Light Mode, and Dark Mode. While theming may not be a "killer feature," it addressed sporadic customer concerns, providing them with a more personalized experience.

Our design system journey reflects a commitment to cohesiveness, efficiency, and future scalability. By aligning our design principles with the company's evolving needs, we've not only transformed the internal design process but also laid the foundation for a harmonious and unified brand experience.

‍

Live design system