Designer & Illustrator · YuLife · 2020–2021
YuLife Avatar System: from zero to 87%
In YuLife’s well-being app the user completed activities but never saw themselves. The product needed identity. An avatar system from scratch — 13 categories, 1500+ components — and 87% of users created their own.
Context
YuLife sells insurance to companies for their employees, to improve their quality of life through regular activity. The employee walks, runs, works out, meditates, solves a sudoku, and the app answers with rewards and progress. Insurance stops being a folder at HR and becomes something you use every day. In that logic the avatar is the person’s point of presence inside the product: the better they recognise themselves on screen, the more willingly they come back to the activities.
I joined the Product & Tech team as a Designer Illustrator. The first stage was the launch of YuScreen in 2020 — that is when the first, basic version of the avatar appeared, still without customisation. Later I built the full avatar system.
Problem
The constraint that determined everything else
The same avatar works as a tiny icon in the leaderboard list and at full height on the YuScreen display. And that is not a closed list: the characters were meant to be reused further, in various places that did not yet exist at the time. So the avatar has to read at any size and hold contrast on almost any background.
Role and team
Designer Illustrator, Product & Tech team
What was on me: the visual language, all the illustration, the structure of the system in Figma, guidelines for handoff.
The work ran in Procreate, Adobe Illustrator and Figma.
Who I worked with
Design lead, UX designer, data researcher, developer, and directly the CTO. I worked most closely with the design lead and with the UX designer; I presented decisions to the CTO and the team.
Constraints
Technical
Vector, phone screen. Few details, but not boring: the silhouette and the colour mass work before the details become visible.
Brand
Four worlds already lived in the app: geometric shapes, bright colours. The avatar has to stand inside that visual. And the outfit must read as belonging to a world: you can see from a person whether they have reached Desert or are still in Forest.
Audience
The product is corporate: colleagues see the avatar. Not a children’s drawing, but adults. The figure is drawn neutrally: a base silhouette that the settings take toward a younger person or an older one.
Inclusion
Everyone has to find themselves in the editor: skin tone, eye colour, hairstyle and its colour, accessories. The facial expression is the same for everyone and is not adjustable; personalisation runs through colour and style. The starting outfit is the same for all — uniqueness comes through progress and events. In the world of the app everyone starts equal.
Gamification
The feeling of a game character you assemble to suit yourself. That turns setting up a profile into a pleasure rather than a form. Clothing — armour — has to feel desirable, motivating more activity and levelling up your own character.
Emotion
The face is always positive, an even friendliness. The avatar accompanies a person every day; any strong emotion quickly starts to get in the way.
Timeline
-
Early 2020
We settled the body silhouette and the facial expression. The first test set of clothing: outfits that were meant to upgrade by level.
-
May 2020
The base outfit was settled: avatars are in the product, people are using them — the YuScreen release.
-
Summer 2021
Work on the outfits continues: sketches, exploration, selection.
-
November 2021
The outfits are ready for all four worlds. Only the first tier, base, is launched into the product.
Four worlds, four rarity tiers. Each cell holds the male and the female version of one clothing set.
| Base | Common | Rare | Epic | |
|---|---|---|---|---|
| Forest | ||||
| Ocean | ||||
| Desert | ||||
| Mountain |
The hypothesis that didn’t work
Customisation was meant to be sold together with the insurance. It didn’t add up.
On YuScreen an employee could buy insurance packages on top of what the employer had given. The purchase arrived not as a line in a contract but as clothing for the avatar. The reasoning was: make the items desirable enough that people would want to level up their character and take additional subscriptions for their sake. The hypothesis was not confirmed, and the company dropped it. The system was not rebuilt because of it. Worlds and rarity tiers were already laid into the structure — the only thing that changed is how a player reaches them: upgrades are now granted for completing world levels, quests and challenges.
Solution
A system of 13 categories. 1500+ components are assembled in the builder; the number of avatars they add up to is practically unlimited.
- 13
- categories
- 1500+
- components
- 780
- hair variants
- 15
- skin tones
- Model
- Head and body: 2 genders × 15 skin tones
- Hair
- 65 styles × 12 colours = 780 variants, plus 276 facial-hair variants
- Clothing
- ~118 items: torso, jackets, gloves, footwear, trousers, in male and female versions; tied to worlds and rarity tiers
- Accessories
- 112 items: headwear, headbands, glasses, masks
Result
What I left behind is a visual language and the rules it rests on: proportions and silhouette, the logic of the outline, the palettes for skin, hair and eyes. The set of elements is assembled so that a person of any age, gender, race and culture ends up with an avatar.
Honestly, about the numbers: there is no “before / after launch” data in public sources, and I will not credit the system with growth that does not belong to it. What there is: measured adoption of the system, and public reviews.
- 87%
- of the user base created their own Yumoji after release
«Gamification of wellness activities (including employees being able to create personal avatars) has really helped drive significant levels of employee engagement»
«Great personalization with the use of avatars»
«The app's interface is fun without being cringe or immature»
«I guess more personalisation of Yumojis would be welcome»