UX / UI

Elden Ring: UX Research and UI Refresh

Overview

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.

Project Intention

Understand and enhance

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.

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 Insight

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.

Documenting the beginning stages of the user journey

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.

Paper prototype of available player options within each screen

Flowchart depicting both available and conditional options within primary screens

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.

Gameplay screen

Inventory screen

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:

Original

Post-testing iteration

Challenges

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.

Closing Thoughts

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