Chrome Extensions: A new approach to prototypes close

So – here’s a dilemma: you have an established site with loads and loads of content that is being updated all the time and millions of users. And, like most organisations with a decent web presence, you are constantly striving to improve and evolve alongside changing audience needs and improved technologies. But how do you test new functionality that may or may not be ultimately adopted on the site without a) confusing audiences by sticking it on the live site, or b) confusing testers by creating a mocked-up site with dummy content?

For CBeebies – this was the exact issue they faced when we produced a pilot project for children to be able to curate and save their favourite CBeebies content. The concept we devised was to allow children to create a ‘Toybox’ which was a place where they could save content and customise it with their name, photo and colour of choice. Essentially it is a way for children to favourite items so that they can easily find the activities they use the most in a very large site. It also allows parents to monitor what their children are doing on the site and recommends related content based on the activities they like and their level of progression to encourage development.

Having been through the idea generation, UX, design and some initial user testing we then had the decision of how best to test the Toybox feature on a large scale with real users of the CBeebies site. The challenge was that Toybox is not a standalone feature; it integrates with site content rather than being a new standalone section which we could build and test separately. This made it a challenge for a few key reasons:

1. CBeebies is a large complex site that integrates many systems, taking a dump of the site code and creating another version with the Toybox feature would be long, time consuming process
2. The more we could work in isolation without impacting the CBeebies development team the better, after all they test many ideas and prototypes and to have to continually add and remove them from the site is again very time consuming and not cost effective
3. The idea was this is a prototype to be tested and optimised before going live on the main site so putting it live, even as a Beta version, was not an option

How could we give people the option of testing this new feature without touching the main site code or requiring time from the CBeebies development team? In assessing the options we summarised what was required:

• A way of storing basic user information (name, age), their Toybox customisations (colour and picture/avatar) and their Toybox items (favourites).
• The addition of the Toybox page itself which displays the users Toybox for them to interact with
• A way to insert a button to all activity pages on the live site to allow the users to ‘Add to Toybox’

The solution we proposed was to build Toybox as a Chrome Extension, a totally new approach for the BBC but one with many benefits.

Using the Chrome browser meant that we were able to use up to date HTML5 technologies and opened doors to things like HTML5 storage which ticked our box for storing basic user information. Next, to create the actual Toybox page and display the user favourites, we utilised the Chrome extension options page. Using this page gave us a platform for the users to enter their basic information and see the activities they had favourited. Then with JavaScript we we're able to inject HTML into the live site sidebar for the ‘Add to Toybox’ button by targeting specific parts of the HTML. Plus, we were still able to add tracking to the extension code allowing us to monitor the behaviour of users and being able to set an expiry date for the extension gives us some control over how long users could access Toybox for.

From a user perspective the experience was relatively seamless:

• Receive invitation to download Chrome Extension
• On install a CBeebies icon is displayed in their toolbar
• Selecting this icon takes them to the CBeebies site with the addition of the Toybox functionality - here they are able to use the site as normal but with the extra feature
• A simple notification bar at the top of the page invites them to visit a user feedback site where they can answer questions and leave comments to give their opinions on the Toybox

The use of a Chrome extension has been a totally new approach for the BBC and it’s been very well received. In the future when clients approach us with similar challenges it will certainly be a solution that we will recommend. The results of the user testing are still being collected, so whether or not Toybox will be rolled out across the main site is yet to be seen. However whatever happens both sides will take great learnings from the process and have seen how Chrome Extensions are a great approach to prototypes.