Mercedes-Benz Fuel & Pay: Shipping at Enterprise Scale
Refined a contactless fuel payment feature, then led its integration into the Mercedes Me app and in-vehicle dashboard, bringing it to millions of Mercedes-Benz owners.
End-to-end design
Designed the improved payment flow from exploration to delivery
Integration lead
Led the integration of the feature into the Mercedes-Benz mobile apps
Advisory
Played an advisory role in the integration of the feature in the vehicle dashboard
Yes, that Mercedes-Benz
It took me quite some time to put together this case study due to its natural complexity. For this story to work, I broke it down into two distinct parts:
Iterating on an existing feature
Leading its integration into different ecosystems
With that being said, let's start by first naming the key actors of our story:
Bertha
Bertha is a spin-off app from Mercedes-Benz that allows people who don't own a Mercedes to browse for cheap fuel prices and pay for fuel straight from the app.
Mercedes Me
Mercedes Me is a companion app that enables Mercedes-Benz owners to interact with their vehicles and purchase additional services.
Two goals, one shot
Back when I was leading the design efforts for the Bertha app, I was approached with the task of exploring what an integration between Bertha + Mercedes Me apps could look like.
It's worth mentioning this happened during peak pandemic times and social distancing was leading all conversations.
After a few product discovery sessions, we decided to break that down into two phases:
Perfect the digital payment flow
As Bertha Pay (the digital payment SKU) was already live for some time, we had a juicy repertoire of insights on improvements we could make and opportunities to explore.
Integrate the feature into the Mercedes-Benz ecosystem
The goal was to enable Mercedes-Benz owners with a contactless and convenient way of paying for fuel without going into a gas station.
Nothing about fuel is simple
The fuel payment ecosystem is fragmented across multiple companies with two distinct payment flows (pre-payment and post-payment), each requiring different user journeys. This case study focuses on pre-payment.
There is nothing trivial about enabling people to pay for fuel without going inside the gas station or interacting with the card machines located next to the pumps.
The entire ecosystem is fragmented, different parts of the journey are owned by different companies and, as you can imagine, that has an impact on how the end consumer gets to experience it.
The team of designers from Bertha did a fab job of shipping the first iteration of the feature so, to make it perfect, we just had to take a closer look at the most common journeys and optimize them.
In terms of journeys, in Europe, there are two major payment flows and they depend on the country you are in and the station brand. They are:
Post-payment
Most common at supervised stations, where there's a cashier available at all times to process the payment.
Pre-payment
Most common at self-checkout stations, it's a way for the station to know the customer can pay for the fuel.
In this case study, we will be focusing on the pre-payment flow.
We talked to everyone
Mapped the full pre-payment journey through stakeholder discovery, user research (~15 qualitative, ~1k quantitative), field observations at gas stations, customer service interviews, and a deep dive into the payments API.
We went through the entire pre-payment journey to understand where people got stuck, which tasks we could simplify, how to strengthen the value proposition, and also how to optimize the revenue streams.
We approached the problem framing from several angles, including:
Discovery sessions with stakeholders
To align on expectations, define key metrics, and better understand the dependencies
User Research
Qualitative ≈ 15 users, Quantitative ≈ 1k users
Field sessions at gas stations
To observe in real life how consumers and station staff interacted with our solutions
Lightning talks with Customer Service
To surface the most frequently reported complaints
Deep dive into the payments API
To understand which kind of data we could pull from the payment gateway API
Kill the noise, find the signal
Based on what we learned from our users & stakeholders, we drafted the following hypotheses:
We Think That
People feel uncomfortable paying with their phones at a gas station when they get the dirty looks from other customers who are unaware they can pay digitally
Which is Why
We need to reduce the time Bertha Pay users spend at the gas station
We Think That
People get anxious about something going wrong with their payment once they leave the gas station, as it can often lead to a police report
Which is Why
We have to be more explicit as to when it's safe to leave the gas station
Shut up and show me the work
Fast-forward a couple of months, a few dozen prototypes, usability tests, and way too long e-mail threads, here are the highlights of what we shipped:
Tap, not Type
We could fetch all available pumps when the flow is triggered. Instead of prompting people to manually type the pump number, we made this action available with a single tap.
A quicker decision-making metaphor
We introduced a friendlier interaction pattern optimized for one-hand usage. Some would say that also made it easier to forecast earnings. Some, not me 👀
Leave in peace
We introduced a cheeky loading state with an explicit copy to keep people entertained & informed while waiting for the payment to be processed.
Cross-app Awareness
Some banks send "fake positive" for pre-payments and only debit the amount once the transaction is concluded. We introduced contextual warnings to keep people informed.
Safe Travels
We streamlined the last step of the journey and highlighted the most valuable information people need to know to leave the station.
Sweet Branding
While we were at it we took the opportunity to strengthen the Bertha Pay branding. We all deserve nice things. Truth is: I just wanted an excuse to squeeze in this odd animation.
Now do it again, everywhere
Now that we managed to perfect the feature (wow), we felt confident enough to expand it to millions of happy Mercedes-Benz owners.
In case you already forgot, this was a two-step project. A reminder of what the β side was about:
Integrate the feature into the Mercedes-Benz ecosystem
The goal was to enable Mercedes-Benz owners with a contactless and convenient way of paying for fuel without going into a gas station.
During the discovery & exploration phase of the project, we already looked into what was available in the Mercedes-Benz ecosystem and spotted existing touchpoints we could tap into.
Mercedes-Benz already had a live service for electric cars to find and recharge the vehicles. And that happens to be exactly what we needed.
The journeys were essentially the same and that would make the integration of our digital fuelling feature more resource-efficient.
Designing is the easy part
Integrating across Mercedes-Benz business units was more about stakeholder alignment than design. Created a stakeholder map, problem framing canvas, and user story map to keep cross-unit ownership and priorities from getting lost.
This bit of the project was more about mingling with the right people than building a feature itself. When you design for a company building at scale it's not uncommon that different features are led by, not only different teams but different business units entirely.
To move forward, we put together two operational deliverables that helped us navigate the cross-unit interactions.
Those conversations were instrumental to the success of this project. They allowed us to better understand the ecosystem we were trying to barge into and guided us on how to best integrate with existing touchpoints.
Stakeholder Map
A simple but efficient map with the owners of each topic so I would always have people making decisions involved at all steps.
Problem Framing Canvas
I shared a problem framing canvas that helped people from different units to understand where we were coming from, what we had learned, and what we were trying to accomplish.
User Story Map
One of the risks of working with different divisions is losing sight of who is doing what. The story map helped me better prioritize tasks and understand with whom and when to follow up.
What did I actually do?
- Made sure everyone understood what we were trying to build
- Managed the communications funnel
- Found answers to complex questions
- Together with designers from other units, transposed the experiences
- And most importantly, oh well, delivered
We actually shipped it
It wasn't an easy project to deliver but we managed to do it in record time, in less than 6 months the new SKU was already up and running.
In terms of numbers, the task completion rates were pretty positive and the number of people subscribing to the service was even higher than the original forecast.
For confidentiality reasons, I cannot disclose specific figures.
By the way, here's the press release for the feature.
The full journey
From finding the station, to selecting the pump, paying, and driving away. The complete Fuel & Pay experience.
Mercedes Me integration
Fuel & Pay living inside the Mercedes Me app, seamlessly integrated with the existing vehicle services ecosystem.
One-hand operation
The entire payment flow was optimized for single-hand usage. Pay for fuel without putting your phone down.
Dashboard integration
Fuel & Pay can also be triggered straight from the vehicle dashboard. No phone needed.