Newsround moves to a new platform with a fresh design
Newsround was the first of the BBC’s children’s products to migrate to the BBC’s new tech platform & design system. Meaning it would be the first product to ask questions of the brand architecture and suitability of the available UI for our younger audience.
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.
Role
Lead product designer
Employer
BBC
Areas
Strategy, design, research, stakeholder management
Platform
Web (Responsive)
Newsround’s migrated homepage
The problem
The BBC’s digital products where hosted on various different tech platforms. Resulting in high running costs, limited product iterations and poor data insights. All of these factors created inconsistent user experiences across the BBC.
Migration to the BBC’s new tech platform and design system (WebCore) was required. Enabling improved performance, accessibility, data insights and access to shared capabilities.
All of these improvements would allow us to be more cost effective and importantly; test, learn and iterate quickly in order to provide more consistent & relevant user experiences.
Key metrics
Improve site performance & accessibility
Maintain traffic on popular user journeys
Improve traffic to British Sign Language content
Constraints
Deadline for switching off existing tech platforms
New, evolving design system & CMS tools
No scope for user research in discovery phase
My process
Building the picture
This project required me to be pragmatic and flexible. I had to apply critical thinking to what processes would be best suited given the constraints.
My discovery was focused on the analysing the existing website in order to gauge the scope of the work. I gathered all the existing data, user research and previous design documentation to build a clear understanding of the existing user experience.
I then focused on understanding technical capabilities and the new design system, also conducting a UI gap analysis. This was done early to provide the Product and Engineering teams with context of any blockers or issues we might face with the design system, in order to help us prioritise.
At this stage I also engaged with senior stakeholders, this helped me to build requirements and establish relationships that would become pivotal later in the project.
Previous Newsround designs
Turning problems into opportunities
Having now clearly outlined the business and user problems, I chose to reframe them into opportunities using the How Might We process. This design thinking technique allowed me to quickly write open questions that would provide the stimulus for solution ideation.
The reason I chose this method was it would allow me to move quickly and consider several solutions before committing to visual designing anything. It also enabled me to work in the open and share my thinking with other disciplines, using a feasibility matrix to realistically prioritise the solutions.
Once the designs had been iterated based on feedback, high fidelity designs where created and shared with all stakeholders to generate buy-in. These versions would also form the basis of the guidelines produced for Editorial colleagues to implement.
At this stage of the project it was clear that there would be some big visual changes to key user journeys. I proposed to Product owners that post-launch user research was conducted in order to validate the design changes.
As I wrote the research plan, I also supported Engineering and Editorial colleagues with implementation of the designs.
Ideation sketches, exploring potential solutions
Reimagining Newsround
As any final designs would be using existing UI components the focus of my designs was sketches and low fidelity wireframes, this approach enabled me to continue working quickly and openly.
What was important at this stage was to work closely with the Editorial stakeholders and our team’s Business Analyst to understand the Editorial workflows that would ultimately populate the final designs.
The wireframes where also shared with Product and Engineering leads in order to collect feedback, gauge effort, spike work and ultimately influence the Product roadmap.
Lo-fi & hi-res wireframes enabled me to quickly present ideas and generate buy-in from stakeholders
Validating the designs
Working closely with our design research team to write the conversation guide, I facilitated interviews as we looked to validate design changes to key user journeys.
Face to face moderated interviews where conducted. After warm up activities to build rapport and establish familiarity with Newsround, participants were asked to explore the Newshound website naturally while being prompted to complete tasks using the website and answer exploratory questions.
The design changes that would impact the key metrics of ‘Watch Newsround’ and the ‘BSL bulletin’ were successfully validated. We also gained valuable user insights that we added to our Product backlog and iterate on, such as navigating ‘home’ and browsing content.
User testing to validate design decisions
Outcomes
A relevant user experience
Using data to elevate the key user journeys and remove the unused features, we were able to create an experience relevant to users.
Improved site performance
Improved page loading and accessibility gained from migration would provide users with a quick, trusted service.
A brighter present & future
Using the BBC design system provides Newsround with access to a broader range of UI components, not only today but also in the future. Enabling Editorial teams to be responsive to changing users needs.
Newsround’s migrated mobile website
Metrics
Pre-launch I worked closely with my 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.
+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.
Reflections
By leading the UX design for this project, I had the opportunity to learn many things and to continue to improve as a designer.
Back-end systems & workflows
Taking time to understand back-end systems & workflows early will save time in the long run.
User advocacy & generating buy-in
Standing up for users when it would have been easier not to, by presenting clear and considered designs based on data/insights.
Flexibility & pragmatism in design
Being pragmatic with design decisions under time pressure allowed me to meet both business & user needs.
Want to see 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.
