Role/Team
UX/UI Design Student
1 Person Project
Tools
Duration
8 Weeks
Aug 2023 - Sep 2023
Project Overview
The purpose of this project was to study the UX/UI fundamentals of a chosen game, Elden Ring. The process would involve conducting case studies, and wireframing, all to create high-fidelity UI mockup designs.
Tasks
UX Design, UI Design, User Research, Accessibility
Responsibilities
For this project, I was required to innovate on various screens of Elden Ring by re-creating UI elements. The steps included working on a player journey, flow charts, wireframes, and mock-ups.
Challenges
-
Discovering the fundamentals of what affects the player's experiences and emotions.
-
Designing wireframes on an already pre-established game.
-
Coordinating and completing usability tests.
-
Learning more about Photoshop to help create a defining redesign of UI Mockups of the game.
Workflow Process
Player Journey
.png)
Paper Prototype & Flow Chart
.png)
Wireframes & Iterations
Home Screen - Start Button
Home Screen Menu Option Buttons
Home Screen - Start Button
Character Creation - Name
Character Creation - Age
Character Creation -Detailed Appearance
Character Creation - Name
Equipment Screen
Inventory Screen
Equipment Screen
Gameplay Screen - Player Vitals and Compainion Health
Gameplay Screen - Player Vitals and Item Pickup
Gameplay Screen - Notification
Gameplay Screen - Player Vitals and Compainion Health
Usability Test Results:
I conducted 2 usability tests using Figma's prototyping tools. Each test had users who had previous experiences with the Elden Ring to use the prototype to see a more clear breakdown of all UI functions. They were asked questions based on the importance of each screen and what they thought was necessary. Those answers were used to reform my current screens to help improve the UI.
.png)
Mood Board
I grasped at different game UI for bits of inspiration, pulling pieces from different types to see what could improve what I was working on.
.png)
.png)
.png)
.png)
.png)
Style Guide
I broke down the core elements of the Elden Ring through its text, color, and icons to better organize myself when changing components around.
UI Mock-Ups
When developing the High-Fidelity UI Mock-ups, I used a combination of both Photoshop and Figma to complete the redesigning screens. Although it was difficult to make gratifying changes to the Elden Ring UI, I did make several efforts to help improve the look of certain areas for a better design look and feel.
Outcomes
-
I was able to get a better understanding of process needed to convey certain bits of information
-
Learned the importance of positioning of UI elements based on a wide audience of players
-
Was able to adapt previously known UX/UI practices into a game-related project to open new skill opportunities.
Colorblindness Checks
Something I wanted to account for was accessibility in the UI Design. I used Colbis, a color-blind checker, to ensure the best experience for the mockups to help eliminate any potential confusion or frustration for players.
Final Thoughts
This is my first UX/UI-related project in the game industry! I was able to learn more about players, expectations, and options. Throughout this assignment, I was able to not only understand the importance of current elements of the UI already there but also to see what would work for styles.
In the end, I was able to successfully redesign certain UI elements of the Elden ring to see where I could improve upon the original. I’m excited to finally show off my first game-related project and see how it carries me into the next one!