NOGGIN app refactor
Header image for NOGGIN app
©2018 Viacom International, 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 so that we could introduce Play Along videos in the next phase.

My role:

Worked with iOS UX Lead and Lead Engineer to simplify the UI, image usage and spec reworked features. We created shared header assets on the Home page and Property pages, and outsourced animations using an iOS-friendly program, Spine. The app was changed from landscape to portrait, which was how the majority of our users held their devices. 16% of NOGGIN web users have clicked through to the App store since our marketing page redesign.

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.

Identified the components that were causing the app to be bloated, then refactored the branding elements:

Branding for NOGGIN

The improved iOS app

Slimmed down from 70 to 40MB.

Mobile NOGGIN main page Mobile NOGGIN Miffy page

Tablet version

Simplified main page, focusing on the content.

Tablet version of main lobby
Annotation

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

Tablet version of property space
Marketing site Download the app