Edd Hopkinson

Senior Designer

Vodafone Broadband Redesign

Transforming the broadband experience through design language, design system alignment, UX, and content design.

Research

Strategy

UX/UI

Design System

Content Design

Collaboration

Completed @ Vodafone

High fidelity designs of Vodafone Broadband pages in iPhone mockups.

Outcomes

+10.9% basket progression

Validated design language

Exemplary design system alignment

Improved team workflow

Challenge

With 12 new broadband propositions launching, Vodafone's broadband pages were no longer fit for purpose. Content overload and inconsistent components meant customers struggled to compare plans, understand benefits, or progress through the journey.

Objectives

Solve key usability issues identified through research
Improve structure, clarity, and content hierarchy
Align with the evolving design language
Deliver measurable improvements in user flow and internal workflows

Analysing existing designs

I led early-stage workshops and collaborated with content, brand, and propositions teams to understand core issues—based on research, analytics, and internal insight.

Three screenshots of old page designs showing inconsistent design, confusing content, and poorly designed heirarchy.

Key issues identified:

Proposition not user led

Decisions focussed mainly on business need above user needs and priorities.

Overwhealmed with content.

To much information and choices leading to analysis paralysis and users reaching for help section.

Confusing content

Disjointed content full of hard to follow technical jargon. Competitors perceived as easier to understand.

Structure & Heirarchy

Poor visual hierarchy and structure leading to pages that were hard to scan. Compounded by CMS spacing issues.

Product portfolio changes

12 new propositions launching risked compounding these issues further leading to more problems.

Restructuring the section

Wireframes were produced to visualise new page structures, organise content, and get buy in from stakeholders who were not expecting a full redesign of the section. This time was also used to introduce and validate the design language principles.

Desktop and mobile wireframes of two broadband pages showing improved structure, clearer content heirarchy, and clearer design.

Applying design language principles

I used this project to validate the design language principles. This lead to lots of small changes that compounded to create a more consistent, brand aligned experience that improved upon many of the key issues identified in the research phase.

Revised principles

Following a new set of guiding principles acted as a north star for decision making and helped focus attention on where it could have the most impact.

Good design principles: Simplify content, simplify structure, improve hierarchy, remove jargon, focus on customer benefit, align with design system.

Bad design principles: Add more content, put new content everywhere, no hierarchy, lots of technical jargon, focus on business, copy what was done berfore.

SEO-Driven Content Structure

Headings and structure were rebuilt around real user search data rather than brand-first messaging—boosting relevance and discoverability.

Good design: Webpage example with clear structure based on SEO research.

Bad design: Webpage with jargon filled headings that mean nothing to the user.

Consistent templating

Using predictable, but flexible design patterns with consistent component use across pages created a much stronger structure. This aided orientation and allowed users to focus on the information rather than working out where they were or what they were supposed to do.

Bad design: Two web pages that are very inconsistent and use poor templates making them hard to follow.

Reduced visual clutter

Content squeezed into an already cramped UI led to a poor hierarchy and pages that were hard to scan and digest quickly. Reducing content allowed for a stronger structure with improved content hierarchy, allowing greater room to breathe, better readability and generally a more premium and considered experience.

Good design: A webpage with a clear structure and minimal content.

Bad design: A webpage design with too much content on the page making it hard to read.

Led with customer benefits

Replaced brand visuals and jargon with descriptive illustrations and user-focused copy.

Good design: Benefit led product card with user focussed copy and and descriptive illustration showing wifi signal throughout a home.

Better component choices – increasing basket progression by +10.9%

Users were confused by the plan cards section that gave the impression they were making a product selection. The copy didn’t help, setting the wrong expectation. A common comment from users was “why let me select something I can’t have?”

Setting the right expectation with new copy and swapping to a comparison table allowed users to compare information much more easily and didn't give the impression they were making a selection.

This significantly increased basket progression by +10.9%.

Good design: Table component showing clear comparisons between broadband plans.

Bad design: Plan card components showing poor comparison between broadband plans.

Improving workflow & collaboration

Introduced a Figma-based messaging matrix combining copy and design assets into design system components.
Resulted in a reusable toolkit of signed-off components for efficient high-fidelity design production and visual / messaging alignment across teams.
This created a drag-and-drop design workflow that streamlined the design process and reduced feedback from stakeholders.
Improved collaboration and up-skilled the team allowing non-designers the opportunity to create design screens and learn Figma skills.
This replaced PowerPoint slides that showed messaging, with no context or consideration for scalability.

Wireframe design screen being populated with completed design components by three users.

High-fidelity designs

Final screens were produced quickly using the new drag-and-drop component workflow allowing more time to focus on user needs, consider the design language principles, and align to the evolving design system.

High fidelity designs of the desktop and mobile screens of the Vodafone full fibre broadband page.

High fidelity designs of the desktop and mobile screens of the Vodafone broadband and landline page.

High fidelity designs of the desktop and mobile screens of the Vodafone Pro II broadband page.

Close up of three product benefit cards detailing what you can do with Pro II broadband.

Close up of three product benefit cards detailing the benefits of Pro II broadband.

Bringing the section to life

A toolkit of branded assets were produced to populate the new messaging matrix and high-fidelity designs. These were shared with other teams to ensure consistency and alignment.

Vodafone Essentials branding - a WiFi symbol inside a house with a value icon next to it.

Vodafone Essentials icon - a WiFi symbol inside a house with a value icon next to it.

Pro II bradband router on a red 3D vodafone background.

Vodafone basics router on a red Vodafone branded background.

Vodafone Pro II router, wifi boster, backup device, and mobile app.

Vodafone Pro II router with Apple TV 4K devices on a TV stand in a red living room.

Up to 60 times faster promotional badge on a red background.

Short animation of a wifi router and the word speed with rippling letters extending from the sides to mimic fast wifi signal.

Short animation of the word speed with rippling letters extending from the sides to mimic wifi signal.

Vodafone Pro II devices on a red background with an up to 2.2 Gbps promotional tag.

Social advert for Vodafone broadband showing router on a stage with a red background and a Black Friday promotional message.

Outcomes

The redesign delivered an improved experience for customers, validated the design language principles, and defined the section as an exemplary Vodafone digital experience. All of which exceeded stakeholder expectations.