CBeebies Responsive
Brief
After joining the BBC my first role was to fully redesign CBeebies and CBBC. The numbers were suggesting mobile and tablet usage were rapidly on the rise and we were running separate mobile and desktop websites that had differing functionality. We were also reliant on technology that was soon to be 'turned off'.
The aim was to move to a single responsive codebase which could be skinned for both products. This had clear cost and resource benefits. If a new feature was designed and developed - the other product would get it for free. It did mean that whatever I designed needed to work for 3-12 year old's. The development range and general interests of 3 year old is vastly different to a child the age of 12, so there were some real UX challenges along the way. Past redesigns had been met with tears from little ones and furious parents. Therefore the plan was to rollout incrementally.
Process
Quite often I was redesigning existing functionality as many of the user needs were still valid in a responsive world. The project did give me the opportunity to question and test everything to ensure the UX was as refined as possible. I worked with developers to put together a living style guide. It gave us great consistency and a single destination to see things evolve over time.
It wasn't always clear what was needed. For these occasions I lead a number of 5 day design sprints including some specifically around what the homepage could be. The design sprints gave me great range of ideas to quickly test with our users.
After successfully launching the responsive websites for CBeebies and CBBC I went on to work for 6 months leading lean sprints around the products key objectives. Lean sprints really improved team culture as everyone was collaborating and contributing to ideas as well as delivering continuously.
A range of personas I used to help validate scenarios when coming up with new ideas.
I lead a series of 5 day design sprints with our roster agency in Bath to trial new ideas for the responsive homepage. And yes, those are sewing machines :)
Three step wireframes showing what users see, do and get helped visualise ideas to the entire team. Dot voting then narrowed down our ideas further for stakeholder review.
I used card sorting exercises during the project to ensure UX, Editorial and Product were all on the same page in our understanding for collections and topics.
I created wireframes on paper before jumping into software.
Wireframes were produced at different stages throughout the project as I tackled templates on an individual basis. Content pages were the first to go responsive followed by indexes, brand pages and the homepage.
I designed modular components alongside developers in a living style guide. This seemed like quite a lot of work upfront but massively paid off as it helped us shift pace mid-way through the project and made things super consistent.
Layouts were stress tested and pages were designed for over 100 unique brands. I came up with a system that would work well with differing visual styles and allowed editorial teams to easily put them together whilst still feeling part of CBeebies.
I carried out lab based user research dozens of times across the project to ensure what I was creating worked for both children and parents. I was also able to regularly test designs in primary schools with a full class of students.
As this was being developed as a single codebase, I had to design CBBC at the same time.
