From MVP Chaos to Scalable Excellence: Elevating UX for FORCE Platform

When I joined the FORCE team in late 2025, the tool had just launched and was already delivering real value at Charter. The team was growing fast. Our single scrum team swelled from 15 to 40 people almost overnight, then split into three separate scrum teams. As the only designer supporting all three, the scope was massive. But two weeks after I started, layoffs struck. The other Senior UX Designer and our Junior Designer were let go, leaving me as the sole designer. I quickly hired a new Junior to help share the load, only for him to leave the company after three weeks. Through the instability, and rapid expansion I kept momentum alive and helped FORCE evolve from a promising but rough MVP into one of Charter’s most essential and heavily used internal platforms which is powering the company’s next phase of network modernization.

COMPANY

Spectrum (Charter Communications)

Industry

Telecom & Mass Media

Project name

FORCE (Framework for Orchestration, Resource Control, and Efficiency)

Timeframe

SEPT 2025 - MAR 2026

Stack

Figma

Figma

Jira

Jira

52k+ RPDs

Devices activated through FORCE in its first year in production.

$2M/month

Saved by consolidating Harmonic tools into a single FORCE platform.

100+ Features

New capabilities delivered in twelve months.

Results Overview

One Year In: Scale, Speed, and Trust at Enterprise Level

FORCE launched into production one year ago as a brand new internal application built to modernize how the network team onboards and activates devices. Since then, it has become critical infrastructure, consolidating a patchwork of legacy tools, automating manual work at scale, and earning strong trust from the engineers and field teams who depend on it every day.

Results Overview

One Year In: Scale, Speed, and Trust at Enterprise Level

FORCE launched into production one year ago as a brand new internal application built to modernize how the network team onboards and activates devices. Since then, it has become critical infrastructure, consolidating a patchwork of legacy tools, automating manual work at scale, and earning strong trust from the engineers and field teams who depend on it every day.

100+ Features

New capabilities delivered in twelve months.

$2M/month

Saved by consolidating Harmonic tools into a single FORCE platform.

52k+ RPDs

Devices activated through FORCE in its first year in production.

The Company

Background

The company
What is Spectrum?

Spectrum is the consumer brand of Charter Communications, one of the largest telecommunications and mass media companies in the United States.

The company
What is Spectrum?

Spectrum is the consumer brand of Charter Communications, one of the largest telecommunications and mass media companies in the United States.

The Company

Background

Problem

Solution

Role & Team

Summary

Problem
Underdeveloped Design System and Problematic UI Patterns

The previous designer delivered a functional MVP that enabled FORCE’s core workflows and demonstrated immediate business value. However, the design system, core UI patterns, and file hygiene posed problems for cross-team collaboration and scalability. While addressing these issues was essential, the constant pressure of new feature requests made a scalable and efficient design foundation even more urgent.

Problem

Solution

Role & Team

Summary

Problem
Underdeveloped Design System and Problematic UI Patterns

The previous designer delivered a functional MVP that enabled FORCE’s core workflows and demonstrated immediate business value. However, the design system, core UI patterns, and file hygiene posed problems for cross-team collaboration and scalability. While addressing these issues was essential, the constant pressure of new feature requests made a scalable and efficient design foundation even more urgent.

Discovery
Understanding the App

In my first weeks on the FORCE team, I held in-depth sessions with engineers, product managers, and business analysts to deeply understand the application and its domain.

Architecture

RPDs

Architecture
Evolution of the Network Architecture

Legacy architecture relied on radio towers broadcasting signals over coaxial cable to homes. In the new Distributed Access Architecture (DAA), fiber-optic cable carries high-capacity signals to neighborhood hubs for conversion closer to the customer. The FORCE platform drives the ongoing move from traditional cable delivery to modern hybrid fiber-coaxial (HFC) networks. The image below illustrates this evolution.

Architecture

RPDs

Architecture
Evolution of the Network Architecture

