Duration

1 month (2024)

Tools

Figma (Design, Figjam), Storybook, Notion, ClickUp, Paper

The challenge

Inconsistent components and patterns across multiple products were causing inefficiencies for designers and developers. We needed a scalable system to bring cohesion to our growing suite of apps.

Context

While we were already using Flowbite as our component library, the lack of a proper design system led to inconsistencies across our growing suite of apps. My role was to audit the existing components, prioritise updates, and create a scalable system for both design and development.

The solution

I conducted a comprehensive audit of existing components used across 6 applications, developed a scoring system to prioritise over 100 components based on impact, and collaborated with designers and developers to align on solutions.

Feedback

… “Through her meticulous approach, she uncovered a range of inconsistencies that had crept into our applications over time. Shantini's design system wasn’t merely a style guide; it became a foundational tool that brought clarity and cohesiveness across a suite of apps. Her work enabled our team to create a more unified experience, which greatly enhanced user satisfaction and streamlined our internal processes for future development.”

— Christopher, Head of Product from Tribe

In this case study

Goal

Structure

Scope

Template

Foundation

Components

Goal

This was my final project before transitioning, so the design system was still in its early stages.

My goal was threefold:

1. Audit existing components to identify inconsistencies and gap

2. Defining how we wanted to showcase components and specs for future scalability

3. Creating a prioritisation framework to guide the team in refining and standardizing components

<aside> <img src="/icons/thought-alert_pink.svg" alt="/icons/thought-alert_pink.svg" width="40px" />

Why this matters Without clear priorities, teams build reactively, fixing what's loudest rather than what's most impactful. A scoring system ensures strategic decisions based on usage, complexity, and business value.

</aside>

Structure

Design system

• Cover
• Roadmap
• Checklists
• Inventory
• Foundation
• Components
  • Basic
  • Complex

Stats at a glance

• 5 products
• 8 explored experiences
• 7 foundational elements
• 100+ components/patterns

I came up with a tailored structure and pitched it to the product team at the start of the design system work. This structure was intentionally modular so teams could reference what they needed without wading through irrelevant documentation.