Brief
This project documents the process of applying UX & UI methodology to a popular game's interface during an eight-week class. I chose Elden Ring (FromSoftware, 2022) for its challenging, info-dense RPG interface. By closely studying Elden Ring's experience design, I gained an understanding of the game's specific needs and goals, and applied lessons from the class to include my own revisions to the game.
CLIENT
ELVTR Instructor Ivy Sang - UX/UI for Gaming Course, 2023
PROJECT LENGTH
Approx. 8 weeks
MY ROLES
UX Research and Design
UI Design and Prototyping
CHALLENGES
• Approaching this game from a first-time user's perspective and reframing a user's initial needs & impressions.
• Finding ways to increase readability without removing any info already present in the game's UI.
• Extrapolating the user experience for dynamic needs across a lengthy, freeform 100+ hour game.
• Personally speaking, devoting detailed attention to this project on top of my own job!
╌ Player Journey ╌
• Reviewed player footage of the first 20-30 mins of Elden Ring
• Reviewed player footage of the first 20-30 mins of Elden Ring
• Identified design intent, user first-impressions, and user reactions
Player Journey - from New Game start to reaching Open World Exploration
╌ Paper Prototype ╌
• Identified designer intentions
• Understand what goals the game's UX & UI need to fulfill
╌ UX Flowchart ╌
• Details out the User Experience of a player's first 20-30 mins of gameplay:
• Character creation & cinematics
• Walking through the cold-open prologue level
• Opening limited-access item menus
• Exploring (or skipping) the tutorial level
• Identifying points of interest in the open-world environment
• Unlocking the World Map and having full freedom of exploration
• The final flowchart image describes Elden Ring's Combat Loop.
╌ High-Fidelity Wireframes ╌
• Note that these depict a graphical fidelity higher than necessary for UI wireframes! While wireframing, I sought to learn Figma's drafting tools by recreating Elden Ring's existing UI in Figma as much as possible.
╌ UX Usability Testing ╌
• Interviewed a user unfamiliar with Elden Ring to identify design elements that could use clarity
╌ Revised Wireframes ╌
Character Select - Wireframe
FEATURES
• Compressed choices into a vertical scrolling frame
• Fourth option has a gradient mask to communicate user to scroll further
• Changed order of the classes to demonstrate more playstyle variety up-front (i.e. first 3 are the knight, wizard, thief archetypes)
• Fourth option has a gradient mask to communicate user to scroll further
• Changed order of the classes to demonstrate more playstyle variety up-front (i.e. first 3 are the knight, wizard, thief archetypes)
• Added flavor text to communicate gameplay expectations to the player
• Changed terminology to “character origin” to better communicate this is only the starting point for your character, and not a traditional RPG class that you are locked in to.
• Changed terminology to “character origin” to better communicate this is only the starting point for your character, and not a traditional RPG class that you are locked in to.
Equipment Menu - Mockup
FEATURES
• Sorted character information and weapon info to group similar data
• Visually broke up the character sheet on right panel
• Weapon attribute requirements and character attribute ratings visually line up, so the UI can highlight a direct relationship in the numbers (e.g. when your stats are too low to equip)
• Visually broke up the character sheet on right panel
• Weapon attribute requirements and character attribute ratings visually line up, so the UI can highlight a direct relationship in the numbers (e.g. when your stats are too low to equip)
╌ Color-Blindness Accessibility Checks ╌
• UI mockups were tested under the most common types of color blindness: deuteranopia, protanopia, and tritanopia; in addition to monochrome to emphasize readable contrast.
ANALYSIS
• Elden Ring’s visual design and fantasy setting both emphasize an earthy palette -- both the base game and my own mockups lean heavily on golds, yellows, and browns.
• Color tests demonstrate that common types of color blindness do not hinder this UI, since it does not rely on many colors for information.
• Use of high contrast ensures that text is readable and item icons are generally easy to distinguish. (See: Image 4)
• The resource meters (Red, Blue, Green = Health, Focus, Stamina) are the most challenging elements under all forms of color blindness. (See: Image 5)
• However, displaying color-coded elements consistently allows players to parse this information by space (much like a traffic light) rather than by color.
╌ Revised UI Mockups ╌
• Lastly, I designed new menu screens in Photoshop.
Revised Character Select - Mockup
Revised Equipment Menu - Mockup
╌ UI Style Guide ╌
OUTCOMES & LESSONS
• Gained an understanding of FromSoftware's design logic by working within similar constraints
• Developed an advanced understanding of Figma and its drafting tools
• Learned practical ways to bridge user feedback with iterative design
POST-MORTEM
Despite a limited timeframe, I successfully applied UX/UI methods to an established game to increase user readability &info uptake, while maintaining a cohesive visual style that does not feel out-of-place for the fictional setting or the game franchise.
If given more time & resources, I would next focus on...
• Developing a new visual infographic language to be used throughout the game (e.g., element icons; shorthand visual cues for armor)
• Designing toggle-optional menus for both new players (a summary-focused "Simple View") and advanced players (an info-dense "Strategic View").
• Iterating on user research testing with a more diverse test group, including players unfamiliar with the genre.
