Hogwarts Legacy fan UI redesign

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.

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.

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 focused-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.

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.

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.

Going forward

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.