Omni-Channel Telecom
Design System
Overview
A large telecom company's mobile experience wasn't working because it was built by scaling down desktop layouts rather than designing for mobile directly. I led the effort to build a unified design system from the ground up — one set of components, tokens, and rules that could work consistently across web, iOS, and Android, instead of three teams maintaining three separate versions of the same product.
The Challenge
A fragmented ecosystem
01
Fragmented core
Every channel had its own design conventions. Buttons, form fields, and menus all looked and behaved slightly differently depending on which platform you were on, which made the product feel like three different companies built it.
02
Maintenance tax
With no shared library, developers were rebuilding the same components separately for each platform — the same button, three times, three ways to break.
03
Ergonomic failure
Layouts built for a mouse and a large screen don't hold up on a phone. Tap targets were too small, and interactions that made sense with a cursor didn't translate to a thumb.
The System
Structure, not just style
Multi-Tier Variables
I built the token system in tiers, so core brand styling (color, spacing, type) is shared across every platform, while each platform can still override specific values where mobile genuinely needs something different from desktop.
Semantic Naming
Components are named by function, not appearance — action-primary-surface instead of Red or a hex code. That way a designer and a developer looking at the same component both know what it does without needing to ask.
Design-to-code engineering handoff
What changed? Handoff used to mean handing developers static screenshots and letting them guess at exact spacing and sizing. I moved the process to shared, live token definitions instead — so a value like 16px of padding or a 44px button height is pulled directly from the system, not eyeballed from an image.
What was solved? This closes off the most common place inconsistencies creep in on enterprise projects: the gap between what a designer drew and what a developer built. A change made in the master library propagates automatically wherever it's used, instead of needing to be manually updated across three codebases.
Accessibility, built in rather than checked for. Contrast ratios and touch-target sizing are defined in the tokens themselves, so meeting WCAG standards is a property of using the system correctly — not a separate audit step at the end.
The Takeaway
Where this stands
This system has been reviewed and approved at the executive level as the direction for the company's digital experience going forward — which, for a project this size, is a real milestone in itself; most design systems don't get that far before stalling out on buy-in.
Implementation is still in progress. One project has been built against the system, though it hasn't shipped yet, so I can't point to production numbers like adoption or dev-time saved. What I can point to is the comparison below — a real before/after of what changes when a legacy screen gets rebuilt on the new system.
© Teodoro Studio 2026
Design systems · Product UX · Enterprise tools