Protected project
Climate & Media Controls
Enter the password to view this case study.
01 — Overview
Climate &
Media Controls
Distraction-Free Cabin Controls: A novel physical-digital interaction paradigm.
- UX Design
- Prototyping
- Interaction Design
- 2024–2025
My Role
Led the end-to-end design prototyping by integrating digital interaction, visual design, and physical controls for the best possible experience.
Outcome
Delivered a fully functional, drivable and tested prototype in 45 days. Drove 6 months of iterative refinement to reach production-ready design.
Impact
Informed a go / no-go leadership decision to avoid hardware rollback. Set a new benchmark for rapid prototyping and established a new scalable interaction and haptic pattern.
02 — Background
Why this project existed
This project involved a redesign of digital climate and media controls with new hardware capability, after the previous design failed with multiple usability test metrics from the research study.
The shift to an all-digital control surface introduced new interaction challenges the existing design hadn't solved, particularly around safety, tactility, and perceived quality for truck customers.
03 — User Pain Points
What users struggled with
Quality
- Hard to tap accurately without looking or while driving
- Lost track of active state, increases eyes-off-road duration
- Too many first-surface functions
Discoverability
- Round dial doesn't imply jog interaction
- Jog was not discovered without explanation
- Jog added steps for quick actions
Balance
- Truck customers prefer utility-focused, simple, easy-to-use controls
04 — Challenges
Constraints & complexity
Safety Risk
The shift from physical to digital-only controls forcing "eyes off the road" for a high-frequency task.
Tactility
Users look for blind actuation and "muscle memory" for climate experiences.
User Friction
Removing physical controls lowers perceived vehicle quality.
05 — Stakeholders
Who was involved
Design & Experience
- Visual Design
- Design system alignment
- Hardware Design
- Unified digital & physical design
Build & Integration
- Hardware Engineering
- Haptics & vehicle setup
- Fabrication
- Validated 3D-printed housing
- Software Engineering
- Flow & logic handoff
Validation & Decision-Making
- Research Team
- Setup & observation
- Leadership
- Design critiques & alignment
06 — Design Workflows
How I built it
Figma
- Define the UX flow and logic
- Break down components into animation layers
- Export layers into Protopie
Protopie
- Create reusable components
- Build states and logic
- Integrates with real data
- A/B testing
Hardware Integration
- Setup design in vehicle cluster display
- Test design with physical controls
- Adjust position, visuals & interactions
07 — High Level Flow
Interaction architecture
Full interaction map covering all states, transitions, and edge cases across the climate and media control surfaces.
08 — Prototype I
First functional build
Repeater
- Mirror climate controls in the cluster to support eyes-on-road interaction
Haptics
- Haptic strength and resistance signal end limits
- Haptic steps align with visual feedback
09 — Prototype I · A/B Testing
Repeater position & pagination
A/B Variants
- Repeater design compared across multiple versions
- Pagination layout tested for quick-access hierarchy
Metrics Measured
- Time to locate the active function
- User orientation and awareness within the system
10 — Prototype I · Research
What we learned
✅ Repeater keeps attention on the road
- Most users adopted the new interaction model after one drive
- Users still preferred touch option when parked
✅ Physical + Digital received strong positive feedback
- Most users found it easy and delightful
- Users felt safer
⚠️ Discoverability
- Users did not discover jog left/right immediately
⚠️ Visual & physical affordances mismatch
- Touch targets are too small
- Arc progress bar encouraged drag interaction
- Short timeout caused unintended actuations
- Excessive icon shifting
- Rotary should protrude more for accessibility
11 — Prototype II · Research
Iteration results
✅ Tooltips improved discoverability
- Reduced verbal instruction needed in most cases
✅ Longer timeout reduced errors
- Additional timeout time prevents unintended actuations
⚠️ Visibility issue
- Bigger visuals and higher contrast needed for daylight, glare, and low-light
🧠 Hybrid interaction expected
- Users continue to expect touch input for quick access
- Hardware remains preferred while driving
12 — Prototype III
Visual refinement & media integration
Visual Update
- Incorporated visual changes to align with design systems
- Increased target zones and space between functions
- Minimized icon shifting
- Increased contrast and color spread
- Reordered the functions
- Improved logic for sync states
Woodpecker & Drag Interactions
- New drag gesture for quick temperature/volume adjustment
- Drag zone referenced from iOS Control Center interaction model
Integration with Media Drawer
- Built media drawer UX flow for switching source
- Integrated media control with drawer flow
- Added real music & sound to test interactions
User Research & Handover
- Final round of user testing with production-ready prototype
- Design handover to engineering team