Hatsune Miku Colorful Stage
This case study was a collaborative effort between a team of designers as part of one of our User Research modules. Our project focused on improving the design of the main HUD UI for a game, aiming to simplify elements that were time-consuming or difficult for new players to navigate.
We addressed issues such as button size consistency, the layout of key menu pages, and the complexity of the main menu’s navigation. By reducing the number of buttons and streamlining their design, we simplified the overall user flow, making it more intuitive and efficient for players to complete tasks.
Roles
Researcher
Low and High-fidelity designer
Tools
Figma
Google Forms
Problem
The game’s UI suffers from several usability issues, including small text, unintuitive design, and a cluttered screen. Key tasks like finding player IDs, adjusting volume, and managing collections are inefficient. Unclear icons, inconsistent button sizes, and poor font choices reduce clarity and readability. Additionally, dialogue boxes are unappealing, and checkboxes are used where toggles would be more appropriate, further complicating the user experience.
Research
We began by listing the aspects of Hatsune Miku: Colorful Stage that we liked and disliked, which helped us identify key opportunities for improvement and guided the direction of our design process.
After closely examining the game and gathering feedback from players, we decided to focus on improving the main hub UI, as it’s the first thing users see each time they open the game.
Screenshot taken from the game
Main Hub
Screenshot taken from the game
Main Menu
Define
User Persona
To better understand our user and how we can address their needs, we developed a user persona based on the insights gathered from our research. By identifying key traits shared by our target user, we created the persona of Cheryl.
This approach provided a deeper understanding of the underlying issues and allowed us to prioritize solutions more effectively.
User Journey Map
We mapped out each stage of Cheryl's journey, from opening the game to discovering the songs she can play. This process allowed us to visualize her interactions, identify pain points, and understand her experience at each touchpoint.
Prototype
Low Fidelity Prototype
Based on research and user feedback, we created a paper-based low-fidelity prototype for quick iterations and easy changes.
​
We focused specifically on the main hub and main menu — two key areas the player interacts with every time they open the game.
User Testing 1
We tested our first prototype with a total of six playtesters, aged 19 to 25. Three playtesters who frequently play rhythm games, while the other three who do not play rhythm games at all.
​
The survey aimed to evaluate the usability of our paper prototype compared to the original game and gather insights on the following:
-
Playtesters' gaming habits, specifically in relation to rhythm games
-
The features playtesters would use most and least
-
Tasks that were difficult to complete within the prototype
-
Playtesters' experience completing tasks in the prototype versus the app
-
Clarity of button names and terminology​
​
The survey included a mix of multiple-choice, multi-select, and linear scale questions, followed by open-ended questions to capture detailed feedback.
Positives
Playtesters were able to complete tasks in fewer steps compared to the game.
Pain Points
-
Playtesters were confused by the dropdown and hamburger menus, feeling they conflicted with each other.​
​
-
Buttons for pop-up windows were too close together on mobile, making them hard to use.​
​
-
Infrequent rhythm game playtesters struggled to understand the iconography and terminology.
Mid Fidelity Prototype
The mid-fidelity prototype was developed based on the feedback from User Testing 1, addressing the pain points identified by participants. We refined the design to improve usability, making key elements like iconography and text clearer, and ensuring the user flow was more intuitive and consistent.
User Testing 2
Following feedback from the first round of testing, we developed a medium-fidelity prototype to address identified issues and improve user experience. We conducted a survey similar to the first, using the same 6 playtesters to assess whether the updated prototype was more intuitive and easier to understand than the original game.
​
The survey gathered insights on:
-
User Gaming Habits: Participants' experience with rhythm games.
-
Feature Preferences: Which features players would use most and least.
-
Task Completion: Which tasks were difficult to complete in the prototype.
-
Task Experience: Users' feelings about completing tasks in the app compared to the prototype.
-
Terminology Understanding: Whether the button names and terminology were clear.
​
The survey included multiple-choice, multi-select, and linear scale questions, followed by open-ended responses to capture more detailed feedback.
Positives
-
The playtesters had experience with rhythm games, which helped them quickly understand the app's layout and navigation conventions.
​
-
Due to their familiarity with the genre, playtesters were able to complete tasks efficiently, typically within 10 steps.
Pain Points
-
Playtesters were unclear about terms like "characters" in the collection area and found the overall wording in some sections confusing. This made it difficult for them to understand the purpose of the collections within the game.
​
-
The collection layout in the A/B test was not well-received, and players struggled to identify certain items, especially when they were not clearly labeled.
​
-
Playtesters had difficulty distinguishing buttons from other elements in the interface and preferred icon-based buttons over text-based ones, finding the latter less intuitive.
Mid Fidelity Prototype (Digital)
Our digital mid fidelity prototype was designed based on the paper prototype. The main goal was to get a feel for how the layout and experience feels in a digital format.
User Testing 3
For this session, our goal was to gain insights into users' experiences and emotional responses while navigating the digital prototype, allowing them to experience the potential look and feel of the game.
​
Additionally, we encouraged playtesters to share any other issues they encountered during testing to ensure we captured all areas for potential refinement.
Positives
They liked the categorization of items and collection.
Pain Points
-
Playtesters disliked the task of finding the "cool gem" in both the original application and the prototype, finding it frustrating.​
​
-
Virtual avatar customization was not as accessible in the prototype as it was in the original game.
​​
-
Playtesters felt that personalization options should be integrated into the account section, rather than having the account as a separate button in the menu.
​​
-
The term "Materials" in the prototype was unclear to the playtesters, causing confusion.
​​
-
Some playtesters took more steps to access the Premium Mission Pass, and a few still felt lost when navigating the digital prototype
High Fidelity Prototype
After analyzing the playtesters' feedback, we made adjustments to elements such as renaming and rearranging certain buttons and layouts. We then enhanced the mid-fidelity prototype by adding color, text, and images to bring the final design to life.
Key changes made
Main HUD – Improved Usability
Change: Resized buttons in the main HUD to improve accessibility and screen visibility.
​
Reason: The buttons were unnecessarily large, obstructing the screen
​
Impact: Enhances usability by ensuring buttons remain touch-friendly while providing better screen visibility for an improved player experience.
Menu Options – Clearer Navigation
Change: Reorganized the menu layout, resized buttons, and renamed headings for better clarity.
​
Reason: The previous menu had inconsistent button sizes, and some headings were unclear, making it difficult for users to navigate efficiently.
​
Impact: Enhances usability by ensuring buttons remain touch-friendly while providing better screen visibility for an improved player experience.
Conclusion
In conclusion, most of the changes we implemented during the design phases were well-received by our playtesters, with no major issues or bugs reported during testing. Many playtesters also praised the prototype for its striking resemblance to the actual game, indicating that our efforts to replicate the core gameplay experience were successful.
Things to improve
One of our biggest challenges came during the design of the final fidelity prototype. This stage not only involved significant time spent designing custom icons but also required us to replicate visuals and art assets from the original game as closely as possible. The effort to match the game's visual style proved to be time-consuming and, at times, difficult to execute with the limited resources available.