Back to Charter Spectrum
UX/UI Design AEM Telecom
Charter Spectrum — Behind the Work

The Process
How a Page Gets Made

Every Spectrum Business page moved through a disciplined cross-functional workflow — from a Jira ticket to a live URL — covering discovery, copy, SEO review, high-fidelity design in Adobe XD, AEM authoring, and cross-browser QA.

Design to Launch

Each sprint was scoped, designed, authored, and shipped in a two-week cycle — with cross-functional handoffs keeping every stakeholder aligned from brief to browser.

01
Discovery & Briefing
Aligned with product, marketing, and engineering stakeholders to define promotional goals, user segments, and content priorities for each sprint.
02
Copy & SEO Review
Copywriters drafted headlines and CTAs; the SEO team reviewed keyword density, H-tag hierarchy, and meta descriptions before design began.
03
High-Fidelity UI Design
Built pixel-perfect mockups across desktop, tablet, and mobile in Adobe XD using the 200+ component Spectrum Business design system.
04
AEM Authoring & Launch
Authored final designs directly in AEM production, working alongside developers for QA across browsers and devices before each launch.

The Full Team Workflow

Every page update followed handoffs between creative leadership, content, SEO, design, development, and QA — from Jira ticket to live URL.

Creative Manager
Jira Ticket Created

The creative manager opened a Jira ticket defining the promotional objective (e.g., "Stack your savings" bundle push), target audience, page location, and deadline. This ticket anchored all downstream work and tracked status through every handoff.

Copywriters
Messaging & Copy Development

Copywriters drafted headline options, body copy, and CTA language aligned to the promotional offer — hitting tone, word count limits, and the Small Business audience's decision-making language focused on value, speed, and reliability.

SEO Team
SEO Review & Keyword Alignment

Copy was routed to the SEO team before any design began. They reviewed headline structure, keyword density, meta descriptions, and H-tag hierarchy — returning blocking edits through Jira before the design ticket could move forward.

Design — Julie Dion, Senior UI Designer
Mockups in Adobe XD

With approved copy in hand, I built high-fidelity mockups across all three breakpoints — desktop, tablet, and mobile — in Adobe XD using the Spectrum Business design system. Component tokens, spacing rules, and color variables kept designs consistent across the 200+ component library. Figma was used for collaborative annotation and stakeholder review presentations.

Adobe XD Figma Spectrum Design System
Development & AEM Authoring
Built in Adobe Experience Manager

Approved designs were handed off to the development team and — uniquely — I also authored pages directly in AEM myself. Working inside Charter's production CMS, I placed components, set tokens, configured promotional modules, and previewed across breakpoints before passing to front-end developers for final QA. This dual role significantly reduced revision cycles and gave me direct control over the live output.

Adobe Experience Manager Dev Handoff
Live
Launched on spectrum.com/business

After cross-browser QA, stakeholder sign-off, and a final promotional deadline review, the page went live on Spectrum Business — reaching 45M+ monthly visitors. Post-launch, performance data fed back into the next sprint's Jira ticket to iterate on what moved the needle.

Back to

Charter Spectrum Case Study

Return to Case Study All Work

Ready to connect?

Return to Portfolio Contact Me