Redesigning the user interface and experience of an indie rhythm game.

Updated Quaver Main Menu

Background

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

The game is riddled with interface and user experience problems
  • 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

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:

The two main personas that make up the active player base of Quaver

Information Architecture

Hierarchical information architecture of the critical game functions

Ideation

Osu!Lazer and StepMania, two popular rhythm games with very different visual identities

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.

Two early layout concepts for Quaver’s redesign

Prototyping

With this knowledge, I set out to create a design that is flat and simple, but also clean and stylish:

New singleplayer screen for Quaver, the rest is not to be disclosed for now

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

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

Product Designer at Designware, a next-gen no-code platform for designers. #meta