Home / Case Studies / Digital Village (VLGE)

Beauty & brand worlds All case studies

Digital Village (VLGE): L’Oréal brand worlds

Client/Sector: Digital Village (VLGE) for L’Oréal: the Lancôme Happiverse, L’Oréal Paris MetaVivids and the Lancôme × Louvre avatar creator / beauty and fashion tech

As technology lead, I led engineering on 3D brand worlds that run in a phone or desktop browser: the multiplayer Lancôme Happiverse, with avatars, makeup, chat and a rose-growing game, and the L’Oréal Paris MetaVivids worlds for its new hair colours. Alongside them I worked on V-BLDR, a platform for building virtual worlds, including its backend API and asset delivery, and I hired for the team.

Open the Happiverse Open MetaVivids

Project Snapshot

  • RoleTechnology lead (contract), team of 10. Interviewed Unity, backend and UI/UX candidates and hired 3.
  • PlatformUnity 2021 WebGL, Photon Fusion, Didimo avatars, Node.js REST API, AWS S3 and CDN.
  • OutcomeL’Oréal brand worlds live in the browser on phone and desktop, no app to install.
L’Oréal Paris MetaVivids world picker with three avatars, Eve, Sam and Alix, each leading into their own 3D world

Screens from the builds: the MetaVivids worlds, avatar customisation, the polygon budget, phone-first play and the brand architecture.

MetaPink room in the L’Oréal Paris MetaVivids world, with neon lighting, the Préférence product and a video screen
MetaVivids: each hair colour gets its own explorable room, with the product and campaign film inside.
Lancôme × Louvre avatar creator: a realistic 3D face beside a choice of six avatar bases, with steps for skin tone, hair colour and makeup
Lancôme × Louvre: pick an avatar base, skin tone, hair colour and makeup look, then share it.
Digital human avatar head shown in wireframe, revealing the triangle density of the face, ear and hair
Faces and hair carry a beauty experience, so that is where the polygon budget went.
Avatar personalisation screen offering eight styled outfits to choose from
Personalisation is the first thing a visitor does, so it had to be fast.
In-world view in a portrait layout with on-screen movement controls and a collection counter
A phone-shaped layout with on-screen controls and a collection loop.
A pink circular pavilion with a glazed colonnade set in landscaped grounds
Architecture that reads instantly as the brand, built cheaply enough to leave budget for the faces.

01 Challenge

A luxury brand world on a phone

Visitors scanned a QR code and landed in a 3D world in their phone browser. It had to look premium enough for Lancôme, load quickly over mobile data and hold around 20 people per session, each with a customised avatar, makeup, chat and a game to play.

02 Approach

Budgets first, then features

The original avatar and clothing assets were far too heavy for WebGL, so I set budgets with the art team and the avatar supplier Didimo before building on them. I also cut complexity where I could: seeds, petals, roses, boosters and cosmetics shared one inventory and reward system instead of five separate ones.

03 Execution

Multiplayer, avatars, progression and a backend

  • Multiplayer: Photon Fusion host/client networking with host migration, avatar and player sync, multiplayer chat, NPC interactions, lobbies that open new rooms after about 20 users, and stress tests with many avatars, including Ready Player Me test builds.
  • Avatars: six base avatars with Mecanim and Mixamo-compatible skeletons, swappable hair and garments, avatar updates in session, and reactions.
  • Garden Grower: buy seeds, plant, wait for timed growth, harvest roses of different rarity for petal currency, then spend on boosts and cosmetic unlocks, with achievements, challenges and leaderboards.
  • Front end: localisation, responsive mobile and desktop UI built from Figma, and the flow from QR scan through consent and onboarding into the world and the virtual makeup try-on.
  • V-BLDR backend: moved from GraphQL to a plain Node.js REST API that Unity calls through C# DTOs, covering sign-in with JWT tokens, users, worlds and their saved state, projects, sessions, and asset and image uploads.

04 Outcome

Live brand worlds, and a team that could ship them

The Lancôme Happiverse and the L’Oréal Paris MetaVivids worlds run in the browser on phone and desktop. I set up a feature → dev → staging → production branch workflow, with staging and production protected from direct changes, led a team of 10, and interviewed Unity, backend and UI/UX candidates, hiring 3.

Technical delivery

Three decisions that made it work in a browser

A beauty brand needs detailed faces, hair and makeup, but a phone browser has limited memory, a slow first download and no install step. Most of the engineering was about deciding where the quality had to go and keeping everything else cheap.

Avatars cheap enough for a phone

With Didimo I defined the delivery spec: six full-body base avatars of roughly 5,000 to 10,000 triangles each (face 1–2K, body 3–4K, hair about 1K, garment 3–4K), FBX with a Unity-ready hierarchy, and albedo, normal, opacity and packed AO/roughness/metallic maps. Makeup became reusable masks and layers applied at runtime, so any look works on any avatar without baking every combination.

Multiplayer that scales by session

Instead of one huge world, sessions were sized at about 20 people and new rooms opened as they filled, which kept sync traffic and rendering costs predictable. I also worked through Photon’s commercial side, peak concurrent users against monthly active users, regional traffic and bandwidth overages, to estimate the running cost at several thousand users.

A small first download

Content moved into asset bundles served from AWS S3 through a CDN, with versioned manifests, caching and invalidation, so the first WebGL download stayed small and the rest loaded as needed. Texture compression, mesh and polygon reduction, LODs and stripping unused code and assets kept memory inside mobile browser limits.

Project summary

Digital Village (VLGE) quick facts

The essential product, role and delivery context behind the work.

What was built
Browser-based 3D brand worlds for L’Oréal, including the multiplayer Lancôme Happiverse and the L’Oréal Paris MetaVivids worlds, plus the V-BLDR world-building platform and its backend.
Role
Technology lead (contract): Unity architecture, multiplayer, the avatar pipeline, API design, asset delivery, branch workflow and hiring, leading a team of 10.
Stack
Unity 2021.3, C#, WebGL, Photon Fusion, Didimo avatars, Mecanim and Mixamo, Node.js REST API with JWT, AWS S3 and CDN, asset bundles and Figma-based UI.
Outcome
L’Oréal brand worlds that run in the browser on phone and desktop, built on budgets that kept detailed avatars and multiplayer within mobile limits.

Frequently asked questions

Short answers for people hiring for similar work.

What did Jun build at Digital Village (VLGE)?

As technology lead he led engineering on browser-based 3D brand worlds for L’Oréal, including the Lancôme Happiverse multiplayer WebGL experience and the L’Oréal Paris MetaVivids worlds, and on the V-BLDR world-building platform. The work covered Unity architecture, Photon Fusion multiplayer, the avatar pipeline, a Node.js REST API and AWS asset delivery.

How did detailed beauty avatars run in a phone browser?

By setting a budget with the avatar supplier Didimo: six base avatars of roughly 5,000 to 10,000 triangles each, Mecanim and Mixamo-compatible skeletons, swappable hair and garments, and makeup applied at runtime as reusable masks instead of baked combinations.

How did the multiplayer scale?

Sessions were designed around about 20 concurrent users, with new rooms opening as sessions filled. Photon Fusion handled host/client networking, host migration, avatar sync, chat and NPCs, and stress tests with many avatars checked performance before launch.