The project involved creating the UI design for the Jelly Belly Bean Sorting Game, a multi-touch game that enables two players to participate simultaneously. The objective of the game is for players to drag misshapen jelly beans, referred to as belly flops, from a virtual conveyor belt displayed on the screen and drop them into a hopper receptacle where they are permanently discarded.
UI Designer
Project Manager
2 Months
I had the opportunity to collaborate with Embreate, an interdisciplinary agency based in Toronto, on a UI design project for Jelly Belly Candy Company. Working alongside their creative directors and developers was an absolute pleasure and a delightful experience.
The UI kit for the Jelly Belly Bean Sorting Game was designed with clarity, fun, and dual-player interaction in mind. Each component was crafted to support an intuitive and engaging gameplay experience on a shared touchscreen interface.
Timers & Scoreboards: Timers and digital counters feature a pixelated, LED-style aesthetic to evoke a classic arcade feel. The primary timer is highly legible and animated to provide clear countdown feedback during gameplay. Scoreboards use flip-style components and numeric displays to track player performance in real-time, reinforcing a sense of competition and urgency.
Buttons: Large “START” buttons come in multiple color variations, corresponding to each player’s side. All buttons are mobile-first and finger-friendly, optimized for quick tap interactions. Shadows and gradient overlays provide visual feedback and encourage engagement.
Countdown Timer (10 seconds): A colorful, countdown-based stopwatch system visually prepares players for game start. Each second is color-coded and animated to build anticipation and provide clear, accessible time cues, even from a distance.
Cursors: Custom hand pointer icons indicate interaction zones for each player. These are designed with simple outlines for visibility and align with gesture-based interactions like drag-and-drop sorting.
Game State Indicators: Clear and bold game callouts signal end-of-round results.
WINNER! is displayed with a gold medal and celebratory typography.
TIE! uses a striped tie icon for a lighthearted visual pun.
BELLY FLOP! and GAME OVER states provide clear feedback on game results and discarded beans, maintaining engagement and reinforcing gameplay loops.
Background & Game Layout: The game board is split evenly for two players, with clearly labeled sides and color-coded regions (purple for Player 1, blue for Player 2). The industrial-inspired background and UI borders reinforce the bean sorting conveyor theme while ensuring spatial clarity.
Conveyor Belt: The conveyor belt UI element supports the core drag-and-drop mechanic of the game. Its striped design simulates movement and provides a consistent visual guide for identifying misplaced or misshapen jelly beans (belly flops).
The UI kit emphasizes intuitive interaction, visual clarity, and playful feedback mechanisms—all tuned for touchscreen gameplay and simultaneous user participation. Assets were created for quick integration by developers, with a scalable and reusable design system that supports iterative updates and future game expansion.
