A.S.B.

WorkKarate Kid: Legends

Interactive Experience · April 2025

Karate Kid: Legends × IMDb

I developed the initial experience, game mechanics, interaction system, and supporting assets as part of IMDb Creative Studio, working closely with Design Technology. As the campaign progressed into production, the work continued collaboratively across the IMDb Creative Studio design and Design Technology teams.

Role
Product / UX / Visual Designer
Timeline
April 2025
Creative team
IMDb Creative Studio / Amazon
Studio / advertiser
Sony Pictures / Columbia Pictures
Contribution
Initial experience · game mechanics · interaction design · production assets · Design Technology collaboration
Platform
IMDb Video Wall+ · web + mobile
Continued production
IMDb Creative Studio Design + Design Technology · 2025
Recognition
Silver ADDY · 2026 · resulting campaign
Laptop frame of the original Karate Kid: Legends game-select state on IMDb, with three training challenges over a temple garden.

Explore the finished campaignWatch the final production

Finished campaign references from IMDb Creative Studio.

From watching to participating

Karate Kid is built around training, discipline, and progression. Instead of treating the IMDb takeover as another passive piece of movie advertising, we explored how the audience could participate in that training themselves. The concept turned the advertising surface into an interactive training experience.

Train like a Karate Kid

Precision, Balance, and Memory were designed as one training path — enter, choose a challenge, complete the set, and progress — not as three disconnected mini-games.

  1. IMDb
  2. Enter training
  3. Choose challenge
  4. Precision
  5. Balance
  6. Memory
  7. Complete training
  8. Reward / progression
Game-select state with Precision, Balance, and Memory. Balance and Memory are inactive until the player completes the earlier challenges.
Original April 2025 game select. Later challenges stay inactive until earlier drills are complete.
All-three-games complete: celebration transition with a kick silhouette across the Karate Kid: Legends title.
Completion · kick
All-three-games complete: celebration with the earned headband over the title.
Completion · earned belt

Designing how the experience plays

The brief for my April 2025 work was behavioral as much as visual: how the games listen, respond, score, fail, and move the player forward.

The three boards below are portfolio demonstrations of the mechanics. They are not the shipped IMDb unit.

Precision

Accuracy + timing + controlled response

  • Instruction state before the first strike
  • Directional block left / block right
  • Highlighted target on the dummy
  • Hit window, scoring, and miss count
  • Success, failure, and replay
Precision intro: Mr. Han on the garden path with the line about building kung fu into karate.
Intro
Precision gameplay: dummy with a highlighted target, left/right block controls, timer, score, and miss count.
Active play
Precision success state: bonsai reward with the line the tree grows stronger.
Success
Precision failure state: replay control beside Mr. Han, with Li Fong still present on the right.
Failure / retry

Precision

Accuracy + timing + controlled response

Hits
0
Missed
0 / 3
Time
20s

Arrow keys or the block buttons. Three misses ends the drill.

Precision demo idle. Use Block left or Block right when a target highlights.

Ready

Balance

Control + equilibrium + sustained input

  • Continuous left / right correction
  • Keep the marker inside a target zone
  • Timer and out-of-zone feedback
  • Hold the stance to complete the drill
  • Success, failure, and replay
Balance intro: Mr. Miyagi with the line about building kung fu into karate for the second challenge.
Intro
Balance gameplay: black ball on a wooden stick, tilt left/right controls, timer, and out-count.
Active play
Balance success state: headband reward with the line let’s make a karate kid.
Success
Balance failure state: replay control with Mr. Han and the city skyline behind the unit.
Failure / retry

Balance

Control + equilibrium + sustained input

Out
0 / 3
Time
16s

Hold a tilt control or an arrow key. Three exits from the zone ends the drill.

Balance demo idle. Hold Tilt left or Tilt right to keep the marker in the zone.

Ready

Memory

Observe → remember → repeat

  • Letter / key combination shown once
  • Player’s turn to repeat the combo
  • Correct response (green confirmation)
  • Incorrect response (red miss)
  • Completion, reward, or replay

Frames from the April 2025 desktop build.

Memory intro: Mr. Miyagi with Memory selected and the line two branches, one tree.
Intro
Memory instruction state: remember these letters, with Shift and Alt shown once.
Remember once
Memory correct response: kick silhouette with a green confirmation ring.
Correct
Memory incorrect response: kick silhouette with a red miss ring and the miss count incremented.
Incorrect
Memory success state: headband reward with the line remember what you are fighting for.
Success
Memory failure state: replay control with Mr. Han and Mr. Miyagi beside Li Fong.
Failure / retry

Memory

Observe → remember → repeat

A short key combination will appear once.

—

