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.
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.
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
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
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
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
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
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
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.
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.
Field Service CRM Redesign
Got a project
in mind?
TOP 3% TALENT
Vetted byYes, 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 design tools, web technologies, and branding strategies to build engaging and innovative digital experiences.