Newsround
Migrating Newsround’s website to the BBC’s new tech platform and design system, alongside migration we had to refine the BBC’s brand architecture.
Role
Lead designer
Employer
BBC
Areas
Strategy, design, research, stakeholder management
Platform
Web (Responsive)
Newsround’s migrated homepage
Previously, the BBC’s Web products had used multiple different tech platforms and no single design system. This made making changes slow and costly. It also resulted in a lack of visual identity & consistency for the wider BBC brand.
Newsround was the first of the BBC’s children’s products to migrate to the BBC’s new tech platform & design system. It would also be the first product to ask questions of the brand architecture and suitability of the available UI for our younger audience.
It also meant Newsround would be the first to take advantage of the improved performance, accessibility, data insights and access to shared capabilities the single design system would provide.
I was excited to see Newsround lead the way into migration for Children’s products - while also knowing it would be a difficult challenge with many constraints and considerations.
Background
Previous mobile designs
Previous desktop design
Working within the double diamond structure, I was pragmatic enough to appreciate not all UX processes would be required here. The discovery phase was used to identify the scope of the project quickly. Analysing the existing data, previous design decisions and establishing relationships with multiple stakeholders.
My main challenge was satisfying numerous stakeholders at once — our editorial, brand, product teams, and of course, the end user. To find solutions we worked very closely with each group of stakeholders ensuring all their requirements where met and best practice applied.
The final designs adopted purely shared UI components, providing a holistic BBC experience. The focus was using UI components new to Newsround to meet the project goals, elevating certain users journeys, while using familiar UI patterns in other areas of the product to remain consistent.
Approach
A UI gap analysis helped to identify the scope of the project
Ideation sketches, exploring potential solutions
Lo-fi & hi-res wireframes enabled me to quickly present ideas and generate buy-in from stakeholders
Newsround’s migrated mobile website
Newsround’s migrated desktop homepage
Pre-launch we worked closely with our colleagues in data analytics to create a dashboard monitoring pre & post launch data. The results showed an increase in all metrics, meeting the project goals.
Due to time pressure upfront user research wasn’t possible. As part of the deliver phase, I documented all the design changes noted levels of risk and pushed for post-launch user testing. Research was conducted to validate the design changes and brand perception within local schools.
Impact
+25%
Increase in page performance & accessibility; provided users with quicker page loading, less errors and a higher standard of accessibility.
+5%
Increase in “Watch Newsround” bulletin views;
meant the products key user journey was improved.
+20%
Increase in British Sign Language bulletin views; meant that awareness of & access to accessible content was improved for users.
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.
