2. ”
2
OVERVIEW
In this deliverable I have added my paper prototypes and
the wireframes as well. As explained in the first few
steps Brawlhalla are open to change and always try to
change the theme of their UI every season. This is what
motivated me while making the paper prototypes. I will
try and explain more about the project in the upcoming
slides along with examples of my work.
4. 4
Brawlhalla is open to changes in their game UI which can
be seen when they change the theme of the game every
season. This was one of the motivations for going head
with the game UI redesign. Even though the themes
change in Brawlhalla often, they try and keep the layout
consistent to avoid confusion among the audience every
season. I had to keep this in mind while redesigning the
theme to ensure that it does not veer away from the same
model that Brawlhalla follows.
Paper
Prototypes
5. 5
This Home page followed a similar layout to some of the previous
Brawlhalla themes. The empty space in the middle is usually where the
focus of the image background lies. The menu is not the same as the
current UI but it is similar and will not confuse the audience. I tried
drawing inspiration from some older themes in order to achieve the
consistency.
Home Page
Play Modes
The play modes is what pops up when you click on some of the menu
items. It is an important part of the UI since it can be used in multiple
parts of the game. As mentioned in the corner it will be used for Online
play, Ranked gameplay, Custom Game and Offline Play. It usually is just
a pop up with the background still there. I decided to try and have an
option where the background is blurred out instead of having it not
change like the normal Brawlhalla UI.
6. 6
The battlepass was comparetively easier to redesign. I felt I could be
more creative with it since it does not need too much consistency as
compared to other pages. I could draw inspiration from many other
games. In the end I added some significant changes to the UI. In this
redesign the battlepass object is more central giving it more focus. The
info about the object can also be mentioned on its side.
BattlePass
Meet the Legends
The Meet the Legends page is a bit more complicated since it has a lot
more information to be displayed. I followed a similar UI but switched
some things around and added a new way of looking at character stats
and skills. The only concern I have is with the weapons section if it will
be well aligned since it has way less information compared to the other
sections. I also decided to add the colourways right underneath the
character so its easy to switch through them while also seeing the
character.
7. Wireframes
7
The wireframes were easier to do since I already had the paper
prototypes as examples to follow. I had realised some issues with
the paper prototypes and tried to correct them in the wireframes.
The wireframes tend to be helpful since it is actually aligned like it
will be in the UI, thus letting me know if more content has to be
added or if content has to be reduced. Apart from that it also
helps us confirm that it has the same consistency as the previous
game UI. After completing some of the wirefrmes I realised that it
needs to be adjusted since it did not feel consistent with the
previous Uis. In the end I was able to come up with some good
wireframes which will be shown and explained in the upcoming
slides
8. Home Page
8
The home page is the first page that pops up when you open the
game so I had to make sure it was familiar with respect to the
previous Uis. There were some slight changes with the logo
placement since I feel its important to have it somewhere in the
opening screen. Apart from that I removed some of the content in
the previous UI that makes it more chaotic and added it in the menu
instead since it would be easier to find and makes it more organized
as well.
Play Modes
I feel like the play modes were easier to follow since it has
minimal information and it pretty basic. It is a very important
screen since it is used throughout the experience but it is
also easy to navigate through. I did not make the background
blurred in this wireframe, I merely decreased the opacity to
help differentiate with the background and the pop up.
9. BattlePass
9
This version of the Battlepass felt much more organized and
spacious. I thought it would be a good use of the space to make the
battlepass item more centric and bigger so as to give it more
importance in the context of the page. This page had more
difference with comparison to the rest of the pages. One of the
problems I ran into was a way to display both the paid and free
items at the same time. I would either have to display it side by side
or have the user navigate based on their choice.
Meet the Legends
This page had the most improvements from the paper
prototype. I had to add several options and rearrange some
sections. A filter button was added to the character select so
that it would be easier to choose the character based on the
weapon you want to use. The character information was very
tricky since there was a good amount of data that needs to be
added there. I had to rearrange some sections so as to fit
everything in the same box.
10. Summary
10
I was happy with the progress I made since the paper prototypes. The
paper prototypes helped me in sketching out my ideas and making sure it
would work out. I ended up finding some of the shortcomings of my ideas
through the paper prototyping. I discovered that some of my ideas will lead
to confusions among the users. This helped me redesign them for the
wireframes and make them better. The wireframes was an indicator to help
gauge if I had the same consistency as the previous Uis. I have repeated the
point of consistency throughout this project since I know it can be
confusing for players when the UI changes all of a sudden. It feels like a
new game and it is not what the players are used to, so I wanted to avoid
that sentiment among players while also improving the experience. The
wireframe assisted in achieving that because I could see that I was going
on the right track.
I hope these examples provided some clarity on the project updates.