Portfolio demonstration of the Shift / Alt style combination from the April 2025 Memory build. Use the keys or the buttons.

Memory demo idle. A key combination is shown once, then you repeat it.

Ready

Game system, not static screens

The work was a state machine: select, instruct, play, respond, retry or advance. Layouts were expressions of those states — not a gallery of isolated posters.

  1. Select game
  2. Intro
  3. Instructions
  4. Active play
  5. Feedback
  6. Retry or success
  7. Next challenge
  8. Final completion

Designing beyond the screen

Sony Pictures / Columbia Pictures needed an interactive campaign experience that could support motion, feedback, and multiple gameplay states across three distinct training challenges. I designed the game mechanics for each stage and created the visual environments that framed those interactions, including the stage-specific backgrounds, spatial compositions, and supporting scene elements used throughout the experience.

I also created and prepared implementation-ready source objects, sprite frames, 3D assets, and original hand-pose artwork, then collaborated closely with Design Technology to translate the experience into practical build requirements.

Several of the environmental concepts and background treatments developed during this phase were carried forward and refined in the final production, helping preserve continuity between the original interaction design and the launched experience.

  1. Source art
  2. Asset separation
  3. Frame / sprite preparation
  4. Interaction states
  5. Implementation
Hand-pose sprite strip I created: a sequence of open, pointing, and angled hands for interaction and animation states.
Hand-pose strip
Wooden dummy I created as source art for the Precision challenge.
Wooden dummy
Balance ball I created as source art for the Balance challenge.
Balance ball
Wooden staff I created as source art for the Balance challenge.
Staff
Wireframe hands I created: open and two-finger poses prepared for interaction states.
Wireframe hands

The same training. Different input.

Desktop used keyboard and a wider Video Wall+ canvas. Mobile kept the same Precision → Balance → Memory path with touch targets at the thumb edge, a tighter hierarchy, and the IMDb rail still in view — adapting the interaction model rather than shrinking the desktop layout.

Original April 2025 desktop concept: expanded IMDb Video Wall+ for Karate Kid: Legends above the homepage video rail.
Desktop · expanded Video Wall+
Original April 2025 desktop concept: collapsed Video Wall+ treatment with Book Tickets still present in the header.
Desktop · collapsed unit
Mobile Video Wall+: inline sponsored unit, game select, and Precision with thumb-side controls.
Mobile · select and Precision
Mobile Video Wall+: Balance, Memory, and the all-three-complete reward on stacked phone frames.
Mobile · Balance, Memory, completion

Desktop

  • Keyboard / directional input
  • Larger interactive canvas
  • Expanded Video Wall+ environment

Mobile

  • Touch interaction at the thumb edge
  • Same three-game path in a tighter canvas
  • IMDb rail remains in view beneath the unit

From initial build to production

IMDb Creative Studio’s public case and the video below document the launched campaign. I did not produce this finished edit.

Public film key art for Karate Kid: Legends, used here only as final-campaign context.
Public film key art. Final production reference — not the April 2025 interactive build.

Final production · IMDb Creative Studio

Watch the final production on Vimeo

Project timeline

  1. April 2025

    Initial Experience

    Concept + UX + game mechanics

  2. April 2025

    Design × Design Technology

    Interaction build + asset production

  3. 2025

    Continued Production

    IMDb Creative Studio Design + Design Technology

  4. 2025

    Campaign Launch

    Final international campaign

  5. 2026

    Silver ADDY Recognition

    Resulting campaign

Impact of the finished campaign

Figures published by IMDb Creative Studio for the launched campaign — not personal performance metrics.

6

Languages, launched simultaneously

10

Countries across Europe and LATAM

3

Training games in one system

Launched our fully localized gamified experience simultaneously in 6 languages across 10 countries in the EU and LATAM (UK, Spain, Mexico, Brazil, Germany, France, Netherlands, Switzerland, Austria, and Ireland).

Pairing addictive mini-games with rich character galleries and exclusive video content, it created a seamless bridge between interactive training and blockbuster hype, bringing discipline, focus, and a whole lot of “wax on, wax off” to fans worldwide.

My contribution

April 2025

  • Initial experience design
  • Initial build / design development
  • Experience architecture
  • UX design
  • Interaction design
  • Game mechanics
  • Gameplay behaviors
  • Controls
  • Scoring + feedback
  • Game progression
  • Success / failure logic
  • Completion + reward states
  • Desktop UX
  • Mobile UX
  • Responsive interaction design
  • Visual design
  • Background imagery
  • Production asset creation
  • Asset preparation
  • Sprite / animation asset preparation
  • Design Technology collaboration
  • Presale design
  • Early production development
  • Continued production with Creative Studio Design + Design Technology