Twirlywoos explore and play
A game suite for children aged between 3 and 5. Each of the nine games aim to teach abstract ideas to them.
Role: Junior UX Designer
Company: The BBC
Team: CBeebies - Games
Context
I was the UX designer assigned to Explore and Play. Plug-in, an agency based in Brighton, was in charge of building it over a period of ten months. The contract the BBC had with them stated that the game had to meet the highest standards of accessibility for motor impaired users. I worked closely with a member of the editorial team at the BBC and the Project Manager at Plug-in.
Task
During this time I made decisions with my teammate at the BBC to best meet the users needs, I checked that what the agency delivered looked good, complied with our guidelines, the brand guidelines and met the accessibility standards. I took the game to nurseries and schools every fortnight to check if the games appealed to children and if they struggled when playing with them.
Actions
All games made up to that point for Cbeebies used a horizontal carousel. I wanted to know if children that age could browse through games and select one of them. The best way to find out was to look at the data. In Peter Rabbit, a game suite of four games, all games were on one screen and the number of clicks was roughly the same for all of them. Charlie and Lola has eight games and users can see two of them at the time. The two games on the first screen had a lot more visits than the other six games. Other suites with a carousel showed the same data pattern. That suggested that children that age couldn’t navigate through the carousel and didn’t get to see and play all the games in it.
I thought to look at how other brands organised and presented multiple games to users this young. Randomisers and endless carousels were the most popular choices. I talked to my teammate and told her that I wanted to organise a sprint with Plug-in so that we could come up with a better way to present the nine games. People from Plug-in and us took part in the sprint. I asked everybody to look for examples and share them. I shared what I had found before the sprint as well. We then did a session of Crazy eights. At the end of it everybody voted for the two ideas they liked the most. The first one had a randomiser button which would shuffle the games on the screen, so that the user would get new games each time. The second option consisted of moving games on the screen, the motion of which could be accelerated by swiping on either one side or the other. Plug-in built a prototype for both options. My teammate and I took them to a nursery and observed how children interacted with them. They seemed to respond better to the second option, which is the one we decided to implement.
We wanted the game to be easy to play for children with motor impairments. From the start we looked at how to use a Switch in combination with Autoscan for all the nine games. The gameplay in some of the games changed a few times because the brand wasn’t happy with it. So I had to find a way to create a narrative that would work with the use of a Switch and communicate it to Plug-in. I regularly attended accessibility drop-ins run by accessibility champions to clear any doubt on how to make those games accessible. In those sessions I was given some very useful advice. One was to implement a Trap Focus to avoid selecting anything outside the game container, since the game wasn’t full screen at that time. Another suggestion was to add a voice over to all UI elements because children this age can’t read and not always understand the meaning of some icons.
I regularly gave feedback to everything Plug-in implemented. That included the visuals of the game. Very often I asked to change and improve the appearance of the UI, backgrounds, font type or entire screens. When what I saw wasn’t good enough I would make a mockup as an example of what I wanted the game to look like. Explore and play also needed a short animation as intro to play every time the game was launched. We weren’t happy with the animation they did and I decided to look at the show to form an idea of what the animation could look like. I storyboarded what I had in mind and shared it with the agency.
Results
Three months in and Plug-in changed Project Manager. The new PM had to familiarise herself with the project, the accessibility side of it, the way the BBC worked and its guidelines. I decided that onboarding her and getting her up to speed was one of my priorities. Because she was our point of contact with the agency I did my best to provide clear answers and guidance. In the process we built a good relationship and when there was a problem to solve she would describe possible scenarios and think on her feet about solutions. I’m pleased with the way things worked out. Plug-in managed to implement Autoscan, Tabbing and Trap Focus much earlier than I expected leaving us with more time to dedicate to details.