10 minute read
The Noggin Learning App
2023-2024
( About The Brand )
Noggin is an educational app for kids aged 2-7, with over 1.5 million subscribers and 6.5+ billion minutes of content consumed annually. It features interactive content and beloved characters, designed to engage young learners and support their early educational journey.
( My Role )
Senior Product Designer
( My Responsibilities )
User research, UI design, user flows, design exploration, prototype creation, sprint facilitation, usability testing, dev-ready design, design handoff to development teams.
Best Family & Kids App
Webby Award 2024
Best Learning App
Kidscreen Award 2024
The Opportunity.
How Might We…
Evolve Noggin to thoughtfully guide children, support their personalized learning journey, and seamlessly blend fun with effective teaching methods?
The Solution.
A New Noggin
A brand new Noggin experience that offers a personalized learning journey for children! Each day, as children explore Noggin, they'll be greeted by beloved Nick Jr. characters and our charming Noggins, who will present a new daily box filled with engaging educational games, captivating videos, and interactive activities. Every visit promises fresh discoveries and exciting new adventures, making each day a unique and enriching journey for young learners.
How it works:
+18% increase in time spent per visit
+10% increase visit per week
65% of users finish the delivery box on their first visit.
80% kids demonstrated measurable gain in literacy & math after 1 month
The Result 🎉
The Lobby
The Library
Alongside the Lobby redesign, we aimed to preserve core elements of the classic Noggin experience, which previously functioned more as an SVOD service with a rich library of content for exploration. Understanding that children may take longer to adjust to changes, or just want to go on their own adventure — we maintained familiar navigation modes while giving the interface a modern, fresh look.
So… How did we get there?
Uncovering our User Needs. Research & Discovery
To build a solid foundation for our redesign, we partnered with our research team to conduct a comprehensive discovery phase.
Research Methods:
In-depth Zoom interviews with parents and caregivers
Online surveys targeting existing Noggin subscribers and potential users
Remote usability testing sessions via our research team
Competitive analysis of leading educational apps for children
Review of current child development research and educational best practices
Analysis of our existing experience
Overall Key Findings:
Personalization is key! Parents consistently expressed a strong desire for personalized learning experiences. They believe tailored content not only increases their child's engagement but also supports more effective learning outcomes.
Holistic Development Focus Beyond academic skills, parents are looking for an app that:
Prepares children for school readiness
Teaches crucial social skills
Fosters independent learning habits
Helps identify and nurture their child's unique interests and passions
Content Overload Concerns Many parents found the current Noggin experience overwhelming due to its vast content library. They expressed a preference for a more focused, curated approach that targets specific learning areas in each session.
Character-Driven Engagement Children's motivation to use Noggin is heavily influenced by the presence of their favorite TV characters. As one young user enthusiastically stated, "I love PAW Patrol!"
Lack of Adaptive Learning Parents noted that the existing app didn't adjust to their child's progress or interests over time, missing opportunities for more personalized and effective learning journeys.
Balance of Structure and Exploration While parents appreciate guided learning, they also value the ability for their children to explore freely and discover new interests within the app.
Defining the Problem. Insights & Opportunities
Through our research, we uncovered key challenges in the current Noggin experience:
Information Overload:
Parents found the vast content library overwhelming, making it difficult to guide their child's learning effectively.
Lack of Personalization:
The Noggin app didn't adapt to individual children's progress or interests, missing opportunities for tailored learning experiences.
Entertainment vs Education
There was a need to better blend fun and effective teaching methods to keep children engaged while ensuring meaningful learning.
The Opportunity:
How might we evolve Noggin to thoughtfully guide children, support their personalized learning journey, and seamlessly blend fun with effective teaching methods?
This challenge presented us with exciting opportunities to:
Create a more focused, curated approach to content delivery
Develop an adaptive learning system that grows with each child
Leverage beloved characters to enhance engagement and learning
Design a balanced experience of structured activities and free exploration
Provide clearer progress indicators for both children and parents
By addressing these opportunities, we aimed to transform Noggin into a more effective, engaging, and personalized learning companion for young children and their families.
Exploring Possibilities. Ideation & Brainstorming
Our design process began with a series of cross-functional collaborative ideation sessions that I facilitated, where we brainstormed ways to address the key user needs identified in our research. We focused on creating a personalized, engaging, and educational experience that would appeal to both children and parents.
We translated our user research into design decisions by:
Prioritizing personalization to address parents' desire for tailored learning
Incorporating beloved Nick Jr. characters to maintain children's interest
Simplifying the interface to reduce overwhelming stimuli for young kids
Initial concepts included:
A daily "adventure box" featuring curated content
Character-guided learning journeys
Adaptive difficulty levels based on user progress
Refining the Concept and User Journey
A clean, intuitive home screen featuring the daily "box"
Easy navigation between curated content and the full library
Clear visual cues for different learning areas
Early wireframe & Prototype focused on:
A clean, intuitive home screen featuring the daily "box"
Easy navigation between curated content and the full library
Clear visual cues for different learning areas
Heat-mapping activity we did during one of our collaboration sessions.
Early concept
Ensuring Usability. Testing & Iteration
We conducted several rounds of user testing to validate our design decisions.
Testing Methods
Remote usability testing with interactive prototypes
A/B testing of different interface layouts and interactions
Key Findings
Children responded positively to character greetings, and were excited to open the box
Parents appreciated the focus on specific learning areas each day
Some kids (especially younger) initially struggled to open the box and navigate to different areas of the experience on their own
Based on user feedback, we made the following adjustments:
Added clearer visual cues for interacting with daily features.
Improved UI clarity and intuitiveness for easier navigation by children.
Redesigned the navigation bar to make it more prominent and user-friendly.
Refined character interactions to be more engaging and personalized.
Adjusted the balance between guided content and free exploration for a better user experience.
Enhanced visual rewards to make completed activities more gratifying.
Visualizing Ideas. Design & Visual Identity
Our visual design choices were guided by the need to appeal to young children while also satisfying parents' desire for an educational tool:
Visual Approach
Bright, cheerful colors to engage children
Softer background to reduce overstimulation and keep focus on interactive elements.
Using brand-consistent color schemes
Maintaining a playful yet educational tone throughout the UI
Iconography
Simple, recognizable icons for each learning area for both kids and parents
Use clear, intuitive icons for navigation since children may not read as fluently.
Key UI Components
The daily box, designed to be the focal point of the home screen
Progress indicators for both kids and parents
Navigation UI for enhanced visibility and clarity
Updated the library UI to align with the lobby enhancements and reflect a modern design.
Accessibility Considerations
To make the app accessible for children with diverse abilities, we:
Implemented ADA-compliant high-contrast visuals for users with visual impairments.
Added voice-over support for screen readers.
Ensured all interactive elements are large enough to accommodate developing motor skills.
Additionally, we introduced customizable text size options to further enhance accessibility.
Executing the Vision. Launch & Analysis
Throughout the design process, we maintained close collaboration with the product & Development team.
Regular sync meetings to discuss technical feasibility of design ideas
Collaborative problem-solving sessions for complex interactions
Iterative prototyping to test performance on various devices
We addressed technical constraints by:
Optimizing animations for lower-end devices
Implementing efficient content loading strategies to reduce wait times
Designing a flexible UI system that scales across different screen sizes
The redesigned Noggin app was launched in phases:
Beta testing with a select group of existing users
Gradual rollout to all users over a two-week period
Full launch with marketing campaign
Post-launch metrics showed significant improvements:
18% increase in time spent per visit
10% increase in visits per week
65% of users completing the daily box on their first visit
User feedback after launch was overwhelmingly positive, with parents praising the more focused learning approach and children enjoying the daily surprises.
Post-Launch Navigation Enhancements for Improved User Engagement
Following the successful launch of Noggin, we observed that while time spent in the lobby increased, time spent in other areas of the app decreased. This trend raised concerns among stakeholders, who wanted to ensure that children could still easily navigate to various parts of the experience.
To address these issues and enhance visibility across different areas, we implemented the following improvements:
Redesigned Navigation UI: Introduced a more intuitive and user-friendly navigation interface.
Enhanced Visibility: Made key areas of the app more accessible and prominent.
These changes were quickly enacted post-launch to improve the overall navigation experience and ensure that children could explore all features effectively.
Before
After
Measuring Impact. Reflection & Improvement
Key learnings from the project:
The importance of balancing structured learning with free exploration
The power of familiar characters in driving engagement
The need for clear, age-appropriate instructions for new features
Potential future enhancements:
Implementing machine learning to further personalize content selection
Expanding character interactions with more advanced AI
Developing a companion app for parents to track and guide their child's progress
In conclusion, The Noggin app redesign successfully transformed the platform into a more engaging, personalized, and effective learning tool for young children. By focusing on daily curated content, character-led interactions, and a balanced approach to guided vs. free learning, we were able to significantly increase user engagement and educational outcomes.
Key contributions:
Supported the design process from research to implementation
Facilitated design sprints between design, education, and development teams
Crafted UI for the box delivery, navigation and library redesign.
Crafted a user experience that delights children while meeting parents' educational goals
The redesign not only improved key metrics but also strengthened Noggin's position as a leader in the educational app space, as evidenced by the Webby and Kidscreen awards received in 2024.