ELVTR | UX/UI For Gaming

Elden Ring

Project Overview 👑

A start to finish study of developing UX/UI for the video game, Elden Ring. Project completed for ELVTR's UX/UI for Gaming course!

Challenges

  • First time using Art resources/assets from a Game

  • Create designs that are inclusive to colorblindness.

  • Redesign Elden Ring's UX/UI to better the experience of both first time and veteran players.

Figma, Illustrator, Photoshop

Project Length: 7 Weeks

The Process!

My Roles and Responsibilities 📋

Researched the player journey from onboarding to gameplay in Elden Ring, identify key UX pain points, then create flowcharts and wireframes to map out better interactions. Conduct multiple usability tests to gather player feedback. Iterate designs based on testing insights into refining the UX/UI visuals and elements to enhance the player experience while maintaining the game’s aesthetic.


The Player Journey

A Great Start with Improvable Aspects 🎮

Players seem to get a great sense of backstory for their character in the game, and are introduced to gameplay mechanics properly. Understand general layout of button mapping: How to open inventory, pick up items, explore, fight enemies.

  • No clear tutorial on how to organize and examine picked up items, and how to sort through equipment.

Paper Prototyping & Flowchart

Potential Pain Points

  • Equipment and stats screen can be a little overwhelming to a brand new player.

  • Inventory Navigation and organization

My Suggestions

  • Players can learn about new found items, and how to better sort their equipment and read their descriptions.

  • Better Visual Hierarchy within the equipment screen for more straight forward organization.

Wireframes and Testing!

Wireframes and Testing!

User Research Objectives 📑

  • Learnability: How easy is it for users to progress through the game and learn its mechanics and information given.

  • Efficiency: Can players process information quickly in a way that's digestible and easy?

  • Overall Enjoyment: Do players seem to enjoy the design? Is it intuitive and natural, or does it seem difficult to navigate?

  • Errors: Are players going to the wrong screens while trying to access the information they are trying to receive? Are they able to recover and differentiate after the error was made?

Research Logistics

  • Platform: Play test done through Wireframes/Screens. Starting with Home screen and ending with the Menu/Equipment screen.

  • Task Design: Players hop into the game and are able to learn gameplay mechanics, fight enemies, use items and assort Equipment.

  • Scripts: Questions to ask users as they progress through each screen.

    • Are you overwhelmed with information or do you enjoy the information that's given?

    • Can you differentiate the different pieces of gear being displayed on the screen?

Jacob M

  • Confused by bottom
    right (rune currency) and special ability (unsheathe)

  • Didn't necessarily enjoy the layout of gear. What item goes where, what is the Trinket space and how do you key bind items?

  • Confused by bottom right (rune currency) and special ability (unsheathe)

  • Didn't necessarily enjoy the layout of gear. What item goes where, what is the Trinket space and how do you key bind items?

Sara T

  • Had no problem getting to Equipment screen. Enjoyed that the Menu Screen didn’t take away from the immersion of the game.

  • Enjoyed the status display and how all the information was given to her on one screen.

Damian S

  • Was overwhelmed with the amount of info on screen. Some info didn’t seem as important
    for a beginning player (such as damage mitigation and attribute scaling).

  • Equipment seemed confusing. (What row is for main hand, off hand and items?

  • Was overwhelmed with the amount of info on screen. Some info didn’t seem as important for a beginning player (such as damage mitigation and attribute scaling).

  • Equipment seemed confusing. (What row is for main hand, off hand and items?

Iterated Wireframes!

Ui Design!

Moodboard and Style Guide 🎨

Drawing inspiration from Elden Ring’s dark fantasy aesthetic while focusing on usability and visual hierarchy. Studied typography closely as I wanted to match the original one and include more weights for better readability.


Screenshots taken from in game, Elden Ring

Ui Mockups!

Accessibility ✅ - Color Blind Simulation

  • Since the Equipment screen is predominately White text on a dark background, it is incredibly accessible for all colorblindness.

  • The Gameplay screen does rely heavily on colored bars to differentiate between health, FP, stamina and enemies' health. To make this screen a bit more accessible I added a bold white text onto the bars for clarity.

Outcomes!

My Experience ⭐

  • Learned how to successfully onboard new players onto the game and receive feedback through usability tests to better the overall player experience!

  • Gained a deeper understanding of recreating a game's UX/UI in different fashions and iterations to better players' needs and wants.

  • Learned how to properly create wireframes and collect research to implement great UX/UI in videogames.

Post-Mortem

With video games and UX/UI being a massive passion for me, it was so much fun to add them both together. From start to finish, learning how to properly conduct a complete case study for UX/UI in a gaming context. From research all the way to art, it was all an incredible experience. Can't wait to keep at it and further improve my skills while making cool and epic games!

Thank you for stopping by!