NOGGIN app refactor
Header image for NOGGIN app
©2017 Viacom, Inc.

Challenge:

NOGGIN was a Nick Jr. network, which took another form via a subscription-based app. Taking beloved characters from the app and redesigning it to make it much easier to use and less time to download was going to be a challenge. The preschool app needed to be slimmed down and prepared for the next rollout. The app was changed from landscape to portrait, and we simplified the load screen, property page backgrounds, error pages and parent-driven areas.

My role:

Worked with UX Lead and Lead Engineer to amend and simplify the UI, image usage and spec reworked features. Previously, all text was baked into the graphics, and we ended up creating shared header assets with bubbles on the Home page, created backgrounds that had repeating patterns, and outsourced animations using an iOS-friendly program. The app is now only 37MB, with less crash rates, less download time and smoother scrolling!

Download the app

My process

First, we selected our personas:

Persona 1 for NOGGIN Max, 5 Creative and playful
Max has a good deal of energy, loves to play music, to draw and paint. His parents are busy professionals, and they want him to steer clear of commercials. His parents let Max spend hours watching TV on weekends.
Persona 2 for NOGGIN Lily, 4 Loves her characters
Lily reads often, and her parents are careful about limiting her screen time. She thinks of characters in her favorite shows as her friends. She likes to watch shows on her Mom's iPhone and uses her sister's iPad when she is allowed.

Existing branding elements were used & we identified what was causing the app to be bloated:

Branding for NOGGIN

The improved iOS app

Slimmed down to 37MB.

Mobile NOGGIN animation Mobile NOGGIN

Tablet version

Tablet version of main lobby
Annotation

Assets are shared on the main page with the property page header, so the user loads only one graphic.

Tablet version of property space
Download the app