Mini-Profile Customization
Role
Product designer in team of product managers and engineers
Timeline
2 months, launched in July 2023
Overview
There was an opportunity to introduce profile pictures and banners to our users, but we did not have a system to manage these items. I designed the mini-profile and customization system, which allows users to update their mini-profile's appearance and manage their collection.
Users struggled to share their personalities with other users in a single-player game.
Introducing: profile cosmetics.
Aimlabs is a personal gym for millions of FPS fans who improve their aim daily alongside a community. However, existing customization options, such as weapon skins, were limited to gameplay sessions, and were rarely seen by other users outside of replay videos.
This led to low awareness and engagement of cosmetics among users, and hindered their ability to share their personality with others.
Profile cosmetics (avatars and banners) were pitched as new cosmetics, and would need a system to accompany them.
A snapshot of your play history and personality in one card
The mini-profile was reworked, turning it from a text-heavy card, into a personalized card that lets users share their personality with avatars, banners, and titles. Replays are highlighted to give users a peek at other user's in-game setups and cosmetics.
Customize your mini-profile anywhere on the trainer
Avatars, banners, and titles are grouped into one pop-up accessible anywhere on the trainer, and users can see a preview of what they're trying on live.
Users can see the vast variety of cosmetics that we offer, even when they're not in the store. Users can buy avatars and banners without even leaving the module.
Sense of community; view mini-profiles of other users
Users don't have to feel like they're training alone more. Users can view mini-profiles by hovering on leaderboards, on their friends list, or anywhere there is a username.
Gathering insights
01
Review standard user's journey
Noting key touchpoints for opportunities for conversion.
03
Evaluate current systems
Look through our trainer, noting what current systems we could utilize to cut down on dev-time and keep things simple
02
Use previous experiment data
Use metrics and guidance from the product team on previous user purchase and equip patterns
04
Comparative analysis
Compare games that allow users to customize your social identity, to adopt common flows our users would be used to
Main insights that guided me to the final solution.
Social tab is an existing feature
This feature is currently used to change the user's title, and is the primary social feature in Aimlabs.
Let's...
Make the social tab the central place to edit mini-profiles. Users will already be familiar with this flow.
Mini-profile needs revisions
Lack of hierarchy & no room for banners means there's an opportunity to redesign this card.
Let's...
Modify the mini-profile by improving the hierarchy of information on the card, and make customization the hero of the card.
Sharing through screenshots
Users primarily shared their progress through screenshots of the results screen on social media
Let's...
Add the mini-profile to the results screen to boost cosmetics' visibility & personalize their shared screenshots
Visibility = more equips
In previous experiments, attaching titles to usernames on the leaderboards led to a significant increase in users equipping titles.
Let's...
Ensure users can view mini-profiles wherever there are usernames (primarily leaderboards).
Lack of awareness & conversion
Newly released items are only surfaced in the lobby's carousel. Our inventory system is hard to find.
Let's...
Ensure users can see all cosmetics that exist, and buy items without disrupting their flow by making them search somewhere else.
Low-fidelity wireframes to show main functionality.
After meeting with the engineering and product teams, we had to forgo some of the quality-of-life features, such as a search bar, filters, and descriptions for the sake of time. These would be kept in mind for future updates and removed from the final MVP.
Buying an unowned cosmetic & bundles
When a user didn't own an item, they needed to be prompted to buy it. Originally, the product requirements were that users should be able to buy in bundles, in addition to buying the item individually.
Over the course of designing this flow, the product requirements were changed so that profile cosmetics were only available through bundles, making the bundle flow the primary flow.
Reworking the mini-profile
The mini-profile needed some changes to fit the new cosmetics. However, there were additional opportunities to improve the original design, such as reducing complexity and improving visual hierarchy.
This was the final result!
Reinforcing the importance of customization in Aimlabs
The mini-profile was added to various screens in the trainer. The mini-profile can be edited at any of these points by clicking on the profile picture anytime the user sees their mini-profile, just like on the social tab.
By increasing the prevalence of mini-profiles, users would see profile cosmetics often. This would increase engagement with customization, as users who had yet to customize their profile would be reminded of it.
A yellow badge, used to show new features or updates, was used at the product's launch, to let the user know that they had yet to customize their profile. This would get users used to going to these areas.
User's profile page.
The results screen after a user finishes a task is highly-shared by users on social media. The results screen shows a condensed, modified version of the mini-profile to reinforce the user's identity.
Profile cosmetics became
our most successful
micro-transaction source, surpassing our previous reliance on weapon skins.
Increased key user metrics. User engagement & retention went up, with a noticeable uptick in returning users.
Gained valuable purchase data. We now knew what themes and types of cosmetics our users purchased and equipped more often, allowing us to create features, and merchandise our users resonated with.
Stonger brand identity & loyalty. Incorporating our brand's characters expanded our brand identity with various styles and artwork. Community engagement was stronger, with many users asking for cosmetics featuring certain characters.
Served as foundation for future projects. Profile cosmetics became central to our microtransaction revenue, and with their introduction through this system, we had a system in place to integrate future features such as rewards and battlepasses.