Developing kid-friendly UI

Role
Product Designer

Company
Paramount

Duration
3 days (2024)

Team
1 product manager
1 dev lead
5 developers

The challenge

During a three-day Hackathon, my team wanted to improve the navigation bar on the Nickelodeon website because the UI wasn’t designed with kids in mind. Rather, it was designed for scalability and our design system implemented the same navigation bar on all of Paramount’s brand websites. Our team wanted to explore ways to enhance the component without breaking the design system.

How can we make the site easier and safer for kids to navigate?

Two main groups of kids come to the Nickelodeon website: older kids and preschoolers. Older kids (around 6 and up) want to explore Nickelodeon content. They mostly know how to read, but there are so many videos and games they might not know where to go. Preschoolers can’t read the words in the navigation bar and might click on something they shouldn’t instead of their favorite Nick Jr. show, Paw Patrol. In enhancing the navigation UI, our team wanted to ensure kids of all ages can access age-appropriate content without frustration.

Considering accessibility

The navigation UI needs to meet a high standard for accessibility so kids of all ages can safely use the website. When building within the Paladin Design System, we consider many different aspects of accessibility:

Sufficient color contrast
Keyboard controls
Screen reader support
Focus states
Large touch areas on mobile
Visual cues for early readers

Designing a kid-friendly nav

In just three days, our team completed a kids variant of the default navigation bar in Figma and Storybook. The kids variant included six different improvement to accessibility and usability:

1. Icon-based navigation
Added icons to the navigation items, making it easier for kids to find their favorite sections of the site.

2. Fan favorites
Updated the text-heavy dropdown to instead include Character Cards so that early readers can easily recognize where to find content from their favorite characters.

3. Limited games
Added a dropdown under “Games” with a small, random selection to engage young attention spans without overwhelming them.

4. Content filtering
We introduced a button to switch to a “Nick Jr.” view that filters out unsuitable content for preschoolers.

5. Playful animations
Designed a fun slime animation for users to discover when they hover over the website’s logo.

6. Better accessibility
Improved WCAG accessibility with better color contrast, focus states, keyboard navigation, and alternative text for images.

Results

Our team competed against seven other teams from our organization. Everyone who participated in the Hackathon voted on how each team performed. My team won in two of the four categories for Usability and Execution:

Usability: How easy and intuitive is the project for users to interact with? 🏆🎉
Execution: How well was the project implemented regarding quality, completeness, and overall polish? 🏆🎉
Innovation: How unique and creative is the project in introducing new ideas or technologies?
Brightest Future: Which project do we most want to implement?

Impact

We hope to push the feature updates in Q1 2025. So far, our way of working as a team spread across the globe was a huge success. We focused on getting things done quickly instead of making them perfect so we could incorporate feedback as we went. Sharing feedback promptly kept everyone on the team engaged and I plan to continue doing so in our normal sprints.