UX/UI for Gaming Coursework

Using Minecraft Dungeons as an example, I identified pain points in a player's journey and exercised my UX/UI skills to improve the gaming experience.

UI Art

UXR

ELVTR | 2022

Role: UX Designer, UI Artist

Time: Aug - Oct 2022 (7 weeks)

Tools: Figma, Adobe Photoshop

Methods: Player journey map, paper prototype, user flow diagram, wireframes, prototypes and user testing, hi-fi mockups, colorblindness evaluation

Links:

View FigJam file
View Certificate of Completion

Design Process

Player Journey Map

I observed as Youtuber Zack Scott began a playthrough of Minecraft Dungeons. 🙂

He found it difficult to choose which game level to play due to unclear information on the Map Screen. 🤔 He muddled through and made a random choice.

Zack was unable to identify the level objective. He spent a long time wandering aimlessly as his frustration grew. 😡 The game provided few clues on where to go and what to do.

I diagrammed Zack's experience with a Player Journey Map, looking for key pain points I could improve on.

Flow Chart

I created a flow chart to reorganize the information and options presented to the player on each screen, with a focus on improving the level selection -> gameplay -> level completion loop.

Wireframes

original Map & Level card screens

The original Level Card on the Map Screen did not provide a clear level objective. It did offer a "Story" option you could click on...

A screen capture of the player journey diagram, along with close ups of key sections.

... but it only contained the level's narrative, with no objectives.

My revisions

I gave the Level Card a new tab system. This would:

Clearly show players there are two categories of information.
Give meaningful labels to each category: players can set the Difficulty, and examine the Objective.

Players can see the exact objective of the level (so they know how to beat it) in addition to reading the story.

additional screens

I added a Map Legend to the Map Screen so players can quickly identify different level types, making it easier to choose what they want to play.

When a level loads, the level objective briefly appears centered on the screen, triggering players' memory. It then stickies to the upper right corner of the HUD.

A revised Level Map shows players which areas have not been unlocked yet...

... once they have unlocked every room, a guiding arrow points them towards the objective. This gives players agency to finish the level or keep exploring.

The guiding arrow is reflected in the Level Map as well, so players always know where to go.

When the objective has been met, a confirmation modal pops up.

User Testing

I created an interactive prototype and recruited four test participants (scheduling two rounds of testing, with two participants per round.)

I prepared research questions (How easy is it for users to discover and remember the level's objective?), wrote a test script, and took notes during the tests using FigJam.

DiscoverY & iteration

After the first round of testing, I discovered that the original "path icon" from Minecraft Dungeons was misleading players. This icon had also confused Zack (the original player I observed) during his game experience.

After the second round of iteration & testing, I validated that players were able to successfully identify the level's objective at any point in their playthrough, navigate the level, and successfully complete the objective.

Choosing and beating a level was now a frictionless experience from a UX perspective - as long as they could survive any fights with enemies!

Hi-Fi Mockups

UI style guide

I prepared a style guide to get familiarized with the Minecraft Dungeons style and create a resource for myself. I used Figma to create icons, UI/HUD elements, and the guide itself.

Map Screen game art

I also designed my own map screen in Photoshop, using custom brushes I created to speed up the process.

colorblindness assessment

After creating my first draft of the hi-fi mockups, I ran them through Coblis to identify any gaps in accessibility for colorblind players.

I spotted two areas for improvement. One was in my inventory screen, where the colors red and green were not high contrast enough to provide easy attribute level comparison.

The second was in my Level Card. A quick change in tonal value increased the contrast.

final UI mockups

Evaluation

Adapting Style: Working with Minecraft Dungeons was an excellent exercise in understanding and adapting to a new direction, which is a critical skill for UI Artists.

Stay Textured: While it was convenient to make all of my UI elements in Figma due to time constraints, the end results looked too smooth. Normally, I would add texture and details by hand-painting over vector shapes in Photoshop.

UX Patterns: Ivy Sang's lectures and feedback during the course inspired me to deepen my knowledge of UX design patterns, like the use of the tab system in the Level Card for organizing and visualizing categories of information.