Content Matrix

Designed a Content Matrix to standardise page structure and component usage across Drinkaware’s 200+ content pages, improving consistency, clarity, and scalability of user journeys.

Organisation: Drinkaware

Role: UX Designer

Overview

Drinkaware’s website supports people seeking alcohol-related advice and tools, and consists of 200+ content pages maintained by multiple teams. While individual pages met local needs, the overall experience lacked consistency in structure, component usage, and how users were guided through content.

The Content Matrix project was initiated to create a shared framework for page layouts and components, supporting clearer progression through content, improved consistency, and better long-term governance across the platform.

Problem/ Challenge

Page layouts and components varied significantly across different areas of the website.

Onward journeys were inconsistent, making it difficult to clearly guide users toward key tools and services across the wider funnel.
CTA hierarchy and engagement patterns were uneven and difficult to apply consistently.
Reporting on performance relied heavily on manual processes, limiting iteration.

Contextual challenge:
This work was delivered in parallel with other major initiatives (a digital content review and large-scale content audit), rather than as a single joined-up programme, increasing the complexity of alignment and delivery.

Discovery and Context

Conducted a structured review of seven areas of the website, documenting differences in banners, breadcrumbs, navigation, CTAs, and engagement components.
Drew on existing user journeys and service blueprint from previous projects to understand how content supports progression across the platform.
Identified that many issues were systemic rather than page-level, driven by a lack of shared standards rather than isolated UX problems.

Research and Insights

Carried out a competitor analysis across direct and indirect competitors delivering complex advice and information content, reviewing multiple page types to compare layout consistency, CTA presentation, engagement components, and onward journey patterns.

Key insights:

Competitors used more consistent layouts and clearer CTA patterns to set expectations for users.
Onward journeys were presented with fewer, more intentional options.
Engagement components were used selectively to support long-form content without increasing cognitive load.

Opportunity identified:
A standardised approach to page structure and component usage would improve clarity and consistency, and provide a stronger foundation for managing and evolving onward journeys over time.

Solution and Delivery

Designed a Content Matrix framework defining:

Core page components
CTA hierarchy (primary, secondary, tertiary)
Usage guidelines aligned with brand and accessibility standards

Made a series of recommendations, including:

Standardising banners and breadcrumbs
Reducing reliance on excessive hyperlinks
Reviewing the use of side navigation
Improving how CTAs are presented and described

Not all recommendations could be actioned immediately. Some changes (such as removal of side navigation or richer CTA descriptors) were constrained by CMS limitations. The priority was to establish consistency using existing components first, with future component development identified as a next step.

Delivery Approach

To support progress within CMS, resource, and timing constraints, delivery was split into two tracks:

Full UX/UI and content review
Applied Content Matrix principles during page reviews, updating structure, components, and content where appropriate. This approach required coordination with content owners and longer review and approval cycles.
UX/UI component review only
Focused on visual and structural updates using existing components, with minimal or no changes to content. This enabled a faster roll-out, avoiding the time constraints associated with content review while still improving consistency.

This dual-track approach allowed steady progress while supporting parallel initiatives. For UX/UI component review, page selection and rollout order were often influenced by other concurrent projects, rather than UX priorities alone, requiring careful coordination to avoid duplication of effort.

Outcome and Next Steps

So far:

Established a shared framework to support more consistent design and content decisions across teams.
Improved clarity around page purpose, structure, and component usage.
Created alignment between UX, content, and communications teams around scalable standards.

Next steps:

Continued roll-out of page updates across priority areas.
Collect and review performance and engagement data three months post-update.
Use findings to refine patterns and inform future component development.
Review navigation and mobile consistency.
Explore personalisation, visible content tagging, and improved feedback mechanisms.