Interaction DesignMotion DesignUI Visual Design

Magic Fan Engagement App

A gamified fan-engagement app where users complete music and community challenges to earn points, unlock rewards, connect with other fans, and build status.

Role: Interaction motion, motion-system direction, flow prototyping
Year: 2025
Output: An initial motion behavior system across multiple product flows, giving other motion artists reusable patterns for ambient motion, idle interaction, validation, and reward moments.

01 · Context

Design motion for a gamified fan experience.

Magic was built around a simple product loop: choose a challenge, take an action, validate participation, collect a reward, and progress toward status or competition. The app mixed fan knowledge, real-world participation, music-service connection, friends, points, badges, mystery boxes, and leaderboards.

02 · Role

Define patterns other motion artists could extend.

My role was to establish the initial motion language by animating multiple flows, not just polish isolated screens. The work defined how the app introduces challenges, holds attention during waiting states, confirms user action, and stages reward moments in a consistent way.

03 · System

Separate the motion into ambient, idle, and reward behavior.

Ambient motion kept the product world alive through subtle background movement, glow, and particles. Idle interaction motion kept actionable screens dynamic while users needed to tap, scan, connect, or coordinate with friends. Response and reward motion confirmed success through points, badges, boxes, vouchers, and leaderboard reveals.

Three flows, one reusable motion grammar.

Each flow used the same structure: preview the reward, ask for a real action, validate the action, then celebrate progress. The system stayed consistent while adapting to location-based participation, fan identity, and social proximity.

City Challenge

The richest end-to-end flow: event hub, challenge card, map check-in, fan-count idle state, camera scan, points, mystery box, voucher, and leaderboard. This is the strongest hero sequence for the case study.

Shows real-world location and group participation.
Uses animated waiting states while fans gather.
Stacks reward beats to make completion feel valuable.

Real Fan

A fan-identity flow built around questions, feedback, sharing, link validation, badge unlock, music-service connection, and points. This flow is strongest for showing state clarity and validation logic.

Clear selected, incorrect, and validated states.
Badge unlock turns identity proof into a collectible reward.
Platform connection extends the challenge into product progression.

Real Friends

A compact social flow where two users keep phones close, wait through a pulsing connection state, reveal paired avatars, and earn points. This flow best demonstrates idle motion for real-world coordination.

Pulsing rings guide attention during physical coordination.
Avatar reveal creates a simple social payoff.
The reward moment reuses the broader points grammar.

Reusable principles behind the interaction motion.

The strongest portfolio story is that motion supported the product loop rather than decorating the interface. Waiting states stayed alive, action moments were clearly signaled, validation was easy to read, and rewards escalated from small confirmations into collectible moments. Those rules made the same motion language work across quiz, location, social, scan, and account-connection challenges.

Enter password