Minecraft Dungeons Main Menu and Gameplay

UI/UX Design
Minecraft Dungeons Main Menu and Gameplay
Fig.1 Minecraft Dungeons Main Menu and Gameplay.
About The Project

As part of my Game UX/UI course with ELVTR, I replicated and redesigned the Minecraft Dungeons experience.

Roles & Responsibilities

My task was to redesign the Minecraft Dungeons experience, and to make any changes where it makes sense to do so.

Length Of The Project

Each part took about 2 weeks to complete, for a total of about 4 weeks for the entier project.

Tools

Adobe Illustrator, Adobe Photoshop, Figma, Figjam.

Challenges
  • Create the player journey while watching a gameplay video.
  • Create paper prototype and convert it into flow chart to see if there is any improvements to be done.
  • Create Wireframe based on the flow chart.
  • Conduct usability test.
  • Create UI mockups based on the results of the usability test.
  • Make sure that the design is accessibile for color blind players.
Work Process

For this project I did the following

  • Player Journey
  • Paper Prototype
  • Flow Chart
  • Wireframe
  • Usability Test
  • UI Moodboard
  • UI Mockups
  • Accessibility Compliance
Player Journey

I started by creating the existing player journey for the game.

minecraft dungeons player journey
Fig.2 Minecraft Dungeons Player Journey.
Paper Prototype & Flow Chart

I made the payer prototype based on the player journey.

Minecraft Dungeons paper prototype
Fig.3 Minecraft Dungeons Paper Prototype.

I made the flow chart based on the paper prototype.

Minecraft Dungeons flow chart
Fig.4 Minecraft Dungeons Flow Chart.
Wireframe & Iterations

Made the wireframe for the main menu, gameplay, and inventory screens based on the existing game.

Minecraft dungeons main menu original wireframe
Fig.5 Minecraft Dungeons Main Menu Original Wireframe.
Minecraft Dungeons gameplay original wireframe
Fig.6 Minecraft Dungeons Gameplay Original Wireframe.

After doing usability test, I had to do some changes to the screens.

Minecraft dungeons main menu wireframe redesign
Fig.7 Minecraft Dungeons Main Menu Wireframe Redesign.
Minecraft Dungeons gameplay wireframe redesign
Fig.8 Minecraft Dungeons Gameplay Wireframe Redesign.
UI Styleguide & Mockups

I created a style guide based on the original game.

Minecraft dungeons main menu
Fig.9 Minecraft Dungeons Main Menu Mockup.
Minecraft dungeons gameplay
Fig.10 Minecraft Dungeons Gameplay Mockup.

After doing the color blind test, I found that on the main menu, it is hard to see the bullet symbols that lets you know how many news are there. So I made some changes to the color and opacity of it.

Minecraft dungeons main menu color blind test
Fig.11 Minecraft Dungeons Main Menu Color Blind Test.
Minecraft dungeons main menu mockup redesign
Fig.12 Minecraft Dungeons Main Menu Mockup Redesign.
Minecraft dungeons main menu color blind test after redesign
Fig.13 Minecraft Dungeons Main Menu Color Blind Test After Redesign.
Outcomes
  • Created player journey.
  • Created paper prototype and flow chart.
  • Created wireframe based on the original game.
  • Created new wireframes based on the results from usability test.
  • Created a UI that is based on the original game.
  • Created a UI that is accessible to color blind players.
Post-Mortem
  • My understanding of color blind accessibility improved, I’m looking forward to implement these learnings in my future projects.
  • This was a great project to learn about the UX and UI process from beginning to end.
Minecraft dungeons main menu Final redesign
Fig.14 Minecraft Dungeons Main Menu Final Redesign.
Minecraft Dungeons Gameplay Final redesign
Fig.15 Minecraft Dungeons Gameplay Final Redesign.