Fully prototyped game flow for a Mobile turn-based combat game

Project Specs

Type of Project: Academic Team (4 People)

Role: UI/UX Designer

Length of Project: 4 Months

Overview

Chain of Jewels was an academic project where we were tasked with designing all the UI for a GDD we were given. The user could interact with aspects we considered as part of the “Golden Path”.

Planning

I was tasked with exploring and establishing a visual style for our game. I created a low-fidelity wire-frame in Figma as shown below.

Main Menu

Settings

Login Bonus

How I adressed these issues:

  • Combat/Inventory is one clump and information about the level has its own clump.

Credits

Player Level Progression

Doing this early on allowed my teammates to get an idea of what their wire-frames should loosely follow so that we can maintain visual cohesion. It also helped them understand where they should place their UI elements.

Modifying Other Designer’s UI

Because this was a group project, my peers were working on their own frames and asked for my assistance in developing them.

What worked well:

  • Combat/Inventory are clumped together and information about the level has its own clump.

  • Loved the visual representation of the Chain of Jewels

  • Really liked the rounded corner

What didn’t work so well:

  • UI components felt too spread out and unorganized.

  • Battle should be clumped with the level info.

In summary, my process with modifying other people’s UI Work involves:

  • Finding out what works really well

  • Finding out what doesn’t work so well

  • Talking with them about my proposed changes

  • Once I have approval, implementing the changes

High Fidelity Wire-Frame

High Fidelity Main Menu

Full Prototype

What I learned

  • Creating feedback for a prototype is a lot of work, but does wonders for proper user experience.

  • Working with other UX Designers is incredibly rewarding because we can give each other feedback and iterate together.