ABOUT
PROJECT OVERVIEW
Planet of Heroes is an exhilarating mobile MOBA that features a variety of gameplay modes, including 3x3 and 5x5 battles, Ranked matches, engaging PVE modes, and challenging Missions. With its emphasis on fast-paced tactical combat, the game boasts hardcore meta mechanics that provide depth and strategy to the gameplay experience.
Studio: My.com, Fast Forward
Year: 2016-2018
Platforms: iOS, Android
MY ROLE
Senior UX Designer
As the sole UX designer on the Planet of Heroes team, I had the opportunity to contribute to the game's development from its early stages. With the responsibility of overseeing the entire UX process, I followed each step, from initial research to UX testing.
PROCESS
STEP 1
Recearch
Studying multiple games with similar mechanics, aiming to figure out problems and solutions, both good and bad.
STEP 2
Design exploration
Creating low-fidelity wireframes, discussing with game designers, iterating.
STEP 3
Final wireframes
High-fidelity wireframes, including all use cases.
STEP 4
Docs and guides
Writting technical documentation. Creating guidelines.
STEP 5
Handoff
Working with programmers, TAs, UI art, discussing implementation.
STEP 6
Integration
Integrating some of the UI into the build (Unity).
STEP 7
Monitoring
Checking the work of UI art, integration team, playtesting myself.
STEP 8
User Tests
Working with UX lab, researches, organising playtests.
PROJECT STRUCTURE
CORE SCREENS
In Planet of Heroes, all screens follow a consistent structure for easy navigation. Screens at the first nesting level have a side menu, while screens at the second nesting level feature a "back" button. Tabs are used to organize information on complex screens. This standardized layout ensures intuitive navigation throughout the game, allowing players to focus on the exciting mechanics and battles.
MAIN SCREEN
The main screen provides convenient access to essential game interfaces. Players can quickly navigate to various core features, including battle modes, the store, retention tools such as dayly bonuses and ranks, in-game communications, and their user profile.
HEROES
The heroes in PoH are divided in 5 classes, each with unique abilities and features. Heroes are available for purchase, so the interface differentiates available and not available heroes and provokes hero acquisition.
ABILITIES
Heroes have 4 different abilities, with its own features and specific cooldown time each. The use of abilities greatly affects user’s game tactics and is core to masterting the game.
SKINS
Skins are different hero outlooks, allowing users to stand out. The interface was designed to give a best look of the skin and character motion in 3D.
RUNES
Runes enhance hero’s capabilities. They are unlocked with new hero levels and can be combined in builds to support user’s preferred tactics for each battle.
EQUIPMENT
Difficult PvE missions require higher level equipment.
There is a complex game mechanics around equipment upgrades, involving three equipment types, three components for each type and multiple resources (shards) for each component.
The interface is designed to make this complex logic clear.
SPARKS
A spark is another hero special ability used in battle. Sparks differ in rarity (common/rare/epic) and also can be upgraded using shards. Wise spark selection and development has a great effect on users’ ability to win.
COLLECTION
The diversity and complexity of sparks is managed by proper ordering: first upgradable ones, then sorted by rarity.
CRAFT ROOM
Shards needed for upgrading sparks can be obtained in battle or crafted in the craft room. Crafting takes time, but can be sped up, thus boosting monetization.
INVENTORY
Inventory holds all battle rewards and items bought in the store. All items can be sold or used.
ACHIEVEMENTS
The achievement system keeps players involved and boosts retention. There are multiple achievement and the progress for each one is tracked.
DAILY BONUS
Another retention boosting mechanic is daily rewards, with the most valuable prize on the last day and the progress being reset for not checking in daily.
BATTLE MODES
We started with 3x3 mode, then added practice and 5x5. The screen had to be as simple as possible and easily scalable.
BATTLE LOBBY
In the lobby, players wait for their team to form and customize their hero by selecting a spark and a skin. The intuitive layout, common in MOBA games, ensures easy understanding and navigation for players.
HUD
The battle screen is designed with two primary controls: a joystick on the left for hero movement and a "hit block" on the right for performing attacks. The joystick offers two modes, which can be adjusted in the settings: a fixed position on the screen or a mode where it moves along with the player's finger, providing flexibility and personalization.
The hit block consists of a hit button and three ability buttons, each displaying cooldown indicators. This setup allows players to unleash various abilities and attacks during battles, adding depth and strategy to the gameplay experience.
Additional optional controls are available on the battle screen, including buttons for respawning, using user spark, and healing. Each of these buttons has its own cooldown.
In-battle communication is facilitated through pings and chat features, enabling players to coordinate with teammates and strategize during intense battles.
A minimap is positioned on the top left corner of the screen, providing a tactical overview of the battlefield layout. Players can interact with the minimap by clicking on it, allowing it to scale up for a closer inspection or to gather critical information.
By offering a comprehensive range of controls, including movement, attacks, abilities, and communication options, the battle screen in Planet of Heroes provides players with the tools they need to navigate, strategize, and engage in battles within the game.
PROBLEM SOLVING
During the development process and playtesting phase, our team encountered a wide range of challenges that required solutions. In this section, I will showcase some of these problems and share the solutions I employed to successfully overcome them.
LOW AVERAGE SPENDING
Problem Overview
One of the challenges we encountered was the low player engagement with the game store, resulting in low spending. To address this issue, I formulated a hypothesis that the store button lacked sufficient visibility. With the need for a swift and cost-effective solution in mind, we embarked on iterating the main menu. However, despite our initial expectations, the process of iterating on the main menu turned out to be more time-consuming and costly than anticipated. Nonetheless, we remained committed to finding an effective solution to enhance the visibility of the store and drive player interaction.
Solution
Initially, the goal was to enhance the visibility and readability of the store button, aiming to encourage players to click on it. However, the desired outcome was not achieved, and players still overlooked the button. In response, I embarked on an iterative process to redesign the main screen, strategically displaying the core features prominently. As a result, the store was no longer confined to the main navigation but seamlessly integrated into the main screen. This adjustment successfully increased player engagement with the store, ultimately improving the overall user experience.
In one of the firts iterations, a solution was implemented by integrating the Store button as part of the main navigation.
Despite implementing a UI solution to address the initial problem, it did not yield the desired outcome. Unfortunately, the expected improvement or change in player behavior did not occur as anticipated.
To enhance the user experience, a redesign of the main screen was implemented. As part of this redesign, the navigation was relocated to the left side of the screen, providing a more accessible and intuitive layout. Additionally, to increase visibility and engagement, the Store button was integrated into the core buttons of the main screen. This strategic placement ensures that players can easily access the store and explore its offerings
Results
The implemented iteration yielded positive results:
-
The conversion rate, measured by the click-through rate to the Store, showed an improvement, indicating that more players were engaging with the store feature.
-
The average number of games per session increased, suggesting that players were spending more time in the game and becoming more involved with the overall gameplay experience.
These outcomes indicate that integrating the Store button as part of the main menu effectively addressed the initial problem and positively impacted player engagement and interaction within the game.
LOW RETENTION
Problem Overview
After identifying a decline in player retention, both in the short term (after a week of playing) and in the long term, our team recognized the need for effective solutions.
Solution
We introduced a rewarding progression system: 7-days and 30-days, to incentivize players to continue their journey in the game. By offering meaningful rewards and unlocking new content, we aimed to provide a sense of accomplishment and motivate players to stay engaged over the long term
Results
-
7-days calendar alone didn’t work in a long perspective.
30 days retention increased by 25%. -
LTV increased from 5 to 6 months, which was close to our business models.
POOR COORDINATION IN A TEAM
Problem Overview
Through extensive playtesting in the UX lab, we identified an opportunity to enhance the fun and satisfaction players derive from the game. One common frustration expressed by players was the difficulty in coordinating actions with their team, highlighting the significance of the social aspect within the game.
Solution
To address the coordination challenges among players, we introduced quick commands and a chat feature in the game. These additions aimed to improve communication and teamwork among teammates.
Click to check it out:
Results
-
Metrics: Approximately 70% of players utilized the quick commands or chat feature at least once per game. This high usage rate demonstrates that players found value in these communication tools and actively utilized them to coordinate their actions.
-
Playtests: Through playtesting sessions, we observed a significant increase in coordination within teams. Players reported a greater ability to effectively communicate strategies, give directions, and work together towards common objectives. This improvement in teamwork resulted in a more satisfying and enjoyable gameplay experience.
By providing quick commands and an improved chat feature, we successfully addressed the frustration players experienced in coordinating actions with their team. The high utilization rate of these communication tools, coupled with the observed increase in coordination during playtests, validates their effectiveness in promoting better teamwork and social interaction within the game.
RESULTS
After three years of development, the project achieved remarkable success and was recognized as the best game of the year:
However, despite this remarkable achievement, the decision was made to close the game due to business needs.
Being a solo designer in a team throughout the project was an incredible experience. It allowed for a deep sense of ownership and the opportunity to shape the game's user experience from start to finish. The journey involved collaborating with various stakeholders, implementing design solutions, and overcoming challenges along the way.
Despite the closure of the game, the experience gained in a team is invaluable.