Star Wars: Galaxy of HeroesMobile

Store Revamp

A redesigned shopping experience
for Discovery, Scalability & Clarity

What is Star Wars: Galaxy of Heroes?

The #1 Star Wars mobile game of all-time!

1

2

Build your squad
Level up your characters

Defeat enemies
Win rewards

Store Importance

Progression Backbone

Monetization Backbone

+

Why Store Revamp?

New Players

Spend when
value is clear

Deal-driven Spenders

Spend only on
compelling offers

Heavy Spenders

Decisive buyers
& spend weekly

Store visits %

Pack click through %

Store conversion %

Opportunity

Opportunity

Current store screensStore layout wireframeClick to see screens

Store Overview

Part 1: Storefront

Part 2: Pack Details

Galaxy of Heroes character illustration

Research

Analyzing the Current Experience

High-value Offers Lacked Visibility

Uniform modules made promotional and priority packs harder to discover.

Low Pack Info Readability Slowed Browsing

Low contrast between cover art and text reduced readability.

Navigation Created Interaction Friction

Top navigation was harder to reach and limited future category expansion.

The Browsing Model Limited Discoverability

Horizontal scrolling reduced content visibility and made offer comparison less efficient.

Text-dependent Mechanics Increased Cognitive Load

Players had to read long descriptions to understand pack mechanics before purchasing.

Unclear Grouping Reduced Pack Clarity

Players struggled to understand which items belonged together.

Goals

Part 1: Storefront

Part 2: Pack Details

Improve Discoverability & Layout Scalability

Improve Information Clarity

Part 1: Storefront

Improve Discoverability & Layout Scalability

Part 2: Pack Details

Improve Information Clarity

Thumb reach in landscape

UX Patterns Research

  • Align interactions with thumb reach in landscape
  • Vertical layouts improve scanability
  • Larger modules create stronger visual hierarchy
  • Clear visuals and item details increase perceived value

Vertical Tab Bar

Thumb-friendly navigation & scalable
layout for content-rich stores

VS

Vertical nav for
reachability

Icons for
clarity

Space for
scalability

Module size exploration: large, default and mini pack modules

Large

Default

Mini

Exploration on Module Sizes

Adapting layout to promote high-value
offers while optimizing screen space

Horizontal scroll store prototypeVertical scroll store prototype

Scrolling Exploration: Horizontal vs. Vertical

VS

Horizontal Scroll

Less intuitive, harder to scan, poor for mixed-size content

Vertical Scroll

Familiar, efficient, better for hierarchy and thumb reach

Refined Pack Modules

Empowering Pack Promotion, enhancing
Value Perception & IP Expression

Art Presentation:

Expanded art area to
showcase IP fantasy &
boost engagement

Item Preview:

Added item preview
to clarify pack value
and increase appeal

Refined Pack Modules

Expanded module, optimized for
space & backward compatibility

After

Before

Refined Pack Modules

Enable quick recognition of offer type

Enhanced
Readability

Timer:

Uniform timers =
faster recognition,
stronger urgency.

Storefront – Final Design Showcase

Improve Discoverability & Layout Scalability

Storefront before: top tabs and horizontal pack rowStorefront after: vertical tabs and large pack module

Before

After

Part 1: Storefront

Improve Discoverability & Layout Scalability

Part 2: Pack Details

Improve Information Clarity

Why It’s Unclear?

Various Pack Mechanics,
BUT One Rigid UI Layout

What Pack Mechanics Do We Have?

Flat Offer

What You See Is
What You Get

Gacha

Chance-Based
Drops

Flat Pack: All items
guaranteed

Trove Gacha: Random item,
fixed quantity

Grouped Gacha: Random item
group, fixed quantity

Multi-Card v2: Each card = random
item from a set, fixed quantity

Hybrid Gacha: Flat + Gacha

Single Item Gacha: fixed
item, random quantity

Multi-Card v1: Each card =
fixed item + random quantity

Random Gacha: Random item
+ random quantity

Decoding Pack Mechanics —
Mapping 8 Pack Types
into 4 UX Quadrants

Collaborated with PMs to identify
categories, top sellers, value tiers, and edge
cases that shaped our design framework,
classifying packs by reward logic to support
information design in pack details.

Fixed Item

Random Item

Fixed
Quantity

Random
Quantity

Fixed
Item

Random
Item

Fixed
Quantity

Random
Quantity

Highlighting High-Value Fixed Packs

Standardizing Randomized Pack Presentation

Improving Information Grouping

Structuring Pack Design Through UX-Driven Classification

Pack details beforePack details after

Pack Details – Final Design

Before

After

Promotion popup beforePromotion popup after

Promotion Popup Revamp

An upgraded popup module to highlight spotlight offers

Before

After

Phased Rollout & Business Impact

Balancing UX impact, development cost, revenue
impact, and user adoption

Metrics omitted for confidentiality. Happy to walk through results in conversation.

Success Metric

Category Discovery Rate
Time to First Pack View

Success Metrics

Store Visits

Pack Click
Through Rate

Success Metric

Store Conversion Rate

Phase 1: Fix the Interaction (Ergonomics)

Improve navigation scalability (Vertical Tabs)
+ Revamp promotional popups.

Phase 2: Fix the Hierarchy (Layout)

Enhance storefront discoverability
(Tetris Module Storefront).

Phase 3: Fix the Clarity (Cognitive Load)

Improve pack detail clarity (Gacha Matrix
UI Implementation).