.

.

UI REDESIGN FOR
Genshin Impact

.

UI / UX DESIGN
CASE STUDY

.

.

.

.

.

Overview

.

In-Game Select Character Menu

My Redesigned Select Character Menu

.

Genshin Impact is an action RPG for PC, mobile, and Playstation. I did a redesign of the menus for the Spiral Abyss dungeon, focusing on utility and imitating the style of the game's menus.For this project, I used the following steps during the design process:

.

.

.

.

Problem Statement

.

The player has to cancel their character selection to look at the enemy lineup
(sped up)

.

.

Problem Statement: The Spiral Abyss Select Character screen does not have access to the information required to make informed choices while team-building.Within the Spiral Abyss menus, there are multiple sub-menus of information about the dungeon, including the enemy lineups. These, however, are not accessible from the Select Character screen, which clears your selections if you leave the screen.Every Genshin Impact player I interviewed cited the Spiral Abyss menus as being a poor experience, some even opting to not do the Spiral Abyss at all due to poor UX.Players wanted access to the following information from within the Select Character menu:

.

  • Enemy Lineup (for all 3 chambers)

  • Blessing of Abyssal Moon (buff/debuff that changes every 2 weeks)

  • Character Setup

  • Elemental Resonance (the current bonus effects for the team)

.

.

  • The Spiral Abyss is a dungeon where the player selects 2 teams of four characters to defeat all enemies in 3 consecutive chambers, which means there are 6 total enemy groups to remember for the team selection.
  • The biggest issue players cited was having to go back and forth due to difficulty retaining what the upcoming enemies are: "I can never see the enemies and then I have to redo my whole entire team and then I would forget what the enemies are."
  • In addition to information about the dungeon, a player also does not have access to their characters' details, including their gear and stats - which means to change a character's gear or even check which gear they have, the player has to completely exit out of the Spiral Abyss menus.
  • Overall, the character selection process is a frustrating experience, as players try to memorize a large amount of information, flip back and forth between multiple layers of menus, or even take screenshots of the different information so they can reference it while team building.

.

.

Research

.

.

For research, I looked at other menus in Genshin Impact to see how they have organized information and the different layouts they have used.I decided to create a new enemy lineup modal sub-menu based on the Spiral Abyss "Challenge Summary" menu, which uses short horizontal tabs.

.

.

Spiral Abyss Challenge Summary Menu

.

.

For adding buttons to access sub-menus on the character select screen, I chose to reference the "Labyrinth Warriors" event selection menu, which has a button that opens an enemy lineup modal.

.

.

Labyrinth Warriors Menu (Opposing Lineup button, the "?" button)

.

.

  • I chose to look at other menus within the same game because:
    1) there are already a large variety of menus because it is a live service game that has offered many different events with many different menus in its lifetime.
    2) it is easier to maintain a similar style if I reference menus already in the game's style
    3) keeping similar layouts to other menus in-game ensures players already have formed the mental models for navigating them, facilitating their use
  • I chose to use the Challenge Summary menu because horizontal tabs more closely match up to the horizontal button layout for opening the enemy lineup modals on the Floor Summary screen. The tabs on this screen are about half the length of most other horizontal tabs in Genshin Impact menus, leaving more room for content.

.

.

Wireframes

.

.

.

.

On the Select Character screen:

.

  • added Blessing of the Abyssal Moon button (in the same place as in the previous layers of the Spiral Abyss menus)

  • added Character Setup button (similar to the Labyrinth Warriors "Opposing Lineup" button)

  • added Challenge Target button which links to a new Challenge Target screen

.

.

.

.

.

I created a new Challenge Target screen:

.

  • that includes enemy lineup (Monster List) and star criteria (Challenge Target)

  • with a similar layout to the Challenge Summary screen,

  • that would open on top of the Select Character screen

.

User Testing

.

.

Overall, players felt that my design was an improvement to the experience of selecting characters.I tested with Genshin Impact player familiar with the Spiral Abyss.All users indicated that they preferred my redesign to the in-game one. They all had strong positive reactions to the Challenge Target button and screen, citing it as their most wanted change to the original menu. Some were surprised that the Blessing of the Abyssal Moon button was new, and felt that "it definitely should be there" and that it feels natural.They felt that they had enough information available to form teams without having to back out and reset their selections.

.

.

.

Mockup and Interactive Prototype

.

.

I created screen mockups based on my wireframes and the style of the game's UI, following the colors of the original Challenge Target menu and Challenge Summary screen.

.

.

.

.

From these mockups, I created an Interactive Prototype to fully demonstrate my redesign. I got very positive feedback from Genshin Impact players on this prototype.

.

Interactive Prototype click-through

.

.

Revisiting

.

.

I briefly revisited this project after Genshin Impact updated the Spiral Abyss menu and added an enemy listing modal (Opponents' Details) to the Select Character screen.

.

.

.

.

As I found through my interviews with players, this was a much wanted addition - now supported by the game being updated to add this.I also asked the players I had tested this project with about this update. They all had positive feelings towards it but still wished for a way to change character gear from this screen - one of the issues I had addressed in my redesign.