Designing Interactions for
In-Cab Camera Monitoring Displays
VOLVO GROUP CASE STUDY
Optimizing existing components originally designed for touchscreens for use on button-controlled onboard displays.
ROLE
Lead Designer
SCOPE
UI Design, Interaction Design, Prototyping
TOOLS
Figma
YEAR
2023
ACT I
A Problem Emerges
The brief
The problem in a nutshell
1
2
3
My first task when I started working on Volvo’s camera monitoring system was to design a solution for brightness adjustment of the two pillar-mounted displays inside the cab. To do this, I partnered and worked closely with a usability feature engineer to clinic proposed solutions throughout the iterative design process.
The solution needed to work within constraints.
While some components in the cab can be adjusted by an automatic brightness setting or manually adjusted by a dial, this wouldn’t work for the CMS displays; it would need to be controlled via the door-mounted control panel with a directional pad and selection button.
The selectable brightness values needed to be within a safe range – meaning, for instance, not capable of being dimmed to an extent that would impair visibility. Since these displays can legally replace the mirrors on the truck exterior, ensuring that the screens are usable and readable for the user at all times and under varying lighting conditions throughout the driver’s shift was imperative.
Beyond that, any design solution requiring new UI components needed to feel cohesive with the rest of the component library featured not just on the CMS displays, but on all touchpoints throughout the cab.
ACT II
A Closer Look
A holistic view
Affordances
User needs & real world context
I began by reviewing the components already in use on other Volvo touchpoints, namely the infotainment display, a 9-inch touchscreen in the center of the dash.
I pulled components for reference that correlated with the function I was solving for, brightness adjustment. Using the slider components I had identified, I began iterations, making some adjustments as needed for the CMS context.
The CMS displays would be controlled through a detached control panel, not through a direct touch. While the existing slider component in our library relied on a circle to afford tapping and dragging, this would have been misleading on the CMS display. Instead, I began exploring concepts that referenced the arrow iconography coordinating with the actual control panel.
Additionally, the slider component in the infotainment display was a long smooth bar, enabling the user to tap and drag freely without any stops or levels. As I iterated on my concepts, staying in close contact with our usability engineer partner to understand the technical constraints, several findings showed me that another approach would be needed to create a slider that was optimized for CMS.
For one, not having predefined brightness levels could make adjusting the brightness incrementally much more tedious when the input method is a button panel instead of a touchscreen. Since the user can’t press and hold the button to change the brightness level, it would require repetitive button presses to achieve an adjustment that would be comparatively effortless on a touchscreen.
In addition to that, in discussion with software engineer colleagues, we learned that the system would not save a user’s settings after the vehicle has been turned off and later restarted, meaning that a user who spent time getting their screens’ brightness juuuuuuust right would be in for a world of frustration when he starts his shift the next day.
ACT III
Making it Happen!
User-friendly design choices
Interaction and feedback
Finding the way forward
In light of that, it was clear that there were several compelling reasons to modify the brightness slider to have a limited number of increments that the user jumps between when adjusting the brightness.
It allowed faster adjustments, gave the user a clearer understanding of what to expect and what each of their inputs would do, and was much easier for users to remember and replicate later (e.g., preferring brightness level 4).
Beyond the visual, I also considered motion and interactions. The touch-and-drag slider in the infotainment display provided clear, direct, real-time feedback to the user.
Without the affordance of touch on the CMS displays, I wanted to provide some similar feedback when the user input brightness adjustments via the button panel. I prototyped concepts in Figma for discussion with usability and software engineers.
While the inclusion of these microinteractions was favored, we were informed that due to the implementation method, animations of any kind weren’t possible – the graphics would be displays as a series of static PNGs as the user clicked through the brightness levels.
Throughout all of this discovery, I continued iterating on designs, weeding out those that had been made impossible by constraints and zeroing in on those that were feasible and gathering good feedback in quick internal tests.
Paying attention to details like color, shapes, corner radii, and iconography enabled me to create several slider concepts that maintained the Volvo look and felt like a consistent iteration on the existing slider component optimized for a different type of interaction and control.
ACT IV
An Impact Was Made
Putting it to the test!
Making a difference
After design reviews and discussions with experts on the usability team, a selection of slider concepts were taken to a clinic with licensed commercial truck drivers.
Clinic feedback helped identify the leading concept and a few minor tweaks to make, namely fine-tuning the size and color of the labels on the slider to ensure adequate readability under different conditions.
I finalized the component design, added the new CMS sliders to our design system, and handed off the graphics to the responsible software developer for implementation.
Adding a brightness control functionality seemed pretty simple – just extending the same functionality we have in the cluster, infotainment display, and the backlighting of the dashboard controls to one more touchpoint.
In reality, the technical constraints – not being linked to the existing hardware control dial that governs brightness levels, not being able to utilize the existing brightness slider component used on touchscreen displays – complicated the design process and introduced a real risk of bringing inconsistency to the user experience in a complex, multi-touchpoint environment onboard the truck.
In the end, we arrived at a tested and proven solution that worked, fit the Volvo look and feel, and upheld the high level of consistency that the organization strives for.
Just enough is more.