This is the project that caught the attention of Daimler's board members. We had the chance to meet Dr. Z as well as all the other executives during their yearly meeting. They were extremely impressed, and subsequently what lead me to Mercedes.
Topics: Connected Cars, Fintech
Roles: Visual design, Interaction design, Interface design
Tools: Adobe Illustrator, Adobe Photoshop, Sketch 3
Team: 1 designer, 1 pm, 2 engineers
Aligning the vision with the brand
For the Mercedes driver, time is the only currency that matters. Yet when leaving a parking garage or passing a toll booth, time is still wasted fumbling for coins and credit cards. We're not getting from point A to point B in the fastest way possible. So we created Benzpay to move the point of sale into the car.
Research and planning
Knowing senior management has a short attention span, so I designed our prototype with three clear use cases in mind. Speaking to drivers and industry experts, it became clear gas and parking were two popular use cases. For the third use case, it was important to be creative and take a risk on a use case a little more out there.
Taking a risk
Not everyone was a fan of going with "events" instead of "toll booth" but here is my reasoning: (1) Payment solutions for toll booths such as FasTrak already exist. (2) It's one thing to make your life easier, it's another to make it more interesting. I want to appeal to the emotional side of the product. (3) Completing event transactions on ticketmaster or eventbrite requires no major external infrastructure.
To make user input more intuitive, I created a user interface with a clear hierarchy of menus. A common gripe from Mercedes c300 owners is that the heads-up display looks like it's touchscreen but it's not. For interfaces without touch support, it's common to get lost or forget where you are.
That's why I made the navigation bar visible at all times. The drawback is this takes up a lot of valuable space on the interface. My solution was a bar with a smaller footprint. I achieved this by increasing the background transparency and reducing icon clutter, with the compromise being that icons are no longer labelled.
Typography and layout are especially important factors for a safe driving experience. I used a variation of color, contrast, and weight to distinguish what really matters at a glance from details that matter on a closer read.
An example of this can be seen in the payment history view. The first thing the driver sees is the amount paid followed by the vendor name. Payment details such as credit card number and bitcoin address are more confidential and significantly less visible from a distance.
Mapping interaction with existing hardware
Rotating the wheel BlackBerry style makes the selector scroll up, down, in and out of the menus depending on the context of the selector. Shifting the wheel left and right toggles different views like "payment history," "payment preferences," and "nearby transactions."
Product and results
When driving, there's no time to type in amounts and add in signatures. Transactions are triggered based on geolocation, prices are programmatically calculated. Using GPS coordinates to initiate transactions also makes it more secure. In other words, the driver just needs to confirm the transaction with a click of a button.