Car Climate Control

Dashboard interface

In early 2018 I had a potential client hire me to work on a trial project together. Even though this was a faux project to test out our working relationship, I was still compensated fairly. I have strong feelings about companies who convince designers to do trial work for free but I’ll save that for a future blog post.

The mission was to create a visually stunning UI for a car dashboard. The client mostly wanted to see if my aesthetic meshed with their vision. Time-boxed at 10 hours, I chose to do climate controls because it was the system I was most comfortable and familiar with.

My process started by researching car UIs out there in the real world. I went through all the major manufacturers to see where the car dashboard eco system was currently at. Unsurprisingly, it’s a mess. Not only are most of the experiences pretty poor but nothing really looks great. In my opinion, Tesla does the best job at both but even they have a lot of room for improvement. Since this project was focused heavily on the visual side of things, my next step was to find things that inspired me from an aesthetic standpoint. I scoured dribbble, pinterest, and blog posts until I had enough examples that I thought really shined. Below is the moodboard I put together to help inspire my design.

From the get go, I had a pretty good vision of what I thought the layout would be. I scribbled it down on paper, and when I say scribbled I’m using the term pretty loosely 😀. Since this was a quick project, I didn’t have time to do any user testing or much iterating from the initial concept so I jumped right into high fidelity design.

There were a few pain points to using a car touch screen I knew about from personal experience. I had to make sure my design was not distracting, especially while the vehicle was in motion. The user needed to expend as little time thinking about their interaction as possible. To do this I kept only the most important information on the screen. I think most car UIs suffer from severe information overload.

Ease of use was also an extreme priority. I made touch points as large as possible, with ample empty space between and everything easy to see at a glance. Friendly, simple typography was used to make the screen as inviting an unintimidating as possible.

For the visual style, I realized throughout my research of current interfaces that everything was very stylized, too much in most cases. Cars are very personal devices so it makes sense that the touchscreen aesthetic is a part of this. To that end, I tried to make the visual style as ambiguous as possible. It doesn’t lean too flat, it’s not to slick. It’s not overly masculine or feminine. It works in low light or bright light. It was important that users weren’t turned off to the visual style, in fact I’d be pleased if they didn’t notice it at all.

To wrap up, I’d love to show you a rough time lapse of how the design progressed from start to finish. I hope this gave you a little insight to my process, especially as it applies to quick, conceptual projects.