Avatar Customization System
Goal and Result
Integrated avatar cosmetic personalization system into the Web/App
Higher ROI percentage
Higher user engagement
Gathering Requirements
In the first phase, I had quite a lot of discussions with the Game Designer for the requirements while also aligning the business specifications. Eventually, it came up as follows:
Business Requirements
Cosmetic Personalization’s meant to modify only the appearance of the equipment and won’t change its battle properties.
Offers more uniqueness to the subscribed/paying player e.g Meekolony Pass owner.
Free layerable cosmetic slot should be limited to 2 layers per type slot, the rest of the layers are locked behind a subscription.
UI/UX Requirements
Player’s able to layer their cosmetics and switch around layers easily.
Player’s able to see the cosmetic preview in real-time before saving the cosmetic changes.
The layers must represents the positions of items displayed on the character avatar.
Comparative Analysis
We take a look at our potential competitors and referencing what works for our scenarios by these criteria:
They’re games with dressing up elements
Offers more unique personalization behind paywall
Has layering abilities
Fun to use and easy to customize
Key Takeaways:
The organization of the cosmetic slot types are commonly ordered from top (head) to bottom (feet)
Display for slot layerings represents something from inner to outer
Display indicators for unique cosmetics (paid, seasonal, etc.)
Concept Sketches
Several concept sketches was made for brainstorming before discussing it with the teams to pin point which ones are most suitable to explore into detailed mockups. The decision’s eventually made using dot-voting.
1st Mockup
Earliest mockup to test the ideas in a much more solid visualization. This iteration’s done to validate whether it’s functional and easy to use.
2nd Iteration
The second iteration is a working prototype with finalized UI and UX. During this stage, our focus is finding missing states and errors in functions.
Defining Item Rarities and Components
I used the existing Rarity Colors as our current users are already accustomed to it. This will lessen the learning curve and friction in the experience.
Final Result
After the launch, we monitored and made several more iterations based on needed UX corrections. Now it’s fully functional and you can make your own avatar as well by signing up to Tatsu.gg and set up your character.
Extra Slots
By offering extra cosmetic slots locked behind subscription, higher ROI achieved and players engagement increased.
Other Projects
