Role

Project Lead, UX Designer, Research Coordinator

Client

Developer of Card Survival: Tropical Island (indie game)

Duration

3 Months

Overview

This project aimed to redesign and improve the first-time player experience of Card Survival: Tropical Island (CSTI) by evaluating usability issues and proposing UI/UX solutions that maintain the game’s depth while reducing onboarding friction.

2. The Challenge

The original UI was dense, ambiguous, and difficult for new players to interpret. Without a tutorial, players relied entirely on the interface to understand survival mechanics — often failing to form a clear mental model.

Key issues surfaced from client meetings:

• Lack of onboarding support for beginners
• Overwhelming information hierarchy
• Confusing status indicators
• Poor navigation and discoverability

“We don’t want to lose the complexity existing players love — but we want new players to stay past 15 minutes.” — Client

3. Research Process

3.1 Planning & Methods

We recruited 6 participants who were familiar with survival games but completely new to CSTI.

Methods used:

• Think-aloud usability testing (30–40 minutes per session)
• Pre-game & post-game interviews
• Task completion observation
• Thematic coding & affinity diagramming
• Severity ranking of issues

3.2 Key Findings

Through 120+ notes and transcripts, three major themes surfaced:

1. Information Overload

Players struggled to identify:

• Which stats needed urgent attention
• What icons meant (e.g., green arrow ≠ “good”)
• Where to find critical survival actions

2. Navigation Confusion

Problems included:

• Misinterpreting filters as “folders”
• Losing items when filters were active
• Scrolling long lists without clear structure

3. Mental Fatigue

Players required too many clicks to accomplish basic tasks such as crafting, eating, or recovering status.

4. Obstacles & Constraints

4.1 Communication Challenges

The developer was based in Paris, and our team was in Vancouver, resulting in:

• Delayed feedback cycles
• Misaligned expectations around visual complexity vs simplicity
• Need for clearer decision-making timelines

4.2 Research Trade-offs

Originally planned for 10 participants, but reduced to 6 due to:

• Scheduling conflicts
• Limited time for transcription & coding
• Cognitive load on participants during think-aloud sessions

4.3 Testing Barriers

Some players were quiet or hesitant during think-aloud sessions. We solved this by:

• Introducing guiding prompts
• Encouraging participants to narrate intentions, not just actions

5. Prioritizing Solutions

From five possible redesign directions, we selected three using an Impact–Effort Matrix:

Priority	Solution	Rationale
⭐ High	Main UI restructuring	Reduced clutter and improved visibility
⭐ Medium	Visual hierarchy improvements	Improved comprehension of status and actions
⭐ Medium	Navigation & filter redesign	Reduced user errors and confusion

6. Final Redesign

6.1 Before & After (Main UI)

Before:

• Overlapping panels
• Inconsistent icon colors (green/red arrows)
• Hidden status information
• Poor alignment and spacing

After:

• Cleaned hierarchy, clearer grouping of elements
• Muted background overlay to reduce noise
• Unified iconography with neutral tones
• Enlarged status area to reduce scrolling

Main UI Comparison

Equipment & Status Highlight

7. Design System Decisions

Typography

• Inter Bold for headers
• Inter Regular for general text
• Inter Light for de-emphasized details

Color Palette

• Neutral sand tones for base UI
• Accent orange (#EF7C58) for high-priority actions
• Grayscale arrow icons to eliminate misinterpretations

Interaction Patterns

• Left-anchored HUD
• Single-depth filters
• Consolidated Info Hub for stat growth & progress tracking

8. Impact & Results

Quantitative (from task observations)

• 38% reduction in time needed to complete basic survival actions
• Fewer navigation errors linked to filters and crafting
• Higher retention intent in post-study interviews

Qualitative

Participants described the redesign as:

• “Much more intuitive”
• “Easier to read and understand”
• “Less stressful when everything is organized visually”

Client Outcome

The client integrated parts of our redesign into their next beta update, particularly the main HUD improvements and the revised status bar.

9. Reflection

Leading the project taught me how to:

• Balance player needs with developer constraints
• Prioritize features under tight deadlines
• Facilitate clear communication across remote teams
• Synthesize complex data into actionable design directions

If I had more time, I would introduce:

• A/B testing of status layouts
• A progressive onboarding tutorial
• Longitudinal testing to measure learning over time