Loading case study…
01Case study
FIVE Petroleum
Digital Fueling Experience: Reimagining the Refuelling Experience
Transforming a counter-based refuelling process into a connected mobile journey, from station discovery to digital payment and receipt.
Designing a mobile-first refuelling journey that brings station discovery, pump selection, payment, and digital receipts into one connected experience.
- What it isA mobile app for FIVE Petroleum customers, covering the refuelling transaction from finding a station to the receipt.
- The problemPaying at the counter meant leaving the vehicle, walking to the counter and returning to the pump before refuelling.
- What I didUX discovery, journey mapping, end-to-end mobile UI design, design walkthroughs and Design QA during UAT.
- What I designedThe core mobile experience, from station discovery and map selection through to the digital transaction receipt.
- How far it gotDeveloped and undergoing User Acceptance Testing (UAT) when my involvement ended.
02The Challenge
A Familiar Refuelling Process with Unnecessary Steps
The project presented an opportunity to simplify the experience by allowing customers to manage payment directly through a mobile application.
Design questionHow might we make the refuelling journey more convenient by reducing the need for customers to visit the counter to complete payment?
- 01Arrive at station
- 02Park at pump
- 03Walk to counterAway from the vehicle
- 04Make paymentAway from the vehicle
- 05Collect receiptAway from the vehicle
- 06Return to pumpAway from the vehicle
- 07Refuel
- 08Done
Conceptual reconstruction of the journey, not a research artefact. Highlighted steps happen away from the vehicle.
03UX Discovery
Understanding the Journey Before Designing the Solution
I participated in a collaborative UX discovery workshop with the Product Manager, stakeholders, and technical lead.
Customer Journey Mapping
Understand the existing refuelling process.
- Arrive and park
- Walk to the counter
- Pay and collect a receipt
- Return to the pump
- Refuel
Conceptual reconstruction of the workshop themes, the original workshop materials aren’t shown.
04Before vs After
Moving the Payment Experience from Counter to Mobile
Before: manual journey
- 1Arrive and park
- 2Walk to counterAway from vehicle
- 3Make paymentAway from vehicle
- 4Collect physical receiptAway from vehicle
- 5Return to pumpAway from vehicle
- 6Refuel
- 7Done
After: FIVE App journey
- 1Arrive and park
- 2Open FIVE AppIn the app
- 3Select stationIn the app
- 4Select pumpIn the app
- 5Choose refuelling amountIn the app
- 6Complete in-app paymentIn the app
- 7Refuel
- 8Receive digital receiptIn the app
Key design decisionMove the standard payment interaction from the physical counter into the mobile application.
Refuelling still happens at the pump. What changes is where payment happens: on the phone, from the vehicle, instead of at the counter.
05End-to-End Mobile UI
Designing the Complete Mobile Refuelling Journey
Following discovery and experience definition, I designed the core mobile journey from station discovery through to the digital transaction receipt.
The experience was designed to guide customers through the essential steps of a refuelling transaction.
Step 1 of 4
Station Discovery
The nearest FIVE station is surfaced on the map with its distance, alongside the fuel price and wallet balance, one tap from Purchase fuel.
These are the published FIVE App designs, shown as designed. The in-app payment step sits between choosing an amount and refuelling; it isn’t shown as a separate screen here.
06Collaboration
Reviewing the Experience Across Product and Engineering
After developing the proposed user flows and mobile interfaces, I participated in design walkthroughs with stakeholders, the Product Manager, and the development team.
These walkthroughs provided opportunities to review the proposed experience, explain design decisions, and discuss product and technical considerations.
In the walkthroughs
- Stakeholders
- Product Manager
- Development team
- 01Design Proposal
- 02Design Walkthrough
- 03Cross-Functional Discussion
- 04Implementation Alignment
Conceptual diagram of how the walkthroughs connected design and delivery.
07Development & UAT
Staying Involved Beyond Design Handover
Stage 7 of 7
UAT / Design QA
Reviewed the implemented app against the intended designs.
Design QA focus
- Visual consistency
- UI alignment
- Interaction behaviour
- Implementation fidelity
Project statusThe application was developed and undergoing UAT when my involvement ended.
08Outcome
A Connected Mobile Experience, Developed Through UAT
- 01
Connected Customer Journey
A cohesive mobile experience covering the core refuelling transaction.
- 02
Cross-Functional Delivery
Design work progressed through collaboration with product stakeholders and engineering.
- 03
Implementation Quality
Design involvement continued through development and UAT.
These are delivery outcomes, not measured customer or business impact.
09Reflection
What This Project Reinforced
FIVE App reinforced the importance of understanding the physical customer journey before introducing a digital solution.
By mapping the existing experience, collaborating with product and technical stakeholders, and remaining involved through UAT, I contributed to both defining the intended experience and reviewing its implementation.
The project demonstrated how product design connects customer needs, operational processes, interface design, and technical delivery.