I designed the complete Clan Battles interface - a large-scale multiplayer system where players’ clans compete for territories, earn victory points, and progress through seasonal leagues. My focus was on creating a clear and immersive experience that connects strategic map gameplay with milestone progression, battle results, and rewards.

The feature included:

• Full UX structure for navigation between map, battles, leagues, and seasonal rewards;

• Visual systems for multiple event phases - Preparation, Battle, and Peace;

• Dynamic hero illustrations and adaptive states to reflect progress and emotion;

• Scalable layouts suitable for both tablet and mobile screens.
  
  

The main screen serves as the hub of the event - it shows the active battle map, quick access to tabs (Leagues, Rewards, Leaderboard), and the current state of the player’s clan.

I designed a state-based interface that changes depending on the phase:

• Battle: active map with interaction zones and animated hero stance;

• Victory: brighter visuals, celebratory tone, and reward highlights;

• Defeat: calm state focused on information and navigation.

The hero-knight illustration dynamically changes between states, enhancing emotional readability.

Each tab follows a unified visual system for consistency, while presenting unique content:

• Leagues: ranking tiers with clear league progression indicators;

• Rewards: modular grid with milestones and claimable items;

• Leaderboard: competitive layout emphasizing top positions;

• Season Rewards: a summary view with emphasis on completion and prestige.

I designed these layouts to keep hierarchy and focus balanced - allowing players to easily track performance and rewards while maintaining thematic depth.

From the main screen, players can open the interactive map - a large scrollable, zoomable area representing the clan’s territory and enemy fortifications.

I designed:

• A two-state map system for Attack and Defense phases;

• Tap interactions for selecting fortifications and managing squads;

• A battle log panel with attack history and clan performance overview;

• Visual clarity for occupied, available, and contested buildings.

The map combines strategy and clarity - allowing complex gameplay actions while remaining visually readable.

These result screens display the final battle outcome, showing a comparison of points between clans. 

Depending on the result - Victory, Defeat, or Tie - the hero character changes posture and expression to reflect the situation. 

The background also adapts to the current map environment (for example, winter or summer), keeping visual consistency across the event.

The UI adapts to different event environments - winter and summer versions of the map feature unique lighting and background color adjustments.

This supports event rotation and adds variety while keeping the overall interface structure consistent.