HUD

(click images to view)

.

.

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.

.

.

Stage Select

(click images to view)

.

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.

.

.

.

  • 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)

.

The Old Character Select was a little cramped and had some redundant text.

.

.

.

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.

.

.

How To Play

(click images to view)

.

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)

.

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.

.

.

.

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)

.

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).

.

.