Brewl
UI/UX Designer & Design Lead
FALL 2020 - SPRING 2021
The Project
Brewl is a turn-based strategy game made in a custom engine. You play as a doctor that must brew potions to cure sick patients from a deadly disease.
mY cONTRIBUTIONS
For Brewl, I created and implemented all UI assets while constantly optimizing and improving the UX experience.
As Brewl is a game heavily based on the mouse cursor, the UI needed to quickly give information while being interactable.
the goals
Make our complex system easily digestible via the UI.
Expandable in the event our system demands more.
Use icons and language players are familiar with.
Have our combat feel impactful, despite the limitation of having no artists.
requirements
UI that supports many different potions.
Brewing UI that will allow players to brew whatever potion they have selected.
Backpack which can hold materials players have collected.
Battle screen
Scrounge button
Scrounge UI that would appear when Scavenge is pressed.
main game wireframes - v1
Default Battle Screen
Brewing Screen
Animation Screen
Scavenge Screen
For the first iteration of the UI. I wanted to compact all the clickable elements to the bottom of the screen. This creates a distinction between the player’s space and the battle space.
The Brewing screen would appear when player’s click on a potion. This will give them access to drag and drop their materials into the Brewing tab. Allowing players to drag and drop their materials will make them feel like they are actually brewing a potion.
While brewing, players would see the lines and cauldron fill with liquid. This is intended to add to the feeling of brewing.
The Scavenge screen appears at the start of a turn and/or if the player hits the Scavenge button. This darkened out the battle screen and other UI, showing that the rest of the battle is inaccessible while on this screen. Players will be able to click the “Store” button to move these materials into their backpack.
Problems & NEEDED CHANGES
The system now changed so that player’s would only be able to hold one item in their backpack. This made the rest of the backpack slots irrelevant.
A new “burn” system would be introduced so players could throw away materials. This would grant them a reroll of Scavenge.
The current way potions are displayed only allowed for the player to have 5 total. This needed to be expanded.
Potions do not display the information needed for gameplay.
Would require a “Next Turn” button.
UI that shows the enemy’s attacks.
Scrounge Screen is weird as a separate UI. Could work it into the main one.
RESEARCH - cARDS
The main games we focused on while researching for Brewl was “Slay The Spire” and “Dicey Dungeons.”
“Slay The Spire” was the biggest inspiration for the next iteration of our combat system UI. The card system would allow for expandability, and allow us to display important information in a compact manner.
“Fights in Tight Spaces” was another big research component. I loved how they could easily display information on their cards without using text.
brewl prototype / main ui v2
Prototype Main UI
New Scrounge Area
Backpack and Burn
During development of BREWL, a Unity prototype was made so that we could test various aspects of the game while awaiting development of the custom engine. This allowed for rapid iteration.
Enemy Next Moves
Potion Cards
Brewing UI
In this second iteration, the new Card UI is very rough. It was mainly a test where we see how players react to the information displayed, and how they react to the cards.
The Brewing UI itself stayed relatively the same, and players responded positively to the brewing itself. The mixtures of sound, colors, and the process of brewing all felt right.
The Scrounge UI is now placed below the battle screen and above the cards. Materials appear here and can easily be dragged around.
The Backpack and new Burn function have been placed next to each other. As both only allow/require one slot, it makes sense to group them together.
Problems & NEEDED CHANGES
Players would drag their materials from the Scrounge Area to the Battle Area.
Players would constantly place their materials on the cards, instead of clicking on the cards to open up the Brewing UI.
Players would often place their materials in Burn when they meant to place it in their Backpack.
Potion Cards would need better formatting.
potion card wireframes
New Cards V1
I ended up making multiple versions of what cards should look like
New Cards V2
The biggest change to the cards this time around is they are made with a new intention. Instead of being clicked on to activate the Brewing UI, players can now drag their materials onto the cards themselves. As mentioned previously, players had a tendency to do this. If this is what players wanted to do, I saw no reason why we shouldn’t let them. We also can cut down on the extra menus if we manage to work the Brewing UI into the cards.
The second biggest change is the switch to symbols to communicate attacks. This would be a swap from text which is overall more slow and boring. I wanted to create a universal language via symbols to help communicate the power of the cards.
potion card wireframes v2
More in-depth breakdown of the new card.
This was getting very close to the final card UI. Through playtesting, I found that this card was being received very well. Gameplay wise this new card allowed us to streamline the system. With how the card now raises when being used to brew, it allowed us to save space in the default state.
During the development of the cards, I was actively working and rearranging other aspects of the UI.
final game buttons
This is the majority of the final game’s buttons.
During development, I was improving upon the UX of our battles. I was trying to make attacks and potions feel great for the player. This proved to be an extremely difficult challenge due to the lack of Artists on the team.
battle FEEDBACK v1
The original attack animations used in the Brewl Unity Prototype.
This initial feedback for attacks felt very limited. It did deliver and punch and felt fine, however, I wanted to strive for better.
There was also a need to make each potion feel individual and special, which this generic animation would not accomplish.
RESEARCH - battle ux
Once again I looked at “Slay The Spire” for great battle UX. They have all the custom sprites, animations, screen shake. The things that make that game pop. Multiple animations and custom sprites are out of scope for our team, however.
It is that worry of scope which led me to the next ideas. We had a programmer very interested in particle systems, so I ended up researching particle systems in games more.
I looked towards “Tetris 99.” This is a big leap from the type of game we were making. In that game, if you attack a player, particles are sent from your board to theirs. I thought this was a perfect idea to mimic for our game.
battle FEEDBACk v2 - wireframe
This wireframe was the prime diagram used for translating my intentions to our particle programmer. In this wireframe you can see more than just Battle UX. I was adding feedback to multiple areas based on playtest data. With these new implementations, the feedback in almost every area of our game improved.
final game ui/ux
The final UI had some changes compared to where we last talked about it. The biggest difference is the cards and scrounge area swapped places. This is due to the fact that cards would go over materials once expanded. I also decided to make the buttons and backpack/burn vertical instead of horizontal. This solves the problem of players accidently burning when they meant to backpack. It also draws eyes upwards towards the battlefield.
All the text and explanations of cards/attacks was all changed to symbols as intended. With that I also changed the enemy attack information to the right of the enemy. This shows attacks that are incoming while the left shows current statuses.
reflection
BREWL was a difficult game to develop due to the custom engine and limited team. However, what we accomplished was incredible and I believe the UI and every piece of feedback became the best it could be. Going into this project, I was not much of a turn-based strategy player. Which means I was designing outside of my comfort zone. It taught me that even in a genre I’m not fluent in, with iteration, the end product will always improve.
