Snapshot: How we built a glanceable automotive UI
Meet Don, our lovely UI-UX Designer. In this chapter of Snapshot, Don explains how he designed an interface that isn’t really supposed to be looked at, and when it occasionally goes wrong, how he finds empathy in ambient music.
Dead Trees and Geocities
I started working with dead trees as a print designer back in the year 2000, but before too long I got sucked into the world of web design projects. This was an era when web design as a discipline was still quite new and we were all haunted by the memory of some harrowing early efforts.
On the plus side, it taught me a lot about collaboration because you really needed many different parties to build a successful website in the early days of the net.
Part of the process of building these websites involved me having to interview clients to find out what it was they really required — it’s not always immediately apparent, even to the client. Through this process I discovered by chance that empathy and trying to understand users was an element within the work that I gravitated towards.
Over the next few years, UI and UX began to emerge as distinct and well-defined disciplines in their own right, a place where empathy, design and interactions could combine, and I realised that it was something in which I wanted to be involved.
My first designs were horrible
It’s true — no one gets it right straight off the bat. If I may offer one piece of advice, it would be to surround yourself with the best people possible. Seek them out and learn. I was very fortunate to work alongside Patrick (Weissert, German Autolabs co-founder and CPO) and Minna (Hekanaho, Head of UX) who were a huge help when we were building our UX principles. These principles became the cornerstone of the work we went on to do for Chris, the world’s first in-car voice assistant.
When you’re building a graphical user interface (GUI) to go into a vehicle, there’s a quite unique and unusual challenge: the interface needs to be designed in such a way that it does not distract the driver, but also should be glanceable enough that all the essential information is quickly conveyed to the user. Therefore our number one UX principle for this project was: keep your eyes on the road. It really helped to limit the potential for feature creep in our designs.
Another mantra: Perception is key. If the driver can perceive the information that they need without getting distracted by a complicated UI, that’s great. We learned how to create minimal and low information density elements in the UI that could communicate without dominating the eye-line and consequently, the drivers’ attention.
Automotive UX is still such a new area. I think Mercedes’ MBUX is doing some interesting work in terms of delivering a next-gen driver experience, although they’ve got a distance to go with their presentation if you ask me. Tesla meanwhile seem to think that all their cars are autonomous vehicles, such is the complexity and depth of their UI. Keep your eyes on the tablet.
Exit the void: Talk to people
Working systems can be one of the hardest things to establish and maintain in a fast-moving startup. And just as nature abhors a vacuum, one of the golden rules for designers is: Don’t design in a void. So a really important working system to put in place was the introduction of regular and intensive user research and feedback sessions.
User research is an essential component since assumption is the mother of all.. Well, you get the drift. Testing helps us to understand intent and often reveals new angles of attack that we could never previously have considered. If you’re designing anything, from an interface to a product to a website to a kitchen, the best thing you can do is to test that it works in the real world.
Once we had our archetypal Chris users mapped out, we made sure to print them out nice and big and place them in the kitchen area in the office, encouraging our team to make comments and place sticky notes where they had objections or challenges. Publicly visualising this process allowed us to gather a lot of fresh insights, and it made the team feel more included in the construction of our new automotive UI.
Developers are people too
There can be a lot of good natured friction between the devs and, well, anyone who is not one of them. I’ve learned to cultivate strong friendships with the developers at German Autolabs because their input and insight is often invaluable when it comes to helping me understand how their unusual minds work. I’m partly serious: these conversations have led to redesigned components, fresh colour approaches and occasionally, throwing the whole thing in the bin.
When the latter happens, there’s always somewhere I can retreat to. I’m a huge fan of music in general, and I especially enjoy retreating into the warm interplanetary sea of ambient music. I’ve put together a nice Spotify playlist, so that when things are getting a little tense in your world, you can find some solace and rediscover your empathy. Empathy powers good design.
Essential takeaways
If we have to boil it down to the very essence, my two biggest learnings regarding Voice UX for pro drivers would be:
1 — Sit next to the driver, talk to them and understand how hard the work really is. Ask if you can make a video and really put yourself in the position as if you had to deliver a package in the next 15 minutes. Understand how hard this job is. You can’t make anything great until you’ve lived it yourself.
2 — Now that you have new requirements based on deeper empathy and real-world experience, pause everything that you learned before and start again from scratch. It’s the only way to get a new perspective. Only now can you unpause the old work and see what fits with the fresh perspective, and what does not. You might want the ambient playlist at this point.
And finally: Don’s one stop shop of useful links
From O’Reilly’s Laws of UX to Bandcamp playlists, if you’re looking for UX / UI design inspiration, look no further. It’s good to share. ✌🏽
UX resources
- Laws of UX
- Design Systems Book by Alla Kholmatova
- Nielsen Norman Group
- Design Principles
- Type Scale
- ColorBox
- Color schemes generator
- The Nine States of Design
If I had to take just three links to a desert island
(A selection of) programs I use
Album of the Year 2020
To find out more about how we build AI-powered voice assistance for logistics and delivery fleets, visit germanautolabs.com — and as always, thank you for reading.
