Beano Studios - Lead Product Designer

Beano is one of the best known and loved children’s brands in the UK. The comic has now been in print for over 80 years making it the worlds longest running children’s publication. Beano.com was launched in September 2016 by Beano studios as a way of reinvigorating the brand for a digitally aware audience, think BuzzFeed for kids and you’ll not be far off. 

While working at Beano Studios, Beano.com became the fastest growing children’s website in the UK with a 185% increase in unique views on the previous year. Currently 35.9 million kids have visited the site, with 233k surveys answered every month. The product now successfully monetises itself through the insight and data services provided by Beano Brain, getting accurate, continuous insight from millions of kids and teens.

What I Did There

Reporting to the head of UX and Design, I worked with the analytics, commercial, development, growth and content teams, leading UX/UI design and collaborating on UX research. The design process at Beano Studios was fantastic; regular user research was backed up by strong data analytics and ethnographic research. All the features that I worked on where thoroughly AB tested and validated with usability testing.

During my time working at Beano studios I worked on a variety of initiatives, in this is case study I’d like to take a deep dive into three of them.

1. Beano Brain Proof of Concept

Beano Brain, a unique data and insight service that helps Beano Studios and its partners truly understand kids. It’s ambition is to be the best in the market at understanding kids by using a mixture of quantitive and qualitative research. 

What I Did

I was responsible for devising a proof of concept, which would then be used as part of the process for approving Beano Brain as a business initiative. I also generated a series of early dashboard concepts to be used in high level presentations and created the branding for Beano Brain.

The Brief

Identify a way for Beano Studios to use the anonymised and GDPR compliment data that it had collected, to provide the editorial team with insight. Which could then be used as a way of helping to inform their content strategy.

The Process

To develop the proof of concept -

• Interview stakeholders

• Generate initial dashboard design

• Review concepts with individual stakeholders

• Iterations based on feedback

• Workshop the final ideas with all stakeholders to define the proof of concept

• Handed over to the Data Analytics team

Stakeholder Interviews 

To get a better understanding the business opportunity and the company’s needs I interviewed all of the key stakeholders several times. These included 1 to 1s with; Chief Product Officer, Director of Operations, Head of Data and Analytics, Senior Digital Data Analyst, Head of Design and UX, Strategy Director, Head of Editorial, Director of Digital Growth and Creative Director

Initial Concepts

I worked through a series of concepts and presented these back to the stakeholders, some of these early ideas where very dashboard focused. The feedback that I received from some the stakeholders was that these solutions probably wouldn’t give us much more insight than we could already get using either Google Analytics or Looker. This would require a far more data centric approach. As someone who’d spent most of their career solving problems with a strong UI focus, this would need me to take a step back and rethink.

The Solution

The solution came to me after presenting some of the early concepts to the Head of Editorial who said that they would like to know what content a user tapped on after viewing a successful post.

Beano.com has a wide editorial range: fashion, old school comics, weird gross out stuff, YouTube gamers, music and cinema are all covered. To add to the complexity these are presented to the user in a variety of content formats: Quizzes, Games, Videos, Listicles, Comics. All this is designed to appeal to boys and girls aged 7 to 12, this is a wide age range for a kids site. It would be unlikely that all of this content would appeal to all of our users in equal measures.

Could analysing the clusters of content that a user interacts with after consuming a popular post and then comparing this information with the clusters of consumed content associated with different posts could give us valuable insight?

Or to put it in simpler terms do kids who like Fortnite also like Slime? Are the children who like our YouTube gamer features the same kids who like reading vintage Beano comic strips on the site?

Could analysing this data help us in identifying different cohorts with different tastes? If so we could then use this information as the basis for generating a series of useful personas.

Data and Analytics Handover

I presented this concept to the core stakeholders, we could all see the potential of this as an experiment and it was agreed that I would handover the tasks to the data and analytics team.

In the interim -

• The editorial team had been busy tagging all of the content in a systematic way describing each post with format, subjects, moods etc.

• The developers had been building a data base using Elasticsearch.

• I’d been working with the Data team to investigate how we could visualise all of this using Tableau

