TL;DR Iterating on an existing feature and leading the integration of it into different ecosystems
My Role
🦄
Designed the end-to-end experience of the improved payment flow🚗
Led the integration of the feature into the Mercedes-Benz mobile apps🧙
Played an advisory role in the integration of the feature in the vehicle dashboard
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 distinctive parts:
With that being said, let’s start by first naming the key actors of our story:
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 also, to pay for fuel straight from the app.
Mercedes me is a companion app that enables Mercedes-Benz owners to interact with their vehicles and purchase additional services.
Back when I was leading the design efforts for the Bertha app, I was approached with the task of exploring how 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:
As Bertha Pay (the digital payment SKU) was already live for some time, we had a juicy repertory of insights on improvements we could do and opportunities to explore.
The goal was to enable Mercedes-Benz owners with a contactless and convenient way of paying for fuel without going into a gas station.
TL;DR; Pre-payment requires people to pay before fuelling and post-payment only after they complete
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 at 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:
Most common at supervised stations, where there’s a cashier available at all times to process the 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.
TL;DR; Talked to a whole lot of people to better understand what were the main topics we had to address
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:
To align on expectations, define key metrics, and better understand the dependencies
Qualitative ≈ 15 users
Quantitative ≈ 1k users
To observe in real life how consumers and station staff interacted with our solutions
To surface the most frequently reported complaints
To understand which kind of data we could pull from the payment gateway API
Based on what we learned from our users & stakeholders, we drafted the following hypotheses:
People feel uncomfortable paying with their phones at a gas station when they get the bad eye from other customers that are unaware they can pay digitally
We need to reduce the time Bertha Pay users spend at the gas station
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
We have to be more explicit as to when it’s safe to leave the gas station
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:
Remember we studied the APIs during the exploration? As it turns out, we could fetch all the 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.
We went through the most common fuel purchases and introduced a friendlier interaction pattern optimized for one-hand usage.
Some would say that also made it easier to forecast earnings and increase the average purchase price. Some, not me 👀
We introduced a cheeky loading state with an explicit copy to keep people entertained & informed while waiting for the payment to be processed.
Some banks send “fake positive" for pre-payments and only debit the amount once the transaction is concluded.
With that in mind, we introduced contextual warnings to make sure people are informed at all times.
We streamlined the last step of the journey and highlighted the most valuable information people need to know to leave the station.
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.
I know, it's a long one! The first bit was about refining the feature and now I will show you some of the methodologies I applied to keep everyone aligned.
I bet you have questions and I might have the answers! Why don't you ?
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:
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.
TL;DR; It was essential to keep track of who was responsible for what and what we were doing exactly so the information would be diluted across the communication channels
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 unities entirely.
To move forward, we put together two operational deliverables that helped us navigate the cross-unit interactions.
Those conversations were quintessential for the success of this project, they allowed us to better understand the ecosystem we were trying to barge in and guided us on how to best integrate with existing touchpoints.
A simple but efficient map with the owners of each topic so I would always have people making decisions involved at all steps.
Considering the complex nature of all-things-payments, I shared a problem framing canvas that helped people from different unities to understand where we are coming from, what we have learned, and what is that we are trying to accomplish.
One of the risks of working with different divisions is losing sight of who is doing what and where, particurlarly when those unities are organized around different project management tools.
The story map helped me better prioritize tasks and to understand with whom and when to follow up on the progress made.
In terms of responsibilities, I was the one leading the integration and my role was:
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.
What was the most challenging part of the project?
Working on a project that involves several divisions can be daunting so it’s important to always get the right people in the right meetings
What was your biggest a-ha moment?
When working with third-party services it’s always helpful to check their API to see which data points we can get
What were the biggest limitations you found?
There’s only so much one can accomplish with a digital application. We’ve considered awareness marketing campaigns at gas stations to other customers would know that some people are paying with their phones
How did you go about user testing?
For consumer services that interact with physical spaces doing it behind a screen is not enough. Field observation is key
What annoyed you the most?
Take into consideration the cross-app integration, like banking notifications for example.
What would you have done differently?
Some things can’t be solved with a digital interface. One idea we had during development was to introduce car stickers that indicate people who didn't go into the gas station to pay using digital payments, this way we could avoid other people calling the police on them. Yes, it happened.
Why the images here looks so...faint?
As it's the first time I introduce dark mode on my portfolio, I added a "glare counter" mechanism to not burn people's retinas with overly bright images. If you wanna know the trick, I can tell you one someday.
Ok Harold, we ran out of time. If you have more questions, find me here
...and don't hide the pain!
...