An invigorating delve into the UI of Elden Ring
Elden Ring, as many believe, is a masterpiece of a game – while also being the challenge of a lifetime for most players. While participating in a course taught by Ivy Sang, the Director of UX/UI for Diablo IV at Blizzard Entertainment, I had the opportunity to step through a small portion of user research, player profile definition, wireframe creation, and ultimately my take on an evolved version of Elden Ring interface elements.
The result was a fulfilling journey in redefining and enhancing the interface of an already-stellar presentation, into something that I believe presents even better.
My full process is explained below, or you can go straight to the full final concept here.
View Full Concept
Project Intention
Understand and enhance
From day one, I appreciated the approach that the Elden Ring team took with their interface design style – but it also left me with questions, and being a designer, with wonderment as to how its implementation could be improved.
I took this project as that opportunity to explore the existing interface, learn from player feedback, and iterate to an improved variant – all while staying true to the existing style.
Skills & Tools
- UX
- UI
- Figma / FigJam
- Photoshop
Details, Details & More Details
The existing interface elements lack depth and detail in most tings except the iconography. I felt the need to bring those two styles closer to together with this endeavor – while maintaining a level of minimalism that modern games embrace.
Clearer Function
From personal experience, I had challenges with understanding certain functions within the game – I wagered that others did, too. Thus, a focal point of adjusting and correcting any lack of clarity and filling gaps of understanding was critical, without redesigning the original game’s intention of challenging the player.
Gain UX/UI Knowledge
Above any game UI improvement I wanted to make, a majority of this project was about learning and growing as a UX/UI designer. I wanted to ensure I walked away with much more knowledge about the process, and the product, by the end of this journey
Defining the player journey
At the beginning of our process, we observed a portion of real gameplay and identified thoughts and actions presented by the player. This allowed for us to begin understanding the available options to the player, their decisions or thoughts with those options, and considerations for why those actions were made - in addition to opportunities to add, remove, or improve them as we moved forward in this endeavor.
Mapping the player flow
With information gathered from the example player journey, the beginnings of a player option flowchart could take shape. I focused on the selected screens that were covered within the segment of the provided player journey, and created a flowchart that portrayed the options a player had at each screen, including variables based on previous or current player actions.
Wireframing the direction
With clearer understanding of player intentions, the available options, and the existing experience that was active within the game, I was able to craft wireframes aimed at improving the current interface. With the help of additional user testing, I was able to validate an improved action panel for better structuring and detailing the available character actions, add better visibility to player HP/FP/stamina bars, add better filtering/search to the Inventory screen, and create a quick menu bar along the bottom of the screen to contain the most important menu items, along with other small improvements - thus, an educated iteration was made, landing on this final result.
Testing & iterating
With a completed wireframe, it was time to do a bit of user testing to gather real-time feedback that wasn't directly from my personal experience or observation. I scheduled interviews with 5 unique individuals, all within the scope of the gameplay target audience, but with enough diversity (variance in competitiveness, gaming experience, and Elden Ring-specific familiarity) to fill in knowledge and perspective gaps. These interviews walked the individual through a list of scenarios where I recorded and interpreted their responses, behaviors, and feedback to define a list of specific improvements that I could make to my wireframe, which resulted in an enhanced iteration of the original. I've outlined several primary findings below:
Challenges Solved
Through user testing, and the results of my wireframing iterations, I identified several groups of challenges that I knew I needed to solve with the completed concept. To help visualize these, I've pulled them out and focused on them to provide additional context as to the challenge itself, and how I provided a solution.
Lack of clear, consolidated visual cues
The current gameplay interface lacks clarity, and left much to be discovered or intentionally confused by. With my updated design, I:
- Created a new action panel design that incorporates weapons, spells, and better definition of use items for a more cohesive, impactful presence with usable functional improvement
- Added a weapon set swap icon/feature understanding how to swap with ease
- Consolidated Great Rune (bottom left icon in panel) into the action panel so that it is clearer to see and interact with, vs. previously next to the HP/FP/Stamina bars
- Implemented clear on-use items with their button assignments for quick in-combat reference
- Defined a brand-new quick access bar at the bottom of the screen that holds the most utilized menu options, a level reference, as well as a currency counter (this would flex and expand to include definable options by the user)
Accessibility of power bars (color blindness)
Using color blindness testing, it was clear that there would be trouble deciphering between HP, FP, and Stamina bars for most color blind variants. As an immediate base interface improvement, I:
- Altered the saturation of each bar to improve contrast/difference between each
- Added representative icons next to each bar to indicate what it is gauging without the need for color
Lack of means to easily find items
The current gameplay interface lacks clarity, and left much to be discovered or intentionally confused by. With my updated design, I:
- Added new ability to search
- Allowed for sorting to be done easily from the interface
- Improved presentation of sub-category filtering from the secondary navigation bar
- Created additional clarity and reference points with the addition of sub-sub-heading names within the sub-category interface
Vague/unclear layout of information (missing context/direction)
For a game of this complexity, the organization structure of item information is confusing at best. Sections without categories, hierarchy challenges (lacking physical separators or negative space for grouping), and general opportunity to improve overall user experience immediately jumped out to me. Thus, I:
- Improved contrast and hierarchical grouping between content containers, creating a more effective experience for a player using the inventory panel so they could quickly scan, review, and understand the item data they were looking for.
- Altered the presentation of the character details sidebar so that the information was not only informative and easy to digest, but also to create additional impact and blend with other design decisions I made throughout this overhaul. All of the information presented here exists in some capacity, but is not organized in a user-friendly way.
- Enhanced the flow and visual indicators of intended content, and what it is related to. This included improved highlights on actual selected items, clear-cut directional cues to (i.e. replication of styles and icons for selected items), and improved readability through text sizing and contrast.
Little direction for available menu options or how to access them
Once you reach the Inventory screen, there is little understanding of how to easily navigate to any other part of the menu, outside of going "Back". The user is lacking the ability to easy navigate intense data in an intense game. Therefore, I:
- Created a vertical navigational bar that sticks to the left side of the screen, and acts as a anchor within each menu screen to keep the player grounded and comfortable with what they're doing, and where they can go.
Completing the interface
Using the final iteration of my wireframe as a close reference, I was able to craft a completed UI mockup for each of the selected three screens to demonstrate an opportunity to evolve the existing Elden Ring interface style and layout. These screens focused on retaining all of the key data-informed layout changes that I defined within the wireframes, while keeping the experience familiar and immersing the player in a more cohesive and detailed environment like much of the gameplay that Elden Ring portrays - better use of textures, better visual hierarchy, creating more crisp edging and containers, and creating additional overlapping layers/borders for depth and pure interest.
Reflections & Next Steps
What would my next steps be if I continued design?
- Add further dynamic features/capability to the prototype
- Complete an additional round of testing from a diverse player base of real players, and wrap up one more iteration
- Push it forward into scope planning, estimation, asset generation and the process for moving forward towards an alpha preview
- Ensured that statistic snapshots for usage, successful embracement, and bug/complaint requests were had from day one so that it could be measured in appropriate intervals once the alpha/beta/production versions were live
What would I have done differently, given further scope/budget?
- I would have revisited the entire interface, message/notification windows, menu screens, character creation, as well as console vs. PC, to create a polished UI overhaul backed by user research
- I would have done one more round of user testing with the high-fidelity concept vs. the current game interface, to identify any further enhancements or pitfalls for the proposed changes, before reaching a completed state
See it live on Figma