Creating a set of tiny enjoyable experiences
Micro-interactions, as defined by the UX Planet, are "small, preferably functional animations that support the user by giving visual feedback and displaying changes more clearly."
I took 6 weeks to create this set of engaging and delightful micro-interaction experiences for the Cartoon Network mobile app.
The Start Button
When the user hovers over the button, the hands of several CN characters are revealed. The hands work together to push the button upon clicking.
Mega Menu
Upon hover, "Blu" from Foster's Home for Imaginary Friends appears with a wide grimace, beckoning the user to press. Upon hover over the other menu items, more Cartoon Network characters are revealed.
Simple Toggle Switch
The helper tentacle assists the user with all of the toggle switch interactions.
Slider
As the user scrubs through the volume slider, Ice bear trots along with Panda and Grizz along for the ride. When the user is done with the interaction and releases the slider, the bears vanish.
Limited Slider
Panda, Ice Bear, and Grizz mimic the prompted reaction ratings for both visual appeal and overall greater user understanding.
Take a peek at the process
a systematic approach to creating innovative solutions that meet desired objectives while considering aesthetics, functionality, and user experience.
Mood Board & Inspiration
The energetic, whimsical and inviting nature that Cartoon Network is renowned for is best expressed through the use of buoyant movement, bright colors, and organic shapes.
Ideation & Sketches
Multiple concepts were sketched and tested for the theme of this animated series. I settled on the most favorable and logical idea: to use familiar characters from several of Cartoon Network's popular animated series.
Style Board
The color palette and textures are kept simple, as to not distract the user from their primary function. This design allows the attention to fall on the intricate hand-drawn animations.
Work In Progress
Enjoy these captures of my work in progress. These are all hand-drawn, frame-by-frame animations created in Adobe Photoshop and composited in Adobe After Effects.
Thanks for checking out my work!
