top of page

DESIGN SYSTEM    •INTERACTION DESIGN     •SERVICE DESIGN

Building a scalable design system for a startup

INTRODUCTION

​

Startups move fast. Documentation and process often lag behind product growth and that was exactly the challenge at Adarga. When I joined, our tiny design team was working with a basic atomic design library, but in a lot of places it was outdated and disconnected from engineering needs. Research insights were scattered and inconsistent, with no central way to track or reference them.



One of my first responsibilities was to establish a scalable design system that could bring clarity, consistency, and cohesion to a rapidly evolving product

Role

Senior product designer

Timeline

January 2023 -
November 2023

Tools

Figma,FigJam, Confluence,

Untitled.png

MY ROLE

 

As a senior product designer, I led the design system initiative end-to-end. My focus was not only to establish scalable UI standards, but also to introduce a structured approach to documenting research insights and design decisions.
I collaborated with:

  • Engineering leads to align on component architecture and naming conventions

  • Product managers to identify high-impact areas for standardisation

  • Other fellow designers to co-create patterns and guidelines that matched real-world needs

atoms.png

PROBLEM STATEMENT
 

Despite a solid product and strong individual contributions, the lack of systems was creating friction:

  • Designers were solving the same UI problems in multiple ways

  • Engineers were reluctant to reuse components due to unclear documentation

  • Research findings were siloed and often lost after handover

  • New team members faced a steep ramp-up curve without centralised guidance

     

It was clear we needed to mature both our design system and our research operations to support the company’s next phase of growth.

PROCESS
 

1. From Atomic Library to Scalable Design System
Transitioning from a component library to a full design system meant moving beyond just UI tokens and buttons. We created a system of systems—defining not just what things looked like, but how they were used.
Key improvements included:

  • Component clean-up and consolidation in Figma and code

  • Documentation via Zeroheight for usage rules, dos/don’ts, and rationale

  • Versioning and change logs to track updates over time

  • Alignment workshops with engineers to support adoption


2. Establishing Visual & Interaction Standards
To ensure a unified user experience, we defined and documented key design foundations:

  • Iconography: We curated a consistent icon set, defined sizing rules, spacing, and use cases across contexts.

  • Interaction States: We built clear definitions for default, hover, active, focused, disabled, and error states, with guidance on animation, transitions, and accessibility.

  • Accessibility: All components were evaluated to meet at least WCAG AA standards, including contrast, keyboard nav, and focus states.

These guidelines helped both designers and engineers build confidently, knowing that every state was accounted for.

3. Design Patterns and Recipes
To drive efficiency and consistency at scale, we introduced design patterns and recipes:

  • Patterns: Reusable layouts like nav bars, modals, filter panels—each backed by rationale and usage examples

  • Recipes: Step-by-step guides for combining patterns into workflows (e.g. building an insights dashboard, search/filter UX)

 

This allowed us to scale design without starting from scratch every time—and empowered junior designers and new hires to ramp up faster.

Screenshot 2024-07-08 at 14.40.04.png
recipes.png
Navigation & tabs.png
Screenshot 2024-11-07 at 09.05.22.png
Screenshot 2024-11-06 at 13.26.32.png
Screenshot 2024-11-06 at 13.28.39.png
Screenshot 2024-11-06 at 13.25.24.png

IMPACT​

​

This work became a foundational layer for how we designed, built, and scaled at Adarga.
Quantitative outcomes:

  • 40%+ reduction in duplicate UI work across teams

  • Faster handoff and build time for new features

  • Fewer front-end QA issues thanks to better alignment


Qualitative outcomes:

  • Stronger trust and collaboration between design and engineering

  • A shared vocabulary and visual language

  • Higher design confidence across the team
     

Most importantly, the system created space for the team to focus on solving meaningful problems—not reinventing UI patterns.

LEARNINGS

 

Creating a design system isn’t just about documentation—it’s about creating a culture of shared ownership.
Some key takeaways:

  • Start small and prioritise based on product needs—don't aim for perfection upfront

  • Design systems must evolve alongside the product. Treat them as living tools, not finished projects

  • Building trust with engineering is critical. Involve them early and often

  • Centralising research insights helped us build with more confidence and context
     

This initiative helped shape a stronger, more mature product organisation—one capable of delivering consistent, accessible, and scalable experiences as we grew.

OTHER PROJECTS

Untitled.png

Re-imagining the workflow to drive retention
 

supply

Designing a B2B AI-aided tool to support the supply and logistics industry ​

bottom of page