From Legacy Debt
to Unified Systems
In 2021, I joined a design environment where product releases were managed via static PowerPoint decks. My first priority was replacing this manual process with a professional Figma infrastructure — which I achieved within the first year.
As the Mobile business scaled, the challenge shifted from simply "having a library" to building a sophisticated, multi-variant ecosystem capable of handling increasingly complex buyflows and self-care journeys.
By late 2025, the goal evolved again: transitioning static components into a fully responsive, variable-driven system for 1:1 parity with our AEM implementation. Simultaneously, my scope expanded to lead Fixed Business design strategy — guiding that team in establishing their own foundational library while building a unified, dev-ready handoff process across both business units.
Four Problems.
Four Solutions.
Transitioning a legacy enterprise from fragmented design "decks" to a unified Figma ecosystem required navigating deep technical debt and cultural resistance — simultaneously.
When I started, there were virtually no existing Figma designs for the live site. Creating a working foundation meant manually replicating live site designs to establish a baseline from scratch.
I treated the replication as an audit opportunity. While rebuilding, I identified inconsistencies and used high-level training sessions to establish Figma as the "Single Source of Truth" — encouraging cross-functional collaboration through interactive commenting and live reviews.
In Phase 2, the library and page designs lived in a single file. As component count grew, the file became unstable for fast-turnover monthly releases. Designer performance suffered, and version control was unreliable.
I established a new Quarterly Release Model — decoupling the Parent Component Library into its own dedicated file and presenting the new implementation method to Marketing and Product, ensuring they understood how to leverage separate design and delivery files.
During peak release seasons — iPhone and Samsung launches — the library lacked multi-edit functionality. Updating duplicate content across dozens of pages became a bottleneck that drained designer resources at the worst possible moment.
I transitioned the library to a Variable-Driven and Nested Component Architecture. By implementing a multi-stage nesting approach, I enabled "Single-Source" editing — where a content update in one module propagates across all sprint pages — significantly reducing manual labor and human error during high-stakes launches.
While a style guide existed, the lack of formal documentation led to interpretation errors during handoffs. Developers were making judgment calls that should have been resolved in design.
I leveraged Figma Variables to hard-code style standards into the components themselves. This "Design as Code" approach ensured that brand standards were baked into the system, paving the way for alignment with Fixed Business design tokens and eventual AEM integration.
Core-to-Local:
A Two-Tiered Strategy
To balance brand consistency with the fast-paced demands of monthly site releases, I developed a "Core-to-Local" library strategy. This prevented the main library from becoming bloated while giving designers the flexibility needed for rapid iteration.
Centralizes all core UI elements. Every designer starts from the same high-quality, brand-verified foundation. This file is the single source of truth for the organization.
Designers build nested components inside specific quarterly release files. Market-specific promos or legal claims stay organized without cluttering the global system.
The system is built to be reusable. If a promo is repeated, designers update the parent component once — and it reflects across the entire release cycle, eliminating redundant manual work.
Variable-Driven.
AEM-Ready.
In late 2025, I evolved the library from static components to a fully responsive, tokenized system. This was the final step in ensuring our design intent translated perfectly to the development environment.
Standardized module variants and breakpoints to automate layout shifts across all Optimum Mobile properties — Desktop Large, Medium, Small, Tablet, and Mobile.
Implemented Figma Variables to handle spacing, color, padding, and breakpoints — variables attached to styles within the file, creating a true "Design as Code" foundation.
Leveraged Figma's Multi-Edit capabilities. Updating one "Parent" instance in a release file swaps promo offers across an entire month's worth of screens instantly.
Redefined handoff protocols away from static specs to achieve 1:1 parity with engineering, drastically reducing the "design QA" phase of the development lifecycle.
Scaling the
Blueprint.
The success of the Mobile library created a mandate. In late 2025, I took on the Fixed Business stream — tasked with bringing the same operational excellence to a second, separate business unit.
Mentorship: I guided the Fixed Business designer in establishing their foundational library, ensuring they adopted the same responsive and variable-backed logic I established for Mobile.
Team Governance: I now lead a team of three designers, serving as the final design authority — ensuring cross-platform consistency across both Mobile and Fixed while managing an external vendor relationship.
By mapping our Figma variables to the AEM technical roadmap, I've synchronized current design output with our future platform. Every component built today is a "plug-and-play" asset for tomorrow — virtually eliminating the friction of the upcoming migration.
Design to
Production.
The Optimum Devices gridwall redesign is one example of how this system operates end-to-end: designed in Figma using the variable-backed component library, handed off with exact specs, and shipped with high fidelity to the live site.
From Solo Mission
to Design Operation.
What started as a solo effort to fix a broken handoff process has evolved into a high-velocity design operation supporting two business units.
from scratch
with AEM
Mobile + Fixed
unified under one system
Between 2022 and 2024, I expanded the Mobile library to include complex, multi-variant components supporting the end-to-end user journey. Most recently, Figma Variables and fully responsive breakpoints have drastically reduced the manual "redlining" previously required for developer handoff.
As Lead for Fixed Business, I used the Mobile blueprint to guide the Fixed team in building their own library from scratch. Today, every component across both Mobile and Fixed is fully responsive and variable-backed — turning the design system into a true product that enables the team to ship faster and with significantly higher technical accuracy.