User Experience and Design in the CBeebies Playtime App

Tuesday 10 September 2013, 10:10

Leanne Dougan Leanne Dougan Senior Designer

Tagged with:

Hi, I’m Leanne Dougan, the senior designer who led the user experience and design across the CBeebies Playtime app. This blog post aims to give you some insight into the process and approach we took to create and design a playful experience for a young audience.

jpeg1.jpg CBeebies Playtime hub

CBeebies Playtime is a free mobile app for Android, IOS and Kindle. It’s filled with lots of great games, hidden surprises and fun features for children. There’s also an area for grown-ups. My colleague Lizzie has written in more depth about the app features, which can be read on the CBeebies Grown-Up Site and my colleague Jon Howard has written about how we built the app, this can be read here.   

The Design Challenge

Our design challenge was to create an app that was simple to use, fun to interact with and scalable for an audience driven by image led navigation and reliant on large hit states. It needed to incorporate everything which Children love about CBeebies - the brand's humour, surprise and excitement whilst enabling children to learn through play. We also needed to make sure it suited the needs of our grown-up audience too.

First Steps

To help define the spirit of the experience we first created a mission statement and some core UX principles. Immersive, playful, personal, tactile and safe were the principles which the app design and essence needed to meet.

Keeping the mission statement and principles in mind we held a variety of creative workshops involving a BBC team comprising of an editorial producer, product manager, project manager, user experience design lead and our partner agency Mobile Pie. The creative workshops helped shape and refine the proposition further. We brainstormed areas such as how children play and what they play with, looked at game mechanics, touch screen attributes, user stories, what grown-ups would like from this app, the learning benefits and how we could give children a personalised user experience. We also discussed native game concepts for each of the brands and focused on fun navigation patterns, which would drive the user around the app.

From these workshops a series of prototypes were created to test navigation models and game mechanics. One of the navigation models we tested was based on a wheel. We weren’t looking for feedback on the visuals at this stage but simply wanted to research the usability of this type of interface with a young audience.

The game mechanics which we focused on utilised native device features. We wanted to investigate what gestures came naturally to the child and whether they could use device features such as tilt. Doing this reseach early on meant we could offer a more immersive experience and something different to our HTML 5 games.

jpeg2.jpg Early prototypes to user test game and navigation mechanics

User Centered Design

When we began this project we had no doubt that users would be central to the design process and we would need to test our ideas and designs often. Children and their parents or carers were engaged throughout the project lifecycle helping to shape the design of the app.

Children are driven to content via strong imagery and in particular it’s the show characters that the audience really connect with. This led us to use a navigation model which was brand driven. The navigation achieved the aspiration of a playful interface utilising a rotating wheel mechanic. This proved to be an optimal way of designing an interface which was scalable and from our early prototypes we learnt that the children found turning the wheel fun. Internally we called this section of the app the hub.

We next started to look at user journeys and how the audience would move around the app and within the games. With there being so many different tablet and mobile devices out on the market making sure the design worked across different screen sizes was a challenge we faced. We overcame this by making sure the graphics worked in screen size ratios whilst making sure the hit states stayed large enough for our users to interact with. The app UI was based on Games GEL. Games GEL is a set of standard and guidelines we adhere to when designing games across, mobile, tablet and desktop screens to make sure the users receive a consistent experience each time.

As this app is likely to be used on a shared device one of the user journey challenges we needed to solve was the ability to create multiple accounts and how to do this in a fun and enaging way which would be understood by the young audience. We achieved this by using a hot air balloon concept where a personalised balloon would carry you in and out of your CBeebies world.

jpeg3.jpg Profile creation. Users can create a personalised balloon to travel in and out of the hub.

Whilst creating the user journeys we needed to keep in mind we had a dual audience to cater for. This app isn’t just for a young children but we also needed to support our grown-ups audience too. We created a separate section which would house information about the games, parent tips, learning benefits, a special message feature where the grown up could leave their little one a message and links out to the CBeebies mobile and grown-ups site. In CBeebies it’s very imporant that whatever experience we offer it must be safe –internally we call it a ‘walled garden approach’. We must limit the risk of the child navigating away to other content which may not be suitable. How we handled this is by containing grown-ups information in a seperate section to the childs space which could be accessed only by pressing and holding a text button, something which proved tricky for a young audience to interact with. Wherever a link features taking the user outside of the app, grown-ups are asked to enter a key code. This offers even more protection.

jpeg4.jpg Designs of the Grown-ups section

The look and feel which we wanted to create in CBeebies Playtime was an environment which was bright and colourful whilst also holding a degree of simplicity to let the brands shine. My colleague Joseph Maguire who worked on the visual design successfully managed to create this environment whilst also giving the child space to give it their own personality. We wanted to allow them to personalise their profile with CBeebies bugs which they could win by playing the games. We also wanted to give an experience of magic and surprise and this has been achieved by the use of animation and incidentals. Hidden within the app there is a train which goes round the hub – we wanted to give an experience of being a child in a toy shop when you discover for the first time the train circling the top of the room, we wanted to evoke surprise.

Prototyping was extremely important in the shaping of this app. We ran sessions in schools and at parent & toddler groups, and my colleague Genine Keogh ran a number of more formal research session bringing participants into a research lab to help inform our design decisions. It was fantastic to watch users interact naturally and hear their thoughts, opinions and ideas along the way.

CBeebies Playtime includes 4 games, a spelling game for Alphablocks, a flying game for Tree Fu Tom, a creature rescue game for Octonauts and a popping bubble painting game for Something Special aimed at the speical needs audience. Having the opportunity to test frequently with our audience really helped to push the design forward, iron out any usability issues and helped balanced these games.

jpeg5.jpg CBeebies Playtime games.

When we tested we looked out for three areas…

  • What worked well
  • What didn’t work well
  • What do we need to do to fix these.

We asked observers to write on different coloured post it notes anything which they noticed as the prototypes were being tested. This process gave us quick insight to the usability issues and helped us to make design decisions quickly.

jpeg6.jpg Discussing user testing findings

Testing with children always provides interesting insights into their behaviour and how they use devices. When testing the app it was interesting and surprising to see how younger users confidently interacted with the app, intuitively using swipe, drag and tilt gestures on different devices to navigate and play with the content. It was also quite striking to see how quickly children picked up and recognised icons and positioning such as those on the back and home buttons, which helped them to navigate around the app.

More fun features and games are planned for the CBeebies app but in the mean time I would love feedback so please feel free to leave any comments on our design process below.

Leanne Dougan is a Senior User Experience Designer in BBC Future Media

Tagged with:

Comments

Jump to comments pagination
 
 

This entry is now closed for comments

Share this page

More Posts

Previous
What's On BBC Red Button - 7-14 September

Saturday 7 September 2013, 05:00

Next
What's On BBC Red Button 14-20 September

Saturday 14 September 2013, 05:00

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts