top of page
Launching Bertha Pay
Bertha - Android and iOS app - Mercedes-Benz.io
Bertha is an app that allows users to look for the cheap gas stations and pay for gas from inside a car.
I led the design of payment experience and collaborated with a product manager, developers, a business development manager, and a communication manager to launch the feature.
When I joined the team, another designer has already started working on the very basic flow of the payment feature. Since he decided to leave the company, I took over his role and iterated the payment flow based on the user test results and user feedback.
Bertha Pay was soft launched in January 2018, and market launched in April 2019.
Bertha Pay.png
Early insights from the gas station.
In order to understand the user behaviour around the car and  validate the payment flow, I conducted user testing with 9 testers at the gas station. This prototype wasn’t polished since we wanted to first understand whether if the flow works for the users before putting much time on finalising the design. 
​
A moderator and an observer met with a tester at the grocery store and we drove together to the gas station to observe the entire journey from searching to paying for gas.
Screenshot 2019-07-14 at 19.43.12.png
After the test, together with the team, we summarised the test results and listed up the pain points users were experiencing.
Screenshot 2019-07-14 at 19.53.04.png
Screenshot 2019-07-14 at 19.52.40.png
Finding 1: Mobile payment is still new to many people and users don’t feel secure enough to pay with the app.
One of the biggest challenges I observed during the test was that users did not feel confident about mobile payments. Some testers went inside the shop to double check whether the transaction was completed successfully. They were also unsure if the cashier was notified about the transaction.
​
Here is how the old design looked like:
OLD-Success.001.jpeg
These screens are designed by another designer.
Although we communicated with the users that they can drive away safely through the app, either they quite simply did not read the copy or the copy was just not enough to make them feel confident that the transaction was successful.
​
In order to help users leave the station without any hesitancies, I made some design changes.
Progress bar and animation on the success screen.
Progress bar doesn't only allow users to check how many steps they have left, but it also helps users to make sure that each step has been completed successfully. Also, I created an animation of a girl leaving a station to make the experience more fun and engaging.
GIF.png
New Payment Flow 3.gif
Payment history and push notification.
I also decided to add a payment history and push notification to allow users to confirm the transaction they’ve completed.
Payment History.png
But those design changes only help users who have already decided to use Bertha Pay. Since the main goal of the feature was to generate revenue, it was very important for us to reach people who wouldn't normally pay with the smart phone.
Announce the launch of payment feature and motivate users to use it without having to interrupt  a user action.
In order to announce the release of Bertha Pay to all existing users, I decided to add a banner on the home screen of the app. 
Unlike a popup overlay or dialog, the banner doesn't completely block and interrupt what users are doing or are planning to do. The user testing result of this banner proved that users tend to read text more carefully when their action is not completely interrupted.
In addition, the tutorial screen is linked to the banner and it allows users to learn how easy and secure it is to use Bertha Pay so that they would get more motivated to use the feature.
GIF.png
Banner.gif
Finding 2: More edge cases.
With user testing and multiple QA sessions, we found more edge cases caused by variables that we could not control (such as service providers). After the test, I sat down with developers to map out all edge cases and added more error screens to communicate with users what exactly happened and what steps they should take next.
Screenshot 2019-11-24 at 20.37.36.png
IMG_7040_edited.jpg
Validate new design and launch.
I iterated some other screens and conducted the user testing again.
The test result showed 100% success rate of payment with the app, so we launched the feature nationwide. Bertha Pay is currently available at 420 gas stations with more to come.
​
Here is the prototype of the complete payment flow.
GIF.png
New Payment Flow 6.gif

© 2025 by Karin Kotani

bottom of page