Making color betting easier to understand
Redesigning a mobile betting experience to make complex color combinations and odds easier to understand and act on.
Role: Product / UX/UI Designer
Platform: App
As part of a short-term freelance project, I redesigned the UX and UI of Perya Color Game, a traditional Filipino game of chance. Players bet on the outcome of three dice, each with six colored sides, by predicting which colors or color combinations will appear.
Initial interface
The challenge and short heuristic UX check.
Before jumping into UI, I showed the existing game to 3 people unfamiliar with the interface and asked them to explain how they would place different types of bets.
A few questions immediately surfaced:
“How do I bet on three colors?”
“Why are similar combinations displayed differently?”
“What is the payout for this bet?”
This quick check helped confirm where the main usability issues were.
Before jumping into UI, I showed the existing game to 3 people unfamiliar with the interface and asked them to explain how they would place different types of bets.
A few questions immediately surfaced:
“How do I bet on three colors?”
“Why are similar combinations displayed differently?”
“What is the payout for this bet?”
This quick check helped confirm where the main usability issues were.
Issues
- Inconsistent color combinationsSimilar bets were represented differently. For example, a blue-red bet appeared as two overlapping squares, while a similar blue-green bet used a small pill-shaped element.
- Unclear oddsPayout ratios such as 1:1, 1:2, and 1:15 weren’t shown where players actually made their decisions—an important piece of information in any betting interface.
- Hard-to-discover triple betsIt wasn’t clear how to bet on a three-color combination, even though the game supported this type of bet.
- Weak CTA hierarchyThe main “Place Bet” action was small and easy to miss.
Exploring Existing Patterns
Learning from existing betting interfaces. I explored how similar games structure color-based betting and found a direction that was significantly easier to understand.
Learning from existing betting interfaces. I explored how similar games structure color-based betting and found a direction that was significantly easier to understand.
Similar games
However, most references supported betting on a single color only, while this game needed to support: Single → Double → Triple color combinations
This created the core design challenge: How might I keep the betting interface simple while supporting more complex color combinations?
This created the core design challenge: How might I keep the betting interface simple while supporting more complex color combinations?
Ai exploration
Solution
I used references, the game rules, and AI-assisted exploration to quickly generate and compare different ways of structuring the betting area. The most promising direction contained the right information, but it was too dense and better suited to a larger screen.
I used it as a starting point, simplified the hierarchy, and redesigned the experience specifically for mobile.
I used references, the game rules, and AI-assisted exploration to quickly generate and compare different ways of structuring the betting area. The most promising direction contained the right information, but it was too dense and better suited to a larger screen.
I used it as a starting point, simplified the hierarchy, and redesigned the experience specifically for mobile.
- Consistent color combinationsA consistent visual system for color combinations, where similar bets follow the same design pattern.
- Clear oddsPayout ratios are clearly visible at the point of decision, helping players compare options and make faster, more informed choices.
- Redesigned triple betsThe three-color combination is integrated into the UI as a clear and consistent part of the betting system.
- Casual, playful CTAThe main “Place Bet” action appears only after the player makes a selection, since there’s nothing to confirm before a bet is chosen. Removing the button from the initial state frees up valuable screen space and reduces cognitive load. Once a bet is selected, the CTA appears as a bright, prominent element that clearly guides the player to the next step.
Final Experience: choose, bet, watch the result.
Outcome and Reflections.
The redesign made color combinations more consistent, odds visible at the moment of decision, triple bets easier to discover, and the primary action contextual and more prominent.
With more time and resource, I would test the redesigned betting grid with a larger group of users and validate whether players can understand different bet types and predict their payouts without referring to the game rules.
The redesign made color combinations more consistent, odds visible at the moment of decision, triple bets easier to discover, and the primary action contextual and more prominent.
With more time and resource, I would test the redesigned betting grid with a larger group of users and validate whether players can understand different bet types and predict their payouts without referring to the game rules.
