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.
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.
How might we help the editorial team handle image cropping issues more effectively?
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?
How might we address text overlap accessibility issues at the 1008px breakpoint when users zoom in?
Discuss with other UX designers in the team and we decided to prioritise readibility over image cropping concern
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
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