iPlayer Children Accounts
Enabling the children experience.
Role
UX/UI designer leading on this piece of work, with a senior and another UX designer supporting.
Tools & Platform
Main tool of choice was Sketch, while using Principle for prototyping and testing, Dropbox paper to plan out task list and Confluence for documentation.
This was a an end to end project.
Project Length
This project lasted 7 weeks from brief, competitive analysis, workshop, prototyping, user research and visual design with constant engagement with your stakeholders.
Background
90% of children's content is watched through an adult account or a non signed in account. This makes the personalisation for the adult and child harder, which impacts their overall experience and potential time spent watching content.
Goal
Design a campaign on our website to inform users of our children’s accounts, test with real users, and gather useful feedback to inform a strategy to increase both the parent’s and child’s user experience.
Unsuccessful previous attempts
Before I was on the project, iPlayer attempted a campaign which used a banner and a pop up which was colourful and used the BBC children brands. This unfortunately was unsuccessful with a click through rate of 0.02%.
Competitive Analysis
As the brief was to create an up-sell for children accounts, I wanted to explore the market to understand the type of copy used for kid’s messaging, imagery and methods used for safeguarding children. I looked at general children experiences for media, products currently up-selling a product and how products allow families to manage multiple account.
Ideation round 1
To get a feeling of the room I had to play with for the up-sell, I did some rapid ideation over existing content to understand where I could utilise space.
Banner at the top of the page
Replacing a promo with an up-sell so it sits with the content
CTA
Autoplaying video
Slideshow
Large promo
User flows & Ideation mapping
I did some research on marketing, with the recommendation to promote mid way through the journey - if too early, the user would not see the value and if too late, they would have already got what they wanted. Given this, I mapped out the user flows across iPlayer to understand the journey and to understand where these initial ideas could be placed in that journey.
Ideation round 2
Cross disciple ideation workshop
I organised and facilitated a workshop with our team (Product manager, Engineers and other members of design) to:
Understand why the previous attempt at up-selling was unsuccessful
Generate new ideas
Get input and buy in from the team
Dot voting
I created a google form document prior to the workshop and when everyone was presenting their ideas, I was updating the form in real time.
Once everyone finished, I sent the google form link out with a list of the ideas for everyone to vote, giving everyone 3 votes each.
I used a google form to avoid bias and everyone voting on an ideas that the senior stakeholders wanted.
Impact / Effort Matrix
With these ideas, I mapped them against the matrix to understand what was worth exploring further. This was conducted with my Senior designer to ensure we were aligned. Anything that was low impact, I scraped and further explored the rest.
Fleshing out
With the high impact ideas, I further explored with higher fidelity to understand functionality and how it would work - here are two examples I explored further.
Animated character that follows you
We know from user research that children like the characters
Animated gift box in rail
To attract children to click and open a surprise. This would allow them to create and customise an animated character but to download it, they would need to create a kids account (with the parents approval of course).
Stopped to think
As I progressed through, I stopped and looked back at the original attempt at up-selling and one of the reasons for the failure, was the size and nothing grabbed the children’s attention.
I spoke with my Senior designer and he agreed, so he asked me to explore something that would have high impact and really stand out - like parallax effects.
Low Fidelity Parallax Effects
I started to explore some effects with wireframes - I created 3 frames, attached then like a prototype and flicked between the 3 to get a quick feeling how it would move to avoid investing a lot of time to start on the animation.
Visual Design
The up-sell would need an eye catching background and I had been informed that children like to see the characters so I created different visuals which could be used for the up-sell.
iPlayer brand mixed with pastel colours and cartoon characters
Other children, a form of social proofing
TV show creative in a mosaic style
Copywriting
I explored a number of different copy to be used which was short, information and attention grabbing. The end copy was decided by the Product Manager.
Prototype
Here is a video demo of the prototype I created using Principle.
User Research
We interviews 5 children and their parents, giving them a number of tasks to complete. As you can see from the picture below, we were testing a number of children account related things including - Account switchers, up-sell parallax (seen above), copy of the up-sell and general visibility. I both facilitated sessions and observed to ensure I got a full picture.
After each interview, the Product manager, designers and myself would make notes on what was observed, insights and if the promo was seen.
“Definitely eye catching .”
— Parent
Testing summary
Some of the children noticed the up-sell without prompt, but all noticed when prompted.
Majority of the parents noticed the up-sell. It was a bigger hit with the parents than the children.
Nobody clicked on the up-sell however this was in test conditions.
Visuals with the cartoon characters were a big hit with the children.
Recommendations
Target parents.
The parents noticed it the most and they were the most excited about having their own account without a jumbled mix of kids and adult content. This makes sense too as an adult would need to set up the account.
Use simple copy.
The reading level of below under 13 varies therefore the simpler the copy, the better.
The bigger the better.
The bigger the promo, the more likely somebody will notice it. We need to make sure this does not interrupt the user flow.