MID-FIDELITY WIREFRAMES
I launched a series of usability tests - 2 tests per week with a group of 30+ playtesters each time recruited from online gaming communities. We received feedback that our main menu screen and overall UI were confusing, which led us to make major changes to the UI design of the game’s home page.
I launched a series of usability tests - 2 tests per week with a group of 30+ playtesters each time recruited from online gaming communities. We received feedback that our main menu screen and overall UI were confusing, which led us to make major changes to the UI design of the game’s home page.
After all, the game interface was very important, serving as the player’s initial point of interaction with our browser game. We wanted to simplify the typically complex and information-heavy game interfaces commonly seen on indie games to avoid overwhelming users. Our initial UX/UI was cluttered and confusing - a symptom of us mindlessly throwing things together and prioritizing our game level designs instead. Our new approach was to group similar items together and employ a modular design to enhance a sense of organization.
However, we struggled with determining the correct priority for the buttons. Naturally, a game interface included many buttons: the shop, loadouts, leaderboard, friends and chat screens, settings, profile, tournaments, daily prizes, free items, amongst others. These are some of the things I decided on:
However, we struggled with determining the correct priority for the buttons. Naturally, a game interface included many buttons: the shop, loadouts, leaderboard, friends and chat screens, settings, profile, tournaments, daily prizes, free items, amongst others. These are some of the things I decided on:
- As this was a multiplayer browser game, we wanted to draw attention to the “multiplayer” part of the game - hence, we decided that most of the screen will be taken up by a visual display of the player’s team (i.e. 5 characters seen in a row in the middle of the screen).
- We decided that the left-side buttons will be items-related (shop, loadouts) and the right-side buttons will be game-related. With this grouping, it was easier for players to tell which buttons were associated with each other.
- We made the “play” button (bottom left hand corner) the largest - this was the most important button and, prior to this revamp, it had been confusing to find.