MAKING A GAME FIDELITY PROTOTYPE

Demonstration

Short 3-Minute Commentary Video

I was looking at games with cursor navigation systems, and Hogwarts Legacy stood out to me. It was interesting to see how they organized their information and set all this content on the screen. I wanted to reconsider the overall menu information architecture and the user’s flow through the UI.

In the following sections, this case study will walk you through some thinking that went into restructuring the menu flows and designing the focus-based UI interactions.

IDENTIFYING PAIN POINTS

Understanding Their Navigation System

Considering The Context

It’s important to note that users always start with this radial menu when they enter the pause menu. The slow crawl of the cursor every time they want to navigate to their desired menu adds up over time.

Speeding up the menu navigation from entry to exit was my deciding factor in shifting to a focused-based navigation system. Below are a few more concerns I found with the existing UI that I address in my redesign.

Critique of the main start menu

WHY REDESIGN THE CURSOR

Understanding Why The Cursor Was Used

Cursor-style navigation systems in games are very common. This is due to them being easy to unify the experience across different consoles with multiple input styles.

Why Design For A Focus-Based Navigation

Goals For This Project

This is largely a passion project to gain a better understanding for designing for controller-first experiences. While I understand the benefit of both in either context, I thought it would be a great thought experiment to take a game UI that relies heavily on the cursor and reimagine the experience without it.

Benefit Of Focus-Based Menus

With the proposed menu structure reorganization below, I wanted to speed up the prosses of menu navigation so players could be back in the action quicker. As it is now, menu and sub-menu navigation eats up a lot of time for players.

My Reasoning

I wanted to think about a what-if scenario for a game that relies on it's cursor navigation becoming a controller-first experience.

Benefit of Cursor-Based

It's easy to make the experiences across-platforms uniform and can save on development time in that way.

Benefit of Focused-Based

Speedier navigation that can lean into the uniqueness of the controller and its features.

Re-Examining The Information Architecture

Looking at the existing tabs they have, some of them fill very similar roles. For instance, players might have a rough time trying to find their latest broom. Is it in the inventory or gear menu?

With this in mind, it was important to me to identify the primary goal of each page and see what realm of the player's experience they existed within.

Then, I could use this information to restructure the tabs to avoid confusion. Things like prioritizing gear over the resources menu make a lot of sense since players will interact with their gear much more often than their pouch.

Also, anchoring the players to the map whenever they enter the menu was a priority, as many other systems interact with it.

Existing menu navigation
Proposed menu navigation

CREATING THE WIREFRAMES

Using Figma

Understanding The Tools

I utilized Figma’s robust prototyping system to create a prototype that people could test with a controller. This helps keep the development process brief as a team could quickly create a game-fidelity prototype without the need to implement in engine.

I completed a large portion of this prototype with the help of Aashrey Sharma’s Figma plugin, Prototyper, over 2 days.

Prototyping links in Figma
Snapshot of how this prototype is linked together

Inventory Menu Design

Inventory redesign animation
Gear redesign comparisonOriginal gear screen
Gear main menu UI | Use the slider to compare my design with the original
Gear item details redesign comparisonOriginal gear item detail screen
Gear item detail menu UI | Use the slider to compare my design with the original
Inventory grid redesign comparisonOriginal inventory screen
Inventory menu UI | Use the slider to compare my design with the original

Talent Menu Designs

Talents redesign animation
Talents redesign comparisonOriginal talents screen
Talents menu UI | Use the slider to compare my design with the original

Map Menu Designs

Map redesign
Map redesign comparisonOriginal map screen
Map menu UI | Use the slider to compare my design with the original

Challenges Menu Designs

Challenges redesign animation
Challenges redesign comparisonOriginal challenges screen
Challenges menu UI | Use the slider to compare my design with the original

Quest Menu Designs

Quest redesign animation
Quests redesign comparison
Quest menu UI | Use the slider to compare my design with the original

REFLECTING ON THIS PROJECT

Going Forward

Learnings

This project was an exciting opportunity for me to utilize my prototyping skills in the context of game UI. Learning more about the industry tools and creating a playable prototype was really rewarding.

This helped cement my understanding of how effective prototyping can be regarding user testing and discussing ideas with the team. It also helps me, the UX designer, get a good look at how I want the details of interactions to play out early on in the design process.