.
.
.
.
.
Grocery Gauntlet
.
UI DESIGN, UX DESIGN
3D MULTIPLAYER PARTY GAME
.
.
.
.
.
.
Overview
.
.
Grocery Gauntlet is a 3D local multiplayer party game about competing in a grocery store! Collect & check-out items to earn points, and sabotage other players by throwing food-related projectiles!Duration: 18 months (current)
Team Size: 24
Tools: Unreal Engine, FigmaOn this project, I was the main designer for the UI Design (Menus & HUD) and UX Design (Signifiers).
.
.
.
Main Menu
HUD
Stage Select
Character Select
How To Play
Results Tally
Detailed Results
.
.
.
.
.
.
UI Design: Menu & HUD
.
The main challenge was creating a layout that was navigable by up to four players and. Later, I had to adapt to a design shift that included adding narrative elements in the menus.
.
.
(use the buttons to navigate to the different UI Screens)
.
Main Menu
(click images to view)
Old Main Menu (before me)
.
This is what we had before I took over designing the menus.
.
.
My Old Design (My Wireframe)
My Old Design (In-Game)
.
I redesigned it to make it easier to navigate with a controller. We used my design when we got new art assets.
.
.
My New Design (Wireframe)
In-Game Menu
.
After the design shift, I changed the menu design to allow room for narrative or tutorial elements. The game logo on the left could be replaced by gameplay clips or animations when idling on this screen.
.
.
HUD
(click images to view)
Single-Player (My Wireframe)
Single-Player (In-Game)
2-Player (My Wireframe)
4-Player (My Wireframe)
.
.
There are a number of elements on screen in the wireframes, but most are either inventory slots or disappear when not relevant to reduce cognitive load.
.
.
- The following elements appear and disappear when appropriate:
- Checkout Arrow
- Super Sale Alert
- Hit Pop-ups - Certain elements are shared between screens in multiplayer split-screen to reduce clutter:
- Timer
- Super Sale Alerts - The 2-player HUD is split vertically because the VFX signifiers use tall height to be easily spotted, meaning their effectiveness would be reduced in horizontal split.
- The HUD layouts for each screen are mirrored horizontally for split-screen with placement and points in the middle, because a player more often wants to quickly see what placement their opponent is rather than what groceries are in their cart.
- The following elements appear and disappear when appropriate:
- Checkout Arrow
- Super Sale Alert
- Hit Pop-ups - Certain elements are shared between screens in multiplayer split-screen to reduce clutter:
- Timer
- Super Sale Alerts - The 2-player HUD is split vertically because the VFX signifiers use tall height to be easily spotted, meaning their effectiveness would be reduced in horizontal split.
- The HUD layouts for each screen are mirrored horizontally for split-screen with placement and points in the middle, because a player more often wants to quickly see what placement their opponent is rather than what groceries are in their cart.
- Checkout Arrow
- Super Sale Alert
- Hit Pop-ups
- Timer
- Super Sale Alerts
.
.
Stage Select
(click images to view)
Old Stage Select (My Wireframe)
Old Stage Select (In-Game)
.
Originally we had a Select Mode screen with more options. After cutting some of these features and shifting the UI design to include more narrative elements, I leaned into the TV game show theme for this screen.
.
.
My Wireframe
In-Game Menu
.
- The Stage Select is themed as a TV with the dials for the options.
- The Randy Retail character is on the left and describes the selected Stage or CPU Difficulty along with additional commentary. This helps build Randy Retail's character and the narrative that he is watching and giving commentary on this game as the host.
- With more time and resources I would have chosen a different font and formatting for Randy’s text to improve readability. I would also include labels adjacent to the dials describing their category like the wireframe shows, and clearer navigation prompts.
- The Stage Select is themed as a TV with the dials for the options.
- The Randy Retail character is on the left and describes the selected Stage or CPU Difficulty along with additional commentary. This helps build Randy Retail's character and the narrative that he is watching and giving commentary on this game as the host.
- With more time and resources I would have chosen a different font and formatting for Randy’s text to improve readability. I would also include labels adjacent to the dials describing their category like the wireframe shows, and clearer navigation prompts.
.
.
Character Select
(click images to view)
Old Character Select
.
The Old Character Select was a little cramped and had some redundant text.
.
.
My Wireframe
In-Game Menu
.
With the design pivot, I redesigned the Character Select to include a section for Randy Retail to appear in the bottom.
.
- In the Final menu, the camera zooms in on the character when the player confirms, giving a bigger indication that the specific player is ready.
- The Go Back button is a hold B, while canceling a character confirmation is a press B. This is because players typically press B to cancel and will do so instinctively. So the B in the Go Back button fills with a lighter color as you hold the B button.
- In the Final menu, the camera zooms in on the character when the player confirms, giving a bigger indication that the specific player is ready.
- The Go Back button is a hold B, while canceling a character confirmation is a press B. This is because players typically press B to cancel and will do so instinctively. So the B in the Go Back button fills with a lighter color as you hold the B button.
.
.
How To Play
(click images to view)
My Wireframe
First Art Pass
In-Game Screen (My New Design)
.
At first, too much information was crammed into a screen that is only shown for a few seconds. After testing, I cut it down to just the essentials and added a button prompt to advance so players have time to read.
.
.
.
Results Tally
.
The end sequence of a round involves awarding Bonus Points then displaying the Final Results (including winner and final point tallies).
.
(click images to view)
Bonus Point Awarding
.
In the Bonus Points Awarding, the backgrounds of the characters’ cards fill like a bar graph, showing the difference between players for that Bonus Category visually, in addition to showing the raw number.
.
.
Final Results Display (My Wireframe)
Final Results Display
.
For the Final Results screen, the winner is emphasized with their card growing while the others shrink. From here, players can choose to see Detailed Results for the stats of the Bonus Categories.
.
.
.
Detailed Results
(click images to view)
My Wireframe
In-Game Screen
.
The Details screen uses Randy Retail like other menu screens to help reinforce that he is the one running the show.The characters have their own colored rows and a crown displays above the stat that wins the category. Randy explains what the currently highlighted category is.
.
.
- The Details Screen displays the stats for all Bonus Point categories, including the ones not chosen & awarded in the end of round sequence.
- Given more time and resources, I would change the background to match the curtain in the Results screen (keeping the show theme consistent).
- Given more time and resources, I would also use shades of the characters’ colors that better contrast with the text color, and use a different font for the numbers & the Randy text (for improved readability).
- The Details Screen displays the stats for all Bonus Point categories, including the ones not chosen & awarded in the end of round sequence.
- Given more time and resources, I would change the background to match the curtain in the Results screen (keeping the show theme consistent).
- Given more time and resources, I would also use shades of the characters’ colors that better contrast with the text color, and use a different font for the numbers & the Randy text (for improved readability).
.
.