Wendy Xiuwen Chen

Live page replatform for BBC News World Service

The MVP version has gone live in a couple of services, like BBC Burmese, BBC Igbo and BBC Urdu etc.

year 04/2023 to present
why in house works
type UI/UX design

Overview


Background

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.

As UX, we are assisting the team in introducing the Public Service Live page experience and feature to the World Service while also adapting to the needs of our users and market groups. This is an ongoing project, and our team is still working on it. We plan to allow the Editorial team to test the experience in February 2024.

Role and responsibilities
I joined this project as a supporter for my senior Emily A at the beginning, but I started leading it after she rotated out from our team since September, 2023, which include project planning, discovery, design and deliver.

Difference between World Service and UK Public Service

Before starting the project, we did an audit to understand the difference between World Service and Public Service. Although both services have editorial teams as users, there are still some differences to conside:

Different break points and grid: For instance, World Service has smaller screen sizes (less than 239px) used by around 120,000 people per day, so we need to ensure that their user experience is not compromised.
Different market needs and journalist user cases in World Service, which means that some services have limited editorial resources and cannot have as many live pages on different events. In some cases, the editorial team uses the live page as a daily update page.
More accessibility concerns are based on multiple languages and cultures since World Service has 41 language services with different fonts, cultures, and reading behaviours. Hence, we need to ensure that our design works for all our audience.

Content

In this project, I will share my design thinking and process of two components, which are Live image header and post stream component.




Component 01: 
Live image header

Context



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.

Reason and design discovery



For user needs, we knew there is needs from our Indian archetypes for engaging visual, delightful imagery, immersive, infographics. Live header with image is existed in public service as well. So, for me as a UX designer, is more looking for a suitable components and define stages of improvement for this component.

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 proposed the Billboard experience for the next step when implementing media.






UX / accessibility review


I shared the initial design with our team and accessibility champions in our team, which brought us some questions and challenges:




Challenge 1: Image cropping concern for editorial

How I approach it:

I spoke to UX designer Katie B and Jake V in public service team to understand what’s the most updated approach in 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 on using image as decorative element as the majority of our Live page are daily update page, therefore the image won’t be always related to the posts on the page.
Testing - Right to left version
Testing - Left to right version


Challenge 3: When building up the component, we found out there is some text overlapping 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


Deliver

  • Refine design for different user cases and languages
  • Preparing handoff file
  • Future thinking
  • UX design review
  • Shared design in sprint review with product team and stakeholders
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. 


Component 02: Post stream

Problem Statement

When bringing in public service design for post stream, copies length in different language services for “Breaking news” and time stamps are various, and some are long. The current design in public service did not include this cases for the feature phone (Breakpoint 0-239px). We need to make sure experience work well across our breakpoints, and still matching the BBC brand.

Discovery


Gathered world service copy examples for “breaking news” and how long they would be in different services.
Catch up with editorial team and product team to understand how they use different labels, including ”breaking” and “new”; define priority for MVP

Talk to our business analyst to understand timestamp logic in world service.


Explore new design approaches

By understanding world service needs from different conversation, I decided to divide label into 2 lines for Breakpoint 0-239px, time stamp and breaking new, which will to avoid misorder problem risk, same logic will apply to other break points if there are too many text.

I mocked up some options with different languages for the smallest breakpoint as it’s the key concern for us. I shared them with our UX team to get feedbacks and we made decision on the option 3 as the spacings remain the best balance for the text.



Deliver

While delivering final design and specs to the product team, I set up a documentation to help engineers understand how the post label logics works.
I also host the UX/Accessibility session with our Accessibility lead and champions, to check the screen reader UX I wrote are all correct for our audience. Although I am the UX designer in this project, I tried to understand how the screen reader UX works by coding different roles up in HTML so I can test them before it get built.


Other challenges and how I approach them


This component was built with all different process we went thought with our team, and as the main component for the Live page, it help the product team and editorial team to visualise and understand how the new Live page will look like and how can they work with it later, which is a big move for this project.

Some corss-team effort and impact also happened when I was delivering the project. There is a chance that Sometimes editorial team publish page without any opening post and some users might. Page with no opening post might make user feel the page is broken or not loading. Therefore, I also work with Lauren S (UX Architect & Content design supporter) to draft some opening post templates and propose them with Kevin B, UX designer for Tipo so he knew there is some improvement they could do for the digital publishing platform.
↑
Default template for editorial team; also suggest to the editorial team on not publishing the page before the first post.

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 page went live in Febuary 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, like BBC Burmese, BBC Igbo and BBC Urdu etc.



Current Live page example on BBC Burmese

Current Live page example on BBC Arabic



Traffic during Indian election


This new Live page not just brought editorial more options to visualise their new stories, more importantly, it offered great help during the 2024 Indian election period, which drove good traffic to our five main services in India, including BBC Hindi, Marathi, Telugu, Tamil and Punjabi.