Wrecknauts : UI Breakdown

Wrecknauts was my first mobile game. It is an online multiplayer game inspired by MOBAs. I collaborated with Ishan Diwekar during my year at Sheridan to create the game for Android. Since both of us were programmers and we couldn’t find an artist to get on board, I decided to take care of the art and user interface myself.

In this article, I will be describing the UI design process behind Wrecknauts.

Strengths and weaknesses

I love to plan. So before I started working on the UI, I did a SWOT analysis on myself. On the bright side, I have previous experience designing user interfaces and I know how to make things look good. The problem was that I was in charge of programming a lot of stuff and didn’t get much time to work on UI and art. Polishing anything was just a dream. I had to get it right on the first or second iteration.

Based on the theme of the game (Pirates and 18th-century ships ) , I should have chosen a more detailed art style for UI. However, considering the limitations, I decided to go with flat design style and simple geometric shapes.

Logo and Color Palette

Wrecknauts Logo breakdown

Choosing the color palette was fairly simple. Blue was an obvious choice since the game was taking place on high seas. I decided to go with white and grey to compliment the blue color and give it a minimal and clean look. Adobe Color is a great tool to define a neat color palette.

The logo consists of four components. A skull, the ship’s wheel, crossed scimitars and an anchor; each of them representing pirates and ships in their own way.

Playing with geometric shapes

Login Screen

Since the logo had a lot of curves, I decided to go with circular shapes for settings and credits menu. Now, this is where the conflict occurred. For the sake of consistency, I should have gone with circular buttons for both the Join Lobby and Quit button. But I really liked the torn flag design behind the logo and title and didn’t want to replace it. Since the text field for name was rectangle, I didn’t have any choice other than to match the buttons with the elements above it. Sometime you have to compromise the design for aesthetics and clarity.

Game HUD screen

When it came to designing the HUD, I used circular buttons and shapes for two reasons.

  • Consistency : I had already decided to go with circular shapes wherever I could to have a consistency throughout the game.
  • Usability : The player will be interacting with the buttons using their index fingers and the human finger impression is almost circular. Therefore a circular button made more sense when it came to human touch interface.

The use of white color for the icons was a good choice due to it’s strong contrast against the background and game art. The attack icons made use of orange color to show their recharge status. On retrospect, the elements are not perfectly aligned and they require more spacing between them. Like I said, polishing was just a dream.

What went wrong ?

The mistake was adding too many controls and features in the game. There was a virtual joystick that was used to navigate the ship, three attack buttons, three powerup buttons and settings button. The powerups and settings were hidden unless required, but even so, the buttons took up a lot of real estate. It is an unavoidable situation when you are trying to port a genre of game originally designed to played with keyboard and mouse.

Conclusion

Since the game is based on MOBAs, there is a steep learning curve for the game mechanics and designing an easy-to-understand UI was a challenge.I wrapped up the UI design in the second iteration due to time constraints. If I had time, I would have used a few playtests to collect the user feedback to improve the UX. It is in no way near perfect, but I’m confident that I tried my best.

You can download the game from Google Playstore.