A redesign of a beloved game with a focus on player recommendations and accessibility
Elden Ring Redesign
Overview
Duration: 2 month solo project
Role: UX Designer
Tools: Figma, Maze
Contents
Player Journey
Player Flow
Low-Fi Wireframe
Usability Test
Hi-Fi Wireframe
Player Journey
In order to better understand possible frustrations and opportunities for improvement, I wrote out the player’s journey from the introductory cutscene to the open exploration followed by the first boss battle. What I found was that players who may be unfamiliar with similar game mechanics may not know how to access certain features without on-screen prompting.
Player Flow
I decided to dive in deeper with a flowchart to clearly map out the player’s progression from one stage to the next, and the possibilities they were given that would lead to different outcomes.
Lo-Fi Wireframes
Introductory Cutscene
Exploration
Battle Screen
Usability Test
Research Objective: Can players understand how to access different features in the game intuitively without extensive searching for where to click? If not, why?
Recruitment: 5 testers, male and female of all different skill ranges
Platform: Maze usability test on a lo-fi Figma prototype
Task Design: Go through four wireframes, each representing a major section of the previous flowchart to test accessibility of features on each screen
Scripted Question: You are having a hard time getting distracted by the subtitles. What do you do in order to hide them?
Follow Up: How do you feel about the location and icon for showing and hiding captions?
Scripted Question: This is the first time you've been in combat and you're unsure how to attack. Where do you look for a recommendation to attack?
Follow Up: Do you have any feedback for how this screen looks?
Scripted Question: You've defeated the enemy and now you can finally explore. You've collected some items, but want to view them in your inventory. Where would you click to open your inventory?
Follow Up: Is there any information on this screen that you feel is missing or confusing?
““If this is a tutorial screen, I would want the attack button prompt to be more “in my face.” having it small, but centered in the screen would make this easier to adapt to. Obviously it can’t be shown, but flashing instead of a stagnant prompt would be perfect!””
Based on usability testing results, I determined that the Closed Caption icon should be replaced with clearer text and move the player recommendations to the center of the screen where they are more visible.
Hi-Fi Wireframes
Introductory Cutscene
Exploration
Battle Screen
After performing several colorblindness tests, I was able to determine further improvements that could be made regarding the readability of the text. A common issue among all three designs were that the white text was difficult to read, particularly depending on whatever was happening on screen. In order to fix this issue, I added a semi-transparent black background behind the text. The numbers for stats were also difficult to read, so I adjusted the gradient on the health, magic, and stamina bars.