Wendy Xiuwen Chen

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.