NIO: Reimagining the Driving Experience
CLIENT
NIO
SERVICES
UX / UI Design | Visual Design | Interaction Design
YEAR
2021
[1]
Overview
Develop a user interface for an innovative autonomous vehicle, with a specific emphasis on investigating and dissecting the interactions between users and the vehicle. In the dynamic realm of advancing technology, there's a vital need to redefine how we engage with common objects.

The primary goal of this project is to harness our current understanding and elevate the experience of driving and commuting for users. By reimagining the way we connect with vehicles, we have the opportunity to introduce enhancements that elevate both the travel itself and the final destination.
[2]
Challenges
Designing the user interface for an autonomous vehicle presents unique challenges, particularly in redefining the relationship between humans and machines in a rapidly evolving technological landscape. As control shifts from driver to vehicle, traditional touch points and behaviors must be reexamined. This project required a deep investigation into how users perceive, trust, and interact with autonomous systems—balancing familiarity with innovation. The core challenge was not just creating an interface, but reimagining the experience of commuting itself—transforming passive travel time into something more intuitive, personalized, and meaningful.
💡 Questions to highlight:
-> How might we redesign the user-vehicle interaction model to build trust and comfort in an autonomous environment?
-> How might we transform passive commuting into an engaging and intuitive user experience through interface design?
-> What sensory, behavioral, or contextual cues do users rely on—and how can we translate those into meaningful interactions with autonomous vehicles?
[3]
Competitor Analysis
-> Tesla Model X: Userflow
[4]
Empathy & Ideation
The design of this next-generation user interface for a futuristic self-driving vehicle brings together a range of foundational elements—including UI flow, use case scenarios, user personas, an empathy map, journey maps, and interface sketches. Together, these components work in harmony to create a cohesive, human-centered experience that reflects the needs, behaviors, and expectations of future users. This holistic approach ensures that every touchpoint within the interface feels intentional, intuitive, and aligned with the evolving role of autonomous vehicles.
-> Information Architecture
[5]
User Empathy Map
The user empathy map served as a valuable tool for gaining deeper insight into the user's mindset, behaviors, and motivations. By exploring what users think, feel, see, and do, I was able to identify key pain points, mental models, and opportunities that directly informed the design of the interface. This process helped shape a more intuitive and meaningful user experience tailored to the realities of interacting with a self-driving vehicle.
-> User Persona
-> Use Case Scenarios
☀️ Use Case 01: Starting the Day Right
Kyler gets into his car and, like every morning, the first thing on his mind is finding the perfect song to kick off the day. He uses the fingerprint scanner to access his personalized profile, instantly pulling up his favorite settings and apps. He browses through his Spotify playlists, exploring both his go-to tracks and newly featured artists. Mid-scroll, a text from Nicole pops up with the address of his next work location. With a quick tap, Kyler inputs the address, and the system calculates the most efficient route, getting him on the road without skipping a beat.
☕ Use Case 02: Late-Night Cravings
After a long night shift, Kyler leaves work around 5 AM, exhausted and hungry. Instead of heading straight home, he taps the fingerprint sensor to activate voice control. “Where’s the nearest coffee shop or Denny’s?” he asks. The virtual assistant quickly pulls up a list of nearby options, sorted by distance and user ratings. Kyler selects a Denny’s just a few miles away and places an order for a Grand Slam Platter and a large coffee, ready for pickup by the time he arrives.
[6]
Final UI Wireframes
[7]
NIO Style Guide
The Style Guide provides insight on things such as the typography used, the color palette utilized throughout the interface, and finally the iconography.
-> Typography: Primary
-> Typography: Secondary
-> Color Palette
-> Iconography
Back to top