Problem
The avatar system was painfully antiquated and frequently stumbled over itself when users tried to create a digital representation of themselves. Near term immediate issues that we needed to tackle included:
■ Dated visual design and legacy code that had to be ported into the new design
■ Avatar system differed from other avatar implementations in that clothing worked like body parts as opposed to layers over the body
■ Navigation was multiple levels deep, convoluted and difficult for users to understand
■ The shopping experience was completely disconnected from the avatar experience
■ Different implementations across different platforms
Research & Insights
Roblox didn’t have a strong user research culture, so we relied on general focus groups and used the sole UX researcher's various studies to help us hone in on how kids navigated through the avatar experience. We also worked closely with domain experts, 3D artists and in-house game developers to help inform the design bets we were making.
Insights
■ Create an intuitive and sophisticated experience that worked across all age groups not just for kids
■ Kids spend a ton of time customizing and making their avatar unique. They have a strong desire to individualize and stand out
■ Show me: Users weren't able to see how items looked on their avatar before purchasing and frequently were disappointed with their purchases
■ Users were getting lost and confused when trying to navigate within avatar and to the catalog experience
Solutions
■ Blue sky
We went broad and conceptualized ideas for what the avatar experience could be if developed to its full technological potential. From here we worked backwards and set milestones that stretched from the current experience to the ultimate goal.
We went broad and conceptualized ideas for what the avatar experience could be if developed to its full technological potential. From here we worked backwards and set milestones that stretched from the current experience to the ultimate goal.
■ Try-on
We made the try-on functionality straddle the avatar and catalog experiences thus becoming the centerpiece of the avatar project. We felt it was pivotal to making the experience not only more fun and engaging, but also more intuitive whether customizing an avatar or shopping for new items.
We made the try-on functionality straddle the avatar and catalog experiences thus becoming the centerpiece of the avatar project. We felt it was pivotal to making the experience not only more fun and engaging, but also more intuitive whether customizing an avatar or shopping for new items.
■ Navigation
The existing avatar and catalog were completely separate experiences. We sought to mirror the two architecturally by mirroring the navigation and giving the users the ability to toggle between the two experiences seamlessly.
The existing avatar and catalog were completely separate experiences. We sought to mirror the two architecturally by mirroring the navigation and giving the users the ability to toggle between the two experiences seamlessly.
■ Visual Design
The design team completely revamped the visual design of the platform to shed the “kiddie” UI that Roblox had. For avatar, we used components developed for this redesign while also developing and contributing new components to the design library that were unique to the Avatar experience.
The design team completely revamped the visual design of the platform to shed the “kiddie” UI that Roblox had. For avatar, we used components developed for this redesign while also developing and contributing new components to the design library that were unique to the Avatar experience.
Hand-off
As we experimented with new concepts and designs, we fell back to more traditional design patterns for the immediate release. Partially because we were held back by limitations of legacy code but also because we needed to move quickly to meet milestones. I handed off designs, prototypes and research over to an internal design team that then fleshed out the rest of the design and worked with the engineering team to implement the final product.
Avatar & Beyond
My work beyond the redesign focused primarily on creating high level concepts of a metaverse where any number of avatars could exist in the same ecosystem and play any game- think Ready Player One. I worked with the UX director to develop mocks and prototypes which we presented to the CEO and ultimately got buy in to move forward with the vision:
■ We envisioned a world where any type of avatar could co-exist in the metaverse- from a more realistic Grand Theft Auto-like avatar to the traditional R15, lego-type Roblox avatar
■ Working without the constraints of the legacy avatar system, we pushed the bounds of what creating, customizing and equipping an avatar looked like for a user
■ We explored the implications of mixing different styles of avatars with different game genres and even having the avatar influence the types of games served to the user.
