HOMELET.FR
  • About Me
  • UX Case Study

Game  UX

Elden Ring case study
Picture
Picture
THE PROJECT
Wanting to focus on UX design and user research, I took a class with UX Director Ivy Sang to turn organically gathered knowledge into proper processes up to industry standards.
​
I chose to work on Elden Rings over other options to focus on organizing complex information with subtle interventions without relying on flashy design to guide the Player's attention.
CHALLENGES
  • Study the First Time User Experience (FTUE)
  • Identify friction and pain points
  • Clarify​ information where possible
  • Maintain existing Art Direction principles
ROLE AND RESPONSIBILITIES
Study existing designs and try to improve on them through user research driven modifications.
LENGTH
6 weeks span
SOFTWARE
Figma

See the Prototype

Process

Player
​Journey
Picture
"Paper"
Prototype
Picture
Flow
​Chart
Picture
Wireframes Iteration 1
Picture
Usability
​Tests
Picture
Wireframes Iteration 2
Picture
Moodboard
​& Style Guide
Picture
UI Mockups
​& Accessibility
Interactive Prototype
 

Player Journey

STUDYING THE FTUE
Discovery of the First Time Player Experience through recorded gameplay.
​Analyzing design intentions against perceived player experience to identify pain points and improvement opportunities.
Picture
OPPORTUNITIES
Some confusing elements were found during the Character Creation process, leading me to largely focus on re-working these screens in the following stages.
Picture
Actual game screens
Picture
 

Paper Prototype

MAPPING THE EXPERIENCE
Sequencing the introduction of game concepts and possible interactions available to players.
Picture
 

Flow Chart

MAPPING THE EXPERIENCE
Mapping the different screens in detail and defining interaction and mechanic flows.
Picture
 

Wireframes - Iteration 1

FIRST ITERATION
Establishing each screen's structure and organizing interactive and static information.
Picture
Original game screens for reference.
As proposed at the Player Journey stage, I merged the Character Base Selection and Character Creation screens into a single one.
Picture
 

Usability Tests

SETTING UP TESTING TASKS
Designing the test methods around appropriate tasks relevant to the information I wanted to uncover.
Picture
DATA COLLECTION & PROCESSING
Conducting the Test Sessions and gathering information.
Picture
DATA ANALYSIS
Interpreting the collected information to decide on corrective actions.
Picture
 

Wireframes - Iteration 2

SECOND ITERATION
Applying user informed corrections based on the Usability Test results​.
In this case, changes were made mostly to the way Body Type selection and Keepsake choice are presented.
Picture
 

Moodboard & Style Guide

Picture
MOODBOARD
With the Art Direction being already established, the game itself can serve as the main source of inspiration for tone and color.
STYLE GUIDE
Establishing a Design System to be used throughout the game, facilitate iterative design passes, and ensure consistency​. 
Picture
 

Mockups and Accessibility

CHARACTER CREATION SCREENS
After detailing the screen's general design, the character creation menu is tested for color blindness compatibility, and iterated upon to improve accessibility.
Picture
Picture
Picture
Picture
OTHER SCREENS
The Main Menu and Gameplay HUD were also tested and corrected to offer better legibility and/or accessibility mode variants. 
Picture
 

Interactive Prototype

Picture
TRYING IT OUT
You can access the Interactive Figma Prototype by clicking the link or image.

Please note that functionality is limited, including some light controller support, and only a few options are available on each screen.

You can hit Backspace to go back to previous screens.
Powered by Create your own unique website with customizable templates.
  • About Me
  • UX Case Study