Minecraft Dungeons:
UI Redesign

A redesigned UI that aims to revamp an existing interface with a focus on enhancing usability and accessibility for a wide range of players.

DELIVERABLES

Player Journey
Flowchart
Paper Prototype
Low Fidelity Wireframes
Usability Test Report
Prototype

ROLE

Sole Designer

TOOLS

Adobe Creative Cloud
Figma
Miro

DURATION

7 Weeks

TL;DR

Redesigned Minecraft Dungeons UI in a 7-week project. Applied user-centered design principles, addressing challenges like tight deadlines and limited resources. Utilized player journey mapping, paper prototyping, and low-fidelity wireframes for iterative design. Usability testing revealed flaws (lack of mini-map, terrain focus issues) leading to successful redesign with improved aesthetics, added features, and color-blindness consideration. The project emphasized the impact of user-centric design in gaming, highlighting successes, challenges, and key learnings for future projects.

BACKGROUND

Overview

Given the task of redesigning Minecraft Dungeons’ UX without specific guidance, I acknowledged the challenge of improving an established product. Through comprehensive user research and flow analysis, I focused on key areas with potential for user satisfaction and revenue enhancement.

Challenge

The project sought to incorporate UI/UX principles into the gaming experience through a redesign of the Minecraft Dungeons interface. This involved identifying user needs, addressing pain-points, and successfully implementing essential changes. Challenges encountered encompassed a strict deadline, limited art resources, incomplete comprehension of game rules, and a diverse range of design references.

Role

I was in charge of redesigning the graphical user interface, leveraging my gaming expertise and extensive UI/UX and graphic design knowledge. This case study showcases my skill in harmonizing gaming and design to create an enhanced and immersive interface.

EMPATHIZE

Observation

I acquired Minecraft Dungeons for my son’s Switch not long before this case study was composed. However, he hadn’t yet had the chance to play it. Luckily, I had the opportunity to witness his initial experience and playthrough. I asked if he could guide me through his actions, a request he was quite eager to fulfill. He was ecstatic and I started taking observational notes along the way while he enjoyed the game.

Player Journey Map

After observing my son’s gaming session from the initial introduction screen all the way to the completion of the first level, my focus was shifted to gathering data and documenting the player journey.  Alongside this, I offered constructive feedback for opportunities, highlighting any issues the player encountered and suggesting possible solutions. The main goal of this primary research was to gain a deeper understanding of the challenges associated with the gaming interface, with the aim of implementing iterative changes to enhance the overall playability.

Player Journey Map

DEFINE

Paper Prototype

Once I was able to understand the target user’s needs and pain-points, I was able to utilize a paper prototype to organize functions within screens. This informed the creation of an organization of the sentiments and ideas from the journey map. This provided a holistic perspective and offered a comprehensive view. The sequence covered Home Screen, opening cinematic, character selection, world map, gameplay, win/loss scenarios, rewards, and inventory management.

Paper Prototype
Paper Prototype

Understanding the Problem

Drawing from prior research and data analysis, I pinpointed areas for improvement, notably the ambiguous inventory item descriptions and the layout of the gameplay screen map. The redesign aimed to rectify these issues, ensuring a clear and efficient map design and a well-organized inventory management system for players’ benefit.

IDEATE

Flowchart

Upon gaining a thorough understanding of Minecraft Dungeons’ screen layout and functionalities, I initiated the development of user pathways for key actions using red routes. This methodology allowed me to strategize the creation of necessary pages and features in subsequent development phases. Constructing a coherent task flow provided insights into user interactions with game screens, guiding the strategic placement of anticipated information.

Flowchart
Flowchart

Low-Fidelity Prototype

After finalizing the flowchart, I possessed a blueprint for shaping the prototype. This enabled me to concentrate on creating distinct features for user testing using basic screen sketches of vital interfaces. The flexibility of these simplified wireframes offered the advantage of modifying screen layouts, evaluating tasks such as understanding inventory management and player selections. This approach placed critical functions at the forefront, streamlining initial user testing by highlighting functionality and user-friendliness above visual appeal.

Intro Screen
I incorporated familiar game graphics and call to action buttons along with a simple layout to help accomodate users of all experience levels.
Character Select Screen
A selectable character menu with visible statistics was created to help show users all available charcater selection models.
Inventory Screen
A more clear and concise screen was designed to better show the user all of the available items and their respective statistics and enhancements.
Gameplay Screen
The battle screen was redesigned to help users see important game information such as objectives, buffs/debuffs, and actionbars.

TEST

Usability Testing

Scope: Evaluate wireframes’ clarity in conveying game objectives, iconography, and inventory management.

Process: Recruit participants considering demographics and gaming familiarity. A scripted test outlines details, instructions, and incentives. Five participants were tested in person using Figma wireframes. Data analysis guides improvements with potential for additional tests.

Tasks: Identify settings button, Count emeralds, Check inventory, Locate experience points, Assess action bar, and Offer UI feedback.

Usability Test Findings

Following the completion of the usability tests, I consolidated the observations into tangible insights derived from actual physical interactions, user statements, and task analyses. The decision to conduct these tests in a face-to-face manner allowed me to gain a deeper understanding of their requirements and challenges, as I could interpret their needs and concerns through nonverbal cues and visual signals. I identified two significant design flaws that required attention and improvement in order to enhance the player’s user interface.

