Research and Analysis

Concept Sketches & wireframes

Visual Styleguide

High Fidelity Tablet Mockups

High Fidelity Mobile Mockups

Overview

Today, with so many options like Netflix, Disney+, and Hulu, the current state of Nick Jr. app (for kids ages 2-7 years) falls behind due to mediocre user Interface design and experience. Even with 6.4 million Nick followers, the app has low usage, as Nickelodeon never prioritized improving on or building new features for their app.

My Role

I am responsible for this project from start to finish. This includes doing research, defining personas, as well as designing the user interface.

Tools

Figma, Photoshop,
MS Word

Platforms

Mobile
Tablet
IOS
IPAD

Duration

5 weeks

Problems

My research has identified 3 primary problems with the old app design.

1. The landing page is outdated

People unanimously agreed that Nick App looked visually dated and out of touch with trendy website design.

2. Download metrics could be improved.

I want to drive more app downloads since the main product focus is on the app. In the US, consumers mostly use Nick Jr. via the old channel. I wish to convert TV users to the app so they enjoy a better experience and have access anytime anywhere.

3. Missing Visual Hierarchy

People felt the website was cluttered
and missing basic navigational cues,
especially when compared to other
websites like Netflix kids and other competitors.

Screenshots from the existing app

The Nick Jr. App is missing basic Search feature.

The show names are missing. In case a parent wants to look for a specific show for their child, it’s
hard to find one.

'My list' or 'My fav' or 'Recently watched' options are missing for the user to start right where they left off.

The genre listing for kids such as, 'From books', 'Recommended for you', 'Action-Adventure', 'Educational' is missing for 5-7 years olds to figure out what to watch.

Parental Controls are missing. Since most parents are concerned with how much time their kids spend in front of the screen, the app should include parental controls that let parents monitor and control their kid's screen time.

The ‘Login’ or ‘Make a Profile’ feature is missing for multiple users.

The top menu bar gets squished while scrolling. The overall design feels very cluttered and the visual hierarchy is missing.

The bright yellow background is too saturated and distracting.

The screens for different pages are not aligned and doesn't have a consistent layout.

There are very limited ways to sign up to watch TV.

Goals

How can I make Nick Jr. app. fast, trendy, and relevant?

Opportunity

I converted our key problems into opportunities to solve for during the redesign.

Better User Experience

The new app should have a better user experience by improving Time-to-Interaction and increasing the overall
perceived interface responsiveness.

Trendy Design

The user interface of the website should be visually refreshed and use trendy designs, which are based on modern Progressive Web App tech.

Relevant

The redesign should make key features
easier to find and use, remove underperforming features, and ensure we show the right content to the user across Nick Jr.

Process

My design process is divided into 5 steps.

Research and Analysis

Competitor Analysis: The most popular kids streaming services were analyzed.

Nielsen Norman Group had studies about kids of different age groups and the summary with the most important findings was available for free on their website. Here are some interesting things I learned:

Smart-TV Usability:
Accessing Content is Key

”We recommend at least 2 x 2 cm touch targets for young children (4 times bigger than the 1 x 1 cm recommended target size for adult users)”

Children are selective about the technology they use. They choose to use specific websites or apps when the experience seems worthwhile and when it beats other options. Children have specific interests and online behavior and require design styles that match their needs.

I also observed several kids while they used their streaming app of choice - in most cases this was YouTube. I confirmed that by the age of 3 kids can use YouTube mobile app and are familiar with how it works but they do have trouble hitting adult sized (read: smaller) tap targets.

UX design for television UI should focus on minimizing user effort and providing quick and smooth access to content.

I interviewed a couple of teachers and parents. What I learned from a teacher who works with kids aged 6-8 is that they know how to use a smartphone and are comfortable with using the search function to find their favorite YouTubers. I also learned that most of them don't own their smartphone so using a tablet for streaming is a likely scenario.

User Persona

Younger Kids from 2-4 years of age have limited cognitive and motor skills and they don’t like to scroll. However, kids from 4-7 years old have developed motor skills and can interact with UI better. Having different user profiles help with different UI options as well.

User Workflow

After that I proceeded with creating a flowchart showing how the app would be organized. The main takeaway are the search features and separate flows for each category.

Concept sketches

After I took care of the onboarding screens I moved on to wireframing the main flow. Since the research showed the kids are already familiar with how other apps (especially YouTube) work I decided to stick with the common interaction patterns.

Visual Styleguide

The next plan of action was to create color palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.

High Fidelity Mockups
for tablet

High Fidelity Mockups for Mobile IOS

Thank you so much for taking a look at my case study. Please contact me for any questions or concerns.