Project Name

Animated Avatar

Role

UX Designer

Duration

3 Months

Tools

Miro, Sketch, Zeplin

My Individual Contribution

Overview

Design Challenge

Question Areas

Key Findings & Results

Persona

Features

Iterative Prototyping

Usability Testing & Findings

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.

这是我的CARIAD项目，它是大众汽车的子公司. 作为这个项目的唯一设计师，我在产品团队下工作，并协助营销设计. 我直接向我们的设计负责人汇报，领导并完成优秀的设计作品. 我与一个由四名开发人员、一名项目经理、一名BA和一名负责任的3D设计师组成的团队密切合作，在紧迫的时间里创造的这个车机端产品.

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.

大众Animated avatar项目是一个创新的、沉浸式的数字体验，它使用虚拟角色动画技术来创建一个独特的用户参与平台。该项目专注于可定制的虚拟形象，这些虚拟形象可以实时跳舞、打扮和互动，无缝地融合了汽车设计、技术和时尚. 该项目旨在通过有趣和互动的媒介吸引观众，通过让用户以娱乐的方式探索品牌身份，提升大众汽车的数字形象.

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?

现有车辆显示界面陈旧，与大众品牌不符. 如何通过虚拟人物来提升大众电动汽车在中国市场的品牌竞争力，提高用户对车载系统的满意度和使用频率？

Research Goal

  • 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.

The user hopes that the avatar will not disturb the driving.

  • Most users indicated that when driving, they prefer simple information presentation and do not wish for overly complex or frequent information to appear.

  • 大多数用户表示，在驾驶时，他们更喜欢简单的信息呈现，不希望过于复杂或频繁的信息出现

    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 operations.

    清晰简洁的视觉反馈，以减轻用户的认知负担. 交互应该围绕“最小干预”原则，以避免繁琐的操作.

Animation is still valuable in certain situations.

  • During the period when users are resting or waiting in the car (such as waiting at traffic lights or parking in the garage), they hope that the Avatar can provide interactive entertainment content such as singing or dancing to enhance the in-car experience.

  • 用户在车内休息或等待期间（如等红绿灯或在车库停车），希望Avatar能够提供唱歌、跳舞等互动娱乐内容，增强车内体验.

    Results: Assistants should have low intervention and high readability of information. The visual style should be concise, technological and professional, rather than overly cartoonish.

    助手应该是低干预和信息的高可读性. 视觉风格应简洁，技术和专业，而不是过度卡通化.

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, 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.

    提供个性化的配置选项，但默认设置应该足够智能.

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 quickly created the initial design, reviewed it with the internal design team, and submitted it to the product and development teams to promote cross-functional collaboration and diverse perspectives. This iterative method enables me to collect valuable feedback and insights from different team members, thereby improving 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

Portal

High Fidelity Prototypes

The main deliverable of this project is a high-fidelity prototype created on the Sketch platform.

According to the type of virtual character selected by the user, the user can dress up the virtual character in detail here, such as the appearance and clothing.

It is the access center for users to participate in the Avatar dance and dress-up functions.

Dress Up

On this page, users can choose the type of virtual character (avatar) they like.

Further Dress Up

Singing & Dancing

Based on the previously customized avatars, users can enter the singing and dancing modules, where the stage and costumes will change dynamically in sync with the selected songs.

Goals for making usability tests:

  • 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.

- 在某些情况下，比如夜间驾驶，角色的动画有点太明显，可能会影响驾驶的注意力.

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

- 数字按钮的反馈有时很慢，界面加载时间有时有点长.

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