Overview
This project was a result of a class hosted by ELVTR and Ivy Sang. This course was designed to help guide and immerse design professionals into the world of game user experience. This project was the result of applying what was learned in the course to a real exploration of a game of your choice. I chose to focus on Elden Ring, a "souls-like" action-adventure game, that focuses heavily on the player finding and using items in the world to enhance their character's abilities to become more powerful.
Job roles: Player journey, Flowchart, Wireframes, High-Fidelity mockups
Timing: 8 weeks
Tools: Figma, Illustrator, Photoshop
Challenges
• Learning the skills while executing them
• Timeline of the course
• Limited understanding of the whole game experience
• The game itself is complex
ASSIGNMENT 1
Player Journey
For the first assignment, we had to pick the game we wanted to study for the course and do what's called a "Player Journey". We observed
a video based on our selected game and highlighted what the player was thinking and feeling during the interaction. We also had to determine the decisions the players could make and what they were trying to solve or accomplish at that moment.
a video based on our selected game and highlighted what the player was thinking and feeling during the interaction. We also had to determine the decisions the players could make and what they were trying to solve or accomplish at that moment.
ASSIGNMENT 2
"Paper Prototype" and Flowchart
Once we established some of the points in the Player Journey, our next task was to describe the player's options and build a flowchart that showed how those decisions could be made. This exercise helped drive very high-level thinking about the game design and how it would ultimately map to how we could improve the game's communication to the player via the wireframe and high-fidelity phases of the project.
"Paper Prototype"
Flowchart
ASSIGNMENT 3
Wireframes
After working through the various flows, there was an area in the game that felt like it could be improved. Because of how Elden Ring works, players are constantly fighting and picking up loot from battles as well as exploration. One of the most challenging areas in the game to learn and navigate is the inventory system. This is what I wanted to focus on for the remainder of the course by analyzing how
we might improve the communication around how inventory is managed and create any enhancements to the current system.
we might improve the communication around how inventory is managed and create any enhancements to the current system.
Player menu
The Player menu is where the player can access all in-game items and manage their characters.
Equipment menu
The Equipment menu is where the player can equip any of the items they find around the world of Elden Ring.
ENHANCEMENT
Quick-swapping weapons
As I started to investigate the organization of the equipment menu, I came across the idea of "weapon quick-swapping". This was something that players were doing with the available constraints but felt like an easy win if there was a way to make this into a native game feature.
Player menu wireframe
This was the initial pass at re-organizing and creating more hierarchy on the player menu.
Equipment menu wireframe
This was the initial pass at
re-organizing the equipment screen
with "quick-swapping" in mind. The "inventory level" categorization was also added to make it easier to understand what item type you were looking at.
re-organizing the equipment screen
with "quick-swapping" in mind. The "inventory level" categorization was also added to make it easier to understand what item type you were looking at.
USER RESEARCH
Player Feedback
After I created the initial set of wireframes, I interviewed six players with varying levels of game experience. This was a great opportunity to see if the changes helped increase the ease of use for the players, regardless of their familiarity with the game itself.
Player menu feedback
Equipment menu feedback
USER RESEARCH
Updates to wireframes based on player feedback
The feedback provided by the players was integrated and added to the wireframes. This helped refine the organization of both screens and simplify the total interactions the players needed to make.
Updates to the player menu
Ultimately, players felt like there was too much happening on this screen in the initial wireframes. I reduced and bucketed the "settings" and "multiplayer" items down to the system level. By doing so, a more clear hierarchy emerged.
Updates to the equipment menu
Initially, players had a hard time understanding what the top-level item categories were. They kept thinking they were only able to select weapons. By adding a level to the category, players were able to quickly understand which category
they were on this page.
they were on this page.
ASSIGNMENT 4
High-Fidelity mockups
Once the wireframes were refined, we had to create UI mockups that looked the part. I focused on paying attention to the game's visual language to make sure that the adjustments I was making would still fit into the world of Elden Ring. One thing I paid specific attention to was creating better visual hierarchy via typography size and weight. I also chose to extend the color palette and use more accessible color options that still felt on-brand for Elden Ring's dark, medieval horror-focused aesthetic.
USER RESEARCH
Color study
After updating the color selections, I ran a color study to determine if the changes made helped with different color blindnesses. This includes protanomaly (certain shades of red look more green), deuteranomaly (certain shades of green look more red), tritanamoly (hard to tell the difference between blue and green and between yellow and red), and monochromatic.
Protanomaly
Dueteranomaly
Tritanamoly
Monochromatic
Conclusion
Working through the steps of understanding and developing a player experience was enlightening. Looking under the hood of what goes into creating a successful player experience was exciting and daunting. It provides a ton of perspective into the level of craft and detail that something as "simple" as an inventory screen needs to communicate to the player what their options are successfully, and in a way that does not "break" the immersion the game provides. I look forward to continuing to investigate and observe what makes great games great and where others sometimes fall short.
