Designing punchy character abilities, and the interfaces to activate them.
Overview
Designing intuitive character special abilities
I worked with artists to design intuitive ability controls for Hungry Shark World, carefully balancing visual feedback for charge-up, active states, and cooldowns to match the game's dynamic pace.
Button States
Anatomy of HSW's shark ability buttons
The Opportunity
Pressed/Active
When the player activates an ability, the button changes color, animates, or visually indicates it’s in use.
Idle/Available
When the button is idle or available, it remains static and visually indicates readiness for activation.
Cooldown& Recharge
During cooldown or recharge, the button visually indicates the remaining time before it can be used again.
UI Styles
Thematically matching the UI with the Character
Character evolution drove increasingly sophisticated ability designs. Working with UI artists, we crafted intuitive visual metaphors like fuel gauges for button states, while ensuring ability interfaces matched character themes - such as steampunk elements for Big Momma Shark.
Shark Information Popups
Improving on existing tutorial popups
The original information popup relied too heavily on verbose text descriptions to explain shark abilities - a common UI design pitfall that assumes players will read through multiple lines of text. Mobile game players typically prefer to learn through intuitive visual feedback and actual gameplay rather than static text descriptions.
Original
The Rise of Bento UI
Helping players scan the information more intuitively
After
This redesign effectively addresses the previous text-heavy approach by embracing a more visual, show-don't-tell philosophy. The bento box layout cleanly segments information into scannable sections while maintaining the game's playful aesthetic, better aligning with mobile gaming's quick-glance nature.
Other Examples
