Fuel & Go — Designing stay-in-car payments for BPme

🔖 Introduction

The product: BPme

BPme is a mobile app that lets users find nearby petrol stations, earn rewards, and now—pay for fuel without leaving their car.

The BPme mobile app interface displaying the fuel payment process

About the project

This project explored how BPme could make refueling faster and safer by letting drivers pay without leaving their car.

As petrol stations modernized, customers expected the same convenience they get from delivery and ride-sharing apps.

My role was to design and test a simple, safe way for drivers to pay without leaving their car.

Home view of the BPme android app

🤔 Problem space

Problem to solve

Drivers must leave the car to pay, creating delays and safety concerns — especially at night or in bad weather.

Current solution

BPme already allowed users to locate petrol stations and collect loyalty points, but there was no in-app payment option.

Customers still had to walk to a kiosk or use a card terminal, which felt outdated compared to the contactless experiences offered by delivery and parking apps.

💭 Why it matters

Modern drivers expect refueling to be as easy as ordering food or paying for parking.

Introducing in-car payment could:

Improve speed and convenience

Increase user trust and satisfaction, and

Position BPme as a leader in digital-first fueling.

🎯 Goals

Company objective: Increase app engagement and repeat refuels by making BPme the fastest, safest way to pay for fuel.

Project goals

Design and validate an end-to-end stay-in-car payment flow.

Keep the happy path under 1 minute (≤4 taps, ≤1 decision).

Make each step explicit — Authorizing → Ready → Done.

Auto-apply rewards to make loyalty effortless.

👤 Our user

Urban commuter — Emma (31)

A frequent mobile app user who values speed, safety, and convenience in everyday routines.

Goals: refuel quickly without leaving the car; keep the routine smooth and predictable.

Needs: stay-in-car payment; Apple/Google Pay; clear Authorizing → Ready → Done states; digital receipts.

Characteristics: lives in a busy urban area; avoids unsafe or crowded places; interested in time-saving driving tools.

“I just want to fuel up and go — without standing outside in the cold or waiting in line.”

🌟 Solution space

Exploratory research

User interviews

We surveyed 31 drivers to understand how they refuel and pay. Most refueled weekly and used cards or mobile wallets.

74% said they would try in-car payment if it felt secure and saved time.

This validated our assumption that speed and safety are key motivators, guiding the prototype toward Apple/Google Pay integration and automatic loyalty redemption.

Who we interviewed

26/31 own a car.

Age: mostly 20–30 (15) and 31–44 (9).

Location: ~81% urban (25/31).

Gender: mixed, with a slight female skew.

Our hypothesis

A stay-in-car payment flow reduces perceived risk and speeds up refueling.

Apple/Google Pay and saved cards are the expected defaults.

Loyalty points and discounts motivate repeat use.

Learnings

💡 Convenience and price drive station choice

Respondents most often cited convenience/location and price as deciding factors.

Refueling habits skewed toward weekly or bi-weekly; few refuel daily.

💡 Cards and mobile wallets are the norm; in-car payment interest exists

Primary payment method: credit/debit cards (majority); frequent mobile wallet users.

In-car payment interest: Yes (9) · Maybe (14) · No (5) — showing potential if positioned around value and safety.

Decision

Based on survey insights, we focused on a stay-in-car payment path with:

Apple/Google Pay and saved cards.

Auto-applied loyalty (“You saved X”).

Clear step feedback (Authorizing → Ready → Done).

Robust failure handling (declines, timeouts).

Digital receipts and nearby-station discovery as core features.

Competitor analysis

We reviewed 4 mobile fuel/payment apps (plus the current BPme) to compare registration, pay-at-pump flows, loyalty integration, and recovery patterns across markets.

Who we reviewed

Global and regional fuel apps offering pay-at-pump and rewards systems.

Scope

Registration & onboarding · Station search/map · Pump selection · Payment & authorization · Loyalty/rewards · Error/retry handling

💡 Solution

👉 Drivers must leave the car to pay (slow + unsafe)

Solution: Introduce a stay-in-car payment flow:

station → pump → pay in app (Apple/Google Pay or saved card) — no kiosk required.

Assumptions: Familiar wallets and fewer steps make payment feel faster and safer.

Considerations: Some stations may still require on-site confirmation; weak networks can delay validation.

🧩 User flow

The redesigned BPme flow focuses on a fast, low-effort refueling journey — from sign-up to payment — while keeping optional steps skippable to reduce friction.

Quick onboarding: Users can sign in with Apple/Google and skip setup steps to start immediately.

Flexible setup: Vehicle details and payment methods can be added later, directly within the payment flow.

