Project Description
Buckshot is a 2D combat platformer in which the player character, Zander, is exacting revenge on the friends who betrayed him using Pyrobo, a demon shotgun. The player moves about the map propelled by the recoil of the gun.
The game is set in a high fantasy world that has a tinge of racism based on the amount of magical prowess someone has. The art style on the border of pixel art with a dash of detail and style reminiscent of the golden age of Metroidvanias.
Research
The research for Buckshot was focused on not only the aesthetic of the game, but also how different platformers and metroidvanias show health, ammo, and lives. Looking at success stories allowed me to not break the wheel while also utilizing thematic differences to create a new design that works best for Buckshot.
Competitive Analysis Takeaways
• Utilize a mini-map
• The attack effects should be over-the-top and thematically correct.
• The bosses should be memorable and distinct with environmental UI that adds to their flair.
• The design of the gore effects is refreshing and something I want to add to the final design
• Life Bar Design
• The UI should influence and enhance the vibe presented by the game to make a stronger cohesive theme.
• Characters should be colorful in emotion and personality, maybe include UI overlays for dialogue?
• The twin dynamic can take a UI to new heights especially if you can play both twins and they have opposing powers and ethics.
• Backgrounds should pique the player's curiosity and the UI should solidify the overall theme.
• Playable characters should have distinct feedback for the player for vital occurrences like damage and power-ups.
• Bullets should have stylized effects that make them fit into the magical theme of the game.
• Load game should accommodate multiple profiles for play.
• The game's background should be parallax.
• The character design vs. the background design should be less detail to more detail with the backgrounds still being stylized.
• Life bars can be simple, but should always be shown to have depth one way or another.
• Maybe subvert the norm with lives going to the top right rather than the normal top left?
• Keep changing stats clear for players
• Create a menu to choose characters like the two-player screen
• Streets of Rage 4 is the exact aesthetic I want to go with for the game. Character art shows the player who they are playing followed by the number of lives and HP.
• The HP and Lives design is sleek and reminiscent of arcade games, which isn’t the idea. But with some thematic changes, it’s possible to repurpose a life bar like that for my purposes.
•The player feedback for special attacks should be apparent.
Tools & Technology
Adobe Illustrator
Adobe Photoshop
Adobe XD
Gamemaker Studio
Adobe Illustrator
The logo and the bulk of Buckshot's textured graphics were created in Adobe Illustrator. Creating in Illustrator and directly importing the vector designs into XD made everything streamlined and efficient for the project. Also, designs were able to be quickly iterated upon for this reason as well.
Adobe XD
Wireframe and mockup iterations are quick to put together using XD. The ease of use and seamless transitioning between Adobe programs was what made this project so easy to shift and flesh out. Xd was an integral part of the preliminary and design phase of Buckshot's creation.
Adobe Photoshop
For quick edits and more detailed designs, I leaned on Photoshop. There are a variety of actions I can take in Illustrator that were comparable, but it was so much faster in Photoshop. I was able to texture the different logos, symbols, and buttons with greater detail because of Photoshop
Gamemaker Studio
I took a chance on Gamemaker Studio with my team. Buckshot was the time I worked in Gamemaker Studio. The animations for the buttons and UI had to be simple, but impactful. So I put extra care into realizing and working with the limitations of the software.
Process
Wireframes
The wireframes show all of the general menus and options that the player can go through before getting into the game. I wanted to make sure that I could utilize color to show what was hovered or active over for the different save slots. For any PC game, it is important to have all manner of options for different monitors, resolutions, and gameplay peripherals.
Buckshot Wireframe: Main Menu
Buckshot Wireframe: New Game
Buckshot Wireframe: Load Game
Buckshot Wireframe: Options
Buckshot Wireframe: Gameplay Options
Buckshot Wireframe: Control Scheme
Buckshot Wireframe: Video Options
Buckshot Wireframe: Audio Options
User Research
Personas
General Information
Name: Jeremy Harris
Age: 26
Gender: Cis Male (He/Him)
Marriage Status: Single
Employment: Social Media Manager
Education: Bachelor of Arts in Advertising
Frequency of App Use: 2x a week for 2 hours each
Computer Use: High
Console vs. PC Familiarity: PC
Introduction
Jeremy is a social media manager for a chain restaurant based in Maine. He is often seen playing RPGs whenever he has free time from work and social obligations. He is single, but always meeting people because of work. He wants a getaway that helps him relax, but he also wants a challenge so he doesn’t have to buy a new game so fast.
Motivations
Since he is always on the move, Jeremy loves it when things work with him rather than against him. Ease of use is very important to him since he works late sometimes. So he doesn’t want to get frustrated in searching through menus to start games and search for options.
Task Objectives
Jeremy wants to get into his last save and get to playing as soon as possible.
He has to leave in 30 minutes for a meeting with a client, but he wants to give the game enough time to sink in so he can play after his meeting.
Potential Frustrations
He is likely to move to a more tried-and-true RPG that he knows rather than try to stay and figure out a completely new menu system. Sometimes he is too tired to really try and other times he just doesn’t feel like the game is worth the hassle since there are other games like it.
General Information
Name: Amira Karim
Age: 19
Gender: Cis Female (She/Her)
Marriage Status: Single
Employment: Baker
Education: Studying Culinary Arts (B.A.)
Frequency of App Use: 1x a week for 30 min
Computer Use: High
Console vs. PC Familiarity: Console (Xbox)
Introduction
Amira is a baker out of San Antonio, TX. While in high school she gamed regularly with friends but has fallen out of practice after attending culinary school. She wants to get back into gaming and looking for a game to ease her back into the culture. She uses games as a chance to explore different cultures and find new inspiration.
Motivations
Out of practice and ready to dive back into the culture, Amira is returning to gaming after a stint of focusing on her career and finding her calling. After settling into culinary school, she wants to get back to gaming to have a hobby to do after class and work.
Task Objectives
Amira wants to go through all of the options thoroughly. This is because she is red-blind. She wants to make sure the game can accommodate her color blindness without being a hindrance. There have to be other points to know what is what than just color just to make it easier to understand.
Potential Frustrations
Since she is red-blind, she has a hard time telling what will damage her and what options are labeled fatal because everything is set to red to depict that. She wants to make sure that developers are thinking able accessibility to allow games to be enjoyed by a wider range of people.
General Information
Name: Keoki Kealoha
Age: 34
Gender: Non-Binary (They/Them)
Marriage Status: Married
Employment: Environmental Researcher
Education: M.S. in Environmental Science
Frequency of App Use: 4x a week for 15 min each
Computer Use: High
Console vs. PC Familiarity: PC
Introduction
Keoki is an Environmental Researcher at the University of Hawai’i. He spends most of his time searching through scholarly articles and thesis papers. But when he gets the free time to just sit for a few minutes, he’s been trying out Buckshot.
Motivations
Blessed with just a little time, Keoki enjoys being able to get through a level within 15 minutes, but he has never gone through the process of overriding his game. He’s curious, but also a bit hesitant since it may take a while to figure out how the menus work since he has just been going straight to his saved game.
Task Objectives
Likeke has beaten the game but wants to speedrun the game now. So he wants to reset and also start up a new game. So he wonders if he will have to delete his current game. Then go create a new save file.
Potential Frustrations
Since he has only a little time to spare, Likeke really values his time. He doesn’t want to go through the motions and wait just to delete his game and start up a new one. If there are too many screens or steps to the menu system, he will give up because he doesn’t have the time to invest in repeatedly doing this while speedrunning the game.
Cognitive Walkthrough
A cognitive walkthrough is a method of testing different pathways. The goal of cognitive walkthroughs is to make sure that new users are able to access what they want effortlessly. A team of UX designers walks through each step of a task flow while answering a set of prescribed questions, with the goal of identifying those aspects of the interface that could be challenging to new users.
Cognitive Walkthrough Questions
1. Does the user's goal match the options?
2. Were the correct options available?
3. Does it have proper labeling?
4. Does the user understand the feedback?
User 1: Jeremy Harris' Cognitive Walkthrough (Loading a Save File)
Task Objectives
Jeremy wants to get into his last save and get to playing as soon as possible.
He has to leave in 30 minutes for a meeting with a client, but he wants to give the game enough time to sink in so he can play after his meeting.
Happy Path
Main Menu Opens → Click Load Game → Click Save File → Load the File
Step 1: Main Menu Opens
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 3: Click Save File
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, but the labeling could be more apparent.
4. Yes, the user understands the feedback.
Step 2: Click Load Game
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 4: Load the File
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
User 2: Amira Karim's Cognitive Walkthrough (Turn on the Protanopia Filter)
Task Objectives
Amira wants to go through all of the options thoroughly. This is because she is red-blind. She wants to make sure the game can accommodate her color blindness without being a hindrance. There have to be other ways to know what is what than just color just to make it easier to understand.
Happy Path
Main Menu Opens → Click Options → Click Video Options → Change Colorblind Filter
Step 1: Main Menu Opens
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 3: Click Video Options
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 2: Click Options
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 4: Activate the Protanopia Filter
1. No, the user's goal does not match the options.
2. No, the filter must be added to the design.
3. No, it does not have the appropriate labeling.
4. Yes, the user understands the feedback.
User 3: Keoki Kealoha's Cognitive Walkthrough (Resetting His Game Progress)
Task Objectives
Likeke has beaten the game but wants to speedrun the game now. So he wants to reset and also start up a new game. So he wonders if he will have to delete his current game. Then go create a new save file.
Happy Path
Main Menu Opens → Click New Game → Click Save File → Confirm Overwrite
Step 1: Main Menu Opens
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 3: Click Video Options
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, the labeling could be more apparent.
4. Yes, the user understands the feedback.
Step 2: Click New Game
1. Yes, the user's goal does match the options.
2. Yes, the correct options were available.
3. Yes, it does have the appropriate labeling.
4. Yes, the user understands the feedback.
Step 4: Confirm Overwrite of Save File
1. No, the user's goal does not match the options.
2. No, button or process should be created.
3. No, a button should explain if an overwrite or a new game will occur.
4. Yes, the user understands the feedback.
Styleguide
Using all the information from the user research. My goal was clear: fix the problems related to accessibility and player reinforcement in the menus. Along with working on the skeleton of the design to include more processes, I also began solidifying the graphical elements of the design as well.
This led me to do a style guide with the colors, fonts, and iconography. It also included an accessibility section to show that the colors chosen were unique in contrast and saturation. So if the player was color-blind, they could still play the game with little to no problems.
The warm tones and shades are to make the interface meld well with the character that the player is controlling. The base character that the game had functional was Xander who sports a long, red sleeveless tunic with gold accents. With that idea, earth tones with a distinct red color to add that pop brought everything together.
Style Progression (Wireframes → Mid-Fidelity Mockups)
Shifting from the wireframes to the mid-fidelity mockups, the inclusion of graphical assets and more fleshed-out color palettes came into play.
The interfaces and menus came together well with the theme and world as more color was introduced to the designs. More screens were also created to fix the problems that were found in the user stories. So that also created more menus and processes to illustrate.
Wireframe - Main Menu
Mid-Fidelity - Main Menu
Mid-Fidelity Mockups
Mid-Fidelity - Main Menu
Mid-Fidelity - New Game
Mid-Fidelity - Load Game: Inactive
Mid-Fidelity - Load Game
Mid-Fidelity - New Game: Overwrite Confirmation
Mid-Fidelity - Loading Screen
Mid-Fidelity - In-Game Dialogue
Mid-Fidelity - In-Game Hud
Mid-Fidelity - Pause Menu
Mid-Fidelity - Death Screen
Mid-Fidelity - Options
Mid-Fidelity - Options: Gameplay
Mid-Fidelity - Options: Controls
Mid-Fidelity - Options: Video
Mid-Fidelity - Options: Audio
Mid-Fidelity - Exit To Desktop
Postmortem
The post-mortem for Buckshot is a somber moment. I love this IP and would love to pursue it more. The gameplay had a lot going for it. The world was fun and interesting without being cliche. And most of all, it was my brainchild. I led everything from the ideation all the way through to user testing. The amount of work that went into working on Buckshot was obscene. But at the same time, it was a great way for me to see if making games was something I really wanted to do. Bickshot solidified my belief in myself and the work that I could create.
Style Progression (Mid-Fidelity Mockups → Final Designs)
The shifts between the mid-fidelity mockups and the final designs were really based on the polishing of hero assets in the menus and HUDs. The polish also extended to tying up the design with new art and enemy health bars.
• The logo was changed so the subtitle was more apparent and less cluttered.
• Background art was added to give the player a sense of the world.
• Inactive save files were changed to be semi-transparent to give the new game and load game menus more contrast.
• Colorblind Filters were added to increase accessibility for more players.
• Enemy health bars and ammo capacity were implemented.
Final Designs
Buckshot - Main Menu
Buckshot - New Game: Active
Buckshot - New Game: Confirmation
Buckshot - Load Game: Inactive
Buckshot - Load Game: Active
Buckshot - Loading Screen
Buckshot - Dialogue
Buckshot - In-Game HUD
Buckshot - Paused Menu
Buckshot - Death Screen
Buckshot - Options
Buckshot - Options: Gameplay
Buckshot - Options: Control Scheme
Buckshot - Options: Video
Buckshot - Options: Audio
