Cox Stories

Problem

Cox needed a way to present three different kinds of editorial content — timely stories, news updates, and evergreen reference pieces — through a single, coherent card system that would hold up across a dark-themed media site without collapsing into visual sameness or, at the other extreme, unmanaged one-off layouts per content type.

Opportunity

Building the system as components rather than as individual page comps meant every new content type or breakpoint became a configuration problem, not a new design problem — a foundation the content and engineering teams could both extend without coming back to design for every new format.

Each page type had its own objectives. The landing page needed an optimized layout and structure to simplify discovery, tiered content blocks to draw attention, and a framework that could support a high volume of publishing. The story page needed frictionless navigation with no dead ends, a content-first approach where design elevates the story rather than competing with it, and calls to action placed to soft-sell Cox products at the right moment.

Success meant less friction, more engagement with Cox's stories, a stronger brand perception, and more traffic to the commercial site.

Four weeks, two phases, four client reviews

Audit

Before designing anything, I audited how leading editorial sites structure and surface their stories.

I annotated each site for patterns worth carrying into Cox Stories:

• TL;DR jump links to the relevant parts of a story
• Story prominence shown through different card sizes
• Video embedded in the article, played in place
• In-page links within articles
• A reading progress bar
• Products mentioned in a story, shown alongside it
• A quick-view toggle that puts headlines first
• Clearer ways to move between categories

Content design spectrum

To agree on direction, I mapped references on a content design spectrum for each page type.

The landing page ran from editorial (conventional and functional), through engaging and human, to expressive (novel and bespoke). The story page ran from minimalistic (static and clean), through emotive and sophisticated, to experiential (interactive and compelling). The first UX review asked Cox where on each spectrum the experience should land.

Landing page spectrum

Story page spectrum

Principles

Two purposes framed the work: effortless discovery on the landing page, and content that inspires on the story page.

For the landing page:

• Quantity. A framework and structure that supports a high volume of content creation and publication.
• Accessible. A balance between consistency and diversity keeps visitors engaged and lets them quickly find relevant content and media.
• Unexpected. Smart design flourishes and micro-animations humanize conventional patterns, making the familiar unexpected.

For the story page:

• Content first. The functionality, experience and design support the content; they elevate it rather than compete with it.
• Subtly bold. Strong hierarchy, repetition with variation, crisp design and sharp contrast create a sense of sophisticated playfulness.
• No dead ends. There is always a clear, contextual next step. Navigation is a fail-safe, not the primary way to discover content.

Underneath both sat four content design principles: modularity, flexibility, shareability and scalability, so an article could scale from static content to a richer, more immersive experience tailored to the channels readers choose.

Wireframes

The wireframes set the content structure for both pages.

The landing page opens on an immersive hero, a full-width takeover carousel of images or autoplaying video with calls to action, then moves through Connections Project highlights, stories by topic, featured stories and an archive. The story page pairs a video hero with the headline, tags, share and save, then inline media, a pull quote, the products in the story, and more stories to read next.

Usability testing

We put a mobile prototype in front of real people before locking the system.

Huge ran five moderated, 30-minute qualitative sessions on the Connections Project prototype using UserZoom. Participants were three Cox customers and two non-customers, each the primary internet decision maker in their household, aware of Cox, and from a mix of backgrounds and ages.

What we found:

• The site and its menus were well organized and easy to navigate.
• Videos, pictures, tags and content recommendations increased engagement.
• The amount of content on the story page, and its length, felt overwhelming.
• The content and copy improved how participants saw Cox.
• Specific topic tags, like "Autism", were the most relevant and understandable.
• References to Cox products and services inside articles went largely unnoticed.

What testing changed

The findings shaped the system that shipped.

• Modular pages. Because long story pages felt overwhelming, pages were built from modular components that scale from basic content to a richer, story-driven layout. Optional flex elements (image-size variation, video, pull quote, product component, boilerplate, related articles) appear only when a story needs them. On the landing page, a three-column tile layout gives story cards one column and video cards two.
• Descriptive tags. Because specific tags were the most understood, descriptive tags such as "Autism" were paired with existing categories like Connection Stories, Community and Technology, adding editorial context, inviting people to explore related stories, and helping search engines understand each article.
• Products in their own component. Because product mentions in the copy went unnoticed, products got a dedicated component on the story page.
• Headlines that earn the click, with headline testing recommended to find the most clickable.

Exploration

The system was reviewed on a weekly cadence over roughly a month, with dated snapshots tracking how the card variants evolved. Each content type — Story, News, Evergreen — was designed in small, medium, and large sizes across mobile, tablet, and desktop, so the same underlying component could scale from a dense list view to a featured hero placement.

Card tiles, in three-up and two-up rows

Solution

The final delivery organized the full system behind a single index: card components in every size and content-type combination, supporting states (active/disabled tags, download-assets, related-stories, pull-quote block), a carousel pattern for featured content, and complete Landing Page and Article Page templates showing the system assembled into real pages.

Landing page at desktop, tablet and mobile

The Connections Project carousel

Outcomes

• Delivered as an indexed, dev-ready final system rather than a loose set of mockups — reducing back-and-forth during implementation
• One component system covering 3 content types × 3 sizes × 3 breakpoints, replacing what had been ad hoc per-page layout decisions
• Weekly review cadence kept stakeholders aligned through iteration instead of a single big reveal at the end