Case Study: Optimizing Game UX: Map and Inventory

Context

Type

Project

Role

UX/UI Designer

Duration

6 Weeks

Tools

Figma

Project Brief

Pain Points

• 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 working with games and limited familiarity with the game.
• 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 built a player flow to visualize the overall gameplay.

Click here to view the full player flow in Figma.

Usability Test

Method

I had 5 players of varying life-sim experience play through the game to see how easily they could navigate.

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?
A clear label on the house column would give players an easy reference point.

How might we make items in the Inventory easier to locate?
Category tabs would let players quickly filter to what they need.

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

Usability 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 had trouble differentiating which category tab was open due to color blindness or poor vision.

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 this case study, from finding the original friction points to catching an accessibility issue I hadn't planned for.

Next Steps

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