Tse-Yun Chaung
UX Research/Design
Optimizing UX in Stamina Purchasing in Mobile Game
Photo by Onur Binay on Unsplash
Project Goal
Optimizing the presentation and experience of energy replenishment and purchasing processes to increase player willingness, boost replay motivation, and enhance game revenue.
Project Period
June - July 2023
Design Deliverables
Competitor Analysis、User Flow, Expert Review, User Journey Map, Wireframe, Prototype
My Role
UX Designer
Background
This project involves a mobile game that has been in operation for a year. However, we discovered that some systems and features did not fully consider player experience during the initial launch.
Therefore, apart from dedicating a small portion of time to continuous development of new systems and features, most of our efforts are focused on maintaining and optimizing existing systems and features. One of the more critical areas is the stamina system.
As one of the revenue streams for the game, the stamina system holds significant commercial value for operating a mobile game. Players acquire additional in-game resources through microtransactions, thereby incentivizing continued gameplay. A poor experience with the stamina system could lead to a decline in payment rates, affecting the growth of game revenue.
Stamina is the energy consumed by players to enter game levels and replenishes over time.
Mobile game companies typically use the stamina mechanism to monitor players' progress in the game, encouraging them to continue playing and enhancing their motivation.
Discover Initial & Potential Problems
Community
The stamina system is consistently a focal point of discussion within the player community.
For instance, topics often revolve around how to best allocate stamina usage to efficiently acquire in-game resources and when it's most cost-effective to spend premium currency to replenish stamina.
Discussions about stamina in the Discord community
However, the real-time replenishment or purchasing methods for stamina have consistently been criticized by players. According to the insights gathered by the operations department, there are quite a few different opinions:
"Ugh, the stamina refill process is such a hassle. All I want is to get the resources I need in one shot, but I end up clicking through a bunch of windows."
"Finding stamina items is a pain! My backpack is always overflowing with stuff, so I can never locate them when I need them."
"Seriously, after topping up my stamina, I often forget which level I was planning to play. Then I have to waste time searching for it again... It's so frustrating!"
Replenishing stamina typically involves navigating through 8-10 steps,
including 2-3 repetitive actions or pages
With an overloaded backpack, it becomes challenging to locate the desired items for use
Define the Scopes & Problems
Expert Review
In order to address the specific issues highlighted in the player feedback above, I first conducted a thorough analysis of the current user flow.
It revealed that there are too many steps involved in the process, with a majority of them being repetitive tasks. For instance, navigating from the level page back to the home screen.
When purchasing stamina, users are directed along the red path back to the homepage, resulting in a convoluted process
Furthermore, I identified some usability issues with the interface for adjusting the quantity of stamina to be used or purchased.
For instance, the batch adjustment feature is not prominent and is difficult to use.
Users need to click on the quantity itself and then adjust it by scrolling up or down, often requiring multiple scrolls to reach a specific quantity.
When adjusting in bulk, users need to click on the middle number and adjust it by dragging up or down
User Journey Map
I synthesized this gathered data and created a user journey map to evaluate the potential issues players may encounter and their feelings and thoughts during the entire stamina purchasing process.
The most frustrating aspect is having to return to the level page every time stamina needs to be replenished or purchased, often requiring multiple purchases
Players have two types of actions:
-
With stamina items: direct use for replenishment.
-
Without stamina items: spending gems to purchase.
In the game, players often face interference when finding stamina items in their backpacks. Despite categorized tabs, they open based on the last selection, making the process cumbersome. Also, insufficient information when adjusting stamina item quantity or purchasing with gems adds to frustration.
Moreover, after using items or purchasing stamina, players must return to the level page, which is burdensome. Sometimes, they forget their intended level, requiring extra effort.
While these issues don't halt stamina use, they're still inconvenient and annoying.
Competitor Analysis
Furthermore, I explored the stamina systems in other similar mobile games to understand common and mature design patterns. This helps me brainstorm and decide on design solutions that are familiar to players, avoiding adverse user experiences while eliminating the need for players to start learning from scratch.
Different design patterns for mature stamina replenishment features in various competitors
Here are notable strengths and weaknesses of stamina system designs in several other competitors:
Strengths
-
Emphasizing important information (acquisition, consumption) with simple colors.
-
Providing sufficient information for players to evaluate the quantity for use or purchase.
-
Allowing precise adjustment of usage quantity."
Design patterns worth referencing from different competitors
Weaknesses
-
"Too many colors in text and icons make it unclear what is important.
-
Repetitive presentation of the same information (conversion ratio).
-
Some information is only represented with icons, lacking text explanations."
Design patterns to avoid from different competitors
Design Solutions
Wireframes
By using existing design elements, my wireframes closely mimic the game interface while retaining low-fidelity characteristics, ensuring consistency with the design system.
Through wireframing, I swiftly produce multiple design options for the operations and game planning teams, aiding decisions on item selection, gem currency usage pages, and quantity adjustment operations."
Rapidly produce various design options through wirframes
Additionally, creating wireframes facilitates rapid modification and iterative design, making it suitable for collaborating with various project partners to discuss feasibility. For example:
-
Game designers can determine whether the data tables used in the game planning can be reused and if different text lengths for language translations need to be accommodated.
-
Programmers can assess the process of functional aspects early on and begin creating necessary content.
-
Artists can wait until the design proposals are finalized before creating additional decorative materials, saving time on frequent material modifications."
Wireframing facilitates collaboration and iteration with project partners
Design Features
Based on identified issues affecting the user experience from the user journey map, and discussions with cross-functional team members regarding the feasibility of wireframe designs, the design solution was finalized. Here are the key features of the design solution:"
💾Before
✨After
1. Previously, when players used items to replenish stamina or purchased stamina with gems, they were always redirected back to the homepage from the backpack and shop pages, which meant they had to return to the level page.
In the new design, these functions are integrated into a pop-up window on the level page. This reduces the number of steps and allows players to quickly switch based on their needs.
In addition to providing various functions, the new pop-up window design offers clearer and more intuitive information and operations.
2. The original pop-up window suffered from non-intuitive operations and lacked sufficient assessment information. In the new design, these issues have been addressed.
Many design patterns were inspired by competitor analysis, aligning with player habits and enhancing learnability and usability."
The new design reduces the number of steps by almost 50% compared to the previous version
3. After testing the new stamina replenishment feature, the overall steps and number of pages in the new design have been reduced by half.
This reduction in redundant operations creates a smoother experience, allowing players to quickly utilize the feature and immerse themselves in the enjoyment of the game content."
Outcomes
-
Enhanced User Satisfaction: Players experience smoother and more intuitive interactions, leading to higher satisfaction levels.
-
Improved Efficiency: With a reduction in operational steps, players can accomplish tasks more quickly and efficiently.
-
Enhanced Usability: The redesigned pop-up window and additional information provide a clearer understanding of the feature, resulting in improved usability.
-
Reduced Frustrations: Players encounter fewer obstacles and confusion, leading to a more enjoyable gaming experience overall."
Conclusion & Reflections
Conclusions
The players have highly praised the new design solution, feeling that their needs have been addressed. Additionally, it has increased the frequency of players using the stamina purchase feature, thereby boosting the game's revenue.
This positive feedback not only enhances player satisfaction but also encourages the client to support and invest in optimizing features to enhance the overall player experience.
Community Players Satisfied with New Stamina Replenishment and Purchase Feature Design
What I have learned
-
Efficient Design Iteration
To enhance the design process, I recognized the value of steering clear of intricate prototypes at the initial stages. Instead, leveraging wireframes for rapid communication during brainstorming proved highly effective.
-
Early Collaborative Efforts
Early engagement with team members was pivotal. Collaborating with developers and designers prior to design finalization clarified production timelines, technical constraints, and translation requirements, ensuring smoother project advancement.