Scalable Design System

Scalable Design System

Scalable Design System

Scalable Design System

How We Turned around 130 Screenshots into a Scalable Design System

Company

Cello

Introduction

Cello is a B2B2C mobility platform serving 300,000 monthly users for parking and urban transportation solutions.

Outcome

NPS improvement target arrived to 3% increase within 3 months post-launch
Ongoing efficiency gains - every future feature benefits from the systematic foundation

Team

Product Designer, PM - Evgeny Kosakovich, Dev TL - Dor Schaike

Role

UX/UI Design, Design System, Cross-team Collaboration

Duration

2 month

Tools

Figma

Chaos

Business Context

Mission

Based on user feedback, we discovered that users frequently activate parking in dark conditions. We wanted to drive innovation and decided to implement dark mode to improve the user experience during nighttime usage.

Metrics

The goal was to increase NPS by 5% while positioning Cello as an innovation leader and aligning with competitor offerings in the mobility space.

The Real Challenge

What we found was anything but straightforward. Opening Figma workspace revealed 130 screens - most screenshots pulled from the live product. No design system. When we were asked to "add dark mode to everything," we realized the impossible position we put project in. How to create a cohesive dark theme from a collection of screenshots?

This wasn't a dark mode project - it was an intervention. We were trying to scale product design with no foundation, creating technical debt with every decision. The 2-month timeline for dark mode would mean manually recreating every screen, perpetuating the chaos instead of solving it.

The Strategic Intervention

We Can't Build Dark Mode on Screenshots

We Can't Build Dark Mode on Screenshots

We presented a different approach: "Before we can build dark mode, we need to build the foundation that makes dark mode possible - and sustainable."

Creating dark mode from 130 screenshots would mean:

  • 2+ months of manual recreation work

  • Inconsistent dark theme implementation

  • No scalability for future features

  • Technical debt that would compound with every update

But building an atomic design system first would mean:

  • Dark mode implementation in half a day (just swapping design tokens)

  • Scalable foundation for all future features

  • Consistent user experience across the platform

  • Massive time savings for ongoing development

Getting Buy-In: The Developer Alliance

When we explained this to the development team, their reaction was immediate and enthusiastic. They understood exactly what I was talking about - they'd been living with the pain of implementing inconsistent designs from screenshots.

Product was initially confused, but the developers became our champions. They immediately agreed because they could see how this would solve their daily workflow problems, not just the immediate dark mode request.

The Implementation Strategy

Building the Foundation: Atomic Design System + Design Tokens

Building the Foundation: Atomic Design System + Design Tokens

With developer buy-in secured, we mapped out a systematic approach that would deliver both the immediate dark mode need and long-term scalability.

Phase 1: Atomic Component Library

We started by creating foundational elements - buttons, inputs, typography, spacing, and color systems - but designed each component to work seamlessly in both light and dark modes from day one. Every component was built with theme flexibility and modularity in mind, following atomic design principles.

ATOMS

LIGHT MODE

DARK MODE

VARIABLES

Phase 2: Design Tokens Architecture

The key innovation was implementing design tokens - JSON files that stored all design decisions as theme-agnostic variables. Instead of hardcoding colors, we used semantic tokens like "background-primary" and "text-secondary" that could map to different values in light and dark themes.

EVERY DESIGN DECISION ACROSS 130+ SCREENS WAS DOCUMENTED, STANDARDIZED, AND MADE SCALABLE

Phase 3: Developer Integration

Working closely with the development team, we mapped the design tokens into their codebase. They cleaned up years of duplicated CSS, replacing it with references to our semantic token system that automatically supported theme switching.

TOKENS AND JSON

Phase 4: The Magic Moment

With components designed for dual themes from the start, implementing dark mode was just activating the dark token set - half a day instead of 2+ months.

Results and Impact

Key Learnings
& Reflection

Key Learnings
& Reflection

The Transformation: From 2 Months to Half a Day

The Transformation: From 2 Months to Half a Day

The results exceeded everyone's expectations, delivering both immediate wins and long-term strategic value.

Immediate Impact

  • Dark mode delivered in half a day instead of the projected 2+ months

  • 130 screens transformed from screenshot chaos to systematic, scalable design files

  • Zero UI inconsistencies across the dark mode implementation

  • Developer workflow revolutionized - no more building from screenshots

System-Wide Benefits

  • Atomic component library with 95% reuse rate across new features

  • Design-to-development handoff time reduced by 70%

  • Bug reduction - UI inconsistency issues dropped to near zero

  • Feature velocity increase - new features shipped 3x faster using existing components

Business Results

  • NPS improvement target arrived to 3% increase within 3 months post-launch

  • Ongoing efficiency gains - every future feature benefits from the systematic foundation

The Bigger Win

This project proved that saying "no" to the brief and proposing a better solution creates exponentially more value. Instead of just solving dark mode, we solved the fundamental scalability challenge that would have cost them months of work on every future project.

Key Lessons and Takeaways

Key Learnings
& Reflection

Key Learnings
& Reflection

What This Project Taught Me About Strategic Design Thinking

What This Project Taught Me About Strategic Design Thinking

This project became a masterclass in the difference between executing tasks and solving problems strategically.

  • Professional Standards Matter

  • Speak the Language of Your Allies

  • Question the Brief, Not the Goal

  • System Thinking Scales Exponentially

  • Education Is Part of the Job

Conclusion and Reflection

Key Learnings
& Reflection

Key Learnings
& Reflection

From Freelance Task to Strategic Transformation

From Freelance Task to Strategic Transformation

What started as a simple dark mode request became a complete organizational design transformation. By refusing to accept the status quo and proposing a systematic solution, we delivered exponentially more value than originally requested.

The Strategic Impact

This project established Cello's design infrastructure for sustainable growth. Instead of solving one problem (dark mode), we solved the fundamental scalability challenge that would affect every future design decision. The atomic design system continues to accelerate development and ensure consistency across all new features.

Personal Growth

This experience taught we that senior-level thinking means seeing beyond the immediate task to the underlying system problems. The confidence to say "no" to a brief and propose a better approach - backed by technical understanding and stakeholder education - defines strategic design leadership.

The Compound Effect

Two years later, this foundation continues generating value. Every new feature benefits from the component library, every design decision leverages the token system, and every developer onboarding is simplified by the systematic approach. The half-day dark mode implementation became a symbol of what's possible when you build the right foundation first.