In-app payment: Drivers locate a nearby station, scan the QR, confirm the pump, and pay via saved card or wallet — all without leaving the car.

Post-payment: The app auto-generates a digital receipt, applies loyalty points, and offers easy access to refueling history.

This structure ensures users complete the journey under one minute, maintaining both clarity and trust.

✏️ Low-fidelity exploration

Design concept

The first concept focused on a QR-based entry flow to simplify how drivers connect to a pump.

The goal was to make the process as seamless as scanning a code and fueling up — without walking to a kiosk.

Entry via QR at the pump → auto-confirm the connected pump → pick fuel amount → pre-authorize payment.

Tap Fuel & Go → scan the QR → the app links to the correct pump automatically.

The success screen shows “Pump connected”, fuel type selector, and preset or custom amount.

A clear note explains the pre-authorization hold, with a single CTA: Pre-Authorize Payment & Fuel.

QR entry → pump confirmed → choose amount → pre-authorize

Payment flow

After connecting to the pump, the driver selects a preset or custom fuel amount (e.g. $45), chooses a payment method, and completes the transaction.

A confirmation screen summarizes the payment, discounts, and earned points — keeping the entire experience contactless, quick, and transparent.

Flow: Choose amount → Select payment method → Add card if needed → Review summary → Payment success.

Goal: Enable a modern, stay-in-car flow that feels effortless yet trustworthy.

Select amount → pay → earn points (fast, safe in-car flow)

🎨 High-fidelity design

1. Dashboard with QR scan integration

The updated home screen introduces a Fuel & Go shortcut for instant payment.

Drivers can scan the pump QR directly from the dashboard — no searching, no setup.

Once scanned, the pump connects automatically, keeping users safely inside the car.

📱 Key improvement: Reduced entry friction by bringing the payment action to the home level.

2. Pump connection & fueling setup

After scanning, the pump connects instantly, and the driver can choose how much to refuel — by preset liters (10L, 20L, 40L), a full tank, or a custom amount.

The UI clearly shows price per liter and estimated totals, helping users feel in control before paying.

📱 Key improvement: Clear pricing and custom options build confidence without adding complexity.

3. Payment & confirmation flow

Users review the Fuel Summary, confirm payment via saved card or Apple/Google Pay, and instantly see a success message with loyalty points earned.

The experience feels fast, transparent, and rewarding — everything happens within a single, secure flow.

📱 Key improvement: Integrated loyalty feedback and real-time confirmation increased user trust and completion speed.

Prototype (recording)

🧪 Usability testing

We tested the high-fidelity prototype with 5 participants, all frequent drivers familiar with mobile payments and fueling apps.

The goal was to validate the clarity of the QR scan flow, fuel amount selection, and payment confirmation.

All sessions were conducted remotely.

Test flow

Scan QR to connect pump

Choose fuel amount (preset/custom)

Confirm and pre-authorize payment

Review summary and finish fueling

🗺️ Each participant completed the flow using a clickable Figma prototype.

Questions & Hypotheses

Will users understand that scanning the QR connects the pump automatically?

Will the fuel amount and payment flow feel simple and fast enough?

Does the stay-in-car process feel safer and more convenient than the current experience?

Results

✅ 5/5 participants understood that scanning the QR initiated the fueling process.

✅ 4/5 participants preferred the preset amounts but liked having a custom option.

✅ All participants said staying inside the car felt faster and safer.

⚠️ Minor feedback: Countdown and ticket blocks (in earlier versions) felt too big and visually aggressive.

📊 Measuring success

Was the project successful and why?

The project successfully met its design goals — demonstrating a faster, safer, and more modern refueling flow through the stay-in-car payment concept.

The redesigned flow cut unnecessary steps, letting users complete payment in under one minute.

Usability testing confirmed the experience felt trustworthy, convenient, and time-saving — three qualities that directly align with BP’s digital vision.

Metrics and KPIs

Since this was a concept project, success was evaluated through usability feedback and heuristic goals, not live analytics.

If implemented, success would be tracked through:

⏱ Checkout time reduction — average payment time (goal: ↓40%)

📈 Adoption rate — % of users paying via “Fuel & Go”

🔁 Repeat refuels — % of returning users (goal: +15%)

🌱 Future vision / next steps

Long-term vision

🚗 In-car integration: Connect BPme with Android Auto and Apple CarPlay, allowing drivers to start, confirm, and pay for fuel directly from their dashboard — no phone handling needed.

🎨 UI refinement: Add micro-interactions and progress indicators for fueling confirmation and loyalty tracking to make the experience more reassuring and polished.

🎁 Smart loyalty program: Introduce auto-applied rewards and personalized offers based on refueling habits, station visits, and fuel type — strengthening retention through relevance.