At Nickelodeon, I worked as the interactive design lead on multiple projects for the Noggin app.

Target Audience: Pre-school

Platform: iOS, Android, web

The Design Process

Liberty's Rescue Ride

Players join Liberty from PAW Patrol in a “physics” based literacy game to spell and learn new words to rescue her friends!

The player taps and holds to speed up Liberty on her motorcycle sending her soaring off hills and ramps to collect meteors and letters to spell out words on her mission to rescue the Junior Patrollers.

Unreleased in development with Spin Master and Curious Media.

Platform: Web and mobile devices

HUD UI and collectibles were designed to fit within the PAW Patrol universe but were themed around Liberty.

The UI consistent of the Noggin app pause button, the letter collection HUD, the meteor energy collection meter, and a speed button.

The speed button can be pressed at any point to make Liberty go faster.

The high score screen serves as a progression path for players to keep track.

'Noggin Knows' Books

'Noggin Knows Books' is a series of 3 interactive eBooks developed for mobile devices based on episodes from Nick Jr.'s 'Noggin Knows' series featuring host Emmanuel Carter and all of his Nick Jr. friends! The books are designed to enhance children’s knowledge of arts and science topics, promote story comprehension, and broaden vocabulary.

A fun series of 3 science and health-based interactive eBooks based on episodes from Nick Jr.'s 'Noggin Knows' series with characters from PAW Patrol and Bubble Guppies!

Additionally, our team worked with psychologist, Dr. Briscoe-Smith, to advance belonging for preschoolers through the storytelling in these eBooks.

Target Audience: Ages 3-6

Platform: Mobile

I was the sole Interactive Designer on this project and designed all storyboards, wireframes, polished UI and interaction states for all 3 books. I worked with the producer to determine the design of all interactions and the flow within the context of the narrative. Additionally, I worked closely with the research team to ensure UX goals were met through user testing for both care-givers and children.

The background and character art for these projects were outsourced to Lion Forge Entertainment and I collaborated with their team to ensure our visual goals were met.

Below you will find examples of just some of the interaction design and UI for each book, as well as some wireframes and storyboards which reflect the initial process.

My Role

The Flyleaf Page

The flyleaf page is themed but consistent across all the eBooks with an option for users to turn on or off the narration.

Along with the research team, we conducted several caregiver user tests to determine what kind of iconography, layout, and language would work for the narration selection.

'The Mermaid Mystery' Ebook

Kids help Nick Jr.'s Bubble Guppy, Molly, uncover clues about the nature of manatees in order to learn how to better protect them in the wild. Users were presented with drag, trace, and swipe interactions in this book.

Initial Medium Fidelity Storyboards/Wireframes

'Marshall Takes Flight' Ebook

Players join Marshall from PAW Patrol on a grand adventure and help him fix his balloon by learning how hot air balloons fly while making new friends along the way.

The users could choose three ways to fix the hot air balloon which differed slightly. Additionally, we implemented a panoramic view through binoculars where kids could look around at the background art.

'The Princess, the Dragon and the...Dentist?!!' Ebook

Nick Jr.'s Bubble Guppy, Zooli, teams up with the Tooth Fairy to learn how to take care of our teeth with different tools.

The user can select 3 different tools for the teeth-cleaning interactions. All 3 tools have their own SFX, animations, and narration.

'Big Heart Kids': Activity Books

'Big Heart Activity Books' is a series of 3 interactive activity-based mobile apps based on the characters of Big Heart World. Each book has 4 main activities to complete in order for kids to see the payoff music video and get access to the photo album. Some activity interactions are shared and others are specific to a book's learning objectives.

The kids from Big Heart World and Nick Jr. characters come together in this fun collection of interactive activity games where kids learn concepts such as empathy, feelings and self-identity.

Target Audience: Ages 3-6

Platform: iOS, Android

I was the sole Interactive Designer on these projects and designed all storyboards, wireframes, polished UI and interaction states for all 3 books. I worked with the producer to determine the design of all interactions and the flow within the context of the narrative. Additionally, I worked closely with the research team to ensure UX goals were met through user testing for both care-givers and children.

Below you will find examples of just some of the interaction design and UI for each book, as well as some wireframes and storyboards which reflect the initial process.

My Role

User Flow & Palette

Tutorial

The tutorial is a cutscene designed to be a simple and quick review of UI elements. Players can access this cutscene again on the Main Menu if they become stuck.

In the game, if the player is stuck, they can tap the Nick Jr. character in the top left for narrated help. Additionally, this UI element has several states for when the character is talking, giving a hint, or when the user makes a correct answer.

Main Menu

The Main Menu UI provides a very simplistic navigation for children with clear states displaying activity progress. On replay, the album and payoff video buttons become available.

Drawing Activity

The drawing activity had subtle differences for each book based on the narrative but the interactions were essentially the same.

I created various drawing tools and textures so that tools varied for replayability. I worked with the research team to test and select colors that met inclusivity standards.

Wireframes

Matching Activity

Layout, UI, and interaction design of the matching interaction. For Book 1, since the activity heavily relied on facial emotions, I created sketches of all of the Nick Jr. characters in several poses with different emotions for user testing.

Reveal Activity

For the reveal interaction, players use a swipe mechanic to uncover a picture in order to continue the narrative.

Wireframes

Reveal Activity

This activity allows the user to select a color in order to fill in the corresponding colors to reveal the image by using the drawing interaction. When a color is selected, only boxes marked with that number can be colored in.