UX/UI studies
SUMMARY
​
This is my UX/UI studies of the Elden Ring game during my UX/UI course at ELVTR with Ivy Sang's as my instructor. The purpose was to reverse engineer the game's options for players and learn process of creating a good user experience for players.
This is also a good opportunity for me to learn and create the game's UI assets and icons.
​
Disclaimer: All visual elements are either recreated, downloaded or screen-grabbed from the original game. And everything I used in this project was for the purpose of learning and exploring. All credits goes to the creators of Elden Ring.
​
Game UI Mockups
Took the Elden Ring's already polished UI Screens and rebuilt its UI elements and assets (not all) from scratch for learning purposes.
​
Learned the game's Art style and direction.
​
Learned the game's unique layout design with clear visual communications for users.
Took the game's original icons and digital-painted new variations of it that would be fit to exist in the game.
​
Learned the game's iconography and its style.
​
Icon Studies
Learned to divide and organize player's options and decisions through gameplay video and playing the game.
Reversed-engineered the game design and breakdown the options that player has.
​
Created interactable prototypes and wireframes based on flow chart and player's journey.
​
Conducted usability testing for visual communications check
​
UX Development Process
Key Learning
Game UI art mockup
Rebuilt the game's UI elements like buttons, containers, dividers, typography, colors, and more. Then rebuilt the game's UI screen using the rebuilt assets. The goal is not to redesign, but rather reverse-engineer and learn from what's already a masterpiece.
Final Screen Mockup
Progress Work
Click To View
Click To View
Click To View
Click To View
Buttons & Highlights:
Containers/frames:
Colors
Typography:
Downloaded/Screen-Grabbed Assets:
Art Style Guide / Assets
Icon Studies
Took icons from the original game, and then digital-painted variations from it. The purpose here is to learn and adopt the game's iconography and artistic style. All of the variations are items that DO NOT exist in the game and are purely concepts.
Icon Painting & Concepting
Flask of Crimson Tears - variations concept
Magic Grease - variations concept
Golden Seed - variations concept
UX Development Process
Learned the process of identifying player's options and decision through the player's journey. Then organize player's decisions into screens through the flow chart that help player understand their options make the best decisions during their gameplay. Then learned to build a prototype in Adobe XD for usability testing.
Player's Journey
PLAYER'S JOURNEY:
Watched and played the game and start identifying the game's option. Breakdown potential reactions, interactions, and behaviors.
FLOW CHART:
The flow chart organizes & breaks down the options a player has into different screens. So that players can understand their options and make the best decisions.
Flow Chart
%20(1).png)
WIREFRAME:
Built the wireframes of each screen and created the prototype in Adobe XD for testing.
Wireframe
Click To View
Click To View
Click To View
TEST PREPARATION:
Conduct usability test from volunteers and collect feedback to further optimize my wireframe.
USER FEEDBACK:
Usability Test
Outcomes
-
Learned and adopted a Elden Ring's UI art style
-
Able to imitate the game's icon art style and visuals and create new icons out of it
-
Learned the process of identifying player's options, decisions, possible behaviors etc, and plan for a smooth and easy to understand experience
Future Learning Opportunity
The course taught me a lot about the gaming industry. I am interested in learning more about the technical side of UI Design. Having web-designing and building experience, I'm planning to learn more about Technical UI Design and see how big of a difference it is coming from an experienced web-designer.