The Outcome

The experiment was a success with the data and analytics team clearly being able to demonstrate that there are several cohorts on the site. Some of whom where clearly more interested in popular culture; slime, YouTubers, fashion trends etc. Whilst others where far more interested in action and comedy; vintage Beano comic strips, Dennis and Gnasher Unleashed, games etc.

This provided us with the proof of concept that we could use our data to provide meaningful insight, which was pivotal in giving the green light to the Beano Brain as a business initiative.

2. Redesigning The Top Navigation Bar For Beano.com

One of my core responsibilities as lead product designer was to improve the site’s navigation and architecture. Initially as a way of optimising video views but later on as a way of improving our SEO. Some of the parts of the site I worked included:

Top Navigation Bar

The original designs for the site where optimised for desktop not mobile, not allowing enough space to display the core sections of the site in the top nav on the mobile view. This was part of the site that I’d wanted to look at since the day I joined and was a self initiated piece of work.

What I Did

• Identified the problematic nature of the old design whilst conducting an heuristic evaluation of the site

• Created new deign concepts at various breakpoints

• Created a series of click through prototypes

• Tested the usability of the prototypes in users research sessions

• Worked though a series of iterations, prototyping and evaluating with usability testing each time

• Handed the work over to the development team

Problems With The Old Design

The original design didn’t allow enough space to display the core sections of the site in the top nav, requiring users to tap on the More Stuff icon to access Quizzes and Dennis & Gnasher Unleashed. These two core sections of the site where hidden from both our users and from Google. I was confident that if I re-jigged things I’d be able to get five sections in the top nav. This would all need to work at our smallest breakpoint of 320pixels.

Breakpoints

I worked up a series of designs for the key breakpoints we where using on the site. There where a few other issues I wanted to address whilst I had the opportunity to work on the nav. One was to reduce the height of the nav on desktop as this took up more screen estate than was necessary. The other was to make the search bar more prominent, as our user research had demonstrated that this was something that kids had difficulty locating. The other thing I added was a drip graphic to add a little touch of the punk rebelliousness that was integral to Beano Studios’ ethos.

Initial Prototype

I created a click through prototype that we used as the basis for our usability testing sessions. We where ahead of the game here as we ran all of our user research remotely using either FaceTime or Skype. The first design wan’t as successful as I’d hoped. Several of the users wouldn’t interact with the top nav because the icons weren’t labelled. I’d wrongly assumed that the video and game icons were globally recognisable and that curiosity would drive them to investigate the others. Users also thought that the hamburger was the home button.

Final Design

After a series of iterations and user research sessions I had a design that I was understandable to all of the users we showed it to. I added text underneath the icons, this gave the whole site on mobile an app like feel. I replaced the hamburger with a three dot icon, which stopped users confusing it for a home button. I also added a home icon as some kids where still struggling with the concept of the logo acting as the home button.

The Outcome

The new navigation had a significant impact on KPIs. Resulting in higher page views, a small reduction in bounce rate and improving Beano’s search engine ranking on quizzes. 

3. Beano Brain Surveys

One of the main services that Beano Brain offers partners and clients are surveys that are conducted directly from Beano.com. With an incredibly fast turnaround and vast reach, these surveys are now one of the core ways in which Beano.com monetises itself.

The Problem

How could we gain valuable insight from beano.com that would give the insight and commercial teams marketable quantitive data to back up the amazing qualitative data that they were already gathering through their ethnographic research?

The Solution

To create an unobtrusive and engaging survey mechanic served dynamically to the user, whilst they are enjoying content in a similar format. Giving, of the moment reliable results to clients, partners, stakeholders etc. at scale in a matter of days.

What I Did

• A key contributor in the ideation sessions that identified Quizzes as the way to gather meaningful insight

• Conducted competitor analysis that uncovered a design pattern which we could then amend and adopt

• Presented this solution to the product, commercial and insight teams

• Designed and iterated on the flow

• Provided the look, feel and messaging

• Worked with both commercial, data and insights teams to expand and refine on the initial concept

