ELVTR - UX/UI for Gaming
Coursework
Overview:
To understand UX/UI within the context of gaming. Applying the knowledge and workflows to conduct a design case study on
Elden Ring.
Task:
UX/UI Design, User Testing
Tools:
Figma, Illustrator, Photoshop
Project Length:
8 Weeks
Challenges:
-
Limited knowledge of Figma
-
Planning and conducting Usability Tests
-
Simplifying Elden Ring's player information for the user
-
Adapting a pre-existing UI art style with another game
Work Process
Player
Journey
Paper
Prototype
Flow
Chart
Wireframe
Usability
Test
UI
Moodboard
UI Style
Guide
UI
Mockups
Accessibility
(Colour Blindness)
UX Design
Player Journey
-
Through the player journey for Elden Ring, I came to understand points of contention and excitement players had while engaging with the game and the overall gameplay loop.
Paper Prototype & Flow Chart
Wireframes
Main Menu
Gameplay Screen
Equipment Screen
Map Screen
Usability Test Notes:
While the test results gave me better understanding of how users felt and behaved in regards to my wireframes, I found the prelimenary survery gave me more clarity and empathy for how users felt in regards to the two videogames respectively, Elden Ring and Animal Crossing: New Horizons. It helped reinforce the choices I made to improve the wireframes, these being a need for: clarity and simiplicity.
Iterated Wireframe
-
Decided against the use of a 'Quit' option
-
Changed font
Main Menu
Gameplay Screen
-
Clarified currency indicator
-
Curved the over head compass, so it is more noticeable.
-
Increased size of player status bar.
-
Made equipment button more prominent
-
Arrow indicators helped simplify item data
-
Created icons that helped to visually clarify what the sections of the equipment meant
-
Player diagram gave users a visual depiction of how much stronger they are becoming
Equipment Screen
Map Screen
-
Added a player marker to clear up confusion for the player in regards to geographical location
-
Provided a notable indicator to say where the player wants to go.
-
Added a map cusor to give players another choice of navigating the screen
UI Design
Mood Board
Animal Crossing: New Horizon
To simplify Elden RIng's game information and choices the player could make, I studied and adapted how Animal Crossing: New Horizons depicted similar information.
Style Guide
Text
Buttons
Other UI
Mock-Ups
Accessibility (Color Blindness)
The colour blindness test was paramount in ensuring different types of people can gain access and enjoyment from this game. I optimised the font and colour to ensure readability was improved.
.png)
Final Mock-Ups
Conclusion
Through the limited time I had on this project, I gained a deeper understanding of how exactly UX/UI is applied into the context of gaming. Learning how to conduct a usability test was a challenging period as someone with an art background. Ultimately though, this challenge was the most crucial part, as it pushed me to better adapt another game's UI design to another that has a considerable amount of information. I'm extremely proud of what I was able to accomplish with the use of figma which I had previously had little prior knowledge.
Post-Mortem
-
Gain more understanding of UX practices
-
I would want to explore other game screens
-
Provide more cohesion in regards to adapting a UI artstyle