Elden Ring, a critically acclaimed action role-playing game developed by FromSoftware, is known for its vast open world, deep lore, and challenging combat mechanics. This is not an easy game to beat, and players are in for a long journey and gameplay with a great deal of depth, but the game was a critical success and collected a trophy case of Game of the Year awards from various award panels and publications.
Despite its success, Elden Ring still has plenty of areas to improve the player experience, particularly when it comes to the game’s user interface (UI) and first time user experience (FTUE). The game’s steep learning curve and minimal handholding can create significant barriers for new players, especially those unfamiliar with the mechanics typical of the “Soulsborne” genre. In this project, I aimed to enhance the first-time user experience for Elden Ring players by improving onboarding, tutorials, and early-game guidance, while preserving the game’s core challenge and sense of discovery.
RESEARCH
Heuristic Evaluation
Gameplay Review
Player Journey Mapping
DESIGN
User Flows
Paper Prototype
Wireframing
TEST
Usability Testing
Color Blindness Testing
Iteration of Wireframes
ITERATE
UI Style Guide
UI Art Asset Creation
Hi-Fi Prototype
ENHANCING THE FTUE
Typically within in the first 5-10 minutes of their playthrough, players decide whether they want to continue playing a game. If they cannot answer basic questions about what they are doing, why they are doing it, and why it matters to them, they will often put the game down and never pick it up again. Therefore, crafting a smooth, intuitive, and visually appealing FTUE was critical in this project.
BRIDGING COMMUNICATION GAPS WITH THE PLAYER
Game design is somewhat unique, in that the rules and options of the game are created by game designers, while UX designers are responsible for communicating these rules and options to the player. In this project, I was largely focused on developing a deep understanding of what the game designers intend to happen, how the players actually experience this in their gameplay journey, and where there may be communication gaps to be bridged between the game designers and players.
DELIVERING INFORMATION TO PLAYERS EFFICIENTLY
Elden Ring is a game with an overwhelming amount of information and options for players. A big challenge in this project included designing the presentation of interactive and non-interactive information to players in a manner that gives them the key information they need without causing unnecessary interruption to their gaming experience.
DOCUMENTING THE PLAYER JOURNEY
While I’ve played Elden Ring myself and have my own thoughts on where improvements to the FTUE can be made, I was also cautious to be aware that my experience may not be that of the average player. In documenting the player journey, I reviewed gameplay footage from three other players, noting points where they suggested frustration and moments where they were searching to understand what they were doing or why it mattered to them. I also conducted a heuristic evaluation of each of the new player onboarding screens, identifying potential areas of friction in the FTUE.
PROTOTYPING NEW USER FLOWS
After mapping out the user journey and identifying key opportunities for improvement to the FTUE, I began creating adjusted user flows and a paper prototype addressing these opportunities. I was cautious not to “reinvent the wheel” in this process, as I wanted to avoid stepping over into the game designer’s responsibilities and creating new game developer intentions that were not intended.
WIREFRAMING
In wireframing revised UI screens for the player onboarding experience, I was focused on maximizing the real estate of the player’s screen to help them make the right decision for their character creation process and feel confident about it at the same time. My core principles for a redesigned UI were centered on helping the player understand the “what” and “why” for their decisions as they created their character.
USABILITY TESTING
After completing my first round of wireframes, I conducted a usability study to determine whether players had a better understanding of the onboarding experience and identify areas of further refinement. I initially tested wireframes with five users, two of which had experience playing Elden Ring in the past.
QUANTITATIVE ANALYSIS
Quantitative data from the testing confirmed some of my hypotheses about points of confusion in the onboarding experience:
2/5 participants were initially confused by the gameplay UI toolbar.
5/5 participants were unsure about what Keepsakes were on the Character Creation screen.
5/5 participants intuitively understood the right-panel sliders for item acquisition and quest progress in the gameplay UI.
QUALITATIVE ANALYSIS
Qualitatively, participants made comments and exhibited behaviors that led to additional insights:
Participants had strong positive feedback for the revised Character Selection screen, but were also confused about whether items next to the character model were selectable given their similarity to the character cards.
Participants were drawn to the stylized character art on the Character Selection screen, and preferred to see the same art on the following screen when continuing to create their character.
Participants largely understood the functionality of the bottom left toolbar on the gameplay UI, and the inclusion of the D-pad and Y button indicator made it clear what would happen if the participant pressed these buttons.
ITERATED WIREFRAMES
Iterations to my wireframes after usability testing included (1) adjustments to item art to distinguish from interactive elements, (2) reinforced consistency in the Keepsake selection box to match interactive elements and an additional text description for explanation, (3) additional interactive elements to select a Keepsake or back out of the modal window, and (4) addition of a non-interactive status effect bar on the gameplay UI.
CREATING THE UI STYLE GUIDE
My first step in taking wireframes to hi-fi mockups is to define the styles, colors, and typography that will not only serve the usability of the UI screens, but remain true to the style, theming and atmosphere of the game itself. Remaining true to the current Elden Ring experience, I developed a color palette with several shades of brown to create definition, a primary gold for active states of interactive information, and a rose gold accent to create additional contrast.
ACCESSIBILITY
With art assets prepared and a UI style guide at the ready, I created high fidelity mockups for each of the wireframes. I kept several of the Gestalt principles in mind when creating the mockups, particularly the laws of proximity, common region, and similarity. Furthermore, I made sure to pay close attention to the amount of texture and negative space on each screen to ensure that the UI screens were visually pleasing and coming off the screen without overwhelming the player.
FINAL ONBOARDING SCREENS
After reviewing the results of the color blindness tests and making additional changes to the UI elements, I iterated on the hi-fi mockups and prepared final versions that ensure an accessible experience.
I believe my final mockups present a far more inviting and intuitive onboarding experience for players new to Elden Ring, and specifically for those new to the “Soulsborne” genre of games. Using the entirety of the screen’s real estate to give players information about character bases helps the players absorb more information about the characters without getting overwhelmed, allowing them to understand the decision they are making and why they are making it. The character creation process also makes choosing a Keepsake an understandable task and gives players the explanation they need to make the choice that suits them best. Lastly, the gameplay UI gives players the information they need about available items, newly acquired items, and quest progress without causing unnecessary distraction or interrupting the gameplay experience.
As for next steps, there is far more work to be done to perfect the FTUE for Elden Ring players. Most notably, players have expressed a great deal of frustration with learning how to navigate the item and equipment inventories, and given the sheer volume of consumables, weapons, and other craftable items the player is tasked with organizing. This was one of the reasons for my inclusion of a “hold to view” button interaction for acquired items in my gameplay UI mockup, as players often acquire an item they are curious about and then spend a great deal of time sifting through the inventory UI looking for it. While I created a mockup for an equipment UI screen and received positive feedback, there will be more valuable feedback in testing the mockup along with other inventory management screens, using detailed scenarios and tasks, to determine the best steps forward to creating a holistic and intuitive inventory management experience.
UP NEXT
Streamlining productivity with HomeNow