Legacy architecture relied on radio towers broadcasting signals over coaxial cable to homes. In the new Distributed Access Architecture (DAA), fiber-optic cable carries high-capacity signals to neighborhood hubs for conversion closer to the customer. The FORCE platform drives the ongoing move from traditional cable delivery to modern hybrid fiber-coaxial (HFC) networks. The image below illustrates this evolution.

Architecture

RPDs

Architecture
Evolution of the Network Architecture

Legacy architecture relied on radio towers broadcasting signals over coaxial cable to homes. In the new Distributed Access Architecture (DAA), fiber-optic cable carries high-capacity signals to neighborhood hubs for conversion closer to the customer. The FORCE platform drives the ongoing move from traditional cable delivery to modern hybrid fiber-coaxial (HFC) networks. The image below illustrates this evolution.

Critical Conversion Point
FORCE: Automating RPD Lifecycle at Massive Scale

FORCE’s primary mission is to automate RPD activation, onboarding, configuration, and lifecycle management at massive scale.

The Problem with Activating RPDs

Before FORCE, activation was slow and costly. On-site technicians called Regional Operations Centers to reach agents who manually guided troubleshooting, configuration, and system updates. Long holds, repeated explanations, and agent-led steps caused major delays, bringing about significant labor costs each night. FORCE eliminates these problems by automating key onboarding and activation steps, letting technicians to scan, configure, and activate devices via mobile or web with minimal back and forth. This saves time, decreases errors, and significantly lowers costs.

User Research
Discovering Who Really Uses FORCE

To design FORCE effectively, I met with team leads, requested direct user contacts, and conducted video interviews with stakeholders and end users. This research distilled two primary personas that shaped every major decision in the redesign and new features. For example, because some users work overnight, we implemented a dark mode feature to reduce eye strain.

User Personas
ROC Users & Admin (Outside Plant – OSP)

ROC (Regional Operations Center) users and admins focus on monitoring and maintaining HFC network health downstream of the RPD. They have moderate technical expertise compared to AEO users. When issues arise beyond basic monitoring, they escalate by calling AEO for assistance. • Primary Responsibilities: Monitor and maintain HFC network health, with emphasis on real-time status checks, alert triage, and coordination of field activities.

ROC Users & Admin

AEO Admin / Network Engineering

User Personas
ROC Users & Admin (Outside Plant – OSP)

ROC (Regional Operations Center) users and admins focus on monitoring and maintaining HFC network health downstream of the RPD. They have moderate technical expertise compared to AEO users. When issues arise beyond basic monitoring, they escalate by calling AEO for assistance. • Primary Responsibilities: Monitor and maintain HFC network health, with emphasis on real-time status checks, alert triage, and coordination of field activities.

ROC Users & Admin

AEO Admin / Network Engineering

User Personas
ROC Users & Admin (Outside Plant – OSP)

ROC (Regional Operations Center) users and admins focus on monitoring and maintaining HFC network health downstream of the RPD. They have moderate technical expertise compared to AEO users. When issues arise beyond basic monitoring, they escalate by calling AEO for assistance. • Primary Responsibilities: Monitor and maintain HFC network health, with emphasis on real-time status checks, alert triage, and coordination of field activities.

ROC Users/Admin

AEO Admin/Network Eng.

UX Audit
Uncovering the Hidden Debt: Why the MVP Foundation Was Cracking Under Growth

The design system lacked structure and scalability. Colors were disconnected local styles with manual light and dark variants. There was no true component library as a single source of truth. Auto layout was rarely used, resulting in brittle, non-responsive layouts with no support for split-screen or ultra-wide views.

Design System Rebuild
Building a Scalable Design System: From Ad-Hoc Chaos to Single Source of Truth

I prioritized rebuilding a maintainable design system from the ground up. I started with color as the foundation, then extended the system to typography, spacing, and custom components to support FORCE’s growing complexity and 24/7 usage.

Colors

Type

Carbon

Custom Components

Establishing a Centralized Color System

I created a structured, three-layer color system to replace ad-hoc styles: • Primitive tokens for raw color values (base hues, tints, shades). • Semantic tokens that give meaning to primitives (primary, success, error, background). • Component-level styles that apply semantics to UI elements (button-primary, card-background). I set up Light and Dark mode directly in Figma's Variables panel. The system became the single source of truth: any token change automatically refreshed related components, removing manual fixes and preventing inconsistencies.

