Case study 04 / 04

Guardian App: UX/UI Redesign
to Drive Premium Growth

Driving Engagement Through Personalisation & Content Discovery

Role
Product Designer
Client
The Guardian
Duration
4 months / 1 quarter
Skills
Growth-Focused Thinking Cross-Functional Leadership

Optimising app navigation to grow Premium subscribers

The Guardian needed to grow in-year revenue by acquiring and retaining Premium subscribers. I convinced senior stakeholders that optimising app navigation could directly support this business goal, improving both discoverability and engagement with premium features.

Four challenges shaping the project

A clear, measurable target

Objective & Key Result
Increase sign-ups to The Guardian Premium App by 4% while reducing churn by 1%.

Sole UX designer in an OKR squad

The Guardian's digital team was structured into autonomous, cross-functional OKR squads. As the sole UX designer in my squad, I ensured the UX process was applied effectively to meet our OKR. Once we received our targets, I explored strategies to help the team achieve them.

Premium features that weren't clearly tappable

I analysed QA feedback through a heuristic review to identify pain points. My key finding was that the premium features, Live and Discover, were not clearly tappable.

Hypothesis
Enhancing visual cues for premium features would increase user exploration.

I presented the findings and hypothesis to the team, gained alignment, and wrote a UX sprint plan to guide delivery within the quarter. The plan was shared with PMs and engineers to ensure feasibility and get sign-off.

Guardian app screenshot showing Live and Discover premium features
Guardian app — 'Live' and 'Discover' premium paid features

Designing a scoring system to align stakeholders

I presented my heuristic review to stakeholders from Design, Product, Engineering, Commercial, and UX. This allowed me to explore their ideas of successful navigation. I discovered they had different definitions of navigation success. To align them, I designed a scoring system to evaluate navigation concepts against agreed metrics. This system created a shared understanding and enabled consensus on project direction.

Scoring system image
Navigation scoring system used to align stakeholders

Ranking navigation features by importance

With the senior stakeholders' agreement, I organised a cross-discipline ideation workshop. By discussing the user problems and my hypothesis, we agreed on the most important navigation features and ranked them by importance.

Cross-discipline ideation workshop image — feature ranking
Workshop feature ranking by importance

We also agreed on the primary journeys we would promote through our new navigation. I then split the group into teams to sketch their versions of The Guardian's future navigation.

Cross-discipline ideation workshop image — primary journeys
Primary journeys agreed in the workshop

The outcome of the workshop was three navigation sketches. After the workshop, I iterated on the sketches while focusing on the primary navigation journeys, and created wireframes.

Navigation sketch 1
Navigation sketch 1
Navigation sketch 2
Navigation sketch 2
Navigation sketch 3
Navigation sketch 3

Testing which concept best balanced user needs and business goals

I partnered with a User Researcher to develop a testing guide. Participants evaluated the wireframes using the scoring system, revealing which navigation concept best balanced user needs and business goals.

Usability testing wireframe image 1
Wireframe tested with participants
Usability testing wireframe image 2
Wireframe tested with participants
Usability testing wireframe image 3
Wireframe tested with participants

Using data to secure team alignment

'Navigation Concept 2' scored highest in user testing but initially faced team disagreement as the team did not view all of the user tests. I presented the scoring system and user feedback, clarifying the data and securing team alignment around a single concept.

A consistent experience across iOS and Android

With the team aligned on 'Navigation Concept 2' I worked with the team to design a consistent experience across iOS and Android while respecting platform guidelines (Material Design & Human Interface Guidelines). We reviewed journeys and feature handling to ensure usability and coherence across both platforms.

iOS platform parity image
iOS — Human Interface Guidelines
Android platform parity image
Android — Material Design

Applying The Guardian's design system

Competitive analysis highlighted standard bottom navigation patterns, such as home on the left and utility on the right.

Competitor navigation pattern image 1
Competitor navigation pattern
Competitor navigation pattern image 2
Competitor navigation pattern

I applied The Guardian's design system for colours, typography and interactions to create an aesthetically consistent and intuitive navigation.

All elements were integrated into the final UI design, ensuring clarity, accessibility, and premium feature visibility.

Guardian design system — colours image
Guardian design system — colour palette
Guardian design system — typography image
Guardian design system — typography

Defining success metrics with PMs and the Data team

I collaborated with engineers to finalise usability and platform parity, updated the design system, and worked with PMs and the Data team to define success metrics, including:

Final UI design image
Final UI design
Final Guardian app UI delivery image
Final delivered Guardian app navigation

Month 2 post-launch metrics

17%
Click rate for premium features
4%
Increase in subscriptions

Data-driven decision-making at the heart of it

Aligning stakeholders early, testing concepts with users, and using data-driven decision-making enabled a navigation redesign that directly drove measurable growth in Premium adoption.

← Previous case study
KFC App Growth — Driving Engagement Through Reward Sharing
Read case study →
All work →
Back to portfolio
View all →
Made with Claude