Wendy Xiuwen Chen
UX designer at BBC, based in London, UK
CV Email

Live page replatform for BBC News World Service



Intro

As part of our Objectives and Key Results in the product team, we are aiming to deliver the MVP version of the Live page. The Editorial team is currently in the process of migrating from their old publication platform to the updated one, called Tipo.

In this project, I'll walk you through my design thinking process, detailing how I approach and solve challenges, and collaborate with our team using the image header component.



Project type and timeline
Product design, 03/2023 to 04/2024


Product
Our first MVP launched in February 2024 across different BBC World Service sites, like BBC Burmese, BBC Igbo and BBC Urdu etc.


My role
In this project, I worked as an UX lead, assisting the team in introducing the Public Service Live page experience and features to the World Service while also adapting to the needs of our users and market groups.


Skills
Research analysis, Product design, Prototyping, Stakeholder management

What’s the Image header component?
The World Service Live image header is a customised version of the Topic header that the BBC UK sites are using now, which allows us to put an image into our Live page header and bring more visual engagement to our audience.

Why did we introduce this component?
We considered both user needs and the requirements and production processes of journalists.

 
User needs
Our Indian archetypes research shows us our users like engaging visual, delightful imagery, immersive, infographics.

Business and product needs
As we prepare for next quarter’s header updates, we're exploring ways to incorporate images, allowing editorial to make the Live page more engaging. Given engineering capacity and MVP timelines, UX must balance user and business needs to find the best approach.





Design discovery
Given our tight product development timeline, not all projects begin with wireframes. To kick off the design exploration, I identified two existing BBC UK header components: the Topic header and the Billboard.
Billboard component
Topic header component

Then, some initial design adaptation for World service
I tried both apparoaches and decided with our UX team to pick the Live topic header, as it’s less complicated to build regarding timelines and I proposed the Billboard experience for the next step when implementing media.

The design also brought us some questions and challenges...

How might we help the editorial team handle image cropping issues more effectively?


I spoke to otehr UX designers in BBC public service team to understand what’s the most updated approach in UK version Live page and article page, which were some great learning from them.

The 16:9 image ratio is the most common ratio that editorials have, so for MVP we will use the 16:9 image ratio in the design. We will also provide an option for the editorial to turn off the image and use the text header in case they can’t find the best image in a short time.

How might we make images accessible and relevant to our audience?


Agreed with the team to use image here as decorative element as the majority of our Live pages are daily update pages, therefore the image won’t be always related to the posts on the page.

How might we address text overlap accessibility issues at the 1008px breakpoint when users zoom in?

Work with our engineers to test different approaches, like reducing text width and testing different amounts of text and languages

Discuss with other UX designers in the team and we decided to prioritise readibility over image cropping concern
Before
After





Define and design delivery
For delivery, to help our engineers during development, I outlined different user scenarios and languages design for this component. This includes support for both left-to-right (Hausa) and right-to-left (Arabic) scripts, as well as clear specs and screen reader UX documentation.

Additionally, I developed guidelines with best practices to help the BBC editorial team ensure proper use of the component.




Impact & value

This component built up understanding for both UX and product to understand the amount of work for the image header. Helping UX spread impact and reduce the gaps between the product and editorial teams is a goal for the UX team and myself.

When sharing the work with the product team and editorial team, it also helps the team understand what the UX journey looks like, which is beneficial for the collaboration in the future. It’s also a good preparation for me and the team to look into the Billboard component experience as we have planned this into the roadmap for the World Service front page in the coming months.




Feedback and outcomes


“The team are really happy with the design. They find it better looking than old live pages”, BBC World Service Burmese editorial team

Our first new platform-powered Live event page went live in February this year in Language Burmese, and the feedback we received from our editorial team about the page was very positive. The MVP version has now gone live in most of our services, including BBC Burmese, BBC Hindi and BBC Hausa etc.

Current Live page example on BBC Burmese

Current Live page example on BBC Arabic