The Brief

Design an app to give children a safe and fun environment, that’s reassuring for parents, to view as much video content as allowed, through a UI that empowers young children to navigate without assistance.

Blinkbox was a Video On Demand service known for its Pay per View model, similar to iTunes. Tesco, Blinkbox’s previous owners, were keen to offer a suite of built-in apps onboarded onto all their Android Hudl devices. They wanted ‘sticky’ apps that would keep users engaged and encourage them to enjoy their new Hudl devices. As part of this strategy, they wanted to target seamless video streaming audiences.

As a proof of concept they asked Blinkbox to look into this for a wide age range of young children. A seamless video streaming app for children needed to be a safe and fun environment, reassuring to parents and free for children to view as much of their favourite TV as desired, all without requiring assistance.

Our target

One of the biggest considerations when designing for children is the huge difference between the ages. For our proof of concept, our target market was children aged between four and nine years, a usefully narrow constraint largely imposed by Blinkbox's content library.

To this end, after a few sessions of requirements gathering I began a series of initial sketches looking at standard examples for TV interfaces.

After having drawn out the standard TV interfaces and interactions, I pushed them aside and started again. This time starting with the true basics for a TV app. Each feature I added back in had to be justified for their re-entry, e.g. why include forward and back buttons? Will children understand or use those features?

What about play, pause and stop? What's the difference between pause and stop in the digital world? Is it a meaningful difference?

And so on.

Sketches

Reducing the simplicity of the interface allowed me to explore navigation in more exciting ways. If we take out buttons, there should be more spatial navigation that makes use of motion and animation to show the user where they are and where they're going. This is particularly important if your user can't read or doesn't have an understanding of icon conventions built over long usage over time, i.e. young children.

I was particularly interested in the idea of layers of depths of content detail, and showing the connections between the sections through 'peeks' of the next level of detail coming through the screen boundaries.

Sketches

I developed a format of navigation where content was divided into three layers. The top layer was the universal layer with all content. The middle layer only moved up into place when a video was selected and showed the previous episode to the left and the following episode to the right, in the series. Finally the bottom layer only moved into place when the informatoin about that specific video was invoked. I pushed this at the bottom as it was useful only for adults if they felt the need to check what their child was watching, otherwise, the image of the video still was enough to encourage kids to watch an episode in the series.

I also began exploring using visual cues to show how much progress into an episode and series a user had made, rather than the typical progress bar scrubber seen in most video players.

Sketches

Wireframing

I put together a detailed spec to solidify and clearly communicate the concepts to my team. It was useful for the UI designer as it helped her develop a visual style freely without being uncertain about how things connected together. In the same way the detailed spec helped our developer to connect the UI together with little uncertainty, and to push back on potential designs that might not be possible.

The highly visual nature of the spec proved invaluable for communicating the concepts to Tesco executives and the founders of Blinkbox reviewing the progress of the project.

I developed further the concepts behind what we eventually named, the 'series strip' which allowed users to view all the episodes in a series and see their progress as one giant visual progress bar.

Wireframe

Visuals

I worked with the UI designer to put together an interface that showcased the content front and centre but framed it in a fun and pleasing UI that encouraged and engaged our young audience to interact with the app. We drew from influences such as sticker books and experimented with characters bursting out of their frames such as Kung Fu panda's kicking foot. Or Shaun the sheep who looked just like a sticker, and was cut out entirely to break up the grid flow.

Wireframe