Design System Rebuild
Building a Scalable Design System: From Ad-Hoc Chaos to Single Source of Truth

I prioritized rebuilding a maintainable design system from the ground up. I started with color as the foundation, then extended the system to typography, spacing, and custom components to support FORCE’s growing complexity and 24/7 usage.

Establishing a Centralized Color System

I created a structured, three-layer color system to replace ad-hoc styles: • Primitive tokens for raw color values (base hues, tints, shades). • Semantic tokens that give meaning to primitives (primary, success, error, background). • Component-level styles that apply semantics to UI elements (button-primary, card-background). I set up Light and Dark mode directly in Figma's Variables panel. The system became the single source of truth: any token change automatically refreshed related components, removing manual fixes and preventing inconsistencies.

Colors

Type

Carbon

Custom Components

Developer Handoff
Documenting the System: A Reference Built for Engineers

To make the design system easy to adopt and implement correctly, I created a detailed style guide documenting the specifications and interaction patterns for FORCE's core components. Covering buttons, input fields, and other frequently used elements, the guide defines exact sizing, shape, states, and usage rules, for example, when to use a primary versus tertiary button, or how destructive actions should be visually distinguished from standard ones. This gave engineers a clear, unambiguous reference for implementation, reducing back-and-forth and ensuring the system was applied consistently across the growing FORCE codebase.

Design System Rebuild
Building a Scalable Design System: From Ad-Hoc Chaos to Single Source of Truth

I prioritized rebuilding a maintainable design system from the ground up. I started with color as the foundation, then extended the system to typography, spacing, and custom components to support FORCE’s growing complexity and 24/7 usage.

Establishing a Centralized Color System

I created a structured, three-layer color system to replace ad-hoc styles: • Primitive tokens for raw color values (base hues, tints, shades). • Semantic tokens that give meaning to primitives (primary, success, error, background). • Component-level styles that apply semantics to UI elements (button-primary, card-background). I set up Light and Dark mode directly in Figma's Variables panel. The system became the single source of truth: any token change automatically refreshed related components, removing manual fixes and preventing inconsistencies.

Colors

Type

Carbon

Custom Components

File Management and Team Scalability

After layoffs left me as the only designer on the team, I took full ownership of reorganizing the Figma project to boost efficiency and make it sustainable long-term. I restructured the tabs in Final Wireframes to match the FORCE web app's navigation exactly, so every page became instantly findable. To fix performance and reduce bloat, I split content into dedicated files: • Archives: old versions and legacy designs • Prototypes and Screen Variants • Team Resources: central hub linking to assets and information These changes cut file size dramatically, sped up workflows, and created a clean, scalable structure that supports onboarding new designers with zero friction.

Tech Debt Cleanup
Tackling Lingering UI Debt: Quick Wins for Better Usability

Once the design system was rebuilt and wireframes refactored, I used available time between new feature requests to tackle lingering technical debt in core UI patterns. I compiled a prioritized list of high-impact components to improve.

Tables

Tabs

Notifications

Modals

Buttons

Navigation

Tables: Restoring Visual Hierarchy with Neutral Headers

In the original design, data table headings and subheadings used a vibrant green that matched the primary button color too closely. This created visual competition and distracted users from key CTAs. I redesigned the table headers and sub-headers with neutral gray shades to clearly separate structural elements from interactive ones, while keeping strong typographic contrast and scan-ability.

Tech Debt Cleanup
Tackling Lingering UI Debt: Quick Wins for Better Usability

Once the design system was rebuilt and wireframes refactored, I used available time between new feature requests to tackle lingering technical debt in core UI patterns. I compiled a prioritized list of high-impact components to improve.

Tables

Tabs

Notif.

Modals

Buttons

Nav

Tables: Restoring Visual Hierarchy with Neutral Headers

