Case Study 2: Optimizing Game UX: Map and Inventory

Context

Type

Project

Role

UX/UI Designer

Duration

6 Weeks

Tools

Figma

Project Brief

Key Issues

• Map Confusion: Players struggled to fully understand the map.
• Inventory Clutter: Items were hard to locate quickly.
• Color Contrast Issue: Accessibility testing revealed color-blind users had trouble distinguishing the category tab colors.

Challenges

• New to Game Design: First time designing for a game environment.
• Limited Resources: No access to Nintendo's brand guidelines or UI component library.
• Time Constraints: 6-week course duration.

Solutions

• Map Label: Added a label above the house column to reduce confusion.
• Category Tabs: Added tabs to filter items faster.
• Revised Color Palette: Updated colors to pass contrast testing.

Research

Affinity Mapping

I categorized the game's menu options by screen to build a foundation for the player flow.

Click here to view the full affinity mapping in Figma.

Player Flow

I mapped the player flow to understand how players moved through the game's menus and screens.

Click here to view the full player flow in Figma.

First Test

Method

I tested the game with 5 players with varying levels of life-sim experience to evaluate how easily they could navigate the Map and Inventory screens.

Pain Points

• Map Screen: 4 of 5 players didn't recognize the house column.
• Inventory Screen: 3 of 5 players found it cluttered and hard to locate items.

Define

Player Journey

An overview of the players' journey through gameplay, capturing their thoughts and reactions at each screen.

Click here to view the full player journey in Figma.

Problem

Players need quick, intuitive interactions during everyday gameplay, but the Map and Inventory screens created friction instead.

Ideate

How Might We

• How might we help players navigate the Map more easily?
• How might we make items in the Inventory easier to locate?

Design

Lo-Fi Wireframes

Rough mockups of the Map and Inventory screens.
‍
Click here to view the full lo-fi wireframes iteration in Figma.

Map Screen

Inventory Screen

Hi-Fi Wireframes

I refined the wireframes into high-fidelity mockups, applying the game's visual style.

Click here to view the full UI mockups in Figma.

Map Screen

Inventory Screen

Second Test

Method

I retested the Map and Inventory screens with the same 5 players.

Results

• Players navigated and understood both screens much more easily.
• 3 of 5 players had difficulty identifying which category tab was active.

Accessibility Test

I ran a color blindness simulator to identify low-contrast colors.

Click here to view the full accessibility test in Figma.

Findings

Reddish-brown tab color caused confusion for players with red-green color blindness and monochromatic vision.

Iterations

• The Inventory's opened tab is now purple with a thicker border and bolded font. Unopened tabs stayed grey with regular font.
• The Map required no changes.

Click here to view the full accessibility test iterations in Figma.

Final Design

Reflection

Testing at multiple points shaped the design, from identifying the original friction points to uncovering an accessibility issue that informed the final iteration.

Next Steps

Test the fix with more users and apply this process to other screens.