Spectrum
From system to customer journey.
Spectrum Learn Pages + BuyFlow · 2024–2025. Coherent layouts, product journeys and production-ready handoff, connected through the PHX design system.
A shared language for a complex customer experience
Spectrum / Charter Communications · 2017–2025 Design Systems Lead & UI/UX Designer A telecommunications journey connects many decisions: choosing services, comparing plans, bringing a device and completing a purchase. The design system needed to support those decisions across interfaces, implementation and content authoring. My work connected interaction design with the foundations teams use to build: reusable patterns, design tokens, working prototypes and documentation. The public examples below show that connection at different levels—from a component state to a complete customer journey.
Eight connected studies
Explore the work from shared foundations to specific customer journeys. Each tile opens a focused study with the design intent, key decisions and a link to the original evidence.
A shared language for the interface
PHX Pattern Library · responsive foundations, components and states.
Connect understanding to choice
Learn Pages + BuyFlow · product education, bundles and purchase decisions.
Make the decisions work together
An integrated purchase prototype for devices, plans, trade-ins and the cart.
Make the system usable by others
Zeroheight guidance connecting design intent, implementation and authoring.
Design for the people publishing
AEM pattern and module libraries, reusable heroes, cards and author guidance.
Help people find their channels
Channel Lineup · mobile discovery, filtering and localised information.
Give useful content a clear structure
Resources · scanning, related content and contextual next steps.
Turn findings into practical fixes
Accessibility reviews · assessment, interpretation and remediation guidance.
Inspect the working artefacts
Open the original libraries, prototypes and documentation to see the work in more detail.
Inside the PHX pattern library
Reusable patterns, tokens and interaction states, documented for design and implementation.
Prototype the decisions, not just the screens
Working prototypes made trade-ins, device and plan selection, cart behaviour and multiline choices tangible enough to discuss and refine. They helped connect the intended customer experience with implementation decisions.
Design for the people building the experience
AEM modules and Zeroheight documentation extended the system into content authoring and delivery. Coded examples and explicit component states made the intended behaviour easier to interpret across disciplines.