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.
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 MENU
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.
I wanted to think about a what-if scenario for a game that relies on it's cursor navigation becoming a controller-first experience.
It's easy to make the experiences across-platforms uniform and can save on development time in that way.
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.
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.
Inventory Menu Design
Talent Menu Designs
Map Menu Designs
Challenges Menu Designs
Quest Menu Designs
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.