Tom and Jerry: Chase
UX Design Intern, May 2026-Aug 2026
-My Role-
UI Component Library / UX Guidelines / Character UX Framework, UI Drafts & Combat Interaction
-Project Goal-
Design a Clear Combat UX System for New Character “Bax”
-Outcome-
8M+ LAUNCH EXPOSURE
+30% CHARACTER SALES
8.5/10 PLAYER RATING
What is Tom and Jerry: Chase?
An asymmetric multiplayer action game: four mice face off against one cat on item-filled maps. The cat hunts the mice; the mice survive, push cheese and escape.
Overview
Bax, a new mouse-side character for the new season.
I designed his combat UX&UI, with 2 main goals:
- Make an airborne character easy to read and control
- Turn a multi-step rescue into moments everyone can follow at a glance
This case study covers Bax’s three skills: 3D Mobility (active), Bat & Silk (weapon) and Swift & Still (passive).
Character Design
Bax
Bax combines three traits into one rescuer: a mouse’s quickness, a bat’s flight and a spider’s silk.
Most of the time he’s a bit lazy (why walk when you can fly?)
Combat UX System
Using my UX state boards as the blueprint, the art team built the final in-game screens.
I fed my hand sketches into AI tools to quickly generate first-pass UX wireframes. That freed my time for the parts that need design judgment: state logic, feedback timing and edge cases.
Hand sketches exploring Bax’s poses and states from the brief.
Inspiration
Appearance
Skill+ other
① Draft: Hand Sketches
② Mid-fi: UX Wireframes
③ Hi-fi: Final UI
Halloween Skin
Event Skin Design
Calm, clever and team-first.
Positioning
Role
A rescue specialist with 3D mobility, the first mouse who fights from the air
Core loop
Fly in → Power up in the air → Rescue with silk → Escape
Experience
Hero from above
Tense cocoon standoff
Messy but fun escape
Skill level
Medium-high
Idle
Aiming
Flying
Weakened
Hanging
Timed-out Landing
Weakened Landing
Cocoon Falling
① Skill Requirements
Active · Shuttle
Drag to fly with 3D Mobility. Bax is immune to crowd control while flying.
When he arrives, he can briefly float in mid-air or hang beneath a platform.
CD: 50/50/30s
Charges: 3
No wind-up · No recovery
Lv.1:
Stores up to 3 charges.
Lv.2:
Longer float time.
Lv.3:
Cooldown reduced to 30s.
Longer flight distance.
Weapon · Silk
Bax drops a little spider downward. When it reaches a rocket with a teammate tied to it, the spider wraps the teammate in a Silk Cocoon and pulls them off the rocket. The teammate then has to struggle free to leave.
CD: 30s
Charges: 1
No wind-up · No recovery
Lv.1:
-
Lv.2:
Cooldown refunded on a miss..
Lv.3:
The spider moves faster.
Passive · Swift & Still
While floating or hanging: faster interactions, health regen and a higher max HP
If weakened in mid-air, Bax shuttles in random directions a few times before falling
No wind-up · No recovery
Lv.1:
-
Lv.2:
Faster interaction speed.
Lv.3:
Shuttles 5 times before becoming weakened.
② Design Approach
Timeline
States
Perspectives
Edge Cases
Screens
Aim → Fly → Arrive → Forced landing
Active: Shuttle
7 states
1 (Bax)
2 · hits a wall, stunned mid-air
8 screens
Weapon · Silk
Passive · Swift & Still
② Design Approach
Timeline
States
Perspectives
Edge Cases
Screens
Cast → Warp → Cocoon → Standoff
Active: Shuttle
8 states · 2 positions (floating / hanging)
4 (Bax, trapped, teammates, cat)
5 (miss, rocket, stun, teammate first, off-screen)
17 screens
Weapon · Silk
Passive · Swift & Still
② Design Approach
Timeline
States
Perspectives
Edge Cases
Screens
Weakened → Shuttle → Land
Active: Shuttle
3 states
1 (Bax)
0
4 screens
Weapon · Silk
Passive · Swift & Still
③ What UX Had to Solve
Active: Shuttle
click to explore design details
Drag to fly. Immune to crowd control while flying. When he arrives, he can briefly float in mid-air or hang.
01 Idle
02 Before the Shuttle: Aiming
03 During the Shuttle
Hitting a Wall
① The skill button shows stored charges
① Dragging the joystick shows Bax’s reach
1
Landing Marker Icon
② Landing marker and a ghost of Bax at the target.
② Shuttle State Rules
The target can’t be placed inside a wall.
The target can’t be placed inside a wall.
State
Shuttle
Can’t move
Aim
Stunned / Caught / Weak
Locked
Floating / Hanging
Aim
1
① Immune to crowd control but not to damage. If he hits a wall, he stops there.
04 After the Shuttle: Floating
05 While Floating: Shuttle Again
Bax Status
Forced Landing
Hanging
A countdown ring while floating; regenerates health.
Hangs under platforms automatically; regenerates health.
Resets the float timer. Normal movement is off.
Drops when the timer ends or Bax is stunned or weakened.
3
player
Idle
3
player
Hanging
3
player
Aiming
3
player
Timeout lading
3
player
Flying
3
Weak
Weakened Landing
3
player
Floating
1
2
Weapon : Silk
click to explore design details
Drops silk to grab a teammate off a rocket, then the cocoon becomes a four-way standoff.
01 Floating
Stage 1 · Cast
Stage 2 · Wrap
Beyond screen rescure
02 Hanging
Stage 1 · Cast
Stage 3 · Cocoon
① Tap to cast. The silk drops straight down, and the float timer pauses.
① On hitting a rocket, a wrap bar appears and the rocket slows down. If interrupted, charge refunded.
The teammate leaves the rocket in a neutral cocoon and is pulled back to Bax. In mid-air, the cocoon falls.
Cocoon falls on the platform.
Stage 2 · Wrap
Stage 3 · Cocoon
① Cocoon States
03 Failure Cases
03 Cocoon · Three Perspectives
Miss
Rocket Launches First
Bax Stunned or Caught
Teammate Rescues First
[ Trapped Teammate ]
Stage 1 · Struggle
Stage 2 · Break Free
Stage 1 · Attack
Stage 2 · Freed
① Struggle to free until countdown full
① Bursts with a celebration effect
[ Rescuing Teammate ]
① Attack: Any player can hit it to free mouse inside
Stage 1 · Attack
Stage 2 · Break
[ Enemy (Cat) ]
① When the cocoon’s HP hits zero, the cat catches the mouse inside.
Releasing
Missed
Wrapping
Caught
1
1
1
1
Bax Status
3
player
Float-cast
3
player
Float-wrap
3
player
Float-pull back
3
player
Cocoon Falls
3
player
Missed
3
player
Hang-cast
3
player
Hang-miss
3
Weak
Weakened
1
1
1
1
Passive · Swift & Still
click to explore design details
Drops silk to grab a teammate off a rocket, then the cocoon becomes a four-way standoff.
Weakened
Stage 1 · Weakened, Passive Triggers
Stage 2 · Emergency Shuttle
① Status: a red “Weak” tag
Stage 3 · Weakened Landing, Passive Ends
1
② Trigger: the emergency shuttle starts right away.
① Dashes in random directions automatically.
Bax Status
1
3
Weak
Weakened
3
Weak
Emergency Shuttle
3
Weak
Weakened Landing
2
Thanks for watching
Final In-Game Result
