Nick iPad App

Challenges

  • Create an always fun, playful, and fresh app for kids aged 6-12.

  • Push the capabilities of a tablet to the edge including touch gestures, gyroscope, multimedia capabilities, and personalization.

  • Contain all Nickelodeon content, stars, clips, shows and games.

  • Create unique browsing experience different from what is offered online.

  • Allow for sustainable editorial control throughout the products life

As the Lead UX designer for the project, my responsibilities were

  • Framework & Interaction

Came out with concepts of app and browsing experience.

  • Wireframes & Content Strategy

Created wireframes of the framework and interaction models, as well as content strategy to keep the app fresh.

  • Bridge Between Visual and Tech Teams

Reviewed visual design and app development to enhance user experience throughout the process.

  • User Testing & Improvement

Defined the tasks of user testing to evaluate app framework, user interaction, and visual design.


The team includes another UX designer, 2 visual designers, 2 developers, and 1 project manager.

Results

  • Ranked #1 free entertainment app for iPad

  • 1.8 Million downloads in 3 months

  • 4 of 5 stars in the App Store

  • Won Emmy Award – Outstanding Creative Achievement in Interactive Media (user experience and visual design)

Framework & Interaction

The project started from my low-fidelity sketches to demonstrate the app framework, features, and interaction. It helped the clients to focus on the overall flow and imagine the linear browsing experience.


User Flow

  • Featured content: pinch to scale down the video and enter exploration mode.

  • Customizable room: paint with your favorite colors on the wall and upload your photos to the room, where has your favorite Nick stars and characters.

  • Start related content: browse tweets, photos, videos, blogs, and interactive components from your following starts.

  • Secret touch gestures: draw special gestures to enter different environments of Nick stars and characters.


Worked with the visual designer to simulate the app environment and create parallax scrolling. Came out with ideas for interactive components.


Parallax Scrolling

Layer 1: background environment

Layer 2: content

Layer 3: foreground environment

Layer 4: menu and notifications


Feedback

“Linear browsing interaction doesn’t work for kids. The app needs to contain all Nickelodeon content, and kids might feel bored after couple swipes.”



To avoid a linear browsing experience, I created a 360-degree grid for kids to browse multi-directions. The kids love rich and playful interactions that help them to engage and stay longer.


Interaction Types

  • Tap to move around the grid

  • Pinch-out or double taps to access content

  • Pinch-in to close content

  • Tap and hold on content to save


To bring all Nick content, stars, clips, shows, and games from the website to the app, we defined modules of various sizes to house content. Then arranged the modules into three different puzzle pieces to create a seamless grid of the content.


Grid of Content

  • Centered circle: featured content

  • Second ring: followed content

  • Third ring: chronological content


Wireframes & Content Strategy

After defining the framework and interaction, I designed detail wireframes and content strategy to communicate with clients and developers. By creating dynamic puzzle pieces, kids have a fresh experience every time when opening the app.

The most challenging task of this phase was to design a unique puzzle that houses the different amount of content on the grid.


Content Plans

  • Featured content: dynamic layouts

  • Followed content: 41 latest content modules, 164 content modules (4 puzzle pieces), and 20 content modules around featured content area

  • Chronological content: 140 tweets per week, 70 blog posts every two weeks, 2-3 photo galleries per week, and 1 interactive content per week.

Another important task was to make sure the usability throughout the user flows.

There was a blue-sky idea that I came out with to guide the user navigating back to the center when reaching the edge of the grid.


Blue-sky Idea, Slime Monsters:

When the user navigates the Grid to the edge, slime monsters appear and walk toward the content modules.
When the user navigates from the edge toward the center of the Grid, slime monsters walk backward to the edge and melt.

User Testing & Improvement

To test the app framework and interaction, we created prototypes and did multiple rounds of user testing to evaluate and improve our designs, including both UX and Visual. Each round had seven participants from age 6-12.


User testing feedback of the early prototype

  • Overall the grid is still a successful, entertaining browsing experience. Only two of the eight children did not respond positively to it.

  • Most users recalled the images that were in the middle of the grid and panned until they recognized them.

  • Finding specific pieces of content using omnidirectional navigation was possible, but it could be improved.

The usability of the final grid design was improved by reducing content modules and showing background colors to indicate areas of the grid. Empty spaces increased the user’s engagement in terms of browsing time and range.

Launched 🚀