BP Portugal - Mobile Payment App

BP Portugal - Mobile Payment App

A mobile payment solution in times of pandemic to help drivers fuel faster through a contactless payment experience.

Company
BP Portugal - Global Energy Company

Product
Mobile Payment App

Deliverable
New product (standalone mobile app)

Timeline
24 weeks (Discovery to app)
Discovery 6-weeks
Delivery 18-weeks

Role
Lead UX Designer

Team
Solution Architect, Business Analyst, IT Service Manager, Payments Portfolio Manager, Fleet Portfolio Manager, Payment Architect, Station Manager SME,
Business Owner, Lead UX Design, Product Designer

My Role

I lead the design efforts, collaborating with a cross-functional team, and ensuring that the design of the product is aligned with the BP's business strategy.

Develop product design strategy.

Providing design directions & feedback and guidance.

Creating design deliverables and collaborating with developers.

Ensure design quality & conducting usability testing.

Conducting user research & managing stakeholders.

Impacts

Accelerated Payment Process

Achieved a ~40% reduction in average transaction time, addressing the goal to "complete fuel payments faster and without leaving the car."
Enhanced User Convenience & Safety

92% of participants preferred the mobile payment solution over in-store payments, citing its convenience and reduced physical contact, directly addressing key user pain points during the pandemic.
Increased Pump Throughput

Projections indicate the app could increase the number of transactions per pump during peak hours by up to 25%, optimizing station efficiency.

Overview

In the middle of the pandemic, BP Portugal was on a mission to reimagine how people could pay for fuel and provide a seamless and fastest pumping experience to consumers.

BP Portugal wanted to make the fueling process faster, safer, and more efficient for both customers and station staff.

THE CHALLENGE

Adapt faster to the changing landscape of non-physical interactions.
However, there were important constraints:
No new hardware integrations allowed.
No reuse of international BP apps due to legal and UX differences.
No third-party services due to compliance and security risks.

⚠️ Problem misalignment from day one.
The client came with a solution already in mind—but not a clear problem. The scope kept shifting, and user research was seen as a box to check, not a source of insight.

PAIN POINTS

// Long queues at the counter, especially during peak hours.
// Inconvenience of going inside the store just to pay.
// Lack of a fast, intuitive digital payment alternative at the pump.
// Privacy and trust concerns related to trying a new mobile payment method.
// Desire for safer experiences heightened by the COVID-19 pandemic.

ORG GOALS

Deliver a mobile-first solution compatible with both business and consumer users.
Ensure accessibility and clarity in flows involving QR codes and vehicle selection.
Provide guidance and feedback to build user trust, especially in the first-use experience.
Align app behavior with operational constraints while minimizing cognitive effort.

Complete fuel payments faster and without leaving the car.
Track fuel expenses and access digital receipts.
Avoid waiting in line at the station cashier.
Ensure fleet card compatibility and transaction accuracy.

Reduce cashier queues and improve self-service experiences.
Increase digital adoption without relying on third-party hardware or platforms.
Address behavior shifts post-Covid and rising demand for contactless payments.
Recover lost revenue and strengthen the brand’s “go digital” positioning.

USER GOALS

DESIGN GOALS

Design Process Summary

01 Learn. Researched user pain points at the pump and business goals around checkout speed. Conducted interviews and analyzed service data. 02 Explore. Mapped journeys for private and fleet users, built user profiles, and outlined key tasks. 03 Select. Prioritized flows for mobile-driven payments and license plate recognition. 04 Develop. Designed and prototyped key screens for pump activation and contactless payment. 05 Refine. Tested with users, simplified decision points, and addressed failure paths. 06 Deliver. Created final specs and flows to support implementation with product and engineering.

01 Learn

I conducted user interviews across two key segments—professional and private drivers—to explore whether users truly want to avoid entering the shop after refueling.

Using Dovetail, I performed a thematic analysis that surfaced trust, convenience, and control as key drivers of adoption.

To align business goals, I ran a design sprint workshop with stakeholders focused on boosting sales and improving customer satisfaction in the context of changing mobility patterns and digital expectations.

User recruitment: We hired an agency to recruit our user targets.
Profiles: Non-client consumers, Client consumers, Fleet client consumers, Fuel station managers

USER INTERVIEWS

Non-Professional Drivers

Where the money is, 80% of the revenue
60% are fuel-only transactions (so don’t cannibalize impulse business)
It is a bigger but more complex MVP

Professional Drivers

Only accounts for 20% of revenue
Requires a business loyalty card validation solution, which adds significant complexity

