Turn Your Images into Animated Characters
Turn Your Images into Animated Characters
Turn Your Images into Animated Characters
Overview
Doodle is a Humi feature that turns uploaded images into animated avatars. From the start, I designed the creation flow to be simple and intuitive by removing unnecessary steps so users could generate avatars with ease.
This approach quickly gained traction: Nearly 80% of creators chose Doodle as their primary avatar style in Japan, showing how a distinct 2D look could resonate in new markets.
Timeline & Company
Jan 2024, XRSPACE
Timeline & Company
Jan 2024, XRSPACE
Role
UX designer
Role
UX designer
Responsibilities
UX Design & User Interviews
Responsibilities
UX Design & User Interviews
Team
1 PO、1 UX、1 UI、5 Engineers、1 QA
Team
1 PO、1 UX、1 UI、5 Engineers、1 QA
Overview
Doodle is a Humi feature that turns uploaded images into animated avatars. From the start, I designed the creation flow to be simple and intuitive by removing unnecessary steps so users could generate avatars with ease.
This approach quickly gained traction: Nearly 80% of creators chose Doodle as their primary avatar style in Japan, showing how a distinct 2D look could resonate in new markets.
Timeline & Company
Jan 2024, XRSPACE
Timeline & Company
Jan 2024, XRSPACE
Role
UX designer
Role
UX designer
Responsibilities
UX Design & User Interviews
Responsibilities
UX Design & User Interviews
Team
1 PO、1 UX、1 UI、5 Engineers、1 QA
Team
1 PO、1 UX、1 UI、5 Engineers、1 QA
Background
How it all started
How it all started
Humi is a social platform centred around avatars that enables users to create and share content in a variety of ways. In the early stages of Humi’s development, the team explored what content formats could accelerate adoption and support expansion into new markets.
Humi is a social platform centred around avatars that enables users to create and share content in a variety of ways. In the early stages of Humi’s development, the company explored what content formats could accelerate adoption and support expansion into new markets.
Humi is a social platform centred around avatars that enables users to create and share content in a variety of ways. In the early stages of Humi’s development, the company explored what content formats could accelerate adoption and support expansion into new markets.
Around this time, one of our consultants in the US introduced us to Meta’s research into animated drawings. We recognised the potential not only as a technical possibility, but also as a unique visual style. We believed it could complement Humi’s core 3D experience and open up new creative possibilities for users.
Around this time, one of our consultants in the US introduced us to Meta’s research into animated drawings. The company recognised the potential not only as a technical possibility, but also as a unique visual style. We believed it could complement Humi’s core 3D experience and open up new creative possibilities for users.
Around this time, one of our consultants in the US introduced us to Meta’s research into animated drawings. The company recognised the potential not only as a technical possibility, but also as a unique visual style. We believed it could complement Humi’s core 3D experience and open up new creative possibilities for users.
Turn Your Images
into Animated Characters
Overview
Doodle is a Humi feature that turns uploaded images into animated avatars. From the start, I designed the creation flow to be simple and intuitive by removing unnecessary steps so users could generate avatars with ease.
This approach quickly gained traction: Nearly 80% of creators chose Doodle as their primary avatar style in Japan, showing how a distinct 2D look could resonate in new markets.
Timeline & Company
Jan 2024, XRSPACE
Role
UX designer
Responsibilities
UX Design & User Interviews
Team
1 PO、1 UX、1 UI、5 Engineers、1 QA
How it all started
Humi is a social platform centred around avatars that enables users to create and share content in a variety of ways. In the early stages of Humi’s development, the company explored what content formats could accelerate adoption and support expansion into new markets.
Around this time, one of our consultants in the US introduced us to Meta’s research into animated drawings. The company recognised the potential not only as a technical possibility, but also as a unique visual style. We believed it could complement Humi’s core 3D experience and open up new creative possibilities for users.
Developing Doodle Avatar helped expand Humi’s avatar diversity and reach new users through a distinctive animated style.
Developing Doodle Avatar helped expand Humi’s avatar diversity and reach new users through a distinctive animated style.
Identifying friction in the workflow
Identifying friction in the workflow
To evaluate the usability of Animated Drawings, I invited five users for testing, where I observed their behaviors and gathered qualitative insights through follow-up questions. Based on these findings, I collaborated with team to define and optimize the most effective workflow.
To evaluate the usability of Animated Drawings, I invited five users for testing, where I observed their behaviors and gathered qualitative insights through follow-up questions. Based on these findings, I collaborated with team to define and optimize the most effective workflow.
(Animated Drawings - Desktop Version)
(Animated Drawings - Desktop Version)
01 The workflow felt overly long
01 The workflow felt overly long
Almost every participant commented that the process felt long, often expressing mild impatience after completing the first step. I also observed that many users skipped the instructional content and repeatedly clicked “Next” without fully reading the guidance.
Almost every participant commented that the process felt long, often expressing mild impatience after completing the first step. I also observed that many users skipped the instructional content and repeatedly clicked “Next” without fully reading the guidance.
02 The background removal produced rough results
02 The background removal produced rough results
Rough background removal significantly reduced confidence in the result. Around 80% of participants felt that even simple drawings lost important details during extraction.
Rough background removal significantly reduced confidence in the result. Around 80% of participants felt that even simple drawings lost important details during extraction.
03 The limited canvas size made precise editing difficult.
03 The limited canvas size made precise editing difficult.
When background removal produced rough results, users tried to manually refine details. This often led to further frustration, as the limited editing area made fine adjustments difficult.
When background removal produced rough results, users tried to manually refine details. This often led to further frustration, as the limited editing area made fine adjustments difficult.
Design Strategy
Design Strategy
The design strategy centered on lowering the barrier to creation, enabling fast, satisfying results for users while supporting platform expansion into new user segments.
The design strategy centered on lowering the barrier to creation, enabling fast, satisfying results for users while supporting platform expansion into new user segments.
User Goal
User Goal
Get fast, satisfying results without extensive setup or editing.
Get fast, satisfying results without extensive setup or editing.
Business Goal
Business Goal
Broaden the platform’s reach by introducing Doodle as a more accessible entry point.
Broaden the platform’s reach by introducing Doodle as a more accessible entry point.
Based on these goals, the design focused on three key principles:
→Show results early
→Accurate removal
→Enlarge workspace
Based on these goals, the design focused on three key principles:
→Show results early
→Accurate removal
→Enlarge workspace
Design Solution
Design Solution
Simplify the Flow
Simplify the Flow
While breaking down Meta’s Animated Drawings process, I mapped each step in detail to understand how it worked.
While breaking down Meta’s Animated Drawings process, I mapped each step in detail to understand how it worked.
Observation: Existing Automation
Observation: Existing Automation
Observation: Existing Automation
Much of the process was already automated, detecting the character, adding a mask and skeleton. Yet users still had to confirm each step. I wondered what if uploading an image could instantly generate an animated character?
Inspired by Meta’s Animated Drawings, I analyzed the process and identified opportunities to simplify it for general users. My proposal was that once a user uploads an image, the next step should immediately generate an avatar while still providing space for adjustments if needed.
Inspired by Meta’s Animated Drawings, I analyzed the process and identified opportunities to simplify it for general users. My proposal was that once a user uploads an image, the next step should immediately generate an avatar while still providing space for adjustments if needed.
Simply reducing steps could harm the experience if the technology wasn’t reliable. To support this simplification, I collaborated with engineers to verify that the background removal was accurate.
Simply reducing steps could harm the experience if the technology wasn’t reliable. To support this simplification, I collaborated with engineers to verify that the background removal was accurate.
And characters of any style would move naturally once rigged with a skeleton. We tested both humanoid and non-humanoid characters to ensure animations still looked natural.
And characters of any style would move naturally once rigged with a skeleton. We tested both humanoid and non-humanoid characters to ensure animations still looked natural.
Enlarge Workspace
Enlarge Workspace
Because this tool is primarily used on mobile, the canvas was designed to support two-hand gestures for scaling and repositioning. This allows users to adjust the view using familiar pinch and drag interactions, reducing reliance on small on-screen controls and making longer editing sessions feel less constrained on smaller screens.
Because this tool is primarily used on mobile, the canvas was designed to support two-hand gestures for scaling and repositioning. This allows users to adjust the view using familiar pinch and drag interactions, reducing reliance on small on-screen controls and making longer editing sessions feel less constrained on smaller screens.
Clear Instructions
Clear Instructions
To ensure users could easily prepare their images, I provided clear upload guidelines with visual examples. The combination of concise text and diagrams reduced ambiguity, helping users quickly understand the requirements.
To ensure users could easily prepare their images, I provided clear upload guidelines with visual examples. The combination of concise text and diagrams reduced ambiguity, helping users quickly understand the requirements.
To support different learning needs, I included tutorial videos accessible at any time during the process.
To support different learning needs, I included tutorial videos accessible at any time during the process.
Result
Result
Doodle supported Humi's market expansion. It became the preferred avatar style in Japan.
Doodle supported Humi's market expansion. It became the preferred avatar style in Japan.
Around 80% of users in Japan adopted avatar generation in their daily content creation. The simplified flow lowered the barrier to entry, making it easy for users to try and keep using. Many described the process as "very simple".
Takeaway
Takeaway
This project showed me that true simplification comes from clarity, not just fewer steps. By letting technology handle the complexity and giving users control where it mattered, I was able to design a flow that felt intuitive and significantly lowered the barrier to creation.
This project showed me that true simplification comes from clarity, not just fewer steps. By letting technology handle the complexity and giving users control where it mattered, I was able to design a flow that felt intuitive and significantly lowered the barrier to creation.
Next Project
Next Project
Next Project
Fang Hong © 2026
yfhong0973@gmail.com
Fang Hong © 2026
yfhong0973@gmail.com
Fang Hong © 2026
yfhong0973@gmail.com