Legacy Brawl
OVERVIEW
Having received a design document outlining a proposed new feature for Brawl Stars, I conducted comprehensive research to determine its suitability for the game. Subsequently, I proceeded to visualize the feature using the game's distinctive art style.
TIMELINE
2 weeks project
Nov 2022 - Jan 2023
ROLE
UI/UX Designer
User research, UX & UI Design, prototyping & user testing
HIGHLIGHT
By carefully crafting a design that harmonized with the existing elements, I conceptualize what could be the game's new feature, while ensuring its visual and functional alignment.
Final deveriable, containing both the new and excisting UI elements.
CLICKABLE LINKS
Quick link
Design process
DEVELOPMENT PROCESS
01. The design
Motive
With current Battle Pass mechanics, the player has no way to obtain content from previous Battle Pass seasons. By giving the player a way to re-activate previous seasons at a premium price, both new and existing players have the opportunity to enjoy the exclusive content that was created in the past which is also allowing us to monetize on content that was already created but is not accessible anymore.
Here is what I was given to work with
"The new system allows the player to “bind” their account to any season, including previous ones. Progress can only be made for one season at a time though. Binding their progress-tracking to previous seasons comes at a premium price though, to maintain the benefit of obtaining a Battle Pass for the current season."
Along with the prompt, I was also given a requirement
-
Players should be able to toggle between seasons on the Battle Pass screen using a dropdown menu, a popup or a scroll list.
-
When a season is chosen and bought, it should be displayed as the currently tracked season on the Battle Pass rewards screen (progress, reward images etc.).
-
Consider using a confirmation popup for the purchase (with the options “Confirm” and “Cancel”) with a text explaining the unlock mechanism and that the currently active season will be set to the season that the player is about to unlock.
-
At any point the player can switch back to the current one for free, the Activate button should be present if it wasn’t purchased.
In depth look at the challenge
As I have little to no knowledge about the Brawl Star, I identified several key research goals in preparation for my research.
Battle pass impact on the game
Since this system interacts directly with the gameplay, I have to know the role of the battle pass within the game. Is it just seasonal content, an extra purchasable, or an exclusive seasonal cosmetic. This will answer if there's any additional factor that I have to be concerned about this feature.
Acquiring past battle pass in other game
I have to look into other games, whether there's any case of a feature similar to this working. That way, I would understand how other games integrate this feature into their game. That should give me some insight on how this new feature might interact with the existing system.
Community feedback on the current system
No system could be perfect, and because of that, I have to look for community feedback/concerns regarding the current battle pass system. As that would give me some idea on what to avoid and get a grasp of the situation on hand.
02. What I did
I start by thoroughly understanding the battle pass content and how it progresses. To do this, I analyze the game and interview target users to gather more insights. I also collect concerns and complaints from an online community of Brawl Stars players.
Using these insights, I summarize the information into short cards that explain how the battle pass works with the game. I also select a few interesting Reddit posts about the battle pass.
In the end, I combine all my findings and observations into a detailed report that can guide future stages of the project.
I made a research board showing my research result
Full board can be found (Here)
03. Design Goals
The design goal is to seamlessly integrate this feature into Brawl star. To achieve this, a clean and intuitive interface should be developed in such way that is consistent with the existing theme. Ensuring that the player have a cohesive experience throughout the game. And by incorporating my design, player would be able to achieve the design motive, resulting in a more enjoyable experience.
Early idealization
Based on the insights I gathered, I began experimenting with my ideas and making some design artifacts. My aim was to test my understanding of the concept and pave the way for further redesign if needed. To start, I came up with several names for this new feature (as I have no way of referring to it), this will hopefully help me with the branding out the feature. I then created several concepts of how I could approach this new feature, as shown in the image below. Using these ideas, I move over to Figma and start fleshing out the idea.
I let my creative juice flow and sketch whatever came to my mind.
I fleshed out my ideas and recreated it in Figma
04. Challenges
Content sensitive
As the new feature deals directly with the game's content and the motive of the player, it might cause problems if I didn't deal with it properly.
Matching art style
In order to make this mockup as seamless as possible, a handful amount of research had to be conducted in order to match the game's art style. Otherwise, there might be some elements looking out of place.
Problem and solution
If we add new content to the game, it will directly affect how the old system works and change how players value their skins. In the game, battle passes have a system where certain skins are only available for a limited time, which encourages players to buy new passes. To address this concern, I need to understand how users think and predict if this could be a problem. I asked my friends for their opinions and gathered insights. I also searched in public forums for anything related to the existing battle pass. Based on my research, it seems like a good idea to add this feature.
My design goal is to recreate the game's existing theme. However, I don't have access to their style guide. To develop my own UI with a matching art style, I collect different Brawl Star screens and interfaces and create my own style guide. While it may not be completely accurate, as long as it's sufficient, it should be satisfactory.
Insight gathered and summarized in Figma
Full board can be found (Here)
My own style guide, replicating brawl star UI styling
05. Polish
Once I have acquired enough understanding to replicate the theme, it's time to turn those ideas into reality and begin the process of iteration.
Making a choice
Right after completing the creation of my three ideas, I had to make a decision on which one to pursue. To test them out, I sought insight from my mentor and friends. After gathering feedback, I proceeded with another round of iteration to further develop and refine my chosen idea.
First round of iterating, the goal for this round is to get to see these ideas in action.
Final deliverable
Following two rounds of iteration, I have selected the best idea and enhanced it to the best of my capabilities. Subsequently, I proceeded to develop an interactive prototype to further explore interactions and address potential edge cases.
Picture of the interactable prototype's frames
06. Takeaways
This project served as an enjoyable side project for me, as replicating Brawl Stars' theme proved to be quite challenging. Throughout the process, numerous small challenges kept arising, but I was pleasantly surprised to discover that no matter how daunting a task may appear, breaking it down into smaller tasks and steadily working on them eventually leads to overcoming what once seemed like an impossible challenge.