Code ready prototypes made using Rive
Case Study Overview
Modern in-car infotainment systems have enhanced driving with features like navigation, media, and connectivity. But with this progress comes a key challenge—driver distraction. Complex menus and inconsistent interfaces demand too much attention, risking safety. This case study explores a design solution for a smarter, safer dashboard that minimizes distraction and feels intuitive even for first-time users.
Background
As cars become more digital, infotainment systems are packed with features but often at the cost of usability. This case study explores the need for a safer, more intuitive driving experience through better dashboard design.
Problem Analysis
The problem at hand involves balancing functionality with safety in a highly dynamic environment. Drivers need systems that are:
Easy to interact with while on the road.
Consistent in design across different vehicles.
Capable of integrating advanced technologies, such as voice-controlled assistants, to minimize manual tasks.
Responsive enough to offer relevant information without overwhelming the driver.
Design Opportunity
As a product designer, the goal is to create a distraction-free dashboard that prioritizes safety and ease of use. Key focus areas include:
Voice-Controlled AI – Hands-free control for navigation, music, and calls.
Intuitive UI – Clean, minimal layout to reduce cognitive load.
Consistency – Unified experience across different car models.
Real-Time Feedback – Subtle alerts for traffic, route changes, and system warnings.
User Research
Target Audience: Car owners of varying age groups and technical proficiency.
Key Insights:
A large percentage of users (especially older drivers) find current in-car systems overwhelming and unintuitive.
Voice interaction is preferred by most users when driving, as it keeps their focus on the road.
Users often fail to make full use of the existing system features due to complexity and poor design.
Core Features
A.I.-Powered Navigation & Voice Control
Satellite Link
Tire Pressure Monitoring
Allows drivers to control navigation, music, and calls using natural voice commands
Supports phrases like “Navigate to [destination]” or “Avoid traffic” for quick rerouting
Real-time, A.I.-driven route suggestions based on traffic, roadblocks, or delays
A.I Assistance can be activated via a dedicated steering wheel button for minimal distraction
Enhances safety by keeping hands on the wheel and eyes on the road
Designed the UI in Figma and exported the Frame as SVG file Into rive animation
After importing the file, I started creating the animations in Rive.
theN WENT menu and selectED 'Generate Share Link'. Then clickED on 'Generate Link' and copIED the Framer embed code
Then AFTER COPYING THE FRAMER CODE WENT TO MY portfolio’s asset panel, clickED on the 'Add Code' icon, createED a new code file, and give it a name.
Then AFTER CREATING THE CODE FILE, I pasteD the Rive embed code, but before pasting MY CODE I DELETED THE DEFAULT CODE.
THEN WENT BACK TO canvas.
DraGgED the newly created Rive component from the Assets panel into MY layout.
THEN ResizeD AS PER MY REQUIREMENT.
Satellite Link
Provides reliable internet access even in remote or no-network zones
Enables emergency support when cellular service is unavailable
Powers uninterrupted A.I. communication and live traffic updates
Allows over-the-air system updates for continuous improvements
Ensures a consistently connected and dependable driving experience
I repeated the same steps that I followed while creating the previous animation, LIKE A.I voice assist navigation, smart reroute & user reaching destination.
Continuously tracks tire pressure in real-time using built-in sensors
Alerts the driver visually when pressure drops below safe levels
Notifications are subtle and non-intrusive to avoid distractions
Helps prevent tire-related breakdowns and enhances safety
Designed to inform early without causing panic or overwhelming the driver
I repeated the same steps that I followed while creating the previous animation, LIKE A.I voice assist navigation, smart reroute, user reaching destination, & Satellite link.
spline Animation
Downloaded a 3D car model from Sketchfab in
.objformat and imported it into Spline.
Designed the 3D animation after importing the model.
Recorded the animation as an
.mp4video and embedded it into Figma for prototyping.
learnings
In this case study, I explored 3D and motion design using Spline and Rive, which helped me understand how purposeful animations enhance user experience.
It taught me to think in flows like a developer & not just screens or balance visuals with function.
My Next update in this case study will be animating the Instrument cluster.
I’m excited to apply these learnings to instrument cluster design—blending motion UI with my automotive background. what do you think if I add this to my case study learnings
