Quaver Case Study
Redesigning the user interface and experience of an indie rhythm game.
Background
Roles: UI Design, UX Design, Visual Design, User Research, Prototyping
Timeline: 2 weeks in May 2019
Quaver is an indie rhythm game looking to release early next year. Its gameplay loop takes heavy inspiration from other, major rhythm games. In a market filled with casual games with all-frills aesthetics, the team seeks to establish Quaver as a competitive-focused, clean-looking game. As the short-term volunteer designer of the team, I revamped the UI and UX of the game and established a visual identity system for its future development.
Problem
Quaver is being developed by a small team of volunteers. The team is comprised of a dozen gamers and developers. While they understand the importance of great UI and UX, no one on the team had design experience. This led to the game having a plethora of interface and user experience issues:
- Overly dark and clashing colour palette
- Unclear copy leading to user confusion
- Inconsistent visual style
- Poor information architecture
- Lack of social features/connection with the online forum
User Research
As I’m not a rhythm game player, I needed to understand and empathize with the current users to make sure I’m designing for the right people. I reached out to interview players online and conducted a contextual inquiry with my friend who is an active member of the Quaver community.
Some of the questions I asked were:
- “What are the biggest frustrations you have with the current client?”
- “What is one thing you wish could be added?”
- “What part of the game do you spend the most time on?”
Through the interviews and observations, I created two personas that captured the needs of the users:
Information Architecture
Based on the insights gained from user research, I created a simple, hierarchical flow to ensure good discover-ability and usability for veteran and new players alike.
Ideation
I recognized that the rhythm game scene is dominated by a few major games, so the first logical approach is to examine these and see how Quaver holds up.
I was surprised to find that in the dozens of rhythm games I have examined, many of them leaned heavily either towards utility or aesthetics. A commonality between most of them, however, is the inclusion of album/song covers into their UIs. This makes sense, as any rhythm game experience depends heavily on the source material for its maps: the songs themselves.
With this knowledge, I began exploring different concepts that could differentiate Quaver from its competition while staying true to its roots.
Prototyping
With early concepts completed, I sent them over to the development team to look at their technical viability. Due to the way the Quaver framework is built, the game would have trouble overlaying elements on top of each other; also, special effects such as blurring could degrade performance, which is a big no-no to the competitive game that Quaver seeks to become.
With this knowledge, I set out to create a design that is flat and simple, but also clean and stylish:
The new design caters to both personas I gathered for the research phase. The leaderboard includes the top rankings as well as the player’s own personal best. This allows the player to see how close they are to the top. The addition of “Local” and “Friends” tabs allow the player to compete with themselves and their friends for new players to see their progress.
The map selection screen borrows from existing, popular rhythm games so that rhythm game players looking to try Quaver for the first time will feel right at home, and serves as an anchor point for users to discover more unique features of the client.
The new design is less verbose than its predecessor but retains the principle of “words over icons” for its UI. During the user interviews, many existing players expressed they prefer the look of text-heavy UI elements. It is also a staple of many other rhythm games.
Also during the user interviews, players expressed that they prefer playing the game at night, when there are less distractions in their pursuit of high scores. Because of this, the “dark theme” design utilizes a colour palette that is easy on the eyes, but not pastel as it would detract from the professional and competitive nature of the game.
Reflection
The importance of developer consultation for technical viability
My experience with Quaver was the first time I had to design around technical limitations. For my school projects and passion projects, the sky is the limit and I did not really have to consider the technical viability of my designs. For future real-world projects, I aim to collaborate more closely with the developer team to make sure the design can be viably implemented.
The importance of keeping others up-to-date and receiving feedback
As I was the sole designer (and a very new member) of this online-only team, I mostly worked alone and only shared my progress once every few days. My intention was to eliminate spam within the development chat channel by only sharing significant progress. However, I overlooked the possibility of receiving crucial feedback that could affect how I should continue forward in my designs. The team was always excited to see new screens and would comment on them, sharing their opinions and preferences. Some shared great ideas that I later implemented.
The Future of Quaver
After two weeks of working with the incredible volunteer team behind Quaver, I had to shift my focus towards my upcoming internship and could no longer reasonably work on Quaver. I reached out to my designer friends and passed on hopeful replacements to the team. I made sure to share all visual assets as well as the visual identity system I created with the team so that they could build on the new design in the future. The game is currently still in development with an open beta. The release date is tentatively Fall 2020.