Data Analysis

Insight: While non-professional drivers made up the majority of revenue, professional drivers introduced greater complexity (e.g., needing fleet card validation).

02 Explore

Conducted a remote design sprint due to the pandemic to align on user needs and define personas. Mapped user journeys across different customer segments to uncover pain points and opportunities. Faced shifting scope and pre-set solution assumptions—clients prioritized features over problems and later requested stakeholder interviews during usability testing, revealing misalignment between discovery and validation.

Design Sprint

To share discovery insights remotely, we ran a design sprint aimed at shifting from a feature-first to a user-first mindset. However, the session lacked stakeholder alignment and was treated as a routine workshop rather than a strategic tool. A strong HIPPO effect limited divergent thinking, making it hard to challenge assumptions or focus on user value.

Still, the sprint helped us map user journeys, validate early assumptions, and surface hidden pain points—especially through the inclusion of diverse voices like fleet managers and station operators.

🧠 Key Lesson
Design sprints require clear problem framing and stakeholder buy-in. Without them, their potential to drive innovation and user-centered thinking is severely constrained.

User journeys

User Groups

After understanding that the main revenue came from B2C clients, we focus on the creation of 3 profiles based on the user interview data:
The Time optimiser
The deal hunter
The anti free-market

personas

03 Select

Created and tested multiple wireframe concepts in collaboration with the client team. Despite exploring alternatives, the team moved forward with a QR-code solution, driven by stakeholder preference.

While we couldn’t shift this HIPPO-led decision, I ensured the concept was technically feasible and operationally ready for fleet drivers.

Initial wireframes

User Flow

The journey for fleet drivers focused on speed, ease, and integration with internal systems.

Vision: After arriving at the station, drivers scanned a QR code to activate the pump, selected the payment method linked to the company account, and began fueling. The system automatically captured mileage and vehicle ID, streamlining reporting and eliminating the need for paper receipts or store visits.

User flow

04 Develop

Evolved selected wireframes into a complete design system, covering key screens, edge cases, and pump activation logic.

Created detailed design specifications to guide developers, including interaction flows, error handling, and API handoff details.

Collaborated closely with engineering and product to ensure the experience was feasible and aligned with technical constraints.

Prototype

05 Refine

Tested the prototype with 6 participants across key user groups—fleet drivers and managers. All users completed core tasks successfully and expressed willingness to use the solution.

The main friction appeared at the entry point: scanning the QR code. Participants found the “Pay here” messaging unclear, particularly for fleet users unfamiliar with the service. These insights informed adjustments to entry-point copy and onboarding cues to reduce ambiguity.

3 Fleet drivers client consumers

3 Fleet Managers client consumers

User Testing

COVID-19 raised some challenges to user testing, like:
Ensure participants knew how to use remote technology (QR code).
Capturing insights from a remote session.
Due to the lack of technological knowledge of some users, addressing issues during a remote test become challenging.
Remotely explain the technology and prototype limitations.

Despite this, participants navigated the prototype well.
Key friction: Simulating the scanning the QR code and interpreting vague messaging like “Pay here,” which wasn’t clearly targeted to fleet users.

Data Analysis

Final Prototype

06 Deliver

We refined the designs based on user testing feedback, addressing QR code messaging and user clarity issues.

Final designs were presented to stakeholders and handed off using the client’s design system, with specifications documented in Figma and Zeplin. All user research findings were organized and shared in a Miro board to support future implementation and alignment.

Final User Flow

App Demo

Lessons Learned

This project highlighted the importance of stakeholder alignment and timing.

Running a design sprint before clearly framing the problem made it difficult to shift conversations from features to user needs. The presence of a HIPPO effect reinforced assumptions and limited innovation.

Despite these challenges, the process reinforced the value of user research, especially in reframing the problem space and advocating for user-centered decisions.

Under pandemic constraints, pushed to remote sessions, especially hard when trying to overcome prototype limitations.

Finally, delivering a functional, user-validated solution within these constraints taught me the importance of flexibility, clear communication, and advocating for the role of UX at every step.

Key Takeaways

// Problem definition first: Starting with a poorly framed problem led to misaligned expectations. Future initiatives should prioritize scoping and stakeholder alignment before jumping into solutions.

// HIPPO decisions limit creativity: Without a clear user perspective, top-down decisions (like using QR codes) constrain the solution space. UX needs a seat at the strategy table.

// Remote research requires extra care: Usability testing during COVID demanded clear onboarding and support for users with varying digital literacy, especially in high-friction interactions like QR scanning.