3D avatar design for KAPU

Tencent ISUX
6 min readOct 15, 2019

--

As app/game using 3D avatar became a trend, QQ’s avatar service CMshow(厘米秀) has been renovated from the existing 2D to 3D style. To design a new style of 3D avatar which can be different from the other 3D avatars and also applying the QQ users’ tastes, it has undergone a lot of investigation and test processes. In this article, we will introduce the whole process of CMshow design in detail.

STEP 1 Research about 3D avatar style

Before we started the design progress, we conducted a survey on various types of 3D avatar styles in the market as a whole. Although there have already been a variety of avatar styles, we have set a direction to focus on the tastes of QQ’s main users, which are 10–20s. The big direction was decided to a slightly exaggerated and characterized style rather than an overly realistic description that can give mature feeling so that young users can get cute and friendly feeling.

STEP 2 Decide the body ratio of avatar

First, the avatar body ratio was set at 1:4.5. Several tests were conducted to find a ratio that did not hurt the overall style while giving a cute impression by making the face slightly big. In order to make the movement visible on a small screen, the hands and feet were designed to be large, and the arms and legs were extended so that various poses and animations could be applied. In addition, the thickness of the joints are identical between men and women so different costumes can be freely exchangeable.

STEP 3 Design the face

1) Manga style face

There were many experimental processes in the early stage to design the face which most greatly influenced the impression of the avatar. The test was conducted by dividing into three major directions: western style that can be thought of as reminiscent of Disney characters, oriental style reflecting asian characteristics, and comic style that can be seen frequently in Japanese comics.

Western styles gave a similar impression to Zepeto, a 3D avatar service that has already become very popular, and oriental styles designed with reference to Chinese entertainers and Chinese animations did not seem attractive as they look old. The last Japanese comic style that we reviewed gave a cute and friendly feeling, and also satisfy the taste of many people while differentiated from other 3D avatar designs.

2) Modifiable structure

In the basic face design, the blend system is applied to enable the users to optimize their avatars. The blend system allows the user to transform the shape of eyes, nose, mouth, jaw line, etc. It is possible to adjust the shapes in detail on the system, so various types of faces can be designed.

3) Various make-up style

In addition to face shape, various eyebrow style, eye shadows, lipstick, blushers, tattoos and other options were provided to apply various effects according to user’s taste. Users can apply some bold makeup style on the avatars to express their the personality which they might feel difficult to try in real life. A different style of avatars will be created depending on how users customize it.

STEP 4 Design various costume styles

The costume style design is based on the theme which is decided based on the data that analyzed the taste of the existing CMshow users. The new 3D style design is proposed through reinterpretation, not just changing the popular 2D design to 3D style. For example, if the theme is a medieval fighter, we reinterpret them in a more modern form to follow the trend instead of designing typical costume styles. In addition, the guide was observed for the possibility of compatibility with other costumes in the system, and the excessively complex form was avoided so that it could be implemented in the system as a small size.

STEP 5 Make avatars move

After completing the avatar design, it must be optimized be applied to the system. To apply to the system, it is necessary to adjust the number of polygons. So it is necessary to erase and simplify unnecessary parts. When the avatars are sequentially performed to plant bones that will be the reference point of movement, and skin weight work that determines the range of movement, the avatars will have a basic structure to move. Avatars that have completed the moving-based work can be applied with various animations.

STEP 6 Design the rooms for the avatars

The avatar room design was also proposed in a 3D style, so that users can decorate the room using items.

STEP 7 Apply to the system

The designed avatar and room are applied to individual app called Kapu and also on QQ services. In Kapu, face and costume customization, room decorating, and taking various concept photographs can be done. Customized avatars are also applied to users’ QQ, so when talking on a messenger, users can have interesting interactions with friends using emoji functions.

后记 Epilogue

The viral video was created by reflecting the concept of 厘米秀 that users can decorate the avatar according to their preference. The costumes of the avatars dancing freestyle with the trendy music were changed to express the characteristics of the service. In addition, by adding a 2D effect which suitable with the dance movement on the 3D avatar animation, the unique cartoon style elements of Kapu brand were visualized.

CMshow 3D Avatar is a project that reflects QQ service’s willingness to change existing services considering user patterns, tastes and new trends. It is also meaningful in that a new IP has been created that can further develop QQ’s brand image younger and more trendy. CMshow and Kapu services will continue to develop trendy designs and interactions that applies users’ tastes.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

--

--

Tencent ISUX

The core design team of Tencent, which is responsible for user experience design and research of Tencent social networking related products.