UX/UI for Gaming
Details
Role: UX/UI Designer
Context: Work for elvtr’s UX/UI for Gaming course taught by Ivy Sang (UX/UI Design Lead.) Aug - Oct 2022 (7 weeks)
Methods: Player journey map, paper prototype, user flow diagram, wireframes, prototypes and user testing, hi-fi mockups, colorblindness evaluation
Tools: Figma, Adobe Photoshop
How might we decrease player frustration with selecting and beating game levels?
I observed a Minecraft Dungeons player experience significant trouble with choosing which level to play and how to successfully complete it. I took the opportunity to improve this level selection-to-completion flow, and conducted research to test my new design.
Watching as the player gets stuck… twice!
I reviewed a recording of a player session in Minecraft Dungeons, to see if there were any areas of friction we could improve in the game experience. At this stage, the player seemed confident and excited to play. 🙂
When the player reached the Map Screen, they found it difficult to decide which level to play. The player muddled through and made a random choice, unsure of what the level objective was or what to expect from the gameplay. 🤔
They played for a very long time, increasingly voicing their frustration. They were unable to find out how to beat the level and the game provided few clues on how to succeed. What started as a fun experience devolved into a frustrating one.😡
I diagrammed the player’s journey, identifying key quotes and moments to highlight the problem areas I could improve on.
Planning a new level selection flow
I noticed that the current Level Card design had a front and a back. The player could flip sides by clicking the button in the upper right hand corner (Story/Mission.)
The “Mission” side of the card, ironically, did not give users a clear mission or level objective to achieve. It did give players some options (choose a difficulty, start the level) and some information (what items they could gain from playing.)
The other side of the card (the “Story”) provides some background story as expected, but it does not provide a specific level objective within its narrative.
With a clearer idea of the pros and cons of the current design, I wrote up a “paper prototype” of the new screens. I wrote out which interactive options and static information each screen needed to have.
I then translated the paper prototype into a user flow so I could plan out my interactions between each screen.
Iterating on wireframes
I created some initial wireframes, then checked in with the Lead UX Designer to get feedback:
I really appreciated their callout for how we could rethink the current Level Card design of “front vs. back.”
It inspired me to add a tab UI pattern to the card design:
Now players could see the two categories of information available to them, and split up the static information vs. interactive information. In the Difficulty tab, players would select how challenging they wanted their experience to be, and start the game.
And on the Objective tab, players can find out exactly what they need to do to succeed, and read the accompanying story if desired.
This solution gives players the information they need to easily compare and choose a level to play, reducing frustration and improving engageability.
Improving confusing iconography
I ran two sets of remote usability tests while developing my wireframes.
During the first run, confusion over the meaning of the Path Icon resurfaced — an issue that emerged back in my review of the original player’s session.
(Tip: Read the subtitles - there’s no sound!)
During the first round, all three of my test participants indicated confusion over the Path Icon (as I noted in these snippets from my interview notes below.)
With this crucial player feedback in hand, I repurposed the original path icon as a Lock Symbol (indicated rooms the player has to perform an action to unlock) and redesigned the Path Icon so it would point towards the level objective.
During the second round of testing, I found that:
Players were not impeded by confusion over the meaning of the Lock and Path Icons; all players successfully navigated through the level
Players remembered (and knew how to find out) what the level’s objective is, and were able to beat the level
With my research goals accomplished, I moved on to finalizing the UI design.
Creating the final, high fidelity screens
Fun fact: I designed the map illustration, too!
Difficulty tab of the Level Card.
Story tab of the Level Card, with the quest objective.
Title card with level objective that appears when player first loads into the level.
Level title and level objective stickied to upper right corner of the HUD.
Level completed pop up that appears when the player is successful.
A side quest for accessibility
After creating my first draft of the high fidelity screens, I used Coblis to see if there were any areas failing colorblindness accessibility.
While most screens passed, there was an interesting color contrast issue on one of the screens that wasn’t the main focus of my project.
As part of the coursework, we also designed Inventory screens. I discovered that the power level comparison bars in the Item Descriptions used colors that were hard to read with Red-Blind or Green-Blind colorblindness. A simple adjustment of color tones improved it.
While this issue didn’t affect my main area of focus for the project, it was an important lesson in being mindful of accessibility down to the smallest details!
Takeaways
Believe it or not, this course made a huge impact on my overall design process—not just for game UX!
#1
One of my biggest takeaways was how to design screens more efficiently: Now, before I dive into any sketching or wireframing, I brainstorm and write out exactly which options and information/copy every screen needs to have.
This makes my process better because:
I can quickly plan out a user flow and interactions
It makes it easier to identify which UX patterns would best match the information I’m trying to convey
It saves time once I move onto wireframing or designing lo-fi screens, since I know exactly what needs to be on each screen and I have real, relevant copy to use instead of placeholder text
#2
This project was also great practice for studying and adapting to an established art style, which is a critical skill for any UI designer. The Minecraft style is not the easiest or fastest to reproduce!
#3
If I were to continue working on this project, I would evaluate user satisfaction with my new flow and screen designs. I could do this by:
Running a brief survey for players, asking them to rate how they feel about the level selection and completion experience
Schedule some user interviews to get feedback, good and bad, on the experience. What is working, and what is not?
Iterate on new designs, and run A/B testing to see which solutions help players most with selecting a level and completing a level