This project was developed through the course of the 8-week, online class UX/UI for Gaming with professor Ivy Sang , held from Aug – Sept 2023
CLIENT:
ELVTR UX/UI for Gaming, 2023
ELVTR UX/UI for Gaming, 2023
ABOUT THE PROJECT:
Using an existing video game as case study (in this case Elden Ring), the intention of the project was to learn and utilize game-industry-standard UX and UI methodology and, hopefully, enhance the selected game's current UI. As such, this project is as much about documenting the process as showing off the final solution.
Using an existing video game as case study (in this case Elden Ring), the intention of the project was to learn and utilize game-industry-standard UX and UI methodology and, hopefully, enhance the selected game's current UI. As such, this project is as much about documenting the process as showing off the final solution.
MY ROLES:
UX Research and Deisgn
UI Design
UX Research and Deisgn
UI Design
CHALLENGES:
— Having no previous experience with game created a knowledge gap, but at the same time emulated a player's FTUE so was appropriate
— Reworking/rethinking a very established UI in a very successful game was intimidating
— Extrapolating the ideas and methodology from the games presented in class and applying them to a very different game with a recorded playthrough that deviated somewhat from the other case study game's playthroughs created a lot of uncertainty, but in the end helped to internalize the process and course material in a way that went beyond repetition and mirroring examples
— Just on a personal note, taking a class again while having a demanding full-time job
— Having no previous experience with game created a knowledge gap, but at the same time emulated a player's FTUE so was appropriate
— Reworking/rethinking a very established UI in a very successful game was intimidating
— Extrapolating the ideas and methodology from the games presented in class and applying them to a very different game with a recorded playthrough that deviated somewhat from the other case study game's playthroughs created a lot of uncertainty, but in the end helped to internalize the process and course material in a way that went beyond repetition and mirroring examples
— Just on a personal note, taking a class again while having a demanding full-time job
PROCESS:
UX Design
Player Journey
Paper Prototype
Flowchart
Initial Wireframes
Select Character Screen Initial Wireframe
Game Intro Screen Initial Wireframe
Enemy Fight Screen Initial Wireframe
Gameplay Screen Initial Wireframe
Usability Tests
Usability Test Planning
Usability Test Session
Usability Test Results
Revised Wireframes
UI Design
UI Mood Board
Initial UI Mockups
UI Colorblindness Checks
Green-Blind/Deuteranopia
Blue-Blind/Tritanopia
Monochromacy/Achromatopsia
Blue Cone Monochromacy
Revised UI Mockups
Select Character Screen Revised UI Mockup
Game Intro Screen Revised UI Mockup
Enemy Fight Screen Revised UI Mockup
Gameplay Screen Revised UX Mockup
UI Style Guide
OUTCOMES/LEARNINGS:
— Learned to bridge the gap between previous Interaction Design process work I have done and the UX process for gaming
— Learned a lot new background and terminology as it applies to gaming (e.g. Accessibility vs. Approachability, FTUE, etc.)
— Learned how to use Figma in earnest
— Learned to bridge the gap between previous Interaction Design process work I have done and the UX process for gaming
— Learned a lot new background and terminology as it applies to gaming (e.g. Accessibility vs. Approachability, FTUE, etc.)
— Learned how to use Figma in earnest
RESULTS:
Within a very short timeframe, I was able to apply game UX/UI methodology to an established game and create a revised take on its UI that feels appropriate. A final resolution to this would be more user testing and iteration, but the final outcome illustrates that strength of the process.
Within a very short timeframe, I was able to apply game UX/UI methodology to an established game and create a revised take on its UI that feels appropriate. A final resolution to this would be more user testing and iteration, but the final outcome illustrates that strength of the process.