Bitesize migration
Migrating BBC Bitesize to a new tech platform, using shared capabilities and a new design system. Alongside the migration Bitesize underwent a rebrand adding to the complexity of the project.
Role
Lead designer
Employer
BBC
Areas
Strategy, design, stakeholder management
Platform
Web (Responsive)
Bitesize’s migrated website
The BBC was in the process of migrating it’s Web products to a new single tech platform & design system (WebCore). Bitesize was required to migrate 1000s of Index & Article pages that had been curated and essentially designed by Editorial teams.
Migrating existing content would enable the BBC to continue providing users with curriculum resources while providing a more flexible product and user experience in the future.
Alongside the BBC’s migration project, ran a project to rebrand Bitesize adding an extra layer of complexity to our work.
Background
Bitesize’s previous iteration of index pages
The discovery phase was used to identify the scope of the project and identify any opportunity to improve while migrating. Analysing any existing data, previous design decisions and establishing relationships with multiple stakeholders.
A site audit was carried out to establish the scale of any issues we faced. This documented problems with Navigation, Sign-posting, Component mis-use to name a few. The audit was shared early with Product and Editorial stakeholders to highlight the issues and also provide me with context behind some of the previous decisions. This was a hugely valuable step as it ensured buy-in from all stakeholders very early in the process.
Due to time pressure user research wasn’t possible and the previous website wasn’t tracked for data. This led me to focus on UX design principles, improving the experience with established methods. Once launched, we could validate the design decisions and iterate.
Once we had identified the main problems and developed solutions in the define & develop stages respectively. The final solutions being adopting shared components to provide better functionality to users and importantly providing guidelines for Editorial colleagues, allowing them to curate pages in a consistent and user focused manner.
Approach
An example of the site audit conducted to gauge the problems we faced
A feasibility matrix was used to organise potential solutions
Lo-fi wireframes enabled me to illustrate how using UI components from the new design system would allow us to improve the user experience
Lo-fi wireframes enabled me to quickly present ideas and generate buy-in from stakeholders
Design guidelines provided to Editorial colleagues
Bitesize’s migrated mobile website
A lack of previous data meant, improvement metrics were hard to measure. Success was measured in how the migration would allow Bitesize to quickly respond to user needs in the future by using shared capabilities and improved data.
Impact
+2%
Increase to SEO performance; meant users could continue to access Bitesize content via search at key points in their education.
+25%
Increase in page performance & accessibility; provided users with quicker page loading, less errors and a higher standard of accessibility.
Want to hear more?
This case study is simply a snapshot of the work. If you would like to hear more about my processes, thinking and the challenges, please get in touch.
