Pay As You Go Improvements

To improve the experience for Three PayG customers. Currently, customers explore and purchase data packs and add-ons through an app to web journey. To uplift and improve this experience using a new native approach end-to-end. The customer will explore data packs and add-ons available, add them to their basket, and check out in app. The business objective is to improve CES, improve how we market these products to increase sales of auto-renew data packs over one-time and credit utilisation. The top-up journey will also be influenced as we move to offer Apple Pay and Google Pay to users in the app.   

The current journey does not use the latest design system elements. Customers often purchase credit, to then purchase Data Packs, often don’t know the benefits of auto-renew Data Packs. Usually have credit that cannot be used due to rigid top-up amounts and how Data Packs and Add-ons are bought (one type of payment used for purchases). The experience is broken with the need to log in again after the move to web and before purchase. This can increase failure rate and user frustration leading to negative customer feedback.

Timeframe

My role

Tools

July 2025
8 weeks

UI Design, Assist the UX Designer, Prototyping, Testing, Stakeholder management, Digital design system

Figma, Fig Jam, Teams, User Zoom, Adobe Analytics

Project overview

Challenge

Address frustrations with the purchase of Data Packs and Add-ons. End-to-end purchase journey for Add-ons and Data Packs. Offering Apple Pay and Google Pay as a payment option.

Goal

Through UI, improve this PayG experience. Explain what products are available and the benefits, reduce checkout steps to increase CES (Customer experience metric) and increase % sales of these products in the app. Enable the ability to use Apple Pay and Google Pay (GPay) in the purchase journey.

Design process

Historically the journey has been handled by a web team, due to recent changes in the back-end and new capabilities we have the opportunity to deliver an end-to-end experience in app. Align with the Digital Design System and create a new payments and checkout experience that visually puts us ahead of the competition.

Explore, research

Market analysis

Often due to the technology stack, competitors in the telecoms space are also constrained to an app-to-web journey. As a result of entering the app space early, and iterating on live services for years. “The Big Three” EE, O2 and us VodafoneThree still rely on web journeys.

Some journeys still required going to web to complete so may still be in a transitional period.

O2 relies on an app-to-web experience where like Three, we navigate to the add-ons journey, and they we are taken to web to view the products and complete the purchase journey.

EE is able to complete the journey in-app, this app experience is new and showcases the need to deliver a cohesive in-app journey.

Both competitors offer clear interfaces that look to use their up to date design systems and have recognisable brand presence throughout the journey.   EE were more effective in describing their offerings with clear “i” icons. This could be improved by having the text “More info” as some users may not know to tap the “i” icon. This is an assumption.   EE’s journey benefits from the sticky cta’s, O2 struggled to indicate the next step even when a selection was made.

Existing journey

Mapping the existing customer journey, understanding where the current experience falls short. Match up with the challenge and highlight areas for improvement that may have not been directly highlighted by the goals.

Key questions

Three’s UI of the existing app/web/Cordova journey shown above is not engaging. Oversized in some parts, empty space in others with less than ideal screen real-estate optimisation. As the pages are also not responsive and fail to react to user device font sizing, is not accessible and does not meet WCAG guidance standards.   (Cordova is a legacy front-end also phased out with this project)

Feedback

Our PayG customers are frustrated and represent clear dislike for the outdated and unreliable systems in place today.

We risk losing these customers and others being turned away by the reviews.  Source customer feedback from app store reviews that are relevant to Data Packs and Add-ons.

Buy Data Pack

High fidelity wireframes are shown for the Buy Data Pack journey. The way we work is we update user flows to live designs via components in figma, so even after the project is underway, stakeholders and developers can inspect the up to date screens.  Exhaustive screen variations and component level variations are provided but this is favored by our stakeholders and QA.

Make payment

The payment functionality is shared across multiple journeys, this is tracked in another project but required versatility as the UI must facilitate vouchers, shipping addresses, discounts different terms for recurring payments along with all the errors and success variants.

Buy Add-ons

Buy add-ons will also be shared across to Pay Monthly customers as we look to update that journey in later development sprints. Design System components need to be designed to facilitate both types of add ons.

Manage Data Packs and Add-ons

Manage add-ons will also be shared across to pay monthly.

PayG Buy tab

The buy tab is the shop-front for the Data Packs and Add-ons, it will help us to communicate the benefits of Data Packs over regular credit utilisation.

Digital Design System

As the only UI Designer in the App team, over 5 years I have built and continually updated the articles in our now vast Digital App UI Design System.

Many of the components I have made as part of App projects get adopted into the web dedicated design system. Web often takes inspiration from the uplifted app journeys as the technology and infrastructure is still very constrained on web.   

https://zeroheight.com/3f32e30a7/p/514b35-app-ui

High fidelity designs

Testing

Test goal

Participation

6 task tests

Identify pain points with the new design to understand how navigational and communication issues.

Participation pool: Three PAYG customers

00:00/00:00

T2,3 & 4 Data Pack review

Users were asked to find how they could save money on standard rate charges, review data pack page and to purchase a 30GB auto renew Data Pack
These tasks looked to explore the ease of use of the journey.

T5 findability of Add-ons

Users were tasked to find where they would go to add more data as there Data Pack was running low. This looked to understand the impact of separating the availability of Data Packs and Add-ons.

T6 cancelling data pack

Users were tasked to find how they would go about updating their allowance for the next month. This test looked to understand findability of the manage CTA whilst also understanding whether communication of how to update allowance was received.

100%

4.33 80%

of participants correctly identified entry points to Data Pack. Scoring 4.67 on a 5 point rating scale for ease of use.

out of a 5 point rating scale for ease of understanding the Data Packs page.

of participants rated it very easy to complete purchase. scoring a average rating of 4.83.

100%

of participants successfully located the Add-ons page, to add more data.

of participants found it very easy to locate.

Results

The success rate on tasks suggest that the design meets user expectations through providing an intuitive navigation structure to buy and manage Data Packs and Add-ons.

The clarity of the UI and copy effectively communicates core product and journey messaging providing customers with awareness of how the service works. Furthermore, the test highlighted growth in product understanding.  

The final experience consisting of 8 journeys launched in 12 August 2025 with great success.

+65%

overall sales increase in the first month of launch.

Data Packs

All channels experienced an increase in Data Pack order volumes pre/post: 

App driving the largest increase in terms of % uplift, volumes and revenue Web uplift in part due to increase in traffic, but Anon actually experienced a decrease in traffic - aligned to Anon journey copy improvements promoting AR in logged in journeys. Both journeys with improved conversion.
No traffic comparison available for App due to change in design making data incomparable.
Auto Renew split experienced an uplift for both App & Web
Web also seen an uplift perhaps from traffic than would have previously chosen one off in the anonymous journey.

Add Ons

App & Web both experienced an increase in Add On order volumes pre/post: 

Significant increase in App in terms of% uplift, volumes and revenue directly due to the new design, where the purpose of an Add On as well as the purchase journey is now clearer
A smaller uplift also experienced in Web even though no changes were made to this journey

+13.2%

Data pack purchase volume increase

+£103.2k

Data pack revenue increase (purchase only)

+65.9%

Add-on volume increase

+£34.3k

Add-on revenue increase (purchase only)