product design case study

WUAKI KIDS CREATING A MOVIE & TV SERIES APP FOR KIDS IN 3 DAYS

2017

5 min read

Wuaki Kids Home in iPad

Up to this moment, a lot of TV and services on demand arised and all of them were striving for the same thing: to get in the everyday lives of younger adults –the new purchasers– that were bringing digitalization to their lives. Our service was doing so as well, but we realized that we were leaving too many users behind and while we were providing enternainment for them, we were not adding value for the ones surrounding them.

This is a story of how 2 designers and 2 developers expanded that view to help the new parents and entertain their Kids.

Background

In one of the pitching idea sessions, we came up with an idea to increment user satisfaction to our second largest targeted persona (young families with Kids) and we had to create, develop and prototype the idea in 3 days.

My role

  • Summarize activities
  • User Flows
  • Sketching
  • Wireframes
  • UI Design
  • Interaction

Problem / The Challenge

At this point, the company was targeting very well the main user personas and customers: couples around 30-50s that wanted to purchase movies or TV series in their spare time. However we were missing families: couples with children that shared their accounts and devices.
We wanted to give the parents a more inclusive way to enjoy watching videos with the children and, at the same time, allow the children to watch content in a safe way and enable the parents to enjoy their spare time.

Wuaki Kids User Persona

The targeted persona had kids, subscription and one of her main goals was to find content for kids and save time and money

The Process in 3 days

We had to clean the process to the bone, narrow down execution times and reduce User Research.

During the first days, the Developers and Designers would work together in brainstorming and research. During the second day, the designers would work in creating the solutions while the developers prepared the Front-End layer. In the last day, the Designers created the final mockups while the Devs developed the prototypes.

Here’s a quick summary of how we did it:

Day 1
Emphatize &
Ideate

Collect insights, Understand the problem,
Prioritize &
Brianstorm Ideas

Day 2
Define &
Experiment

Create User Flows, Wireframes &
Visual definition

Day 3
Design &
Prototype

Final mockups & prototype

day 1

1st Day Goals

During this first day we had to digest the information that we collected in shape of App reviews, survey data, comments and direction from business that we had yet to summarize. After that, my goal was to differentiate assumptions from proved statements, prioritize the problems and brainstorm it with the team. By the end of the day, we’d have prioritized solutions that we could address during the next day.

Morning

Planning
Collect data & assumptions
Affinity Mapping

Afternoon

Problem & need finding
Prioritization
Brainstorming

Insights

During the morning, we collected reviews from Google Play Store, Apple Store and Customer Care comments and other valuable User Feedback from surveys and previously conducted User Interviews.

After distilling the information and evaluating it, we found:

Business and User insights

Reframing the problem

Parents with Kids will not fully enjoy their time 
if they cannot give their kids a safe way to watch content curated exclusively for them.

At this point, we knew we were going to create an app for Kids. We would solve this problem by enabling multiple users to connect to the app and adding a layer of security.

day 2

2nd Day Goals

During this day, our goal was to explore solutions for the opportunities that we found as quickly as possible, and incorporate or reject them to the product, as well as ending the day with a defined brand and a small visual glimpse of the UI.

Initially, we brainstorm and sketched out different solutions for the problems. We started with the problems and goals, and turned them into opportunities (in the shape of How Might We):

Morning

Early task assignment
User flow
Low-fi wireframes

Afternoon

Visual style definition
Component library sample
Mockup sample

Opportunities and solutions diagram

User Flows

We defined the concept as straightforward as possible by removing intermediate screens like series, authors, list and detail pages.
We also added a login only for subscribed accounts and a profile for different users. The pages in blue are the ones created in this version, the grey ones were removed out of the scope and the dashed, empty ones were removed after iterating.

Wuaki Kids user flows & sitemap

Brand and Visual Style Definition

The brand was defined during the second part of the day. First, we choose an iconic name that extended the Wuaki brand. After that I created the logo, deconstructing the current Wuaki logo and making it more playful.
 Just for Kids.

We also created an initial guideline for text, colors and some basic UI components as well as the logo and icon that would represent the brand.

Wuaki Kids logo versions
styles

On top, the final logo on the left and different iterations of the logo/icon on the right. In the bottom, the main colors, icons and buttons.

day 3

3rd Day Goals

Creating the MVP mockups and protoypes

Daily tasks

Mockup creation
Prototype development

Login section

Login

Added a sign in screen for the parents to log in to the app

Profile choice

Once logged in, the kids can either login with their profile or select the favorite characters they identify with. It will also display their name and accumulated badges.

User selection screen

Homepage

The homepage is more vibrant, with animated icons, prominent colors and everything is visual. The kids do not need to read to recognise their favourite TV shows or movies.

On the left. A quick menu over the hero carousel that can be pulled was added to scroll quickly to the content below

For TV series, we stripped the series out of the background, kept the characters and added playful colors. Kids identify more the characters than the brands of their favourite shows

Full home mockup structure

A quick access to add the concurrent series or favorite episodes that young children like to rewatch. The episodes that are added to Favourites will display a badge

Favorite marked episodes or movies will appear in the bottom of the screen

The Player

Aside from removing the intermediate detail, series and list pages, we bet everything into the player. This is how it works:

Player loader screen

While loading, the series name and episode synopsys appear. In the bottom, next episodes from the series

Player episode (no prize)
04_Player_Select_Episode_Scroll_Down

Swiping down will open more episodes

Turning the video playing experience into a
gaming experience

This is the cherry on top of the cake. To improve retention and give the kids an extra dimension in enjoying their apps. We added an in-app game for some videos.

During the playing experience, they’ll have to find a set of stickers to unlock prizes from their favorite characters. Once they find and tap on the object in the game interstitial, the object would be added to the object slot and once they find all of them, a sticker prize would be added to their Sticker Collection.

Player: Episode introduction prize overlay

While loading, a screen will appear announcing which clues they need to find

Player: sticker game

While pressing the clue, it’s added to the store

Collecting the stickers

In the sticker section, the users will see the owned stickers by completing a game in an episode or movie, and they can see which ones they are missing from that and other videos.

Sticker game section

Takeaways

It was great to work in constrained environment where we would focus on quick planning and execution.
In the first 2 days the ideas flew really fast and a quick decision making framework sped everything up. We got rid of any second thoughts that usually delay projects and generate doubts. When the project was presented among the company, it was greatly received and awarded.


Improvement points

The project lacked input from Product Owners and Business during the 3 days period. We could have had a stronger Product and Business representation if they were present. I wore the Product hat with the Lead Developer; and Business was only represented by the aforementioned requirements. Another missing spot was the lack of direct input from users during the process. By adding that, the format would be pretty close to Design Sprints and it would be a lot more beneficial to adopt that format in the future. Unfortunately, the 3 days period was too strict and I think we made the right choice of each day’s framing by keeping it to the minimum. Unfortunately after a few months the product never aired due to misalignment with film producer brands.


What’s next

  • Time limit permits for the parents
  • Better control of watched / unwatched content
  • If the gaming feature works well, refine and make a more complete gaming experience
  • Customizing content for each kid’s age and taste

Copyright © Jaime Zamorano. 2020
Legal details

Back to top Arrow