Skip to content
Robin Koch
DE/EN
← All work

Case study 03Leisure

Leisure and voucher app with community

Offers, vouchers and community in one app – with gamified elements and microinteractions that make exploring fun.

Client
Leisure platform
Timeline
2023–2024
Role
UI/UX designer
Platform
Mobile consumer app
Tools
Figma, Rive

01 Challenge

The platform brings many worlds together: leisure offers, coupons and vouchers, social and community features and user media. All of it had to feel like one coherent product.

02 Insights

  1. Insight 01

    What matters is what's worth it today

    People scan offers in seconds. Savings and expiry decide whether anyone reads on.

  2. Insight 02

    Community lives on people's own photos

    Shared experiences bring the platform to life – but only if sharing is quick and easy.

  3. Insight 03

    Rewards have to feel earned

    Playful elements motivate when they're tied to real actions – not as decoration.

03 Decisions

  1. 1

    Offer cards that lead with the saving

    Big image, saving as a badge, expiry right below. Everything else lives in the detail view.

    ← From insight 01
  2. 2

    Editing right where you share

    Cropping and captioning in the same step as posting – no detour through other apps.

    ← From insight 02
  3. 3

    Badges for real experiences

    Redeeming earns progress and badges, staged with Rive microinteractions.

    ← From insight 03

04 User flow

From offer to shared experience

  1. 01Discover offer
  2. 02Claim voucher
  3. 03Redeem on site
  4. 04Share experience
    ◇ Add a photo?Crop & caption ↩
  5. 05Earn a badge

05 Wireframes

Discover360 × 720
Discover−30 %3 days left11
1Saving and expiry at a glance
Redeem360 × 720
Your voucherXXXX-0000Mark as redeemed3
3Voucher as a ticket – with a reward on redemption
Share360 × 720
Share experiencePost22
2Crop and caption in the same step

↔ Drag to scroll

Simplified, generalised representation – no original screens, data or client content.

06 Design system

Simplified, generalised representation – no original screens, data or client content.

Colours

  • coral-500#FF6B4FPrimary action, savings
  • ink-900#2A0B05Text
  • blush-100#FFE1D8Surfaces, tickets
  • sun-400#FFC83DRewards
  • mint-500#2FB98ARedeemed

Typography

  • Display · 32/36 · 800Discover
  • Title · 20/26 · 700Leisure offer −30%
  • Body · 15/22 · 400Valid until Sunday
  • Caption · 12/16 · 6003 DAYS LEFT

Spacing

  • 4
  • 8
  • 12
  • 16
  • 20
  • 32

Radius

20px

Components

−30 %

Leisure offer

Valid until Sunday

3 days left
XXXX-0000Redeemed
  • ★
  • ✦
  • ✓
TodayNearbyFamily

Round shapes and bold colours for a playful, friendly feel.

07 Approach

  1. 1

    Offers & vouchers

    Interfaces for offers, coupons and vouchers that show at a glance what's worth it.

  2. 2

    Community & media

    Social and community features plus tools for editing and managing media inside the app.

  3. 3

    Playful elements

    Gamified UI elements that improve how people interact with the app.

  4. 4

    Microinteractions

    Interactive UI elements and animations in Rive – plus a consistent visual identity.

08 Deliverables

  • Visual identity of the app
  • Reusable components
  • Gamified UI elements
  • Microinteractions in Rive
  • Wireframes, mockups & prototypes

Happy to show more in person.

I don't share this client's name or original screens publicly. In a call I'll gladly walk you through designs, prototypes and decisions.

Book a call →

Next project — 04

From design to code with Flutter