In the original design, data table headings and subheadings used a vibrant green that matched the primary button color too closely. This created visual competition and distracted users from key CTAs. I redesigned the table headers and sub-headers with neutral gray shades to clearly separate structural elements from interactive ones, while keeping strong typographic contrast and scan-ability.

Button Logic
From Visual Hierarchy to Full State Coverage: Mapping Every Job Action

Fixing button hierarchy solved visual competition, but a deeper ambiguity remained: which buttons belonged on a job, and in what state, given its type and status. Each job type had its own rules for which actions applied and when, and those rules changed as a job moved through different statuses. Without a clear reference, engineering and QA were left guessing at the correct behavior for each case. I built a single diagram mapping every job type against every status, with each button color-coded by style and state: primary, secondary, disabled, or absent. It became the source of truth for implementation and validation, replacing scattered assumptions with one page the team could point to.

Button Logic
From Visual Hierarchy to Full State Coverage: Mapping Every Job Action

Fixing button hierarchy solved visual competition, but a deeper ambiguity remained: which buttons belonged on a job, and in what state, given its type and status. Each job type had its own rules for which actions applied and when, and those rules changed as a job moved through different statuses. Without a clear reference, engineering and QA were left guessing at the correct behavior for each case. I built a single diagram mapping every job type against every status, with each button color-coded by style and state: primary, secondary, disabled, or absent. It became the source of truth for implementation and validation, replacing scattered assumptions with one page the team could point to.

Tech Debt Cleanup
Tackling Lingering UI Debt: Quick Wins for Better Usability

Once the design system was rebuilt and wireframes refactored, I used available time between new feature requests to tackle lingering technical debt in core UI patterns. I compiled a prioritized list of high-impact components to improve.

Tables

Tabs

Notif.

Modals

Buttons

Nav

Tables: Restoring Visual Hierarchy with Neutral Headers

In the original design, data table headings and subheadings used a vibrant green that matched the primary button color too closely. This created visual competition and distracted users from key CTAs. I redesigned the table headers and sub-headers with neutral gray shades to clearly separate structural elements from interactive ones, while keeping strong typographic contrast and scan-ability.

Onboarding

Devices

Metric Tiles and Filter Redundancy

In the Legacy design, large metric tiles doubled as filters, duplicating functionality already in the column headers, while a leftover row of redundant dropdown filters lingered from an earlier technical constraint. After securing approval to add native selectable dropdowns to the column headers, I removed the redundant filter row entirely, consolidating filtering into the table itself and reducing visual clutter.

Onboarding

The Onboarding page originally used the metric tiles pattern to show "All" onboarding jobs along with status breakdowns: Completed, In Progress, Failed, and Not Started. With selectable dropdowns now enabled in the table headers, the new design replaces the tiles with compact selectable tags below the table heading. These tags provide the same filtering options (All, Completed, In Progress, Failed, Not Started).

Metric Tiles and Filter Redundancy

In the Legacy design, large metric tiles doubled as filters, duplicating functionality already in the column headers, while a leftover row of redundant dropdown filters lingered from an earlier technical constraint. After securing approval to add native selectable dropdowns to the column headers, I removed the redundant filter row entirely, consolidating filtering into the table itself and reducing visual clutter.

Onboarding

Devices

Onboarding

The Onboarding page originally used the metric tiles pattern to show "All" onboarding jobs along with status breakdowns: Completed, In Progress, Failed, and Not Started. With selectable dropdowns now enabled in the table headers, the new design replaces the tiles with compact selectable tags below the table heading. These tags provide the same filtering options (All, Completed, In Progress, Failed, Not Started).

Metric Tiles and Filter Redundancy

In the Legacy design, large metric tiles doubled as filters, duplicating functionality already in the column headers, while a leftover row of redundant dropdown filters lingered from an earlier technical constraint. After securing approval to add native selectable dropdowns to the column headers, I removed the redundant filter row entirely, consolidating filtering into the table itself and reducing visual clutter.

Onboarding

Devices

Onboarding

