Bean Counters | Video Game UI/UX Design
Built to Scale
Developed in 48 hours for the 2024 GMTK Game Jam, Bean Counters plays with the jam’s theme of built to scale by focusing on scale as a tool for measuring weight.
To keep the game's scope achievable within the time I had available, I needed to lean on my strengths; create a solid core loop, design coherent UI/UX, and be visually distinct.
The Premise
You play as a clerk at Bean Counters Coffee co.. Customers shop for coffee beans and place their orders by weight, but are often unsure of the weight in grams. So, instead they provide you with an approximate weight, based on everyday objects.
By sliding open the bean hopper, players will weigh out beans on a scale until they believe the bean weight matches the customer’s order, at which point the player sells the order and sees how close they were to the correct weight.
UI/UX
Because Bean Counters is an almost entirely UI-based game, designing a strong visual hierarchy and user flow was paramount. Utilizing high-contrast colors, movement, and minimalist graphical elements would be key to achieving this.
The scale weight, order text, and sell button are the largest text elements and have the highest contrast, allowing them prominence in the design.
To anchor the player’s eye to the middle of the screen, the customer order was placed on the right side of the screen with left aligning the text. This kept the visual weight centered more consistently, regardless of the order’s text length.
User Flow & Juice
Noticeable movement on elements to helped guide the player’s eye through the gameplay loop and provided needed polish to ensure the game left an impression.
Arrow graphics incorporated into the bean bag and panel edges, coupled with the movement of the falling beans, help the player through the counterclockwise flow of the game.
Typography & Color
Tying the coffee theme together was a bright color palette and bold typeface. Utilizing a bright red and yellow as background colors allowed the contrasting blue text to pop off the screen. The typeface Brocha was chosen for its readability and its soft, smooth form, evoking a cozy café vibe.
