Gamified Spin Wheel App for Food & Restaurant Discovery UI/UX Case Study (2024)

Choosing where to eat is a surprisingly common problem. Whether you’re alone or with friends, the decision often leads to long debates, endless scrolling, or settling for the same place again.

This project explores a playful solution: turning the decision into a game.

SpinDine introduces a spin wheel experience that randomly recommends nearby restaurants. Instead of searching endlessly, users simply spin and discover. The challenge was designing something that feels fun and game-like while still delivering useful, trustworthy recommendations.

The project reached full design handoff before development began. Brand name has been anonymized.

🎯 Project Context

Role: Product Designer at VirtualSpirit Timeline: 4 weeks Platform: Mobile Application (iOS / Android) Industry: Food Tech Market: Malaysia

💡 The Challenge

The core product idea was clear from day one: a spin wheel that recommends a nearby restaurant. The challenge was making it feel like a real product rather than a novelty. A spin mechanic that’s only fun once isn’t a product — it’s a demo.

The core design question was: How do you build a gamified experience that stays fun across multiple sessions, across two user tiers, without making the free experience feel like a punishment?

The freemium model added another layer of complexity. Differentiating free and premium had to feel meaningful, not arbitrary. And the visual language had to commit fully to the game aesthetic — a half-hearted attempt would have been worse than either going fully playful or fully clean.

🎨 Design

Most food apps solve discovery through search and filters. SpinDine takes a different approach: remove the decision and replace it with a moment of surprise.

Users tap Spin Now, the wheel turns, and a restaurant appears. No browsing, no comparing, no overthinking.

To make the mechanic feel genuine rather than gimmicky, the visual design needed to commit fully to a game-like aesthetic. I developed a bold visual language using strong gradient backgrounds, chunky buttons, bright color blocking, and a large interactive spin wheel as the centerpiece. The goal was to create a moment of delight every time the user opens the app.

The tradeoff was credibility. A design that leans too playful risks feeling untrustworthy when recommending real places. The balance was keeping merchant results clean and informative, letting the fun live in the interaction layer while the content stayed grounded.

Freemium only works when the free tier is genuinely useful and the premium tier offers something worth paying for.

The spin result became the key differentiator. Free users receive one recommendation per spin. Premium users receive three, shifting the experience from a single random outcome to a choice among curated options.

To keep free users engaged without forcing an immediate upgrade, the ad-watch mechanic lets them earn extra spins by watching an ad. It bridges the gap between free and premium without making the free experience feel punishing.

Standard filters like cuisine, distance, and price still leave users with too many options. Discovery Settings adds a personal layer: users adjust preferences for sweetness, sourness, etc to shape their spin results.

Gating this behind premium made sense. Taste preferences require more setup effort, naturally appealing to users already invested enough to subscribe.

The tradeoff was clarity. The connection between a taste rating and a restaurant recommendation is not immediately obvious. Using star ratings rather than numeric sliders kept the interface approachable without overexplaining.

A recommendation is only useful if the user can quickly decide whether to act on it. The merchant page is organized into three tabs: Info for location and hours, Menu for a food preview, and Reviews for community feedback.

Get Directions is placed prominently on every tab so the action is always one tap away.

The tradeoff was depth versus speed. More information builds trust but slows the decision, working against the app’s core promise. The tab structure solves this through progressive disclosure, keeping the default view light while offering depth for users who want it.

Three systems work together to keep users coming back. Daily spin limits create a natural reason to open the app regularly. The referral system rewards bonus spins for inviting friends. Ad-watch gives free users an opt-in way to earn more spins without hitting a hard paywall.

The referral flow was designed to feel celebratory rather than transactional. A confetti animation and a clear bonus count reinforce the playful tone.

The tradeoff was avoiding manipulation. Keeping spin counts visible at all times and making ad-watch genuinely optional helped the system feel fair rather than coercive.

⚠️ Edge Cases

SpinDine’s core mechanic depends on two things working: location access and nearby restaurant data. When either breaks, the product needs to fail gracefully without losing the user.

Location is turned off The app requires location to spin — without it, there’s no way to surface nearby restaurants. Rather than silently disabling the button, the app blocks the spin and prompts the user to enable location before continuing. There’s no fallback to manual input; the decision was to keep the flow clean rather than introduce a secondary path that complicates the experience.

No merchants nearby If location is on but no restaurants are found within range, a modal explains the situation and returns the user to the home screen. The spin button is then disabled for 30 minutes — a configurable window — with a visible countdown on the button itself. The timer discourages repeated futile spins while giving the user a clear signal of when they can try again.

Out of spins When a free user’s daily spin count hits zero, the Spin Now CTA is replaced with Watch Ads & Spin. The transition is immediate and clearly labeled — users aren’t left staring at a disabled button with no explanation. If they dismiss the ad prompt, the upsell modal for premium is shown as a secondary option.

🔍 Key Takeaway

This project pushed me outside my usual design comfort zone. Most of my work leans toward clean, functional interfaces. SpinDine required a completely different visual muscle: bold, expressive, and unapologetically fun.

The biggest lesson was that committing to a design direction matters. A half-hearted attempt at a playful aesthetic would have felt worse than either going fully fun or fully clean. The visual language needed to match the product’s personality completely.

I also learned that gamification is not just visual. The spin mechanic only works because the underlying system, spin limits, referral rewards, tier differentiation, supports it meaningfully. Fun without function is just noise.

🎁 That’s a wrap!

SpinDine was the project that reminded me good design isn’t always clean design. Sometimes the right answer is bold, loud, and unapologetically fun — and learning to commit to that fully was worth every iteration on that color palette.

Thanks for reading! Feel free to reach out if you’d like to connect or chat about this project.

👋Let’s connect LinkedIn · Dribbble · Behance