MOBILE
Magic in Motion
Reimagining the role of Motion Design for product innovation in kids entertainment.
OVERVIEW
Bringing life to Cartoonito
To enhance user engagement with games and improve the Cartoonito experience in the LATAM Cartoon Network app, I led a project to transform how users discover content. Research revealed that kids were looking for more interactive experiences. To meet this need, I introduced motion design early in the process and overhauled our design workflow. In just six months, these efforts led to a 140% increase in game engagement, a 19% monthly boost in ad revenue, and a 9% rise in average visit time. By setting clear motion design principles, streamlining workflows to facilitate efficient collaboration, and focusing on user-centric, scalable design patterns, we successfully revitalised the app, driving both user satisfaction and business growth.
IMPACT
9%
increase in time spent in app
increase in ad revenue
140%
increased conversion to play
19%
About Cartoonito
Warner Bros. Discovery is a global media and entertainment leader. They produce a wide range of content and are focused on growing their digital offerings that make the most of their extensive content library featuring well-known brands like Warner Bros, HBO, Turner, and CNN.
One of its popular brands is Cartoon Network, known for its engaging children's shows available on TV and digital platforms such as the Cartoon Network mobile app. The app offers video-on-demand (VOD), games, and comics, catering to two age groups: Cartoonito (ages 2-6) and Cartoon Network (ages 6-12).
Roles & Responsibilities
ROLE
Product Design Lead
International Product initiatives responsible for:
Sports
Kids, Young Adults and Classics
TEAM COMPOSITION
International Product Design team consisted of:
2 Lead Product Designers
Senior Product Designer
Product/Motion Designer
Product Design Intern
INITIATIVE TEAM
Collaboration model:
Product Management (UK/ARG)
Design (UK)
Engineering (BRA)
Audio Engineering (US)
Data (US)
Design Leadership: Ensuring effective management of the design team and fostering an environment of collaboration and innovation.
Process Innovation: Overhauled existing design processes, implementing new methodologies to enhance efficiency and creativity within the team.
Problem Identification and ResolutionActively identified and addressed key product pain points, enhancing user satisfaction and product functionality.
Strategic Alignment:Ensured that all design initiatives were in sync with broader business objectives.
Collaborative Integration:Worked closely with product managers, developers, and key stakeholders to seamlessly integrate design principles throughout the product lifecycle, enhancing overall product coherence and usability.
Stakeholder Communication:Regularly engaged with stakeholders to ensure design directions were clearly understood and aligned with business needs, ensuring transparency and mutual understanding.
KEY RESPONSIBILITIES
PROBLEM STATEMENT & STRATEGY
Barrier to Games
When introducing a new brand, Cartoonito, into the Cartoon Network app, we relied heavily on existing design elements from the broader Cartoon Network interface for speed to market. However, post-launch analytics revealed that while 25% of Cartoonito users engaged with the video content, only 5% were engaging with games. Initial assumptions were a potential need for a more intuitive and child-friendly navigation to enhance content discoverability and engagement. As the app was expected to grow and diversify its offering, it became clear that a more flexible navigation system was essential. Understanding that motion is key in children's entertainment and recognising the revenue potential of games, we identified a strong business opportunity. Our goal was to double the game engagement rate to at least 10%.
BEFORE
BUSINESS GOALS
• Increase engagement with Games and drive ad revenue.
• Maintain and enhance the user experience for 2-6 year olds.
CHALLENGES
• The existing navigation was proving inadequate, leading to low engagement
• Ensuring scalability and flexibility to accommodate new content and features without compromising user experience.
STRATEGIC APPROACH
• Enhance content discoverability with simplified navigation.
• Integrate motion design and align initiatives with user needs to demonstrate tangible benefits.
DESIGN PROCESS & DECISION-MAKING
Research and Insights
To better understand user behaviour and improve our design, the other Lead and I collaborated closely with the motion designer to enhance both their user experience skills and our own motion design capabilities. Alongside a UX researcher, we conducted user testing with parents and children and analysed other children's apps, uncovering crucial insights to improve the Cartoonito experience.
Four key recommendations emerged from this research:
Simplify the User Interface (UI): Reduce touch interactions to simple movements like swipes and taps, enlarge clickable areas, and keep large distances between them to minimise accidental clicks.
Leverage familiarity: Landscape layout apps utilise large navigational controls at the screen edges, reflecting the layout of popular gaming consoles familiar to children.
Limit Text Usage: Minimise text and enhance with visuals to accommodate the limited reading skills of young users.
Increase Interactivity: Introduce interactive elements that respond to touch with animations and sounds, meeting children's expectations for dynamic feedback.
Ideation and Validation
Based on research insights, we explored various ideation approaches, applying motion design principles to transform content types like Videos, live TV and Games into immersive sections hosted by Cartoonito's main characters: Nito, Itty, Wedge, and Glob. We considered two navigation options: panning to reveal different content "hills", and rotating the world to access new sections. We selected the latter due to its clearer navigation, better visual interaction, scalability, and intuitive user experience.
This concept seamlessly combined static and dynamic elements into a complex yet manageable navigation system. We developed a high-fidelity prototype that allowed team members and stakeholders to test it in real-time on devices, showcasing fluid motion and interactive character animations. Feedback from these sessions was overwhelmingly positive, though it revealed the need for more visible content, leading to a final round of iteration to address this issue.
INITIAL CONCEPT FOR CONTENT DISCOVERY
REVISION BASED ON PROTOTYPE TESTING AND STAKEHOLDER REVIEW
Solution and Execution
In the final iteration, we introduced a glimpse of content at the bottom of the screen, transforming the navigation into an engaging, interactive paging system. Swipes and taps triggered delightful character animations and intuitive content discovery.
We then presented this enhanced interface to the Audio Engineering team responsible for Cartoonito programming. They were enthusiastic about the integration and proposed enriching the user experience with character-specific sounds and ambient audio cues, like ocean waves for beach scenes and bird chirps for the farm. These sounds were designed to complement the visuals and elevate user delight through immersive, interactive audio elements.
OUTCOMES & IMPACT
Measuring Success
The initiative to boost game engagement and enhance user experience delivered impressive results. Over six months, game engagement rose by 140%, generating an estimated 19% in additional monthly ad revenue. Average visit times increased by 9%, reflecting deeper user interaction, and retention rates improved slightly. Usability testing with parents and children from the initial research phase received 100% positive feedback.
This success was driven by introducing motion design early into the process and aligning the design with user and business needs. Implementing motion design principles revitalised the app and introduced a new approach to our workflow, creating efficient collaboration. By addressing navigation inefficiencies and creating a child-friendly interface, we significantly enhanced user satisfaction, demonstrating the impact of innovative design processes and setting a strong foundation for future improvements.
IMPACT
increase in weekly retention
increase in ad revenue
140%
increased conversion to play
19%
positive feedback from test participants
9%
increase in time spent in the app
3%
100%
“Chloe demonstrates exceptional attention to detail and consistently meets deadlines while taking on additional work to benefit the project. As a great designer and UX/UI expert, she supports others and recognises their successes. Her drive to improve both herself and her career is commendable.”
Dora Giannioti
Director of Product Design, International Product
Fancy another?
Bringing Eurosport Home
Redesigning Eurosport Player for the at-home, connected TV experience.
Alexa, Pack My Bags
Designing for the invisible interface, helping users travel with Contiki.
From MVP to Market Leader
Creating Dplay. Beginnings that set the foundations for Discovery+ and Max.