Year
2024
Client
Garena
Category
H5-Game Mode
Role
UX Design
Overview
My team and I have developed a new game mode called “Entertainment Mode Ranked.” This mode is designed for players who want to enjoy stress-free gameplay and unique experiences, while still feeling a sense of accomplishment through achievements and pride displayed on the leaderboard. Whether players win or lose, their rank will never drop; it will only increase, either slowly or rapidly.
Responsibilities
As a UX Designer on this project, I was responsible for designing the end-to-end user experience of an entire game mode, with the goal of making it simple and easy to understand for players. I collaborated closely with artists and engineers to bring the design to life and prepare it for launch in multiple regions.
Event Wireframe
I began the design process with rapid wireframing in Google Slides to focus entirely on layout and user flow. This allowed me to iterate quickly on core mechanics before transitioning to the polished, high-fidelity final interface.
Event Userflow
Problem & Solution
Problem:
My team initially proposed a modular grid layout to give players a “hall of fame” feel. While visually appealing, I felt it lacked essential information such as badge statuses and descriptions. I suggested an alternative horizontal column layout that included both icons and detailed context.
Solution:
After a thoughtful debate on the pros and cons of each approach, I took a step back, reviewed the strengths of both designs, and created a new hybrid layout that combined the best of both ideas to improve clarity and engagement.
Modular Grid Design
Horizontal Column Grid Design
+
Final Layout Draft (Yes, I love Overwatch Rank Icon Design!!)
Impact:
Maximized Information Density: I optimized the layout so players can see a large collection of badges at once without the screen feeling cluttered or overwhelming.
Balanced Visuals with Detail: The hybrid design provides the "Hall of Fame" look the team wanted while ensuring that essential information—like badge status and descriptions—is always easy to read.
Improved Navigation: By combining a grid for browsing with a clear details panel, I made it much faster for users to track their achievements and understand their progress.