[UI Design] Basic Upgrade Screen

Recently, I applied for a UI/UX designer position in a game company and as part of my application, I was tasked to create a UI for an Upgrade Screen. The brief was: You have an Oven and you need to upgrade it using materials. You don't have enough materials so you need to look for some or use premium currency.

Straightforward.

Step 1 - Flowchart

So I went and started the design on paper with a flowchart. Some questions arose while working on it that was not given in the design brief. "Is this a tutorial point?" is the main unknown because depending on the player's progress in the game, the UI and UX of the brief will be different. Lucky enough, I was informed that it is already past the tutorial point so it is a regular upgrade section.

But below is the flowchart I made with the tutorial assumption in mind. I still refer to it to gauge how much player input is needed and adjust along the way

Step 2. Research phase

The theme of the brief is playful, whimsical, and retro-futuristic. Very very vague, considering I was not given any visuals of what the concept is about. Other information such as what kind of resources does the game have, what is the gameplay, etc were not given so I made the assumption of its sample gameplay with the narrative I was given.

I looked into recent games like Cozy Florist to see how they did their upgrade mechanic UX. I crossed referenced it with good ol' Archero 2 (as it is one of my benchmarks in Game UX)

Since I am unfamiliar with what retro-futuristic means, I also searched in Pinterest what is it exactly, along with color palettes that correspond to the concept.

Step 3 - Low Fidelity mockups

This is where I am most comfortable with. I am used to making low-fidelity mockups that I can finish them on the same day I started. I explored various options and positioning of UI elements on the screen and came up with roughly 3-5 mockup samples. I used Gemini to help generate a sample gameplay based on the brief. This helps me determine how much information should I display on the screen to avoid unnecessary noise.

I took note of the information valuable to the player. The key here is what do the player get when they upgrade the oven? It's important to show that to help players make the informed decision of whether using their resource to upgrade or save it for something more of value to them. So I incorporated that into the mockup. Less mental workload on the players' end. 

Step 4. Hi-Fidelity

This is the most challenging step for me. I'm usually used to having artists on standby to do the polished version of the UI. I took time to research colors and themes on what exactly is a retro-futuristic that still comes with playful and whimsical. Originally gonna go with a blue-orange-pink motif because it themes well with retro-futuristic but I realized that I don't have any idea on the gameplay that would help me determine what kind of UI-theming I should do. So I went with the generic route so that it can be used regardless of the proposed gameplay.

The icons I used are a mixed of a free icon pack and my own creation using Figma's Shapes and Union features. As much as I can, I would avoid relying too much on AI for any assets I use.

When displaying important information, I made use of color psychology where red connotates to anything that should catch one's attention while green means that you are good to go. So that when seeing the screen, players would immediately know that are missing X material (and would need more) or they have reached the requirement at a glance.

Learnings

1. Gameplay is important information - Having an idea on what the gameplay is and how it flows can help you determine the kind of theming needed when designing UI. You must balance the amount of noise the players see on the screen to avoid visual overstimulation.

Ideally, when the gameplay is chaotic enough or has a lot of elements being shown, a simpler approach on the UI would be the best route to take to lessen the mental load that players need to process all the noise they see on the screen.

2. Always show all the information that will help with player decision - this gives players control over the game. By giving them the choice of whether using their resources to improve QoP (Quality of Play) or save it for another time opens the discussion on the type of players the game attracts. This data would be valuable when conducting live-ops in games in terms of content, balancing, etc.