Avatar Clothing Pattern Design Tool
Customization as an engagement driver: how I increased adoption of the new Meta Avatars by building and launching a delightful, AI-powered pattern maker to millions of users across Instagram, Facebook, and WhatsApp.
Platform
Instagram, Facebook, WhatsApp
Info
Mobile App Cross-Platform / AI Tooling / 3D
Timeline
4 months
Avatar Clothing Pattern Design Tool and Avatar
I led the strategic approach, design, execution, and global launch of the first-ever clothing customization tool for Meta Avatars, with 130k creations in the first week and a 62% click-to-save (+23% from baseline), resulting in the highest conversion funnel for new Avatar users.
When Meta went all-in on social gaming, company leadership tasked my org with increasing avatar adoption. I quickly identified the cringy, limited clothing catalog as the number one pain point preventing users from loving their avatars, and our team's biggest opportunity to hit conversion goals.
Hype Reel of final launched product experience on Instagram, Facebook, and WhatsApp
Uncovering the problem
By conducting research with my UXR team and running workshops with my Tech Art team, I identified two glaring problems: a trend identification gap and a slow content pipeline. Our styles weren’t hitting the mark, and when we finally chose which styles to create, they were stale by the time they launched to consumers 4 months later.
The concept pitch I created for company leadership that got us funded
Pitching the solution to C-suite
My org was about to launch a new avatar style and needed levers to increase adoption, so I concepted, designed, and pitched an AI-powered clothing creation tool for consumers, inside the mobile Avatar Editor across Meta’s family of apps, as an upsell for the new avatar style. My idea was simple: using Meta's emerging AI ImageGen tech, we could entice users to complete their new avatar by upselling custom clothing at the point of highest drop off, while at the same time solving the issue of our limited clothing catalogue. My early concept was approved by Mark Zuckerberg alongside other upsell features, gaining us full funding to form a team and build the product as well as train a variation of Meta’s AI model for our needs.
Core screens I designed in the Pattern Design user flow
Design team leadership and XFN collaboration
I was chosen to lead the Design team comprising of myself, a senior Content Designer, and a senior Product Designer. For the next few months I worked with PM, eng, content design, and UXR partners to build an avatar clothing customization experience that was intentionally simple, delightful, and low-friction, meant for anyone to have fun retexturing their own avatar clothing. As Design Team Lead I led XFN workshops and collaboration, design team crits, sprints, and reviews, led stakeholder reviews, comms, and buy-in across Directors, VPs, and partner teams, mentored the Product Designer on my project, and was held accountable for all final design decisions and outcomes. I personally designed and executed the entire pattern design entry and creation flow, supporting my Designer in their ownership area of users saving and equipping created items. I sat alongside Product Leads and Eng Leads as collaborative leadership partners, driving alignment across functions.
Entry points across Meta's family of apps
Designing a product to sit across Instagram, Facebook, and WhatsApp
Since users' Avatars are consistent across Meta apps, I designed the customization experience to live in the Avatar Editor as a visually consistent surface accessible across Instagram, Facebook, and WhatsApp. For the customization entry point, I created an animation in Blender showing a few blank avatar tops magically "retexturing" into patterned designs (which matched the load animation I built into the customization flow itself). I successfully swayed org leads to allow this as the only animating grid component in the Editor, which gave users a visual cue of the customization experience as well as increasing click through with added visual intrigue.
Differences between the Pattern and Shape-Aware AI models
The tension: Free customization vs. protecting future monetizing creators
I worked with my AI engineers to train two different models. One for the consumer tool created repeat patterns, while we secretly developed a more powerful “shape-aware” retexturing model meant for future monetizing creators only.
Pattern generation and editing controls
Choosing the right AI model for MVP launch
In UXR we found that users loved the pattern generation model, so I strategically chose to launch our MVP with the pattern generation model for two reasons: first, training AI to create patterns was much faster to hit our tight MVP launch timelines. Second, since the pattern model tested well, I proposed we gate the more powerful model for future monetizing creators, to ensure the average consumer couldn’t easily replicate future purchasable clothing. Since users wanted more finite editing controls when using the pattern model in UXR, I designed simple tap gestures to scale, rotate, and move the design on the item before saving.
Dice animation I designed leading to higher conversions
Intentional moments of delight
While designing, developing, and testing the flows, the intentional moments of delight I built into the UX/UI had the greatest impact for users and for team KPI's. For example, the Dice animation for prompt randomization. In early user testing we learned the average consumer wanted to play with the pattern maker first to see what’s possible without having to think too hard. To solve the cold start conundrum, I created the randomizer dice feature, partnering with AI prompt engineers and Content Designers to create a formulaic list of randomized prompts whose formula resulted in consistently high quality pattern outputs. I designed a delightful animation in After Effects where the dice “jump” when tapped, working with my design system team to implement this as a new scalable motion pattern in Meta's Company Design System. As a result, A/B tests with the dice icon had higher completion rates, effectively moving the needle on our org's topline goal.
Solutions I designed and pitched to my VPs
Elegant solutions for GPU constraints
In early rollouts, the tool was so popular we anticipated running out of company-allocated GPUs for AI pattern generation. So I quickly designed and pitched two ideas to mitigate upcoming GPU limitations: paygate editing features to mitigate the cost of up-front pattern gen, or to keep the tool free but limit the number of items users could save to their closet. I recommended limiting item saves with a thoughtful UX and messaging before and after clothing creation, which we ended up implementing.
