UX/UI Designer
8 months
In-car Screen
UX & UI Design | Design System
SUMMARY
VIVID is a connected-car platform built to unify infotainment, navigation, and voice services into a seamless in-vehicle experience. The Navigation team was tasked with designing a robust, production-ready navigation system through an agile two-week sprint cycle.
THE BUSINESS GOAL
Design a navigation experience that’s intuitive, engaging, and easily customizable to meet diverse OEM needs.
/ MY ROLE
1.Led end-to-end UI Design: built the design system, created proposals, shipped production-ready screens, and supported dev handoff through spec and design audits.
2.Proposed and presented UX Design: created wireframes, prototypes, and delivered finalized UX flows for development.
3.Collaborated with product manager, engineering and QA to align delivery timelines and ensure design quality across sprints.
/ QUALIFICATION HIGHLIGHT
1.Defined the redesign direction introducing a half-panel interaction model.
2.Operated as the sole designer in a fast-moving agile team, iterating quickly and adapting to changes.
3.Aligned with developers daily to fine-tune interactions and visual details, and hosted regular stakeholder reviews to ensure a high-quality final delivery.
Impact
Unsafe Interaction Model
The design relied heavily on a map-as-canvas layout, with all navigation guidance housed within a sliding panel. The panel toggled between half and full-screen modes, requiring frequent interaction—posing safety risks for users while driving.
Lack of Clarity & Performance Issues
Poor visual hierarchy and layering between the map and the panel led to user confusion. These layout inconsistencies also introduced bugs, degrading overall performance and causing friction in day-to-day use.
/
Introduced half-panel interaction model
Based on user testing and market research, I proposed a consistent half-panel layout across the navigation flow. This design built on familiar patterns, reducing cognitive load and improving active driving usability.
Improved visibility and system performance
The half-panel layout allowed users to see both navigation info and the map simultaneously, improving clarity and spatial context.
On the development side, layout consistency reduced complexity, leading to better performance and easier implementation.
Unclear visual led to user confusion
The POI icons before the redesign lacked clear states—default and selected icons looked the same. Various color backgrounds with gradients grouped with white icons bring low contrast, making icons hard to distinguish. The combination led to unclear interactions and poor usability for users navigating or selecting POIs.
A Unified Icon System That Improves Clarity and Interaction
Conducting competitive map research and color accessibility analysis help me to define a new color system and icon state logic (default, active, and selected). updated POI icons and labels were applied consistently across both the map view and navigation panels, resulting in improving visual clarity, and user recognition.
I also defined and delivered the color system for both day and night modes, ensuring consistency across POI categories and scalability for future additions.