NIO: Reimaging the Driving Experience

Visual Design
Interaction Design
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

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