Design System Library

Essentia Design System

Helping Orin scale their clientele to 2x in just a period of 2 months

Platform: Essentia Design System,

Industry: B2B Agency

Dated: June 2024

My Role: Design System, UI Design

Timeline: 3 Weeks

Creating a design system for a rapidly scaling design agency.

The founding idea of Orin Design Agency was to cater to startups and businesses looking for product design services for their businesses. The main challenge was to create a design system so that Orin can rapidly design experiences that resonate cohesion, quality and usability across all platforms. A design system will help the agency develop a long term style for their projects and also ensure there are minimum inconsistencies to their design.

There is also a case of reducing training and cross functional load across teams that work in collaboration to design, develop and execute their design decisions.

Project Summary

Objective

The primary objective was to create a design system library to help Orin scale their client base. The problem statement really was, "How can I help a design agency increase their output while maintaining the quality and cohesion in their finished designs?"

Impact

With the help their very first design system, Orin was able to expand their client base to over 6 monthly retainers with faster shipping of designs and with that they developed a unified design language across all their products.

Deliverables

Design System Library with over 30 variable components and a full defined token library.

How did the atomic design principles help?

The foundations helped us curate the base elements such as the typography, the colors, icons, effects and elevations that will be used in combination to produce components. These components consist of buttons, button groups, modals, calendars and all the components that in combination make the larger components. And henceforth the templated sections.

So it all represents the basic model of an atom, that starts from the very base and the combination of different elements that create, literally everything.

WCAG 2.2

The design system was designed to have a WCAG 2.2 compliant accessibility. The colors used in all the elements have a contrast ratio of over 6. It was essential to make sure the agency designs meet the accessibility criteria throughout all the devices.

How did I name the tokens?

The design library was structured to be a vast set of design components so it was necessary to prioritize the ease of use for the multiple teams across it. The dev teams needed to have a clear understanding of what goes where and hence it was necessary to tokenize everything.

Primitive color set was the base set of different colors that included brand, alert and colors.
The semantic library was a little more detailed in terms of tokens. It had to have a little precise tokenization to help the teams understand the usability of each color.

Putting it all together

Using the components I put together the remaining components for the design system, These components consist of accordions, modals, menus, profile sections, profile sections and other commonly used SaaS components.

Result

Unified Design System: Developed a design system that ensured consistency in visuals and interactions across platforms, while also allowing for branding variations.

Feature-First Approach: Prioritized user-centric features, ensuring the essence of Orin was palpable in every interaction within the app.

Increased Design and Development speed