Use Quizzes To Gain Insight

In my first month at Beano I’d attended a workshop where the breakout group I was in had hit upon the idea of gaining insight from the answers kids where giving to the various personality and trivia quizzes featured on the site. 
The problem was that when we tried posting quizzes on the site about subjects that clients and partners would find interesting the kids didn’t engage with them. Probably because the subject matter was a little too dull to excite them. We’d also tried posting Hotjar surveys on the site but the response rate again was low.

Inspiration Through Competitor Analysis

While conducting competitor analysis on quizzes, I was served an advertisement on a quiz site that was designed to look like a quiz question, tapping on the ad took the player out of the quiz to the advertisers site. It was a very click-baity thing to do and felt a little dark. But it got me thinking, what if could we replace some of the MPU’s in our quizzes with paid questions?

The Hypothesise

My hypothesise was that if you drop a sponsored question into the middle of a quiz the child would answer it accurately without giving it too much thought because they were in the middle of a series of question and answer loops; a flow state. 
In various user research sessions we had often noticed that once a child had started doing a quiz on the site it was almost impossible to get them to stop! They go down a kind of quiz rabbit hole only to re-emerge once the quiz results are in hand.

Planning The Scope Of Work

I presented the idea to the Senior Product Manager and The Head of Design and UX. They both agreed that it was a concept with great potential and we moved it to the front of the product team’s backlog. We discussed the feasibility of creating this with the development team and agreed that the leanest and most efficient way of implementing this would be to re-purpose the existing poll components. The first iteration the flow for would be pretty straightforward, the idea being that the experience should feel as close to the rest of the quiz as possible.

Look & Feel

With the look and feel I felt that it was important to indicate to the user that this question was slightly different from the other questions in the poll, but it was equally as important that it didn’t look or feel too different from the rest of the quiz as I didn’t want to put off users from engaging with it. It was important to keep in mind that they’re in the middle of an enjoyable experience, which we didn’t want to disrupt. What we wanted was small micro interaction set in the heart of a quiz that would feel light and fun.

I settled on the title ‘Total Random Question’ with a crazy face emoji as this fitted in nicely with the tone of the site. To differentiate the feature from the rest of the quiz, I added a pale grey container edged with a paper tear motif. I’d already used this tear graphic as a a way of dividing up content in several other places on the site, it always added to the punk rock, DIY vibe we were striving for.

I put a string of copy underneath the answers, just to reassure any confused users that this wouldn’t effect their score. We also added a link out to our FAQ’s where we created a section to explain the purpose of the quiz and to assure everyone that we where being GDPR compliant.

Validation

The insight team carefully monitored the results from the surveys often adding control answers to ensure that the users were answering the questions sincerely and not just tapping to get back to the quiz.
We also carefully observed the behaviour of kids interacting with the survey in our regular user research sessions. They always answered the extra question!
As always at Beano, this feature was AB tested, there was an incredibly tiny drop in the completion rate of quizzes, but it as felt that this was a small price to pay for the insight.

Other Variants

I worked closely with both insight and data teams to create three more variants. 

• Multi select where the user can select as many answers as are appropriate

• SpotQ+ survey, these have a screener question at the beginning enabling the the teams to easily segment users

• Picture SpotQ where the answers are displayed as pictures instead of text

The Outcome

• Using this mechanic mean that we could ask a question of our audience and get over 1000 responses in 24 hours

• The first 70 questions that where asked using this system gathered over 150k responses within the first month

• 233K kids now answer answer surveys on beano.com every month

• At the time of me leaving Beano Studios surveys where featured in over 50% of all of the quizzes on the site

• These surveys are now an integral part of the services offered by Beano Studios to clients and partners

A Quick Recap

1. Beano Brain
   Providing a proof of concept helped launch Beano Brain as a data and insights service

2. Redesigning The Top Navigation Bar For Beano.com
   Reworking the site’s nav helped to improve growth, giving Beano a larger audience to conduct quantitive research on

3. Beano Brain Surveys
   Identifying a way of inserting sponsored questions onto the site gave Beano Brain a key source of revenue