Reimagining In-Car Climate Control with Touchscreen Knobs
➜
Project Goal
To design an all-new interface that enhances the user experience of performing common tasks while driving.
Team: Solo, self-initiated
My role: UX research, UX design, visual design
Timeline: 09/2022–01/2023
Tools: Figma, Sketch, Photoshop, paper & pen
Contents
Click to navigate
➜
➜
➜
+ Prototype Video
User Research
Competitive Analysis
Personas
Design Requirements
Sketching
Wireframing
Visual Design
User Testing & Iteration
Completing the Prototype
Background
I’ve always loved cars. As a kid, my dad and I used to visit the New York Auto Show every year so I could explore the latest designs. The interior consoles were of particular interest to me. Touchscreens were just starting to crop up, and I remember most of them being terrible: small, low-resolution displays with bits of functionality awkwardly stuffed in. Still, I was intrigued by the possibility of touch interfaces organizing controls better than the usual assortment of knobs and buttons could.
Throughout the late 2010s, as I was studying user experience and product design in college, I made several attempts at designing my own touchscreen car console. They were more visual design exercises than full UX projects, but they at least got me thinking about the best ways to turn traditionally analog controls into digital experiences.
Touchscreens, like this one from Toyota, were too small – and were evidently implemented without much design thinking (source)
Research
User Research
To better understand potential strengths and challenges of an all-touch car interface, I did some user testing of my 2019 iteration with family members. I put together a quick prototype of a climate user flow, then gave the same prompts to each person to see how they handled them. My users had very different levels of familiarity with similar interfaces, which gave me a good range of perspectives.
Of the two key takeaways I highlighted, I’ll return to creating that persona later – my next task was to research a variety of existing car console interfaces to see what works great and what doesn’t.
While touchscreens are relatively new, user experience research for vehicle dashboards has a long history. This fascinating 1962 aviation video demonstrates how psychologists identified the scrolling tape altimeter as a superior alternative to the complex radial designs of earlier years.
Competitive Analysis
When I first started designing touchscreen car interfaces back in 2015, Tesla was the only major car manufacturer making a significant push in this area. Now, almost every new car comes with a touchscreen, along with a custom interface designed by the manufacturer, and/or support for the Apple CarPlay and Android Auto platforms.
Below is an analysis of some of these systems that I’ve tried out and studied.
I came away from this most intrigued by how something as traditional as a knob can be used in tandem with digital technology to bring the best of both worlds together. The Mazda approach of outright replacing the touchscreen with knob navigation felt like a step too far, but the Land Rover approach of actually integrating a display into climate knobs was an exciting new direction to explore.
I also had the pleasure of speaking with Matt Taylor, a former product designer on the Jaguar Land Rover digital development team.
Ideation
Personas
Based on my research, I created personas that broadly capture attitudes and challenges users may have when getting accustomed to a car with touchscreen elements.
Design Requirements
To focus on solving the UX challenges I identified in my research, while also addressing the concerns of my personas, I formulated the following important requirements for design solutions:
-
Mitigating driver distraction is necessary for all components. Designs are not ready unless they can be used quickly, and with minimal absorption of the driver’s attention (visual, cognitive, and motor). Features that cannot be designed in such a manner must either be eliminated, or made conditionally inaccessible (i.e. only usable when the vehicle is stopped).
-
Since many users have little to no familiarity using touch elements in a car, designs should be as intuitive and approachable as possible. Icons and other components should be easily recognizable for those used to physical controls (but need not rely on skeuomorphism or other anachronisms).
-
Traditional car controls have in many respects worked well enough for decades. To ensure that new users find learning a dramatically different interface worthwhile, it must have clear benefits for common actions.
Sketching
As soon as I began sketching, I noticed that most of my ideas were following the Land Rover approach: integrating digital elements into existing physical components. This seemed like a great way to meet my design requirements, and create exciting new kinds of interactions.
Driving mode knob displaying estimated range for an EV based on selected mode and remaining charge
LED indicators on the driver’s window adjustment switches showing which windows are open
Climate knob to adjust fan speed with a physical wheel and temp. on the integrated touch display
Volume knob with a digital display of the current setting (as a number and a circular diagram)
I was most intrigued by the multifunctional temperature knob idea, and wondered what it might look like if it was larger and incorporated even more functionality. My sketch of that concept is shown to the right.
Excited by the ideas and challenges in this sketch, I used it to define a clear scope for this project: making key vehicle-related functionality (such as climate control) as elegant and easy-to-use as possible. The hybrid digital/physical mindset would allow me to design beyond the inherent limitations of a single rectangular screen, giving me freedom to innovate, while also focusing my attention on usability and ergonomics.
Design
Wireframing
1
3
(1) I began wireframing in Figma, adding in the idea of the touchscreen also being a pushable button. Here I placed either the vent toggles or a temperature slider on the display, depending on whether the climate mode is set to auto. However, I soon realized that having button placement change depending on which mode is set was too convoluted.
(2) I scrapped the temp. slider idea, and went back to my notebook to sketch approaches that instead use the physical knob to adjust temperature as well as fan speed. I ultimately chose option B for its better visual layout and clear primary function for the knob.
(3) I was then able to complete a wireframe of a typical user flow: going from climate control off, to heat set on 72º and blowing from the legs and windshield vents.
Visual Design
Blue and red were the obvious color choices for A/C and heat, respectively. I carefully adjusted color values to create a base color for each, then used linear and radial gradients to develop an aesthetic that felt simple yet uniquely refined.
The initial screen is mostly dark to indicate that climate control is off.
Each climate mode has a distinct color to allow it to be quickly identified.
The background gradient softly brightens the interface and clearly indicates which mode is active.
When the user turns the knob, the fan speed UI elements would expand, then recede back after a few seconds.
After touching the temperature button, the numbers would smoothly animate as the knob is turned.
The vents adjustments screen has lots of buttons, so I tested it inside a car to make sure the tap targets don’t feel too crowded.
2
I was influenced by the (since updated) Apple Watch Now Playing interface. It has a similar structure: a few important action buttons on a small touchscreen, with a circular dial (the crown on the side of the device) to adjust volume. I like the color choice of using mostly white at different opacities for text and buttons, with translucent album art in the background to bring liveliness and cohesion to the interface.
User Testing & Iteration
Within Figma, I built out a prototype with interactions to move across screens, and created component variants to allow buttons to toggle on and off. I formulated tasks that people commonly perform while driving, and that would also test the discoverability of various functionality in my prototype.
Below is a summary of my users’ pain points and other important comments.
Based on this, I made the following changes:
To be distinct from temperature, a new fan speed icon acts as a simple visual indicator, and can be “filled” to the user’s desired quantity with just a tap and a turn of the knob.
Temperature can now be adjusted just by turning the knob. And there’s no longer a confusing, additional “push” function – on/off functionality uses simple taps, just like everything else.
The Sync toggle, which unifies climate settings between driver and passenger, is placed in a much more logical spot: It’s now a separate touch-button between the driver and passenger climate knobs.
Adding an arrow to the heated seats icon makes its function more clear, and matches the other icons here. I also added a feature from my cousin’s car: keep tapping to cycle through multiple levels of heating.
Completing the Prototype
I duplicated all of the heat screens I’d designed to create fan and A/C screens, then adjusted background gradients and available functionality accordingly. For the vents screen buttons, I used two variant properties to allow the buttons to toggle on and off with matching colors in each mode.
Conclusion
My design successfully combines physical and digital controls to create an intuitive and compact experience for controlling climate. This would allow it to be implemented below a main touchscreen – and unlike in many existing vehicles, whose climate controls occupy a lot of space, this would allow room for other adjacent physical buttons as well.
One potential outstanding issue is touch target size. I did test this while sitting in a car (using the prototype at actual size on my phone) – the onscreen buttons felt a little small, but not unmanageable to me. However, given that erroneous taps while driving are not only inconvenient, but can also lead to dangerous additional seconds with the driver’s eyes off the road, this would definitely require more extensive testing.
This project has increased my appreciation for the intense level of thought involved in automotive UX and related fields, in which speed and instant intuitiveness are paramount. As cars become increasingly more digitally integrated and green energy powered, it will be fascinating to see how designers adapt interfaces for both new and traditional capabilities.
Interactive Prototype
The knob is not turnable, but all other functionality works. Click around below, or open in Figma.
Prototype Demonstration Video
Get a glimpse into how this prototype might function in real-world use with a fun short video I made.