Content

[UX Study] Brawl Stars

UX Case Study: Character Selections

Current Design



In the current game flow, accessing and comparing character stats requires excessive navigation. Players must take three steps from the main menu to reach the Brawler Stats screen, and another three steps to switch to a different character, as character selection is limited to the Brawler Roster screen.

This design breaks comparison continuity and introduces unnecessary friction, making character evaluation slower and less intuitive than it should be.


Suggested Solution




1. Character Selection Bar on Character Details Screen

Introduced a scrollable character selection bar on the Character Details screen, allowing players to switch between characters instantly without returning to the Brawler Roster. This enables quick side-by-side comparison of characters in a single, continuous flow.

To further improve efficiency, the filter options from the Brawler Roster were added to the Brawler Stats screen, allowing players to narrow down character types directly within the details view.

Additional swipe sensitivity was applied to the selection bar to support faster scrolling when navigating large rosters. Combined with filtering, this significantly reduces the effort required to locate specific characters in most scenarios.


2. Updated Information Stat Panel

In the previous design, selecting the information button opened a modal that fully covered the character details. This interaction was replaced with an in-panel information display on the right panel, keeping all core character context visible.

When the information view is active, the information button transforms into a close button. The panel remains open when switching between characters via the selection bar, enabling easier comparison of both stats and skills across characters.

Secondary details, such as skill descriptions, are displayed in a contextual text bubble when a skill icon is selected. This interaction follows the same pattern used for Rank information, maintaining behavioral consistency.


3. Streamlined Filter Options

The original design provided six filter options in a fixed order:
By Rarity, Most Trophies, Least Trophies, Close to Next Rank, Power Level, and By Rarity (descending).

These were simplified into four primary filters to reduce cognitive load and improve scannability:
Rarity, Trophies, Power Level, and Close to Next Rank.

An ascending/descending toggle arrow was added to Rarity, Trophies, and Power Level, allowing users to control sorting direction without duplicating options. The arrow is disabled for Close to Next Rank, as it only supports a single logical order.