Roblox allows players to customize their Avatar as a core feature for their mobile products. Through the avatar editor, players can customize their character with the various cosmetic items acquired through purchases, events, and giveaways from our catalog.
- As a user, I want to customize the image (static, non-animated picture) of my avatar so that it looks interesting and fun for all my friends to see on their social feeds.
- As a user, I want to share with my friends/social media an updated avatar that I made in Roblox.
Design a feature where you can share an interesting image of your avatar on social media.
First Thoughts and Rejected Flow
In Roblox, the user has access to robust avatar customization. Since the user’s goal is to share an image that is “interesting and fun”, my initial thought was to allow the player to change the background and adjust the avatar positioning to create a scene or story.
I thought to add a background icon on the top left. This would carry the user to a page with the ability to take photos, choose from his camera roll, or select from templates. The user could then return to the Avatar screen and reposition the avatar to fit their chosen background. I scrapped this idea because it felt like too many steps and I wanted to keep all the user controls for customization within the center bar. Also, If his thumb was already near the center, it would be inconvenient to tap on the top left.
Of the different background creation options, I decided to place the camera first for a few reasons:
- If the user is sharing this with his friends, some of them may not know about Roblox, so a photo + character image inside a feed of many photos (i.e. Facebook) would feel more native to the community.
- It allows the user to be creative by crafting interesting situations and juxtapositions. His friends could still value that creativity, even if they didn’t know of Roblox.
- It has an augmented reality feel, which has been popularized by Pokemon Go, an app that has a user base shared amongst Roblox.
Selfie and Camera Roll
I thought that selfies would be a great way to create a fun and interesting images. Here, the avatar almost becomes a sticker, a photo customization apparatus which should feel familiar to the user.
It felt natural to place the camera roll after the camera icon. The bottom squares auto populate with the latest static pose of the avatar, so that the user can get a glimpse of which photos may offer good compositions. The green selection frame and formatting of the squares are carried consistently from the other avatar options.
Templates are suggestions for poses paired with backgrounds. Users looking for a creative boost can utilize templates when they want to reduce the granularity of custommization. Because Roblox’s users are so imaginative, I tried to carry that fun story element into these pairings, with each template feeling fun and unique.
Below, I set the templates as rows of two. I thought it’d be beneficial for the user to see a proportionally shrunk image, instead of cropping them within smaller squares like the camera roll. New templates and current cross promotions are placed on top. Special templates could be promoted and sold for Robux (currency).
The original closet background is placed below new templates, in case the user would like to return to a default state.
Uploading and Sharing
The user has now gone through multiple steps to customize his image and could be slightly fatigued at this stage. Knowing this, I made the final step minimal and straightforward. The image maintains its placement and full dimensions so that the transition from the previous screen would take less cognitive load. This also gives him context when writing his post.
The user can conveniently share to multiple social media channels at once. I omitted text from the icons because I felt that they were obvious enough and doing so would reduce clutter. I used the orange and white combination found in the previous screens to establish visual continuity. Once shared, the user should receive a brief confirmation.
Note: Various icons for this project were designed by Schmidt Sergey, Alfa Design, Focus, and Star and Anchor Design.