AZOOVE UI UPGRADES

As part of a contract with the Timeless Toucan team, I not only start up their entire marketing pipeline but also was responsible for the UI updates that made the game so much better to experience. This project gave me the opportunity to design for a game very late in development and propose quick solutions to solve big user problems.

Azoove is a survival card game that sets a caravan of up to 4 players on a journey through the desert to drop off a cursed book. The desert is unforgiving and the players must make it to their destination in 10 days, surviving the harsh environment, predators and curses along the way.

PHASE 1: Setting the Foundation

First, since the project unfortunately did not include any documentation or design base for to work off of. I needed to outline a few objectives of what needs to happen to sustain this and future work. Upon playing the game, understanding its systems and nuances, I outlined the following objectives:

  1. I will set up a basic branding package derived from existing concept art and in game assets.

  2. I will try to reuse as much of the existing work done on the game as possible to conserve budget.

  3. I will make the UI be immersive to the game and not viewed as an alienated piece on top of it.

Second, I wanted to outline my goals for the design and scope of my work to find out precisely what I wanted to fix and improve.

Redesign Goals:

  1. Create an “In World” design system that will immerse the player in the game world.

  2. Reduce screen clutter and put emphasis on character as well as function.

  3. Prioritize visual clarity and feedback in every interaction.

PHASE 2: Setting the Caravan in Motion

BEFORE

Azoove is a very simple game with static visuals and a linear progression system. People spend more time interacting with the UI of the game then interfacing with anything else, so it needs to be good!

Current implementation is good for internal testing however, it could not hold up in the market as it only breaks immersion due to its “not doneness.”

Azoove embarks the player on a journey through the desert, where mystical beasts, magic and curses roam free. To expand upon that fantasy, the UI must create an impression that you are in fact on a dangerous journey, where any day might be your last.

The first stage of experimentation was trying to find the right mix of on screen action and clarity in order to let players also admire the view of the fantastic backdrops that the game offers.

This condensation goes in 4 distinct spaces:

  1. The Player and Teammate Healthbars that include a player’s current and max health, Bless Level (ability to change low cost cards to high cards) and a snapshot view of the cards you still have in your deck.

  2. The top journey progress bar which counts the amount of days you progressed in the journey as well as any forced stops you might need to take.

  3. The card hand view in the bottom center of the screen as well as the key buttons next to it.

  4. The separate opportunity view and with its own cards that is a core part of the gameplay loop.

HUD Shape Language Explorations

After significant iteration in this stage, I landed on a few items that fulfil my requirements and retain all the current elements within its design, organizing them for later use easily within Unity. I coordinated with the project lead and art teams directly to ensure that all remains within project scope and the UI is something we can all agree on.

The biggest refactor of the game however has to go to the Caravan Logbook layout of the card and camp actions. Before, cards would float ambiently and camp actions (Heal, Inspire, Cheer and Organize) would float at different areas of camp. These two player action sets are the most frequent and most important in the game as you refer to your hand and these action every single round. I utilized already existing card assets and textures and laid out a simple design that matches the game style.

Containing them within this book like design not only makes it so you can hide the camp actions when they are not relevant but also firmly plan the player in the fantasy of being a caravan leader.

The book is where a player goes to view their resources, allocate them and have a record of their adventures all at the same time, making this tome a must to be an effective leader in a very dangerous environment.

Card- Highlighted

Bringing it all together, I added much needed visual clarity to many basic game processes such as selecting cards, standardizing button location and allowing for a more balanced use of space to maximize both the game space and art space.

Card- Regular

Card Selection Modes

Card- Selected

Card- Used/ Unavailable

PHASE 3: Enduring The Sandstorms

As a final step, I brought all the ideas together within a unified design that struck a sound balance between what the game needed and the resources that were available for me to use without making previous work redundant. I managed to incorporate the essence of everything that was there and bring it together in a wonderful way including complex multiplayer views and different game screens.

Draft

AFTER

Draft

AFTER

With these additions, I followed through with the design focusing on:

  • Maximizing screen space and readability at the same time.

  • Iterating on the top bar a lot more, testing different kinds of implementations which will make it less distracting.

  • Standardized the player and teammate health bars to take up the least amount of screen space as possible and changing the teammate view to include the more immediately useful hand view for each player.

Azoove UI Redesign Gallery

PHASE 4: OUTCOMES AND LEARNINGS

It was an amazing experience working on this project. Working within established limitations was a fun challenge to take on and further prepared me to industry workflows that will require me to iterate on another person’s work and make the most of what is already there.