Brawlhalla Game UI Redesign
How I made a Christmas themed UI for Brawlhalla.
Project Overview:
This project focuses on how I changed the UI of the mobile version of a game called Brawlhalla. Why Brawlhalla? Brawlhalla is a game that I have been playing for years now. I noticed how they had a way with changing the theme of their game every now and then. At the time, I did not think much of it and simply continued to play the game. At the start of my journey as a designer I began to notice multiple intricacies within the game that I thought I could change for the better. I also thought since they are known to change their themes quiet often, this was the perfect opportunity to redesign the UI and also change the theme of the game at the same time. The project completion is very close to the day of Christmas and what best way to show the December festivities that to make the game Christmas/ Winter themed.
Project Goal:
The goal of this project is to make a redesign of the Brawlhalla app and also add a winter theme to it. Initially I only considered changing the theme to the current design on Brawlhalla, but then later decided I can do so much more with a whole UI redesign since I can put my UI skills to the test and also try to solve all the problems I faced while playing the game.
To achieve this goal, I plan on following the same design principles that the original Brawlhalla UI follows but also try and improve it at the same time. This would require me to make the UI in such a way that it still has the same retro vibe while changing elements of the UI during the redesign.
Technologies Used:
The softwares used for the UI design was Adobe XD and Figma. The elements that are seen in the redesign such as the snow, the cherries, the wreath and even the wooden boards were all made from scratch on Illustrator. The loading screens and frame backgrounds were made on photoshop with the help of current Brawlhalla images. Only time AI was used throughout this project was as part of Photoshop’s generative AI feature.
Creative Process:
The start of the creative process begins with research on Brawlhalla’s UI designs and also the design in its multiple themes. The research involved identification of the Target Audience, User Personas and Pain points. To summarise this part of the research, I realised the Target Audience would be people between the age of 10–20. I made a user persona based on these details and ended up making some pain points about the current UI. This helped me get a good idea about what kind of changes I could make in throughout this project.
The next step would be to create sketches and wireframes to get an idea about how I want my final project to look like. These sketches and wireframes were made at a vary early stage and thus were subject to change. I have provided a brief explanation of the early wireframes and why it was made below.
Click here to view Early sketches and wireframes
The next step , I consider to be one of the most important steps of the process, Feedback. My peers and professors were able to provide me with some feedback on the wireframes and provided mutliple pointers as to where I could improve. The biggest one, which would end up changing the whole project was to consider amplifying the scale of the redesign. For the most part the new designs were very similar to the older one since I wanted to keep the consistency, but once I got feedback I realised it would be much better to make some drastic changes if it would make the UI better. I have provided images of the new sketches below.
After these wireframes, I had to create the elements within the UI which will give it the winter touch. My initial ideas included a wooden board for the panels since it is often associated with christmas. Other elements include, snow, mistletoes, wreath etc; Along with these elements, I also made the icons on illustrator. the icons included a sword, shield, speed and dexterity for the stats and even the profile settings icon. All these elements were made on Illustrator. I also used the help of PNGs as reference, through which I made some of the complex icons and illustrations. I have provided a few images of the illustrator file, with the elements displayed below.
These are just some of the elements I had to make on illustrator before I started on my final design. These elements are what made the new UI cohesive with respect to the theme.
Get Karthik Krishnakumar’s stories in your inbox
Join Medium for free to get updates from this writer.
I also had to make a loading screen for the game and make it winter themed as well. I had the idea of using characters that are snow related and ended up making the loading screen on photoshop.
Additionally, I used the time before I finished my High Fidelity prototype to ask for feedback. Luckily since I played this game, I had friends who were also familiar with the game so they were able to provide me with some good feedback on the new wireframes that I had created. With the feedback in mind, I moved onto the final part of creating the High Fidelity.
Final Deliverable:
The final deliverable includes the high fidelity prototypes which was a product of the creative process mentioned above. In the end I made the main pages where the UI of the game comes to play.
These are the final prototypes that were made on figma.
Reflection:
I was quiet happy with the results of the project. I would not say that I have achieved all the goals that I set up for myself this project since I was hoping to do more interactions and more pages. I wanted to make sure that the theme was clear and I feel like I was able to convey it well with the illustrations and colours used in the theme.
I faced multiple challenges throughout the project. At first, it was confusing what aspects of the game I should keep. Certain things from the previous UI represents the game itself and removing all of them did not feel right. I did initially face difficulties in the amplitude of changes I should be making. I also faced an issue with time management since I was very intricate with the type of illustrations I made and ended up making multiple variations of them.
Before I had even started the project I was excited with the idea of redesigning the UI of a game, let alone a game I played myself. It made me realise that the discipline of UI/UX is much more broad than designing an app. It also surprised me with the amount of thought we have to put into the UI of a game as well, since gaming involves skill it also matter where the buttons are placed as well. Although I had not designed the in game button positions, I learnt alot about UI/UX in gaming during the research process.
One of the main things I learnt about myself is that I do have alot of areas to improve on. On the other hand, I also learnt that I was quick to adapt with the changes in plans and was able to make quick decisions to move forward with the project.
Summary
To conclude, this was a very fun project to work on. I found it particulary interesting since I played the game alot these past few years. There was a few changes in the project plan in certain stages, but in the end I was able to come up with good results for the Christmas/ Winter themed UI for Brawlhalla.
