Home

Essence Design System

I collaborated closely with engineers to build Essence Design System, which increased sprint velocity by 30%

Role:

Lead Product Designer

Timeline:

2 months

Product:

Design system

Building team synergy with design systems

Reimagining Tecovas' Digital Storefront

Function of Beauty is a direct-to-consumer, subscription-based e-commerce platform for custom haircare. It offers personalized product recommendations and custom formulations based on the user’s hair type, condition, and goals. I created Essence, a new design system for Function of Beauty's website, in order to accomplish the following:

Overhaul the old UI kit

The previous UI kit was incomplete and lacked guidelines, leading designers to deviate from the design system and introduce one-off styles.

Overhaul the old UI kit

The previous UI kit was incomplete and lacked guidelines, leading designers to deviate from the design system and introduce one-off styles.

Overhaul the old UI kit

The previous UI kit was incomplete and lacked guidelines, leading designers to deviate from the design system and introduce one-off styles.

Overhaul the old UI kit

The previous UI kit was incomplete and lacked guidelines, leading designers to deviate from the design system and introduce one-off styles.

Build reusable UI component library

The component library was nonexistent, forcing developers to build new pages from scratch. This resulted in inconsistent and unscalable components, accumulating tech debt and degrading the user experience.

Build reusable UI component library

Reduce design, development, and QA time

The typical QA process involved multiple back-and-forths between engineers and designers to ensure the frontend accurately reflected the designs.

Reduce design, development, and QA time

The typical QA process involved multiple back-and-forths between engineers and designers to ensure the frontend accurately reflected the designs.

Reduce design, development, and QA time

The typical QA process involved multiple back-and-forths between engineers and designers to ensure the frontend accurately reflected the designs.

Reduce design, development, and QA time

The typical QA process involved multiple back-and-forths between engineers and designers to ensure the frontend accurately reflected the designs.

I partnered with the technical product manager and two software engineers to build the design system. To help us, we utilized tools such as Figma (UI Kit, style libraries), MUI (React component library), Storybook (development environment), and Contentful (CMS).

S O L U T I O N 1

Systematic styles and components

I applied atomic design methodology to build systems of buttons, colors, typography, and UI components. By establishing recognizable patterns in the interface, we aid users in building mental models and minimizing the need to relearn new design elements. From the developer's point of view, a scalable, component-based system made it easier to build new pages and A/B test the website. The completed UI kit featured documentation detailing the application of each style and UI component.

S O L U T I O N 2

Time-saving design tools

Reimagining Tecovas' Digital Storefront

Design tools combat complexity, reduce redundant tasks, and promote collaboration. In creating, implementing, and maintaining the design system, I utilized existing tools and created new tools. This included Design Lint, Figma style libraries, and custom-built tools such as spacers and documentation note cards.

S O L U T I O N 3

Strong design-engineering partnerships

Creating a design system takes a whole village. To ensure successful collaboration, it’s crucial to establish a common language, strive for mutual understanding, and put in place processes that foster teamwork.

No source of truth →

Previously, designers could only view updates on staging, and there was no centralized place to review components.

Solution →

I collaborated with engineers to set up our design system in Storybook, enabling us to review updates and test centrally.

Going forward ✷

Storybook will serve as the single source of truth for designers and engineers as we develop the design system.

Lack of collaboration →

Previously, designers and engineers worked in silo causing misalignment within the team.

Solution →

I established a weekly sync between designers and engineers to address each other's blockers.

Going forward ✷

Developers will engage earlier in the design process, and designers will sign-off on frontend QA.

No process for updates →

Previously, designers introduced new colors and fonts Figma without informing engineers, forcing many inline overrides.

Solution →

I compared styles between designs and CSS theme sheet to find discrepancies, then wrote tickets for updating styles.

Going forward ✷

Changes to the design system will require the entire team's approval and detailed documentation during handoff.