Role: Interaction Designer

My Individual Contribution

Overview

Design Challenge

Research Goal

Question Areas

Key Findings & Results

Persona Details

Features

Iterative Prototyping

Usability Testing & Findings

Context: Automobile Display Screen

Tools: Sketch, Zeplin

Duration: 10 weeks

This is my CARIAD project, which is a subsidiary of Volkswagen. As the sole designer responsible for this project, I work under the product team and assist in the marketing design. I report directly to our design leader to lead and build excellent design works. I worked closely with a team of four developers, a project manager and a BA, and a responsible 3D designer to create the best HMI product, not only beautiful, but also in a tight time frame.

The Volkswagen Animated Avatar project is an innovative, immersive digital experience that uses virtual character animation techniques to create a unique platform for user engagement. The project focuses on customizable avatars that can dance, dress up and interact in real time, seamlessly merging car design, technology and fashion. The project aims to engage audiences through a fun and interactive medium, enhancing Volkswagen's digital image by allowing users to explore the brand's identity in an entertaining way.

The existing vehicle display interface is old and no longer in line with Volkswagen's brand. How to improve the brand competitiveness of Volkswagen's electric vehicles in China market through virtual characters (avatar), and improve users' satisfaction and frequency of use of on-board systems?

  • Identify the major in-car entertainment system scenarios in the market (e.g., navigation, alarm, entertainment, animation...).

  • Explore how users perceive Volkswagen as a brand, reflecting its values such as reliability, innovation and user friendliness.

When we were doing user interviews, the main questions were mainly around the project objectives, including understanding the needs of car owners, behavior patterns, and pain points. By doing this, we know what the user's avatars expect and how to make the avatars interact easily with the drivers. Here are some of the main questions.

In-vehicle systems are used more frequently, but the interaction mode is biased towards "minimum intervention”.

  • Most users rely mainly on navigation, music playback播放, and call management during driving.

  • Users prefer voice control, minimizing the need to manually operate the screen.

    Results: Clear and concise简洁的 visual feedback is needed to reduce the cognitive burden on users. Interaction should revolve around the principle of "minimum intervention" to avoid cumbersome繁琐的 UI operations.

Animation is still valuable in certain situations.

  • While the user is resting, they can listen to the avatar sing or dance. For example, while waiting at traffic lights or resting in the garage. They prefer more popular dances and music.

    Results: The design should be animated with low intervention and high readability可读性, such as slight gradients, pulse motion effects运动效果, etc.

Users prefer the assistant to reflect the "professional & reliable" brand image and need to have a certain "personality".

  • Some users accept the avatars with subtle movements微妙的动作 (such as slight facial changes and body movements), but do not want it to be "as cold as a robot".

  • As for the personality of the avatar, users are more inclined to be rational, professional and friendly.

    Results: The visual style should be concise, technological and professional, rather than overly cartoonish. The voice style should remain gentle & moderately emotional, neither stiff nor overly enthusiastic or emotional.

Personalization needs vary from person to person, but users want "options".

  • Some users want to be able to manually adjust the avatar's external style and animation activity, but others prefer the default mode and don't want to spend time customizing.

    Results: Can provide personalized configuration options, but the default Settings should be smart enough.

1. Information Architecture

2. Wireframes & Low-Fidelity Designs

3. High-Fidelity Designs & Usable Prototypes

4. Usability Testing & Feedback

During the rapid prototyping phase, my first step involved working collaboratively with the product people to strategically compartmentalize the information architecture. This process ensures that the upcoming design has a cohesive凝聚力的 and intuitive structure.

Then I delve into the creation of wireframes and low-fidelity designs, crafting each interface element to align with the defined information architecture. These preliminary designs are then reviewed by the internal design team and presented to the product and development teams, facilitating促进 cross-functional input and diverse perspectives. This iterative approach allowed me to gather valuable feedback and insights from various team members to refine the prototype.

By incorporating this iterative feedback loop, we aim to ensure that the final design meets not only the needs of the users, but also the collective expectations and requirements of the entire team, thereby improving the overall effectiveness of the design solution.

Low - Fidelity Interactions

Goals for making usability tests:

  • Whether the animated avatar will disturb the driver too much

  • Whether the logic of the interaction is clear and easy for the user to understand

  • Whether the interaction methods such as voice, touch and gesture conform符合 to the user's usage使用 habits

  • Is the visual feedback intuitive enough to guide the user correctly

Mainly for target user groups (such as potential owners of Volkswagen brands, intelligent cabin users), select users of different ages and driving experience for testing.

- Interaction is more interesting and technological, compared to the traditional car interface, this dynamic avatar makes the operation more vivid, like talking to an intelligent assistant.

- Voice interaction and animation enhance the sense of trust. This kind of visual feedback makes me more willing to use than cold voice assistants.

- In some cases, such as night driving, the animation of the avatar is a little too obvious and may affect driving concentration.

- Sometimes users aren't sure when the avatar will hear them.

- The feedback of digital buttons is sometimes slow, and the loading time of the interface is sometimes a little long.

Through usability testing, interaction logic is clear, learning costs are reduced, and product usability is improved. Secondly, enhance user satisfaction and enhance the competitiveness of the brand. Finally, users are more willing to interact with virtual characters, less confusion and wrong operations, and improve the usage rate of the vehicle system.

What I did well

The project was very innovative and needed to add a more human interaction to the in-vehicle system. In the face of the hardware limitations of the vehicle system, it is different from the previous mobile phone app and web design, and the range of touch screen needs to be taken into account. Secondly, communication is important, and I am proactive in working with the development team and other designers to ensure that the technical team has enough time to optimize the implementation. In short, stay motivated, trust each other, and finally get the project success online.

Due to a Non-disclosure Agreement signed with the company, I’m sorry all pages cannot be displayed.