Introducing 3D Avatars to a UGC Platform
Built for creators to express who they are
TIMEFRAME
Feb 2021 - May 2021
ROLE
User Research & Analysis
Design Thinking
Wireframing & Prototyping
Usability Testing
TEAM
1 Project Manager
4 Developers
2 Designers
CONTEXT
Creators on Mzaalo wanted to be seen beyond their content
Mzaalo is a gamified streaming platform offering movies, series, and creator tools to a community of over 12 million users. As the platform scaled, we identified an opportunity to make creator identity more personal and expressive.
PROBLEM
Profiles were rarely updated and failed to reflect creator identity
As Mzaalo’s creator ecosystem expanded, profile spaces remained largely functional and underutilized. Many users rarely updated their profile photos or revisited their profiles, limiting opportunities for meaningful self-expression.
SOLUTION
Identity was made visible through 3D Avatars
We partnered with Ready Player Me to launch a 3D avatar system, allowing users to quickly create inclusive, personalized identities via selfies or presets.
IMPACT
Profile completion rates doubled as 40% of active users built personalized 3D avatars within the first month.
40%
Adoption rate for 3D avatars
2X
Increase in profile visits
35%
Increase in daily returns
High Level Goals
01
Design an engaging avatar experience that strengthens emotional connection and encourages profile interaction.
02
Identify essential customization features that enable accurate and inclusive self-representation.
MARKET RESEARCH
Existing avatar platforms fell short on inclusive representation and personalization
To inform our approach, we examined leading avatar platforms to understand how identity was represented across the market. This helped us identify gaps in inclusivity, realism, and personalization that Mzaalo could address.
Polished, animated 3D look
Lacks extensive clothing options
More personalization
Lacks a reset option
Simple user experience
Low avatar resemblance
USER INTERVIEWS
Over 70% of users desire more personalization options to truly reflect their unique identities
We interviewed 15 active users across similar platforms. The questions explored customization preferences, challenges, and overall satisfaction. Using thematic analysis, I synthesized the responses into key themes that highlight user needs and frustrations.
What the analysis revealed…
FUNCTIONAL TESTING
While face detection worked well in ideal scenarios, limitations emerged in low light, motion, and with headwear
Before moving into ideation, I focused on testing the most integral feature: face detection. We evaluated Ready Player Me’s face detection APK with 20 users under varying conditions to assess its performance prior to integration. As a third-party tool, this test helped us identify technical constraints early and opened the door for collaboration with the development team to ensure a smoother user experience.
Accurate facial mapping in optimal lighting conditions
Headband not recognized during face detection
Accuracy
Percentage of successful detections
Speed
Time taken to detect a face
User Satisfaction
Feedback on ease of use and comfort
35
25
15
0
-5
Error
Frequency of false positives or missed detections
Core testing insights
Performance Overview Table
Strengths:
Face Detection performs exceptionally well in ideal lighting conditions and front-facing scenarios with 92–96% accuracy.
Detection speed averaged 1.5s, performing well across devices but showing some variance.
Weaknesses:
Struggles in low light, backlit conditions, and with partially visible faces, with accuracy dropping to 50-55%.
Non-frontal angles, extreme expressions, and headwears also reduce accuracy and speed with a 55-60% success rate.
POTENTIAL FIXES
Design solutions can’t fix the APK’s core tech, but can mask its flaws
Request Developer Mitigations
Ask if they can tweak detection thresholds for low-light/backlit scenarios.
Pre-Scan Guidance
Add screens to coach users (e.g., "Face the camera directly in good lighting").
Error Handling
Design friendly prompts for failures (e.g., "Oops! Try without glasses or customize manually").
Propose Post-Detection Customization
Lets users refine auto-detected avatars.
Collaborate on Feasibility
Can we trigger manual mode automatically after 2 failed detections?
USER FLOW
User flow for Avatar Creation
TESTING + IMPROVEMENTS
3 major improvements in my design
Before arriving at the final design, earlier versions of key screens were tested to identify usability gaps. Based on the feedback, several refinements were made, these iterations are now part of the final solution.
Usability testing insight #1
Early body selection prevented misgendered avatars
Usability testing insight #2
Usability testing insight #3
FINAL DESIGNS
The 3D Avatar System
Selfie-Based Avatar Generation
Take a selfie or pick a favorite photo.
Enhanced facial mapping captures every detail.
Guided overlays ensure your selfie is framed just right.
Advanced Facial & Style Customization
Customize facial features like moles, freckles and wrinkles.
Style hair with options ranging from full styles to balding patterns.
Accessorize with piercings, glasses, and headwear to express personality.
Inclusive Cultural Representation
Choose from authentic traditional outfits, hairstyles, and accessories that celebrate your roots.
Mix and match ethnic wear with modern styles.
Thoughtfully curated options to feel seen, respected, and proud of your heritage.
Quick Start with Default Avatars
Skip the manual work and pick from a range of stylish presets.
Your default avatar can be customized later.
Ideal for users who want a quick, hassle-free start.
Flexible Outfit Building
Skip the preset outfits and create combinations that feel more you.
Tops, bottoms, shoes and accessories can be paired individually.
Instantly switch between color options without reselecting items.
Integrated Monetization
Unlock premium outfits and accessories using Mzaalo Coins (in-app currency).
Easily preview and purchase multiple items while customizing your avatar.
INTEGRATION STRATEGY
Avatars were embedded within the profile experience for seamless integration
We integrated avatars into the profile experience and onboarding to make them discoverable and easy to adopt. Users could optionally set an avatar as their profile headshot. Existing users were introduced to the feature through a guided instructional overlay and a new entry point within the profile. New users were invited to create an avatar during signup, with the option to skip and complete it later.
MY LEARNINGS
Some of the things I learned while working on this project
User feedback uncovered new priorities
User interviews revealed that personal details like freckles and scars mattered most, helping refine customization and usability.
Importance of early product discovery
Early testing across devices and environments revealed face detection and platform issues, helping us refine design and prevent technical setbacks before launch.
REFLECTION
Here’s what I would improve if I were to redesign it today
01
Prioritize accessibility
In 2020, my understanding of accessibility was limited. Today, the focus would be on creating a more inclusive experience that’s usable and comfortable for everyone.
02
Deeper customization
Add contextual filters within each category and finer tweaks to features like eyes and face shape.
03
Emotionally expressive avatars
Let users reflect moods with subtle facial expressions for a more personal connection.
04
Celebrate all forms of representation
I’d expand the avatar system to include assistive devices, visible disabilities and age diversity ensuring users of all identities feel genuinely seen.
NEXT PROJECT
Improving certificate approvals with a 40% faster workflow
Take me back
