Guardian App Navigation Growth and Monetisation - UX/UI - Ideation Workshop and Redesign

Challenges

Showcase The Guardian app’s premium features in an unobtrusive way
Gaining buy-in from multiple senior stakeholders
Aligning senior stakeholders’ vision for the project
Aligning the team on a shared goal
Limited company resources

Overview

Focusing on in-year revenue, gaining and retaining Guardian App Premium subscribers was crucial to The Guardian’s survival. I convinced senior stakeholders that optimising the app navigation could help the business achieve its revenue goals.

OKR

Increase sign-ups to The Guardian Premium App from The Guardian App by 4% while reducing churn of The Guardian Premium App by 1%.

Duration

3 Months

Project strategy

The Guardian's digital team was set up in autonomous, cross-functional OKR teams or squads. As the sole UX designer in my squad, I was responsible for ensuring the UX process was implemented correctly in the project strategy. Once the senior stakeholder gave our team our OKR targets, I began investigating how we, as a team, could achieve the goal of reaching the target.

User Feedback

I used user feedback gathered from QA and incorporated it into a heuristic review framework to understand what was causing user pain points in the app. The ‘Live’ and ‘Discover’ features, which are The Guardian’s premium paid-for features, did not look like tappable buttons. My hypothesis was: ‘By increasing the visual indicators of the premium features, Live and Discover, users would explore these features more.’ I presented the data and my hypothesis to the team, once they agreed on the project I continued with the project strategy and wrote a UX sprint plan to enable us to complete the project within the quarter. I then shared the UX sprint plan with the PM and the Engineers to ensure they could complete their work within the quarter and get sign-off.

Guardian App with navigation with premium feature issue highlighted.

Business Buy-in

I presented my heuristic review and hypothesis to senior stakeholders from the Design, Product, Engineering, Commercial Sales, and User Experience teams. This allowed me to discuss the potential the app’s navigation had. I held meetings with the senior stakeholders about their concerns regarding the app’s navigation. I discovered different disciplines had different measures of success. To address this concern, I designed and presented a scale system that judged navigation concepts based on agreed metrics.

Scale system I created to judged navigation concepts

Cross-Discipline Ideation Workshop

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.

Navigation features ranked by importance from navigation workshop

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.

Agreed primary journeys of the navigation

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.

Sketch outputs from navigation workshop latest story highlighted

Sketch outputs from navigation workshop secondary top navigation section highlighted

Sketch outputs from navigation workshop premium features highlighted

Usability Test

To test our navigation concepts, I worked with a User Researcher to create a testing topic guide. The wireframes were shown to users. At the end of the testing session, participants rated the navigations using the scale system. This revealed which concept best met user needs and business goals.

Playback

To align the team around one navigation concept, I presented the user test findings. ‘Navigation concept 2’ scored the highest and received the most positive user responses. Since the team had not attended all the testing sessions, they disagreed with the most successful concept. To resolve this, I explained the scoring system and showed the team the results.

Platform Parity

With the team aligned on ‘Navigation concept 2’, I met with them to discuss how we could respect both platforms (Android’s Material Design and iOS Human Interface Guidelines) while creating a similar experience. We explored the journeys from the navigation and discussed how each platform handled specific functionalities. This enabled me to design navigation features that met user needs across both platforms.

iOS Human Interface Guidelines - Bottom Nav

UI

I analysed competitors to understand the standard placement of navigation items in the bottom navigation.

KFC bottom navigation

Giff Gaff bottom navigation

Netflix bottom navigation

From reviewing competitors, I noticed consistencies in the bottom navigation, such as the home button being consistently on the bottom left and the utility button (More, Account, My Netflix) on the right.

I selected both resting and on-tap interaction colours from The Guardian’s digital design system to ensure the navigation design aesthetically matched The Guardian App.

Colours from The Guardian digital design system

All of these elements went into the final UI design.

Guardian Titlepiece Core Typography

Colours from The Guardian digital design system

I also used The Guardian Titlepiece (core) typography from the digital design system.

Final UI design for new bottom navigation

Guardian finished nav 4.png — Final UI design for new bottom navigation on screen

Delivery

I updated the digital design system and worked closely with engineers to finalise the usability and platform parity of the navigation. I also collaborated with Product Managers and the Data team to set metrics we would track to measure the success of the new navigation. These metrics included screen depth when reading articles, cross-section exploration, Premium App sign-ups, Premium feature usage, and churn.

Outcome

After launch, the metrics for the outcomes were recorded

Month 2

Click rate for premium features: ⬆️17%
Increase in subscriptions: ⬆️4%