NIO: Reimaging the Driving Experience
Year
2021
Services
UX / UI
,
Visual Design
,
Interaction Design
Intro
NIO is a Chinese multi-national automobile manufacturer headquartered in Shanghai. This project is simple: Design a user interface for a futuristic self-driving car.
01 // Project
Overview
The Brief
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.
Our Goals
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.
My NIO in-car interface Prototype
02 // Research & Market Analysis
Tesla Model X: Userflow
03 // Design Process
The design of this new user interface for a futuristic self-driving vehicle includes elements such as the user interface flow, use case scenarios, persona, an empathy map, user journey maps, and the user interface sketches. All of these elements come together to create synchronicity between the different pieces of this design.
User Empathy Map
The user empathy map is a way to gain a deeper insight into the users mind and logic. By doing this, I was able to pin point certain pain points, thought processes, and advantages when it comes to the user interface and experience while driving.
Information Architecture
User Interface Sketches
04 // Use Case Scenarios
Scenario #1
Kyler gets into his car and the first thing he wants wants is to look for the right song to start his morning off with. First off, he uses the initial fingerprint scanner to gain access to his personalized profile. He then browses the playlists and even checks out the newest artists on Spotify. Oops, a text from Nicole indicates where you need to go to work. So you plug in the address she gave you and provided you with the easiest and most efficient route to take.
Scenario #2
Kyler gets off work super duper late. Around 5am, he’s wondering where in the heck is he going to get a little breakfast at this hour. Instead of going home, he presses his fingerprint button to bring up voice command. He then proceeds to ask “Where is the nearest coffee shop or Denny’s?” The virtual assistant rounds up the nearest locations by mileage and ratings. Kyler orders a Denny’s Grand Slam Platter and a large coffee.
User Persona
05 // Final Deliverables
06 // NIO Style Guide
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
