Blizzard Entertainment

Improving UX Workflows for a Mobile Game with 2 Million Global Players

Project
Leader Selection UX Strategy
Role
Product Designer
Year
2023
Outcome
+40% player retention · 100% iOS/Android scale
Warcraft Rumble - Leader Selection redesign hero

Army management buried deep in a broken hierarchy

Warcraft Rumble is a mobile action strategy game by Blizzard Entertainment set within the Warcraft universe - collectible Minis battle in frantic melee skirmishes, each controlled by an Army Leader. Blizzard wanted to improve the Army Leader selection process to help players manage their armies seamlessly.

My responsibility was to redesign the end-to-end experience of this process - not just fix surface-level issues, but understand the mental model breakdown and restructure it.

Existing view - problems identified
Fig: Problems in existing view - buried information and unclear hierarchy
01
Army information buried in the Leader tab

Information about all Armies owned by the player was buried within the Leader tab - players had to navigate away from their current context to switch leaders.

02
Unclear 1:n Leader-Troop relationship

Players found it hard to understand that each Leader controls 6 Troops - and that the same troops can be assigned to different Leaders. The visual design didn't communicate this hierarchy at all.

03
No future-proofing for cosmetics

Planned cosmetics (Tower skins, miners, emotes) shared a 1:1 relationship with each Leader, but the existing architecture had no space for this - meaning a full redesign was coming anyway.

Mapping the hierarchy breakdown

Making the Leader-Troop hierarchy visible at all times was the central insight. If Leaders were always visible on screen, they would establish themselves as the entry point into a player's army - and naturally communicate the relationship between a Leader and their Troops below.

This structural change would also work positively for the planned future cosmetic additions, which were tied 1:1 to each Leader. Solving the hierarchy problem solved the cosmetics problem simultaneously.

Userflow and pain-point analysis
Fig: Userflow and Pain-points - navigation friction mapping
Hierarchy improvements mapping
Fig: Hierarchy Improvements - restructuring the Army screen

Three solutions tested with real users

Post-brainstorming, 3 potential solutions were explored and tested with potential users through digital wireframes.

Option 1 - Leaders widget at top
Fig: Option 1 - Leaders widget positioned at top of the Troops
Pros
  • Places Leaders in a prominent position, establishing clear visual hierarchy
  • Adheres to common design conventions, reducing learning curve
  • Reinforces Leader-Troop association intuitively
Cons
  • May reduce available screen real estate for Troops below
  • Fixed widget could feel rigid on smaller device sizes
Option 2 - Expandable panel
Fig: Option 2 - Expandable Leaders panel
Pros
  • Maximizes screen real estate when panel is collapsed
  • Gives power users more control over their viewport
Cons
  • Users might overlook Leaders if the panel is collapsed
  • Expandable panel concept may be unfamiliar, adding a learning curve
  • Adds design and development complexity
Option 3 - Leaders at bottom
Fig: Option 3 - Leaders widget positioned at bottom (current convention)
Pros
  • Maintains consistency with the current design
  • Thumb accessibility on mobile devices
  • Familiar to existing players
Cons
  • Reduces visibility of Leaders - players may miss them
  • Fails to solve the hierarchy clarity problem

Fixed widget at top - always visible, always the entry point

Option 1 was selected: a fixed Leaders widget at the top of the Army screen, ensuring constant visibility and establishing Leaders as the primary navigation hub. The solution included several supporting design decisions:

Streamlined navigation

Removed the Leader sub-navigation button next to the Troops button for a cleaner interface - one less tap to achieve the same goal.

Cosmetic Sections Integration

New sections for Tower skins, miners, and emotes appear only when the player unlocks cosmetics - progressively revealing depth as players advance.

Leader-Cosmetic Association

Cosmetics are tied to each Leader individually, allowing distinct customization per army - making the visual system scale with the game's content roadmap.

Prototype - selected solution overview
Prototype of Selected Solution - fixed widget overview
Edge case 1 - equipped leader state
Equipped state indicator
Edge case 2 - accessing leader info
Accessing Leader Info
Leader info access flow
Leader info access flow - fewer taps
Auto scroll to top of Army screen
Auto scroll back to lunchbox on re-tap

Production-ready screens

Final UI views - Warcraft Rumble Leader Selection
Fig: Final UI Views - optimized for 100% iOS and Android scalability

Measured outcomes

+40%
Player Retention on Feature
100%
iOS & Android Scalability
2M+
Global Players Impacted

The initiative led to a comprehensive UX redesign that resulted in a 40% increase in player retention on the feature through simplification of the user flow. Thorough research, prototyping, and testing culminated in a robust solution that significantly improved the overall usability of the Army Leader selection feature. The project team also undertook art exploration and optimized interface layouts for 100% scalability across both iOS and Android devices.

The enhanced visual hierarchy of Option 1 successfully established Leaders as a prominent, always-visible entry point - helping players quickly identify and access their available options without navigating away from the Army screen.

Next Case Study
John Deere - Enterprise SaaS Design
View case study arrow_forward