Nick iPad App
Embedded Files
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 🚀
Page updated
Google Sites
Report abuse