Skip to content
Design SystemsEnterprise UXAccessibility

Dark Mode System

Comcast's network diagnostic tool was built for daylight. For the technicians running diagnostics through the overnight shift, its bright, high-contrast UI introduced friction the rest of the platform never accounted for: eye strain, reduced focus, and an accessibility gap that became more visible as the technician workforce grew more distributed. The dark mode refresh extended the platform's design system into a full dual-theme architecture, prioritizing low-light usability without compromising the data accuracy that diagnostic work depends on.

ClientComcast Inc.
RoleUI/UX Designer
Timeline2 months
PlatformWeb Application
30M+Devices managed
10k+Daily network technicians
15User types
TelecomIndustry
Comcast • National WatchTower — WatchTower cover image

Comcast's network diagnostic tool ran on a high-contrast light interface that worked well in the office but actively fought the technicians using it during overnight shifts. Bright backgrounds clashed with low-light field conditions, producing eye strain that compounded across long shifts and reduced the focus required for accurate diagnostic work. The existing tool also lacked accessibility foundations: no adjustable contrast, limited type-size flexibility, and no consideration for the range of environments technicians actually worked in. The dark mode initiative wasn't a cosmetic upgrade. It was an opportunity to extend the platform's design system into a more accessible, environment-aware architecture, and to do it without destabilizing the workflows technicians had built around the legacy interface.

01.
Discovery

Understanding the night shift

Researched the working conditions of night-shift technicians to understand where the existing UI failed them, including environmental factors, accessibility gaps, and the workflow constraints that made the bright interface a real obstacle to performance.

  • Conducted interviews with night-shift technicians to map their real working environments
  • Documented accessibility gaps across contrast, typography, and color contexts
  • Identified the data-color associations technicians had built mental models around in the legacy interface
02.
Audit

Auditing the existing system

Audited the full UI inventory within scope including modals, buttons, typography, iconography, navigation, against accessibility standards and dual-theme readiness, identifying every component that needed to evolve to support a coherent dark mode.

  • Inventoried the existing UI components and their color and contrast dependencies
  • Evaluated each component against WCAG 2.1 AA accessibility standards
  • Identified which legacy color associations needed to be preserved versus modernized
03.
Strategy

Defining a dual-theme architecture

Established the system strategy for supporting both light and dark themes as first-class citizens, including a color token architecture, accessibility floor, and a transition plan that respected existing user mental models.

  • Defined a token-based color architecture supporting both light and dark themes from shared foundations
  • Set accessibility baselines (contrast ratios, type scales, focus states) that applied across themes
  • Developed a transition strategy for introducing new colors without breaking existing data-color associations
04.
Visual Design

Designing for both environments

Translated the dual-theme strategy into the full visual system, designing every component, color, and interaction state to perform across light and dark contexts while reinforcing the platform's diagnostic clarity.

  • Designed a unified color palette engineered for accessible contrast across both themes
  • Updated side menus, modals, buttons, typography, iconography, and navigation patterns for dual-theme support
  • Introduced a badge system that visually reinforced new color meanings without forcing users to relearn the interface
05.
Validation

Testing in real conditions

Validated the new themes with technicians in their actual working environments, refining color values, contrast levels, and component states based on direct feedback from low-light field conditions.

  • Tested dark mode prototypes with technicians during overnight shifts
  • Iterated on contrast levels, particularly for diagnostic alert states and data visualizations
  • Refined the badge system based on feedback about color-to-meaning recall
06.
Integration

Embedding into the design system

Embedded the dual-theme architecture into the platform's broader design system, documenting tokens, components, and accessibility guidelines so the work could be extended consistently across future product surfaces.

  • Documented the color token system and theme-switching architecture for engineering handoff
  • Extended dozens of components into the dual-theme system with shared design specs
  • Built accessibility documentation covering contrast, typography, and theme-state behavior
07.
Launch

Shipping dark mode across the platform

Rolled out the dual-theme architecture platform-wide, improving accessibility for night-shift technicians by 30% and establishing a theming foundation the team could extend to future modules without rebuilding from scratch.

  • Launched dark mode across the full diagnostic platform with both themes available to all technicians
  • Established the dual-theme architecture as the foundation for all future UI work on the platform

Measurable Impact

The dark mode initiative did more than ship a second theme. It established a token-based theming architecture, set an accessibility floor across the platform, and demonstrated that significant visual change can happen without disrupting the workflows technicians had built around the legacy system.

0%Accessibility improvement
0Themes shipped
DozensComponents extended
WCAG 2.1Accessibility standard
Images
WatchTower image 1
Comcast • National WatchTower, 2024

The hardest design work on this project wasn't visual. It was navigating the tension between modernizing an interface technicians depended on daily and preserving the color associations they had built mental models around. The badge system became the bridge: it let us introduce new color logic without forcing technicians to relearn what each color meant overnight. Good design systems aren't just about consistency. They're about continuity, letting people keep what they already know while giving them something better.

Next Project

Field Service Management Redesign

Related Projects
The Iron Brotherhood thumbnail
The Iron Brotherhood

Youth Nonprofit Brand Identity & Website

Funky Flair Boutique thumbnail
Funky Flair Boutique

Fashion E-Commerce Brand & Storefront

Comcast • Celestial FSM 1.5 Diagnostic thumbnail
Comcast • Celestial FSM 1.5 Diagnostic

AI-Powered Network Diagnostic Platform

Got a project
in mind?

Start a conversationConnect on LinkedIn
(FAQ)

Yes, you can book a free intro call through the "Get in Touch" or "Start a conversation" button. We'll discuss your goals, scope, and timeline to see if we're a good fit.

I offer product design, UX strategy, interface design, and visual storytelling, covering everything from research and wireframing to high-fidelity design and front-end implementation.

I leverage AI tools, design tools, web technologies, and branding strategies to build engaging and innovative digital experiences.

TOP 3% TALENT

Vetted by
Work Type
ContractFull | Part TimeContract To Hire
Contactsteven@sdesigns.io
LocationSouth Florida, US Remote
Connect