BackPack Brawl App
Industry
User Experience Design
Team
Academic Project
Role
UX/UI Designer
Project Timeline
2 months
The gaming app is redesigned to enhance the user experience and interface by providing the users with intuitive and seamless design.
Background
Backpack Brawl is a mobile game application in which you can select heroes and desired items for the battle. Backpack Brawl is based on the concept of Auto Battle. This game requires the player to choose the heroes and items strategically
Project Overview
The goal of this project was to redesign the app to improve the overall navigation of the app, it's UI and provide an intuitive and seamless experience for the players.
User Research
I conducted an app audit with 5-6 users to understand their pain points, frustrations and needs while using this app. This audit provided me with the following insights:
The Homepage has good amount of information but the continue/play button pops too much on the screen which takes away the attention from other features.
The Inventory/Storage text was not visible or informative enough to understand which was which and was it there. Also the Fight button was on the top which was a bit hassle to figure out but the different color helped to understand that.
Some of the text on the screen was too small and had good information connected to it, due to small font it was ignored or hard to read.
Information on the battle screen is too much, the numbers popping which indicated damage sustained was not understanding enough from which items player’s were getting damaged or were dealing damage.
User Journey Map
To better understand and deep dive into the user's needs I created 2 journey maps which helped me to focus on the goals of the project.
Background
Backpack Brawl is a mobile game application in which you can select heroes and desired items for the battle. Backpack Brawl is based on the concept of Auto Battle. This game requires the player to choose the heroes and items strategically
Project Overview
The goal of this project was to redesign the app to improve the overall navigation of the app, it's UI and provide an intuitive and seamless experience for the players.
User Research
I conducted an app audit with 5-6 users to understand their pain points, frustrations and needs while using this app. This audit provided me with the following insights:
The Homepage has good amount of information but the continue/play button pops too much on the screen which takes away the attention from other features.
The Inventory/Storage text was not visible or informative enough to understand which was which and was it there. Also the Fight button was on the top which was a bit hassle to figure out but the different color helped to understand that.
Some of the text on the screen was too small and had good information connected to it, due to small font it was ignored or hard to read.
Information on the battle screen is too much, the numbers popping which indicated damage sustained was not understanding enough from which items player’s were getting damaged or were dealing damage.
User Journey Map
To better understand and deep dive into the user's needs I created 2 journey maps which helped me to focus on the goals of the project.
Background
Backpack Brawl is a mobile game application in which you can select heroes and desired items for the battle. Backpack Brawl is based on the concept of Auto Battle. This game requires the player to choose the heroes and items strategically
Project Overview
The goal of this project was to redesign the app to improve the overall navigation of the app, it's UI and provide an intuitive and seamless experience for the players.
User Research
I conducted an app audit with 5-6 users to understand their pain points, frustrations and needs while using this app. This audit provided me with the following insights:
The Homepage has good amount of information but the continue/play button pops too much on the screen which takes away the attention from other features.
The Inventory/Storage text was not visible or informative enough to understand which was which and was it there. Also the Fight button was on the top which was a bit hassle to figure out but the different color helped to understand that.
Some of the text on the screen was too small and had good information connected to it, due to small font it was ignored or hard to read.
Information on the battle screen is too much, the numbers popping which indicated damage sustained was not understanding enough from which items player’s were getting damaged or were dealing damage.
User Journey Map
To better understand and deep dive into the user's needs I created 2 journey maps which helped me to focus on the goals of the project.
Low-Fidelity Wireframe
The low-fidelity explorations were done to explore the possible experiences through which the user’s pain points can be addressed and the game is optimized to reduce too much visual information and keeping the information to minimal and understandable
Low-Fidelity Wireframe
The low-fidelity explorations were done to explore the possible experiences through which the user’s pain points can be addressed and the game is optimized to reduce too much visual information and keeping the information to minimal and understandable
Design Toolkit
I used this design toolkit to create the final design solution and maintained the brand guidelines while doing so.
Design Toolkit
I used this design toolkit to create the final design solution and maintained the brand guidelines while doing so.
Final Design
Final Design
Figma Prototype Link
https://www.figma.com/proto/
Figma Prototype Link
https://www.figma.com/proto/
NEXT PROJECTS
