: The Case Study

This case study is based on the soon-to-be cult classic Elden Ring and its approach-ability. In this project, we dive into the perspective of new players that have never played a ‘souls’ type game and see what changes can futher help a new player in their journey into the world of Elden Ring.

  • UX/UI Design
    User Testing

  • 7 Weeks

  • -Design and theme
    -First time players in a ‘souls’ type game
    -Understanding UX/UI from a developers stand point
    -Accommodating Veteran and new Players

Work Flow

Player Journey

The Player Journey for Elden Ring was a way to map out they the player is feeling and seeing at the moment to moment gameplay. It helped put me, the designer, get a sense of what the player could be expecting and the changes that i would make to help ease any uncertainties that the player would be seeing. Emojis were placed according to what I would think the player would be feeling in the opening moments of Elden Ring.

Paper Prototype

From the Player Journey, I then mapped out a paper prototype that would help visualize the moment to moment and gameplay loop of Elden ring.

Early Paper Protoype of Game Flow

Flow Chart

A completed Flow Chart from Start Screen to Game Over Screen

Also includes a flow for returning players who load a save file.

Usability Tests

Initial Wire frames for testing. I chose these early moments in the game to help with establishing the rules early on so that the player would have a good foundation going forward.

1. Start Screen and Starting a New Game

2. In Game UI including Action and Equipment/Setting Menu

User Testing Based on Presented Wire Frames.

Two Player Testers were chosen to help gain insight on the early presented wire frames.

Player Tester #1 (Casual Gamer, Female, 27)

  • Yes, player was able to

  • Yes, but she was hesitant because she couldn’t tell what we actually being offered.

  • No, due to not knowing the button to bring up menu.

Player Tester #2 (Proficient Gamer, Male, 29)

  • Yes, player was able to with confidence

  • Yes, but Clarification was needed as they could’ve needed more confidence in choosing

  • Yes, since player was proficient in gaming, he would assume the touchpad (tab for PC) would bring up a menu of sorts.

Usability Test Results

  • Both Testers claimed that more clarification is needed for Character base selection.

  • More guidance can be provided on normal gameplay

    (Note: for the sake of utilizing in game options)

  • Video Game literacy shows importance on how players behave in game.
    (Note: in regards to normal gameplay)

Below is an Iterated Wireframe based on the main bottle necks that came out the player testing.

The marching ants represent the glow of the specified character base. Later we will see a mock up version.

UI Mood Board

Inspirations for make the current Elden Ring UI more easily readable and clear. I wanted to keep faithful to the main theme and style and try not to stray away too far from whats already been established. From Top to bottom: WOW, Dark Souls 3, and RuneScape.

 

UI Mock Ups

One of the critiques from my wireframe testing was the lack of clarification on certain parts when selecting. When going through the Mock-ups, I didnt feel the need to drastically change up the look and vibe. Personally i feel like Elden Ring has its theme really locked in. I kept the changes to minimum to retain the style that ‘s originally presented.

Character Base

  • I too also noticed this and Decided to add a glow effect to show which Sub base the player will be picking

  • Also greyed out the bases that are not in the ‘selection’ box

  • As the player chooses the glow with further pinpoint which one base the player is confirming.

In Game Looks

  • Decided to add a menu Icon when the UI is engaged to help keep note of in-game options for players. (this could be a toggle in the preferences)

  • Brighten up the colors and added more clear distinctions along the UI to provide a clearer experience. (like brighten borders more saturation on colors like the health bar

  • Light inspo from Rune Scape for the health bar and overall UI when it came to ‘brightening’ up

Accessibility: Color Blindness Test

Decided to Adjust Red-Blind/Protanopia for Character Base and Monochromacy/Achromatopsia. Reason being is that these were the weakest in terms of being able to read the details and overall experience in game.

Adjusted Red-Blind/Protanopia

  • Edit the photo to provide more contrast and saturation

  • OG version was still pretty uniform hard to differentiate the details on the armor

Adjusted Red-Blind/Protanopia

  • Edit the photo to provide more contrast and saturation

  • Adjusted ‘Green’ Levels on the stamina bar as it was hard to tell the difference between the mana bar

Outcomes / Post Mortem

After Presenting the new edits, both play testers responded positively to the following:

  • Character Base selections

  • Clarity amongst the the UI (especially Play tester #1)

  • Overall confidence in pressing forward in the game and how the options are clearly laid out

  • They felt like the established information was there and they can confidently rely on it

Post Mortem

Overall, this class really helped open my eyes to a new realm of design. I was so used to design being strictly a creative visual problem, that this class took it to the next level and showed that design not only involves that but the logical technicalities of it all. As much as games are fun, being able to present the information and provide the appropriate tools to the players so that they can venture off on their own is another satisfying feat in itself. This class taught me that with a great team that any game can have that fun and engaging factor that we all hope to stride with when creating a game.