Omni-Channel Telecom
Design System
A large telecom company needed to simplify its disparate digital experiences. Their mobile experience wasn’t working because it was based on desktop designs scaled down to fit smaller screens. I led an effort to build a unified design system from the ground up, making the user experience consistent across every channel and helping the development team work much faster.
01
Fragmented Core
Every channel was using its own disconnected design guidelines. Visible inconsistencies in components, buttons, form fields, and menus made the product feel disjointed.
02
Maintenance Tax
Without a single library, developers rebuilt the same components separately for each platform—creating a significant waste of time and resources.
03
Ergonomic Failure
Designs that worked on desktop were uncomfortable on a phone. Targets were too small and the interaction logic didn’t transfer, making the experience less accessible.
The outcome
Navigating enterprise bureaucracy
Multi-Tier Variables
I created an organized Figma system where design properties—like colors and sizes—could be reused globally. This shares core brand styling across all platforms while still allowing special tweaks for mobile devices.
Semantic Naming
I introduced an intuitive naming method to keep teams aligned. For example, instead of naming a color just 'Red,' we name it by its function, like 'action-primary-surface,' so designers and developers instantly understand its purpose
Design-to-code engineering handoff
When designing for an enterprise, the handoff to development is usually where inconsistencies begin. To prevent this, I shifted our process from just handing off static pictures to providing live, shared technical definitions. This ensures important details—like 16px of padding or 44px for a button height—are always called correctly, never hard-coded guesses. This approach stops errors before they happen and guarantees that any visual update made in the master library automatically applies across all platforms instantly and accurately.
By including clear spacing and component behaviour definitions alongside our code snippets, I significantly reduced the guesswork and communication back-and-forth for the engineering team. This unified documentation serves as a shared contract that lets teams build complicated layouts confidently on their own, needing less manual design review.
Ultimately, building this system was a necessary business decision. We automated accessibility standards (like high-contrast colours and easy touch-targets) directly into the code. This moves accessibility checks from a manual task to a guarantee. This rigorous approach not only sped up our product launch cycles, but also secured the stability of the entire digital experience across web, iOS, and Android.
© Teodoro Studio 2026
Design systems · Product UX · Enterprise tools