A Real-World Design System Case Study for Product Teams

Apr 13, 2025

an image with two notes representing design system case study befor and after

Design systems usually start with a Figma file and some good intentions.
Then reality hits: shifting requirements, inconsistent naming, scattered documentation, and a design team moving too fast to slow down.

We’ve been there. This design system case study isn’t a perfect story — it’s a real one.
It’s about where things broke, how we fixed them, and what we learned in the process.


🔍 The Problem We Were Facing

Before the system, we had:

  • 3 versions of the same button

  • Conflicting type scales across products

  • Color tokens that changed every sprint

  • A dev team that often rebuilt what already existed

Everyone was working hard — but not together.
The lack of a shared foundation was slowing us down more than we realized.


🧩 How We Started

We didn’t begin with components.
We started with questions:

  • What are the most reused UI patterns across our products?

  • What slows our team down most?

  • What would make this system actually usable?

We took cues from Material Design for structure and from Polaris for documentation tone — but we knew we wanted something lighter, faster, and more personal.


🪞 The Principles We Used

From day one, the system followed 3 principles:

  1. Modularity over rigidity — Every component should adapt

  2. Clarity over completeness — It’s better to be usable than encyclopedic

  3. Systems should feel invisible — They should get out of your way

We documented everything inside the Sigma Design System, focusing on speed and approachability — not just consistency.


🔧 What We Built (and Didn’t)

We focused first on:

  • Spacing tokens

  • Type scales

  • Colors with roles and states

  • Primitives like Button, Input, and Tag

  • A clean naming convention

We held off on:

  • Complex components (modals, tables)

  • Dark mode

  • Responsive utilities (until needed)

The goal was not to build a perfect system.
The goal was to build a usable one.


📈 Results (and Real Impact)

After three months:

  • Design–dev handoff was 10x faster

  • The dev team stopped rebuilding UI from scratch

  • Designers could spend more time on flows, less time on spacing

  • New hires ramped faster — they knew how we design just by exploring the system

It wasn’t magic. It was just clarity.
We weren’t designing from scratch anymore. We were designing from a shared language.


💬 What We’d Do Differently

  • Start documentation sooner — not just for devs, but for ourselves

  • Push for version control — even a lightweight one

  • Include accessibility specs early — fixing retroactively is harder

  • Prioritize internal feedback over external inspiration

Also: next time, we’d bring behavioral patterns in earlier, like the ones outlined in User Psychology 3. That’s where structure meets user experience.


✍️ Final Thought

If you’re reading this wondering whether to start a design system — the answer isn’t always yes.

But if your team asks the same questions every week…
If your UI reviews sound like déjà vu…
If devs are rebuilding buttons again and again…

Then maybe it’s time.

And when you do it — start with what your team needs, not what the industry says it should look like.
That’s the kind of system that lasts.

2025 Sigma. All rights reserved. Created with hope, love and fury by Ameer Omidvar.