PROJECT OVERVIEW
Boss Battle is an adventure, mobile game. This is a side projected that included myself and a few friends who love video games and wanted to create our own. The gameplay consist of levels of battling monsters by drawing shapes linked to an action (item attack, magic attack, block, and use potion). Boss Battle is inspired by Fruit Ninja, Skyrim, and other mobile games before it. Below includes the design process of the game including research, ux/ui design, and final visuals.
Role
I was the main ux/ui designer on this project as well as helping some with the game design.
Research
When approaching this project, I made sure I understood both the user needs but also what the game designers and business wanted from the game. Much of the research I gathered was about mobile game design as well as information about people who play them from Nielsen Norman Group, Pew Research, and the Gamer's Brain (book). I also look at other popular mobile game to see how how they interacted with users and gameplay.
I conducted interviews with 3 individuals to gather information about them and the kinds of games they play. Two were hard core games who regularly played video games everyday on console and pc and an one casual game who played games on their phone or 3DS in their free time.
I created to personas, shown below based on my research through the interview and information i gathered.
User Flow
With the creation of the personas and some gameplay defined, the developers, game designers, and myself all came together and created ideas of the flow of the game. Below is the current user flow.
Wireframes
Wireframes were created based on the research, personas, ideation, and flowchart mentioned before. They were created in Adobe Experience Design (XD).
User Testing
There were a small user test with 2 individuals meant to look at the flow and understanding of the interface. Each user was given several tasks to complete during the test and were asked to speak out loud their thoughts while using the prototype. Both individuals mentioned the prototype flow was very easy to follow, but the shop section at times could be overwhelming with all the icons. With this information, I updated the wireframe and prototype.
Interactive Prototype
User interface Visuals
The visuals of Boss Battle are inspired by medieval Europe, often associated with magic and knights, and geometric designs. Below is the mood board used in creating the current visual elements.
Level Selection
This screen shows an large rolling hill that goes up until the final level in the world. The hills slowly transition small houses and community to churches and large castles. Each level is a mission given by the community live on the hill to battle a master. For interactivity, all click able buttons are blue with shadows, while the on interactive buttons (needs to be unlocked) are gray.
Notifications
This screen shows the news about the game or special events with in-game gifts. The idea was they would be seen word of god or related the church, as main public meeting place in the medieval Europe.
Character
This screen is meant to inform the user of all the items they are using and their stats. The item buttons can be pressed to reveal a list of other items they can switch to in their inventory. Visually, its based the legend of King Author pulling out a sword from stone.
Shop
The screen is based on medieval merchants and shops around the center city during the time. It runs parallel to the character screen with armor, item, potions, and shield being separated out.
Other Screens
Moving Forward
With this project, once the development is at a point, I would like to see and test the application as a whole as well as do A/B testing for several elements in the interface, especially the shop and character screens.
