Introduction

‍

As our company expanded, the need for a unified design system became critical.
We faced the challenge of managing numerous different landing pages and websites,
which necessitated streamlining our processes to enhance efficiency and consistency.

‍

‍

‍

Impact

‍

85% Reduction in design time for new websites and landing pages
‍
70% Reduction in development time for new emails
‍
20% Reduction in time required by PMs and PMMs to create new briefs

40% Shorter review cycles Allowing more “Creating” time and less tedious
time making the files pixel perfect

Source: Jira, Internal Slides

‍

‍

‍

Reading Break - Using the system

‍

‍

‍

‍

My Role

‍‍

Platforms Used: Figma,

‍

I served as the primary inspector and monitor of the project, taking on multiple roles:

‍‍

1. User Interviews - Conduct one-on-one interviews with users to ask open-ended questions

‍

2. Usability Testing - Observe users as they complete tasks using the product

‍

3. Conducting QA for the team's work, Solving issues as they arose

‍

4. Acting as the central point of information on how to build and implement the design system

‍

‍

‍

‍

‍

‍

Research

‍

‍

‍

Key findings‍

‍‍

Ease of use

‍A design system ensures consistency, speeds up workflows,
and creates a familiar experience for users.

‍

‍

Fast Iterations

‍Fast iterations in a design system enable quick refinement
and implementation, ensuring efficiency and responsiveness to user needs.

‍

‍

Common Language

‍A common language in a design system improves collaboration
and streamlines workflows by aligning teams on design standards.

‍

‍

‍

‍‍

‍

Problem Statement

‍‍

Designers and developers working on 17 different brands face inefficiencies and
errors due to inconsistent design practices. We need to fully implement our
design system to improve speed by 50% and reduce errors by 50% within 6 months.

‍

‍

‍

‍

‍

The Goal

‍‍

Reduction in design time for new websites and landing pages

‍

Reduction in development time for new websites

‍

‍

‍

‍

‍

UI kit example‍

‍

Containing typography, spacings, colors, logos, forms, and special brand related elements

‍

‍

‍

‍

‍

‍

How might we solve the problem?

‍‍

Custom “UI Kit” for each brand (Design Tokens)

‍Creating a “UI Kit” for all the relevant brand related elements (Typography rules,
colors, spacing, gradients and special additions).

‍

‍

“Brand Agnostic” Kit (Design Tokens)

‍Create a kit that would be used in all brands for all “non-branded” attributes
(gray shades, generic spacing etc.).

‍

‍

Web Section Kit

‍Creating a web sections kit containing all of our best preforming
sections across all websites, containing all component versions.

‍

‍

Scalability and Cross Platform Support

‍Each section and component must behave and work on all 5 design breakpoints,
and ensure that variables are used where possible to create easy to use complex components.

‍

‍

‍

‍

‍

‍

‍

Web Sections Examples

‍

‍

‍

‍

‍

Future Features

‍‍

New Sections

‍Create new sections and different interactions for more iterations

‍

‍

Email Marketing System

‍Apply all the insights of this system to create a system for email marketing

‍

‍

“Launch Kit”

‍Build “launch kit” for new brands to ease the work process and provide fast-live
mockups for sales department

‍

‍

‍

‍