How to build scalable digital experiences

Giraffes, APEs and other beasts. How we built an Atomic Practice Experience for primary school students.

Contributors

Ryan Tinsley

Ryan Tinsley

Senior UX Designer

Over the last 20 years Bitesize has helped millions of students succeed in their Year 11 exams. A large proportion of the team now building Bitesize once used it when they were studying. Back in our day, Bitesize was a GCSE-only offering. Over the years we’ve expanded to cover everything from Primary content to careers advice for our Post-16 audience.

The Problem

Making Primary content has always presented a challenge for us in Bitesize. As most of our Primary users can’t read we have to rely more on video and interactive formats to deliver content. This is time consuming to produce. We wanted to deliver exceptional learning experiences to our younger audience at scale.

How might we create a massively scalable practice experience?

Understanding

Our journey into what to build started with huge amounts of competitor analysis and internal research. Our first port of call was to perform an audit on our own site. After 20 years of operation we've amassed a lot of legacy content. We found numerous different practice engines all connecting up to different tech stacks and CMS systems. Being able to look back at all this past work was instrumental in setting the direction for our future practice experience.

Four screen shots of interactive educational activities

Examples of older Bitesize activities

The Solution

Our solution was based around the thing that our Primary students ask for the most… Games! Primary students love games and interestingly they class anything that is interactive as a game within this age group. So that means the barriers to entry were low to get something made and launched as an MVP. We’ve already had a lot of success with games in Bitesize and releases such as Karate cats and Galaxy pugs have really brought learning to life for our younger audiences. Whilst these games are great for our audience they require a lot of resource from a large group of people to get live on the site. Our approach was to take well known game mechanics such as drag and drop, multiple choice etc… package them up in a fancy acronym called APE (atomic practice experience) and stitch these individual mechanics together in a single focussed journey. We are essentially creating a game out of a series of quiz blocks.

A diagram describing the differnt blocks of content that go together to make up a game

Elements or ‘blocks’ are linked together to create a game.

The Data

The data that powers our questions makes up right and wrong answers. In our atomic design system they would be our atoms. While a piece of data may have been created for a certain task. Let’s say the word ‘Giraffe’ was created as an answer for a KS1 “what are mammals” quiz. If we take that single atom we can enrich the data by adding an image or translating to jirafa in Spanish. Now we can use this same data atom across our original KS1 feature and in KS2 Spanish. Here’s a visual look at how we treat that data.

A data structure that shows a giraffe is linked to different bits of data such as where they are from

Schema for a data atom

The real icing on the cake with this data lead approach is that there is less commissioning required, so our editorial team can spend time further enriching this data, meaning more atoms are available across more subjects and topics.

The Visual Approach

This thinking and intelligence has to get wrapped up in a neat little UI, and this is where our core pattern set comes in. As a team we agreed to produce a small set of practice patterns that we felt would be useful for our pilot in Phonics. We focused on patterns we believed would work well across many different subjects with many different data sets.

Identify

A simple multiple choice pattern, this pattern can handle different inputs such as sound, imagery and text.

Example of the multiple choice pattern, which can handle different input methods

Order

A drag and drop interaction, users can order numbers into value order or create sentences, for example.

Sort

A simple yes no statement.

Designing an activity UI from scratch was new territory for us. It had to feel fun and exciting whilst usable for young students. Our current Bitesize branding is still very new and shiny. As such we are still learning how the brand works in the wild and evolving with each new feature release. Over the hallway, the Children's team has a gigantic style guide that reads like an activity book, brimming with colour and tactility. They are experts in games and activities, so it felt right to use cues from their visual language to design our own practice experience. After many iterations and countless hours we now have a visual style that looks like Bitesize and works well for our young audience.

Different colours and styles of graphical buttons

A brief snapshot of some of the button styles we had to play with in the children’s styleguide

We designed this experience for young children to use independently. It’s been tough and we’ve learnt heaps from our internal usability studies. We focused on designing for the youngest students possible with some of our participants being 3 years old. Our youngest students can’t read, they’re also not familiar with common UI patterns. If we could make something usable for 3-year-olds, then in theory, this should translate to older students. We have gathered many interesting lessons along the way. Here’s a snapshot…

Don’t assume young children can read

At the beginning of this project we labelled all of our buttons with text. It wasn’t until we got into usability testing that we came to the sinking realisation that most of our users couldn’t read. As a result, our younger students couldn’t navigate our core experience. Our response to this was an iconography-first approach to wayfinding and navigation. Any time text was shown on screen, we would offer a spoken alternative.

On the left a button with text on it. On the right a button with just an arrow symbol

Left: Before. Right: After. Iconography is used to visually show the next stage in a journey.

Layer it up

One of the more interesting findings from our usability studies came when we presented a feedback bar to users. This bar was green for correct and red for incorrect. After a participant had submitted an answer, we asked them ‘did you get the question right?’. We watched in amazement as their tiny blank faces looked back at us… baffled. It turns out colour signals were not understood by some of our younger students. To combat this we used colour in conjunction with iconography, sound effects and playful animation. This layered approach gave multiple signals to the user, guaranteeing that they would know if they answered a question correctly.

Example of the old feedback bar with a text button, and the new feedback bar with an icon button

Top: Old feedback bar. Bottom: New feedback bar. All text shown in this bar is audio described.

Useful animation

Every couple of months or so I trawl through Dribbble tripping over the useless vanity animations that adorn what feels like every page. Yes that submit button you created with 50 layers and as many states looks great… but what actually is the point? Animation is a powerful tool when used in the right way and this project has benefitted enormously from it. We use animation to bring in UI only when needed. This helps focus small minds to key areas at the right time. If users are still struggling, we’ll surface a helping hand to guide them through the experience, step by step. Finally we’ll celebrate our students' successes with fun screen takeover animations.

After many iterations and countless hours we now have a base for our practice visual language. These components have been built in react and saved to storybook so we can call on them anytime we need. It’s been a long slog and the sheer amount of edge cases we have run into has been insane but our MVP is now live here.

A selection of different size and colour buttons and interactive elements

A small selection of our new visual practice language

The Future

Whilst this article is a brief tour through our approach to MVP, this is by no means the end of the story. We have a huge backlog of items that we want to get through and we continue to build on our MVP daily. Here’s a quick breakdown of some of the tasks we look to take on within the next few months.

  • Continue to iterate and improve for users with accessibility needs
  • Grow the patterns available in the engine
  • Explore full screen experiences
  • Expand the offering across more subjects
  • Investigate scaling this system for older students

Now you’ve read all about our new practice experience check it out here.

Where next?

play
13:16

BBC for everyone

Michael  Mathews

Michael Mathews

Senior Research Engineer

  1. Articles