DESIGN
NIO OS ASPEN
NIO is an industry-leading electronic vehicle (EV) company based in China. During my 5-month journey at NIO's Digital Cockpit and Software Development Team, I had the chance to design smart driving experience for NIO vehicle owners in both China and Europe.
Year
2020-2021
Employer
My Role
UX / Interaction Designer
Team
NIO Software Product Design Team
Tools
Sketch + Principle
Adobe Creative Suite
Overview
I worked as a UX/Interaction designer at NIO, crafting in-car experiences for more than 160k+ drivers worldwide.
NIO OS, the digital cockpit system, has undergone two major version updates to meet evolving user expectations and design trends. The earlier version's design style and UI layout didn't align with market demands, particularly in the European market, while advancements in technology required interaction method upgrades.
Recognizing these factors, the company initiated a major update, and as a team member, I participated in the process and would like to showcase some favorite upgrades.
*Considering the NDA, complete project details cannot be shared and certain images are cropped out for confidential consideration.
NIO's Design DNA - The starting point of our design.
NIO is driven by design, guided by its DNA principles: Sophisticated, Pure, Human, and Progressive. These principles shape all creative output, ensuring a NIO-centric approach and elevating the brand's expression.
-
The Design DNA Workshop: Project Kickoff
At the beginning of the project, the UX team decided to revisit the core essence and initiate the project. To accomplish this, I organized a Design DNA workshop with my colleagues. Our goals were twofold:
1. To consolidate all the past user feedback into four fundamental aspects of the DNA.
2. To involve various teams (PMs and UI designers) in jointly establishing design principles for the project, drawing from NIO's design DNA.
Workshop Takeaways
After the workshop, our team summarized both our design objective and principles.
-
Design Objective
In prior versions, we focused on meeting basic functional requirements and improving user experience. In version 3.0, we aim to incorporate technological innovation for natural interactions and diverse scenario needs, enhancing quality and usability. It's about being "easier to use, more advanced."
-
Design Principles
Cockpit experience design differs from mobile devices, with the challenge of managing limited interaction time and visual attention. Prioritizing safety, we propose flatter and shallower information architecture for efficient user interactions. Essential information in various scenarios aids quick understanding and decision-making. Our DNA includes categorized experience principles to support this:
Pure: Minimal + Clarity
Human: Natual + Intuitive
Progressive: Hierarchy + Flexible
Sophisticated: Premium + Precision
The Design DNA Workshop
Before: NIO OS 2.0
After: NIO OS 3.0
PURE: MINIMAL + CLARITY
The Redesign of Information Cluster.
What is Information Cluster (IC) ?
In an automobile, an Information Cluster or digital dash for short, is a set of instrumentation, including the speedometer, that is displayed with a digital readout. It’s right in front of the driver, communicating important details while you’re driving.
How did we make it better?
In the new-version IC, we have sorted out the information hierarchy, so that important information is displayed "appropriately" at critical times, and users can grasp as much effective content as possible and understand the changes in status by "glance".
The Design DNA: Pure
DESIGN PRINCIPLE 01
What do we mean by Minimal + Clarity?
Human perception of vision is uneven, the eyes acquire a lot of information in a short time, and the brain cannot give feedback quickly and immediately. Therefore, the presentation of information and the timing of its appearance are particularly important.
Take our design DNA - Pure as a guide, let me show you how we redesigned Information Cluster to highlight our design principles.
NIO OS 2.0
NIO OS 3.0
"Do not disturb users unless necessary."
According to NHTSA guidelines, the driver should complete each maneuver in a 1.5-second glance and spend no more than 12 seconds cumulatively looking away from the road. If you want users to be able to see the speed change at a glance without paying too much attention, we need to increase the font weight of the "narrow and thin" speed information font in version 2.0; so that the line of sight is from the road information in the middle to the speed Information can be kept as short and efficient as possible.
We often say "if you don't have to, don't disturb the user". In the new version of the IC, some redundant icons are removed, and the interface is kept as simple as possible; the solid line and the dotted line are distinguished, and the visual performance around the "car" during NOP is weakened, because we believe that the visual center of gravity should be Information about the road dynamics, not the special effects of the NOP itself.
With the support of the relevant human factor test results, we moved important information such as “speed” to the P1 - Advantageous Visual Area to avoid the steering wheel occlusion caused by drivers’ different gestures. At the same time, we also hoped that the focus of the line of sight should be kept as perpendicular to the road as possible to shorten the deviation of the line of sight. Lastly, we raised the skyline icon to make the middle ADAS (Advanced Driver Assistance System) area larger, which also improves the sense of depth and allows you to see farther and more content.
THE WHY BEHIND WHY
Human-Factor Test.
HUMAN: NATRUAL + INTUITIVE
To make the "Home" Smart.
In this version, we highlighted more natural gesture control while keeping the original interactions. A more natural interaction evokes user's instinct awareness, and spend less effort to get more efficient results, especially under driving scenarios. Secondly, we have given users more flexibility to customize their home, to add "heart" to the design.
Clearer Information Architecture.
We redefined the information area: the left is the driving area, and the power consumption info was moved below the speed; the middle is the ADAS area, and the right is the expanded information area. The top area is reserved for frequently-occurring warnings and reminders, and the left and right edges are reserved for uncommon reminders.
The Design DNA: Human
DESIGN PRINCIPLE 02
What do we mean by Natural + Intuitive in UX?
The natural way of interaction is in line with the extension of people's mind. The closer the user's mental model and behavioral cognition are, the lower the cognitive load in the actual use process, and the easier and more convenient the operation will be. We hope to use a more natural and more in line with the user's expected interaction, arouse the user's instinctive awareness, and obtain the most efficient results with the smallest input.
"Home" is the centralized place for users to navigate the whole system, that's why we redefined several high-frequency modules on "Home" to make it in line with user expectations.
Smart Widget
In NIO OS 3.0, we visually present the energy consumption information on the widgets, at the same time, we designed different widgets for different scenarios. Users can customize the widget stack according to their usage habits, and view information by swiping left and right.
Mini Mode
In 3.0, users can swipe down the widget to the Mini mode, which duldilled the needs of users in some scenarios to see a larger map.
Climate Gesture Control
The 2.0 version of the air conditioning adjustment needs to arouse the air conditioning panel first, and then click or slide the temperature up and down. In this way, the path is long, and the sliding up and down is not smooth. It should be more natural to start and adjust the air conditioner as a common operation. For this reason, we put it directly on the Dock bar. Users can click the arrow next to the temperature, or they can directly slide on the number to turn on and adjust the air conditioner.
The Design DNA: Progressive
DESIGN PRINCIPLE 03
How do we tackle Hierarchy + Flexible in HMI Design?
A focus in HMI design is coordinating and managing the relationships between elements, not just designing the "elements" themselves. Layout changes can guide people's visual focus and help users understand the relationship between appearance and function.
The layout of the new version is more stretched, and the elements pay more attention to the "breathable" white space, which makes the interface have a visual pause, the layout looks relaxed and at the same time, it also indicates when the user is focused and relaxed.
SOPHISTICATED：HIERACHY + FLEXIBLE
HMI with Visual Pause.
We narrowed the margins on both sides of the 2.0 layout, reduced unnecessary hierarchical listings, reorganized the grid system, and increased the adjustment Bar, so that users can use it more smoothly. We have also updated some controls, such as buttons, tabs, and labels in version 2.0 that are too similar in style, and we have made differences in the new version.
Visual hierarchy is the core element in UI design. Font weight can help users identify the priority of information, balance content, and reduce information density. The earlier version only had two font weights, regular and thin. For a digital system OS, it was difficult to use only two font weights to meet the needs of displaying multiple levels of information. The new version no longer uses the thin font weight of 2.0, which increases legibility.
The Design DNA: Sophisticated
DESIGN PRINCIPLE 04
Premium + Precision = NIO OS 3.0 UI.
We have been pursuing a classy UI effect for a long time, so that the interior and exterior decorations have a very delicate quality. In the previous version, the control style was thick and soft, and the transition color was a bit blurry. Although the blue and black were taken from the brand color system, the hue was not clear in the digital interface as the background, and the overall page atmosphere was a bit "stuffy". It doesn't appear to be "spiritual" enough.
SOPHISTICATED: PREMIUM + PRECISION
"Dark" but vivid.
New Color Palette.
In the 3.0 dark mode, we use black as the main color, and the auxiliary color is purer, the hue is clearer, the saturation is higher, and the highlight color mainly composed of NIO Blue is embellished, so that the interface is guaranteed to be sufficiently vivid.
NIO OS 2.0
NIO OS 3.0
SOPHISTICATED: PREMIUM + PRECISION
More precise ADAS models.
In the new version, we have rebuilt the ADAS visual recognition model, added details, and differentiated more models; the model that has been criticized by users has also been adjusted. On the dashboard, we will gradually optimize the self-vehicle model to realize the dynamic display of functions such as opening the door and charging; on the central control screen, we also realize the real-time display and interaction of the vehicle model through the construction of the rendering engine to enhance everyone's sense of exclusiveness. experience.
Premium 3D UI
3D UI can better restore the real scene and avoid the cognitive burden brought by abstract graphics to users. This approach is also used in other important scenarios. Such as seat adjustment, in-car fragrance, ambient lighting, sound field mode and HVAC, etc. The real effect brought by 3D UI can also bring a sense of exclusiveness to users.
Reflection
-
Don't stay "too close" to the design: At NIO, UX designers work in agile squads with UI designers and product managers, assigned specific modules. However, focusing too much on a module can cause us to overlook the essence of the problem. In design critiques, I learned the importance of taking a step back for a wider perspective. Whether it's a small modification or a button shape change, starting with the big picture and defining the problem is crucial.
-
Design for driving: Unlike my previous design experience, designing for mobile devices, the biggest challenge of cockpit experience design comes from the management of users' limited interaction time and visual attention. Designing for driving requires us to use user's attention more efficient. Beside, there are so many specific rules and ergonomic factors specific for automobile that need us to follow. It's important to prioritize driving tasks at first in a way that drivers can capture at a glance.
