Elden Ring UX/UI Case Study

This project serves as an in-depth examination of the game 'Elden Ring,' aimed at enhancing our comprehension of UX/UI principles within the gaming context.

It was completed as part of the ELVTR UX/UI in Gaming course, under the guidance of Ivy Sang.

In the following sections, you will delve into the specific components assigned to us, such as flowcharts, wireframes, and mock-ups.

By the end, you will see how all these elements come together to form a comprehensive UX/UI journey.

Roles & Responsibilities

This project involved working with an existing user experience and UI design, with the goal of faithfully recreating the design while also having the opportunity to enhance the experience according to our insights and preferences.

Challenges

Rapid timeframe
New (UX) design logic
Limited access to art resources/style guide
Limited knowledge of established game rules
Balancing work in class with a full-time job and multiple freelance projects

Timeline

August 03 - September 21, 2023

Tools

Photoshop, Illustrator, Figma, Squarespace

A player journey is a framework designed to allow players to immerse themselves in the worlds the developer has created, assuming the roles of heroes or heroines in their own unique narratives.

With this objective in mind, we conducted an analysis of the existing user journey to identify any pain points. We examined both the developer's intentions and the emotions experienced by users as they progressed through each step of the process, searching for areas where enhancements could be made.

The gut check of the process revealed that a paper prototype is a valuable technique that aids developers in crafting software that aligns with user expectations and requirements.

If the paper prototype is the gut check, then the flowchart represents the extended, meticulous analysis phase.

With the flowchart completed, our focus shifted to the game's user interface. Below, you'll find the default UI for the 'Create Character' and 'Combat' screens in Elden Ring.

While these screens are well-designed, there's always room for enhancement. Here's my initial attempt to improve the UI for both of these screens.

Default “Character” Screen

Default “Combat” Screen

Proposed “Character” Screen

Proposed “Combat” Screen

After nailing down the aspects of the UI we felt we wanted to improve, we then focused on getting feedback from others. I chose to go with a gamer and a non-gamer so that all of the bases would be covered. In order to have a well-rounded design, I feel it’s important to get differing opinions from all walks of life.

For our “play test,” I asked the testers to analyze and study the screens. They said, out loud, what they thought each button was and what they represented. I took note of how clear certain areas were and then asked them questions while they were looking at the screens.

I identified several areas for design improvement:

The stats lacked context and a reference point, making them seem arbitrary without clear limits.
Testers expressed a desire to appreciate the character's details, as they believed these details would hold significance, given that the acquisition of gear is a key aspect of the game.
The health/magic/stamina bars on the combat screen needed to blend more seamlessly with the UI. To achieve this, I introduced a more cohesive solution – three circular graphs to represent the player's overall values."