top of page
Bertha's new look
Bertha - Android and iOS app - Mercedes-Benz.io
When I started working for the company, Bertha was introduced only to the whitelisted beta users. The app was simple and easy to use, but it didn't really have a clear brand identity.
In order to understand what Bertha is, why it exists, and what brand image we want to communicate with people, our product manager organised a workshop to brainstorm Bertha's identity. Based on the outcome of this workshop, I redesigned the app to reflect Bertha's brand.
Bertha is a trustworthy, smart, and friendly companion for all drivers.
We believe in maintaining the quality of data and the security of our users' personal information. It is also important that users trust the information displayed in the app and feel secure adding personal data such as a payment method.
Moreover, pumping gas is an annoying task for many people, so we wanted to become a companion for users to make this experience a little bit more fun.
Colour
We chose ultramarine blue as as a primary colour, a colour of trust and loyalty. It doesn't only reflect Bertha's brand identity but also its practicality and accessibility for users.
Compared to other kinds of blue such as baby blue, ultramarine blue creates strong contrast with white texts, so the button texts are more readable for different kinds of users.
Also, on the map view (where users search for the gas station), we are using three different colours for stations: green for cheap, yellow for average, and pink for the expensive stations. Because we wanted to avoid a colour that users would see in relation to the price range, blue was the perfect option for Bertha.
Icons and illustrations
I created icons with more rounded features and added more illustrations to the app in order to make it look fun and friendly. We also decided to use a woman in many illustrations to differentiate Bertha from other mobility apps that tend to look very masculine.
Components
Another designer and I collaborated on simplifying the components of the app. We made sure that we don't have similar components that could be replaced easily. We also decided to work with an 8-pixel grid system for the spacing so that the spacing looks consistent across different screens.
A few of the components we have on Bertha
Font size and tappable areas are bigger for components of features that users tend to use more often while driving.
Many users put their smartphone on the phone holder in their cars so the phone is often far from their eyes. For this reason, texts and tappable areas have to be big to allow users to interact with the app easily and smoothly.
For example, when users search for gas stations on Bertha while driving, they prefer to use the list view over the map view. That's because panning and zooming interactions for map are simply too time consuming and complicated. List view, on the other hand, only requires users to scroll or sort stations by price or distance. The elements on the list view are bigger than those used on other screens so that users can easily read gas prices and tap stations to view more details without having to take the phone out from the phone holder.
I simulated the phone holder inside the car, and conducted user testing to validate the accessibility of those components used on the list view.
Bertha before rebranding.
This is how Bertha looked like when I first joined the team. It was easy to use and practical, but it didn't reflect Bertha's brand identity. Some elements were too small for drivers to interact with.
Those screens are design by another designer.
New Bertha
Icons and illustrations help the app look friendly and fun while the blue and clean look of screens makes the app look smart and trustworthy. Some components are purposefully made larger than usual to allow drivers to interact with the app even faster and easier inside the car.
bottom of page