The Onboarding page originally used the metric tiles pattern to show "All" onboarding jobs along with status breakdowns: Completed, In Progress, Failed, and Not Started. With selectable dropdowns now enabled in the table headers, the new design replaces the tiles with compact selectable tags below the table heading. These tags provide the same filtering options (All, Completed, In Progress, Failed, Not Started).

New Features
Global Search Feature

Users across roles frequently requested a faster way to locate devices, locations, and jobs within the FORCE platform, especially given the scale of the network and volume of ongoing workflows. I took ownership of designing and delivering this high-impact feature. I placed a prominent search field in the center of the top navigation bar for maximum visibility and accessibility. To the right of the field, I added a command K hotkey indicator for keyboard-first users and an info icon that reveals a hover tooltip explaining search syntax and tips. Future enhancements are planned to include category-free universal search, recent search history, and autocomplete suggestions to further speed up common tasks.

New Features
Add a Device Workflow

One of the most frequently requested capabilities from network engineers and ANO operators was a streamlined way to add new RPDs to the system. Before this feature, the process involved manual configuration cloning via CLI or scattered tools, which was time-consuming, error-prone, and difficult to audit. I designed the "Add a Device" workflow as a guided, multi-step wizard to make onboarding safe, consistent, and efficient. The flow starts by letting users choose one of three entry points: • Clone an Existing RPD • Copy a Test RPD • Greenfield RPD

Job History Column and Timeline

Leaders and operators lacked traceability in FORCE workflows: jobs like activations and campaigns often failed and got retriggered without a clear record of who did what, when, slowing troubleshooting. I designed a Job History column and timeline for key detail pages, providing a chronological, auditable log of who initiated each job, timestamps, and key events like failures, retriggers, interventions, and rollbacks. The result is a cleaner layout with color-coded status, expandable details, and full visibility into job lifecycles, improving debugging, audit compliance, and reducing clutter.

AI Chatbot
Design Process and Features

How research, collaboration, and intentional design decisions came together to shape the FORCE chatbot.

AI Chatbot Demonstration

Retrospective
Lessons from Solo Leadership: What I Learned Turning FORCE Around

This project was my most challenging UX leadership experience to date. It demonstrated how foundational design work can unlock significant operational scale in enterprise settings.

What I did well

• I quickly mastered a complex domain and translated it into intuitive experiences. • I set clear priorities: design system foundation first, followed by pattern improvements, then high-value features. • I built for longevity by creating maintainable assets and organizing files for future team members. • I earned trust from engineering and product teams by delivering feasible, feedback-driven designs. • I remained resilient and proactive during layoffs and hiring freezes while maintaining quality.

Results
What I did well

• I quickly mastered a complex domain and translated it into intuitive experiences. • I set clear priorities: design system foundation first, followed by pattern improvements, then high-value features. • I built for longevity by creating maintainable assets and organizing files for future team members. • I earned trust from engineering and product teams by delivering feasible, feedback-driven designs. • I remained resilient and proactive during layoffs and hiring freezes while maintaining quality.

What I would improve next time

• Engage end users earlier with more direct field shadowing and usability testing. • Formalize documentation sooner (living style guide, decision log) to make handoffs easier. • Protect bandwidth earlier by escalating hiring needs or proposing contractor support. • Incorporate lightweight validation (A/B tests, heatmaps) on critical patterns before final handoff.

Results
What I would improve next time

• Engage end users earlier with more direct field shadowing and usability testing. • Formalize documentation sooner (living style guide, decision log) to make handoffs easier. • Protect bandwidth earlier by escalating hiring needs or proposing contractor support. • Incorporate lightweight validation (A/B tests, heatmaps) on critical patterns before final handoff.

FORCE is now more than an automation tool; it is a reliable partner in Charter’s network future, with UX at the core of its success. I look forward to applying these lessons to even larger-scale challenges.

Results
FORCE is now more than an automation tool; it is a reliable partner in Charter’s network future, with UX at the core of its success. I look forward to applying these lessons to even larger-scale challenges.

Thanks for stopping by 👋

Feel free to dive into more of my
case studies below.

Thanks for stopping by 👋

Feel free to dive into more of my case studies below.