Wendy Xiuwen Chen

Why did we introduce this component?
Along the lines of preparing the header work for the next quarter, we started looking at how can we bring image into the header, so that editorial can have an option to make the Live page more engaging for our audience. 
Limited by engineer capacity and MVP timeline, UX need to explore balance between user business needs, and come up with the most appropriate approach for this
Our Indian archetypes research shows us our users like engaging visual, delightful imagery, immersive, infographics.

Potential approaches
I stared gathering information for existing header component in public service, understand use case and limitations for world service - Topic header, Billboard.
Billboard component
Topic header component

Initial design adaptations for World Service

I tried both Topic header and Billboard component from Webcore and review it with our UX team. 

We decided 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.

Problem solving

I shared the initial design with our team and accessibility champions in one of our UX / accessibility review, which brought us some questions and challenges. Here are some of the examples:
Challenge 1: Image cropping concern for editorial


How I approach it:
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.




Challenge 2: Image role here for accessibility - should we add alt text to it?

How I approach it:

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.

Challenge 3: Text overlap accessibility issues for breakpoint 1008px when user zoom in
 How I approach it:
Work with our engineer 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


Delivery, 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” 
✍️
from BBC World Service 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 a couple of services, including BBC Burmese, BBC Igbo and BBC Urdu.
Current Live page example on BBC Burmese

Current Live page example on BBC Arabic

Continuious value this work brought

Drove high traffic for Indian election 2024


“We provided live pages in six Indian languages, one South Asian language (Bengali), and English. Remarkably, the Hindi page alone received over 600,000 views in a single day.”
🇮🇳✍️
from BBC Indian editorial teams


The new Live page not only provided the editorial team with more options to visualise their stories but also played a crucial role during the 2024 Indian election period. 

It significantly boosted traffic to our language services in India, including BBC Hindi, Marathi, Telugu, Tamil, and Punjabi. 

Here are some detailed data collected from the live event pages during the Indian election period between May and June:
Billboard component
“Our Persian service have started using it today in their coverage of events surrounding the death of their President. Traffic is up around +450% from a regular day, with 78% of those coming to us on a mobile and the component is seeing about a 20% click rate! A huge day in terms of numbers and providing trusted news in native languages around the world.”
👨‍💻
from BBC World Service PM


As mentioned earlier, the live event header work provided a solid foundation for adapting it to the new Billboard component for the World Service front pages.

I led the adaptation, explored various use cases, and delivered it to our product team. This first iteration added significant value, becoming the first new feature available to 37 of the 40 language services recently migrated to the new Tipo platform, with a focus on supporting the upcoming Indian elections. 

We optimised for mobile-first (over 90% of traffic), supported 10 scripts including right-to-left, and required only one content item to start.


desktop
Mobile
OverviewResearchProblem solvingDelivery, impact & value