All Hams on Deck! is a silly mobile game developed by a team of five at The Bread & Butter Game Co., an indie team co-founded by myself and my friends. It's a fast-paced, arcade-style game about bouncing a pig on a boat to prevent it from falling into the ocean.
From early on, I was heavily involved in the game design process. I was responsible for crafting a polished UI, as well as planning the UX flows and implementing and animating menu elements within Unity.
As a game in the mobile space, our team agreed that it should be free-to-play for accessibility. When it came to monetization though, we decided that any ads should come exclusively in the form of opt-in reward ads, in order to preserve a good user experience. The game also features purchasable pig skins. These can also be won in the Piggy Bank, a prize box mechanic, by spending in-game currency that we appropriately named "Coinks".
Leading up to the game's launch, I shot and edited this trailer to make it reminiscent of a particular time period.
Throughout All Hams, I focused on creating a playful and whimsical UI that matched the silliness and polish of the game. A major goal of mine was to create an interface that implicitly invited the player to click its buttons, encouraging a sense of discovery within the menus.
The interface elements are primarily made from wood panels and buttons that fit with the game's nautical world. Additionally, various wood sound effects are used on button presses. This, combined with detailed haptic feedback on iPhone, creates a satisfying experience as the player navigates the menus.
When the player misses their pig with the boat, it will fall into the ocean, with the camera following it. In its place, a ghost version of the same pig will appear with an added halo or pair of demon horns, depending on which pig was chosen.
Since this screen displays screenshot-and-share-able information like the player's last and high scores, this is a fun way to show off which pig was being used in that particular run. To actively encourage players to share their scores, I added a button to bring up a share sheet with an autofilled message for posting on social media.
At the top of the screen is a progress meter that lets the player know how close they are to being able to use the Piggy Bank. Once at least 100 Coinks are collected, they have the option of spending them on a random character.
Appearing as thought bubbles coming from the ghost pig, there are major action buttons that encourage players to interact with Coink mechanics. Since ads in this game are exclusively opt-in, these buttons have to really make the player want to click them. They slowly float around, as though they are floating in the water, and they continuously alternate colors to draw attention.
Sometimes, in place of one of these buttons, the pig will share a short quote instead.
To supplement purchasing new pigs as in-app purchases, the player can spend 100 Coinks at the Piggy Bank to receive a random character.
Once the player taps on the Piggy Bank, it accepts the Coinks and begins shaking. The screen excitedly encourages the player to tap on it two more times, resulting in the Piggy Bank exploding and the random character appearing.
The game features A LOT of fun pigs to choose from. The character list provides their names, sprites, and upgrade ranks.
By tapping on any pig's sprite, the player is taken to that pig's upgrade page, where the player can view the upgrade rewards. Tapping on the "Upgrade" button will pop up a confirmation modal. For pigs that have upgrade ranks, Rank 2 swaps the default pig oinks with custom sound effects, and Rank 3 adds custom particle trails during gameplay.
The tutorial window went through a lot of iteration. Watching some players get confused with the control scheme and goal of the game during testing, I refined the screen to be as visual as possible.
Additionally, we made sure that when the game is started for the first time, this window automatically pops up.
The most expensive pig, the Capitali$t Pig, cannot be won in the Piggy Bank, and thus can only be purchased. Players that purchase it receive an additional feature: the fake leaderboard. The golden button to access this is featured prominently on the main menu, sitting between the two wooden tabs at the bottom.
No matter what, the player is always #1 here. Ranks #2 - #100 are filled with random scores (which are always lower than the player's high score!) and names that are randomly generated from lists of first names, last names, prefixes, and suffixes.
The results can be thoroughly entertaining.
Based off of a pig and buoy illustration done by our character artist, Krystal, the logo wen though several iterations. Early on, I went with a circular design that used the wood texture from the UI to give the logo some physicality. Eventually, I settled on a simpler design that promoted readability and did away with the pig itself. A major benefit from this was that the new design could work without the buoy in instances where we needed a wide version of the logo.
Before any final art was created for the UI, I planned and iterated upon the menu structure in Adobe XD. This was helpful to visualize the game flow and to get feedback from my teammates early on.
My friend Colin (pictured in the pink pig costume) created the structure for this miniature arcade cabinet that can be worn as a backpack.
I designed the exterior, including decals of each included pig, some basic instructions, and the light-up marquee.
We brought this to the show floor of PAX South 2020 as a part of our launch promotion. The included build of the game was a custom "Arcade Edition" on an iPad, which featured a custom leaderboard for PAX attendees.