No mini-map on the screen.
Summary: 3/5 users noted the absence of a mini-map in the game’s interface.
Recommendations: Create and integrate a mini-map into the interface.

Difficulty focusing on terrain and map tracking.
Summary:
1/5 users highlighted the absence of an overlay mapping system. 2/5 users indirectly mentioned the issue in their comments and gameplay history.
Recommendations: Develop a map overlay for the user interface.

"Dad, I wish Minecraft Dungeons had an easier to use map. I keep getting lost."​
Sergio Jr.
7 y/o Son

Low-Fidelity Wireframe Iterations

Incorporating feedback from usability testing and personal observations, I pinpointed crucial design enhancements needed for the wireframes. I introduced modifications such as incorporating a map overlay and adding a dedicated mini-map section to the game interface. These minor adjustments are pivotal to build a strong basis for the final design. The iterations in the initial wireframe design effectively tackled users’ concerns and resolved identified issues through improved information presentation and graphical user interface refinements.

Gameplay Screen V.2
I added a map overlay along with a minimap section to help users navigate through the game more efficiently.

PROTOTYPE

Final Design

Using insights and data from earlier development phases, I refined the design by first creating screens aligned with the existing design. Then, I progressed to a high-fidelity wireframes, enhancing the action bar’s aesthetics and introducing a minimap with a light overlay for improved navigation. Revamping the inventory screen aimed to enhance item understanding. By following red routes and implementing key changes, I prioritized efficient task completion and access to in-game information. The goal was a finalized design that combined visual appeal with functional excellence for a seamless gaming experience.

Intro Screen
Intro Screen
Character Select Screen
Character Select Screen
Inventory Screen
Inventory Screen
Gameplay Screen
Gameplay Screen

ACCESSIBILITY TESTING

"I really like the easy to see buttons and layout, I have a vision impairment and most games are hard to play."​
Nathan R.
Gamer

Color Blindness Testing

To ensure inclusivity for individuals with different types of color blindness, I conducted an online accessibility test using the website Coblis Color Blindness Simulator. This critical phase in the development process underscored the importance of designing with a diverse user base in mind. By assessing the experience of individuals with various visual impairments, I gained deeper insights into how designs and development should accommodate usability concerns beyond the average user, fostering inclusivity for all gamers. Reviewing the results of the accessibility testing allowed me to confirm the effective design of colors, typography, and other elements to ensure usability and functionality for those with visual impairments.

Typical View Red-Blind (Protanopia) View
Red-Blind (Protanopia) View
Typical View Red-Weak (Protanomaly) View
Red-Weak (Protanomaly) View
Typical View Blue-Blind (Tritanopia) View
Blue-Blind (Tritanopia) View
Typical View Blue-Weak (Tritanomaly) View
Blue-Weak (Tritanomaly) View
Typical View Green-Blind (Deuteranopia) View
Green-Blind (Deuteranopia) View
Typical View Green-Weak (Deuteranomaly) View
Green-Weak (Deuteranomaly) View
Typical View
Blue-Cone (Monochromacy) View
Typical View Monochromacy Achromatopsia View
Monochromacy Achromatopsia View

REFLECTIONS

POST-MORTEM

The project showcased the power of applying user-centered design principles to enhance a gaming interface. Despite challenges, the redesign resulted in a more accessible, visually appealing, and user-friendly experience. Design thinking, inclusivity, and adaptability emerged as key themes, reinforcing the importance of user-centric design practices in the gaming context.

Successes

  • UI Redesign Impact: Successfully applied UX/UI principles to enhance Minecraft Dungeons’ interface, improving user experience and accessibility.
  • UI-Centered Approach: Employed Design thinking to prioritize user needs, resulting in positive feedback from players.
  • Style Consistency: Developed an interface that ensured a cohesive and visually appealing design across screens.
  • Inclusive Design: Conducted accessibility testing to address color blindness and promote inclusivity among gamers.

Challenges

  • Tight Deadline: Navigated the project’s demands within a constrained timeframe, impacting the depth of iteration.
  • Limited Resources: Overcame challenges associated with minimal access to art resources and incomplete knowledge of game rules.
  • Complexity of Design References: Managed the vast and elusive range of design references available, ensuring a unique and user-friendly outcome.

KEY LEARNINGS

  • User-Centered Iteration: Iterative design thinking significantly improved the interface’s usability and accessibility.
  • Inclusivity Matters: Accessibility testing highlighted the importance of designing for diverse user needs, promoting inclusivity.
  • Adaptation & Style: Successfully adapting a brand’s style to different contexts requires careful consideration and adherence to a style guide.
  • Design for Impact: Applying UX/UI principles in gaming can lead to impactful design changes, enhancing the overall gaming experience.
  • Time Management & Iteration: Balancing tight timelines with iterative design processes remains a challenge, requiring time management strategies.
  • Incorporate More Testing: Future projects would benefit from increased usability testing and interactive prototypes for more comprehensive insights.

MORE CASE STUDIES

everMenu

Pro Twigs

Thank You!
Thank you for taking the time to read my case study! I greatly appreciate your visit. Interested in collaborating? Please don’t hesitate to Email Me or connect with me on LinkedIn. I look forward to hearing from you!