Improving customer journey completion rate for prepaid top-up
Optimisation of a web journey for Spark customers topping up a prepaid phone number.
Spark
4 months
UX/UI Design
Figma, Miro, Teams
Challenge
The existing customer journey for web is dated and needs migration using Sparks NUI design system. The journey in unauthenticated, it does not require user sign-in. Users are dropping off at certain parts of the journey.
Objectives
To optimise and simplify the overall user-experience with a focus on responsiveness for mobile devices.
To improve journey completion rate (JCR).
De-risk attempted fraud through increased tracking and protections.
To encourage Spark app downloads and top-ups in app, while upselling Postpaid plans.
Outcomes
An updated web journey validated through multiple rounds of usability testing (journey goes live 2025).
NUI design system enhancements including a new choice chips component.
Process
For this project I adopted the Double Diamond framework, which divides the design process into four distinct phases: Discover>Define>Design>Deliver. I worked in close collaboration with the product owner and customer experience designer.
Discover phase
We conducted user interviews and testing of the current experience, to gauge user pain points and overall sentiment. We looked at web and app analytics to understand the performance and discovered that…
36%
Customers drop off at mobile number selection step.
67%
Customers drop off during payment process steps.
21.9%
Success rate for all payments on mobile devices, nearly 50% lower than desktop users.
Define phase
After reviewing the current experience and talking with users, an updated user flow was created. This including the following changes:
A new top-up landing page to aid with page tracking data analytics.
An additional "Enter mobile number" form field was added to reduce user error and drop off.
Problem Statement
Prepaid customers struggle to top-up their mobiles on web, due to the out-dated and inconsistent messaging and experience, leading to drop-off and frustration.
Design phase
Guided by the updated user flow and some initial rough sketches, I created the full journey as wireframes, using NUI design system components. The updated journey was then presented to the backend architect and Spark's digital trust team.
We opted to test the full journey with the quantity selector component on the payment selection page. The rational behind this was to give the user added flexibility to top up custom amounts.
In addition to the quantity selector, I also designed two more variations. Preset amounts to mirror the current top-up experience and a slider which drew parallels to the Spark app experience.
Based on the feedback we received from the last iteration, we updated the design again and tested this with customers. A full playback of the testing feedback and final design outcomes was then presented to key stakeholders.
Deliver phase
This journey is scheduled to go live in Q1 2026, therefore we were not yet able to measure any improvement in journey completion rates and user drop-offs.
However as part of this process we were able to validate a new choice chips component, while also enhancing accessibility of our text buttons.
Choice chips have now been built and added to design system pattern library and are live as part of an update to Spark's product detail pages. More details on how this component is improving performance of those pages coming soon!
