Samantha Monaghan
UI/UX Portfolio
Samantha Monaghan
Ideation
Genshin Impact UI Rework
Let's start with some background for those who may not know! Genshin Impact" is an action role-playing game (RPG) developed and published by the Chinese game development studio miHoYo. It was first released in September 2020 and is available on multiple platforms, including Windows, PlayStation 4, PlayStation 5, Nintendo Switch, iOS, and Android. It's known for its stunning open-world design, engaging gameplay, and gacha-style monetization. There is lots of exploration, playable characters, elemental combat, stories and quests to keep you busy!
I chose to focus my research on Genshin Impact with a particular emphasis on its HUD (Heads-Up Display). There are several compelling reasons behind my selection:
-
Clutter - Genshin Impact is known for its extensive and at times cluttered HUD. It often displays a significant amount of information on the screen, which can obstruct the player's field of view. This clutter aspect intrigued me, and I wanted to explore how it impacts the overall gaming experience.
-
Menus - The game features a multitude of menus and HUD elements, each serving a specific purpose. This abundance of interfaces provided me with ample opportunities for research. I can thoroughly investigate the various game states and compare and contrast the different menu designs, allowing for a broader analysis.
-
Community - Genshin Impact boasts a vibrant and passionate gaming community. I actively participate in this community. Furthermore, the extensive and opinionated Genshin Impact community on Mihoyo's website offers a valuable resource for my research. I can leverage the experiences and insights of players from around the world to enrich my own analysis.
-
Favouritism - It's my favourite game, and I actively participate in this community. This personal connection to the game motivates my research efforts. Additionally, my familiarity with the game's menus and HUDs makes it easier for me to navigate and analyse them effectively.
To sum it up, I'm focusing on Genshin Impact's HUD because it's got a busy interface, a bunch of different menus and HUD elements, I personally love the game, and there's a big and passionate community around it. These things are what make me excited about my research, and they let me dig deep into how UI design works in gaming. design in gaming.
Other Challenges
All the challenges stated below will require a thoughtful approach to UI design and technical implementation to ensure that the HUD enhances the overall gaming experience if it was to be implemented into Genshin Impact. Below each point is my solution for each individual issue.
-
Clutter - Main Gameplay HUD
-
Toggle Hide HUD UI. This will allow for an Immersive Mode for players that frequently would rather roam the world than partake in challenges, trails or combat.
-
-
Optimisation in HUD
-
Claim All - This would be an option button for Weapon/Artefact/Food pickup processes. After engaging in combat there is a mass of items to be collected and the only way to do this is to button mash until it is all collected. This solution erases the high effort task.
-
Expeditions, Forging and Furniture Creations - Since this is in relation to the serenity tea pot, I think it should be removed/condensed completely. Some players do not use this aspect of the game therefore it is not needed on the HUD. (The teapot is like a separate game in itself - The Sims)
-
Prioritises interactions over pickups - The claim all button would solve this however, there should be a sequence of collecting all loot around characters before you interact with them as they sometimes have a cutscene or take you to a different location in which you lose the loot, if you didn't mean to click on the interaction first.
-
-
Sub Characters Timers/Duration HUD
-
Elemental Skills/Bursts
-
Regenerative Health Food
-
Decreasing Stamina Consumption Food
-
Increase DMG, ATK and CRIT Rates Food
-
Increase DEF and Healing Skills Food
-
All of these take up alot of space on the HUD when in use, I would like to condense these down so they are not as much in the way of the player and taking the player out of the immersion. These are still very important to the player however, take up too much space on the HUD.
-
-
Repeat HUD Dialogue in Daily Tasks
-
Streamlining repeated HUD dialogues encountered in daily tasks and integrating a "Skip" option button for player convenience.
-
Research
These quotes provide valuable insights into the challenges and considerations related to UI/UX design for Genshin Impact and validate my above challenges and solutions to enhance the overall gaming experience
Cross-Platform UI/UX Challenges: "As mentioned at the start, the game was designed for cross-platform play across the three platforms, and it really hurts it when it comes to the UI/UX design. Menus are annoying to go through..." (Brycer,2022).
UI Usability Concerns: "The UI was very cumbersome, and there were times that it seemed like I was fighting it to get basic information or perform simple tasks in other games." (Brycer,2022).
Photo Mode as a UI Solution: "Currently, the game doesn’t allow to hide UI but the user can use Photo mode to take a picture of the picture. In picture mode, the UI will not be visible so you could capture the beautiful view of the game." (How To Hide UI In Genshin Impact - Tricks For Tech, 2022)
Reducing HUD for Immersion: “Some games strive to remove HUD elements altogether. Peter Jackson’s King Kong: The Official Game of the Movie (Ubisoft, 2005) utilized a few prompts at the beginning of the game, but mostly conveyed game information via sound, animation, and visual effects. The result made for a very cinematic and immersive experience.” (Rogers,2010)
Player Customization of HUD: "If you are going to have lots of icons on screen, why not consider letting the player choose which ones they want and prioritize where they should go. This way, the player can choose what they feel are the most important icons for them. Just make sure you don’t give them the option to obstruct the main gameplay field." (Rogers,2010)
Layout Consistency: “The content is placed inside the columns (within margins). These help us make decisions on where to place an element and make a well-structured interface. Columns help developers to create consistent layout across multiple screen sizes." (Mobile Layouts & Grids, 2022)
Miro Planning
Scamps
In Miro, I meticulously set the layout for my menus and established their connections to the HUD. I then crafted a digital flow diagram, and I also sketched a preliminary layout for the Paimon's Menu concept.
Furthermore, After my initial Scamp creation, it lead to the development of a low-fidelity concept, which was also constructed within Miro. For a more detailed examination, I have provided a link to my Miro work, as condensing the menus off the HUD and into smaller menus made it challenging to capture the complete information in a single snapshot.
 low fidelity |  digital flow |  paimons menu |
|---|---|---|
 scamp |
Low Fidelities
I've created low-fidelity wireframes in Procreate by hand-drawing them and adding annotations within the application. Additionally, I've included a wireframe from Miro, as it presented a cleaner design compared to what could be considered a rough sketch.
These wireframes offer more intricate details compared to my earlier HUD concepts. They encompass character icons, health bars, elemental bursts, skills, as well as timers for the player's elemental skills and bursts. Moreover, I've provided additional depth regarding menu icons and the map layout at the top of the screen.
To enhance clarity, all subsequent iterations have been thoroughly annotated, considering that these elements might not be immediately obvious to a new player. Furthermore, I've addressed potential confusion related to distinguishing between borders and the health bars surrounding the selected character icons.
High Fidelities
These represent my final iterations of high-fidelity concepts for the HUD. I opted to maintain color elements to enhance visibility and immersion. The icons themselves are white and transparent, while the chosen character icons have transparent backgrounds with a green border indicating full health. Additionally, each character's elemental burst and skill types are represented by distinct colors in the top-right corner of their health bar borders, right beside their respective icons.
I decided to stick with the stamina bar being yellow and health being green when full, gradually transitioning to red as health depletes. However, for small food buffs that players can acquire, I chose to keep them grey. Similarly, when a player utilizes their elemental burst or skill, the icons turn grey, signaling to the player that they need to wait before using them again. Importantly, the icons remain recognizable, even in their faded state, ensuring that players can quickly identify their character's elemental skill.
In summary, I'm highly satisfied with the HUD's final design, as it successfully achieves my initial goals of decluttering the interface and providing players with a more efficient way to manage their secondary characters' health and skills.
