BBC World Service News
Designing for all languages across the world
Role
Working with a team of other UX/UI designers, each owning their own components. With my components, I lead on gathering requirements, ideation generation, guerilla testing, stress testing and pairing with the developer.
Tools & Platform
Main tool of choice was Sketch, while using Proto.io for prototyping and testing, Dropbox paper to plan out task list and Zeplin for pairing with our developers.
This was a Responsive web project.
Project Length
This project lasted a year long but for my components they took:
TV bulletin: 3 weeks
Navigation: 5 weeks
Max top story promo: 4 weeks
from brief, ideation, research, guerilla testing and visual design.
Background
World Service’s main objective at the time was to migrate our 42 websites off our old platforms and move them onto AWS. This would provide us with the necessary foundation to ensure our websites are running quickly and efficiently around the world.
Goal
As the websites had to be rebuilt, it was the perfect opportunity for us to update, change and improve our existing designs and components.
My components
The three main components I owned and worked on were the following - the images shown left to right and right to left services to illustrate the flexibility my designs required.
TV Bulletin
Used whenever a service has live or on demand television.
Navigation
One level navigation allowing our users to access via a hamburger menu or scrollable container.
Top Story Max
This is when a story requires more than just top story treatment e.g. royal weddings.
Let’s take a deep dive on one of the components.
Issues with the previous navigation
01. There are 3 different modes of navigation.
02. The menu takes over the content and blends in with the footer, users lose context to where they are.
03. Users are confused about english labels linking to UK news pages when in an international page
Challenge
Create an accessible navigation which exposes our content and clearly signposts the user’s location, while being flexible enough to cater to multiple nav items (from 3 nav items to 19).
High level process
01. Competitive Analysis
As we design for an international audience with differing languages, I started off looking at other news providers from around the world to understand things such as:
Are there any limitations with certain scripts/languages
Similarities and differences between countries
Quantity of navigation items
Menu behaviour
02. Ideation
After identifying common themes across different languages, I was able to create 3 potential concepts that would work for our audience. I went straight to low fidelity mock ups as it wouldn’t be quicker to sketch in this instance as I already had a rough idea on mechanisms.
03. Built prototype
After having an initial conversation with the developers, I was able to rule out one option and focus on two that were achievable and worth testing.
My go to prototyping tool at the time was Proto.io
04. Guerilla testing
As our users are all around the world, we do not have the opportunity to test with them with ease or as frequently as we like - That is were Guerrilla testing comes into play. With the two prototypes, I went into a few cafes on Regent street and tested with 8 people, giving them 3 tasks each.
05. Visual Design & Stress testing
From the testing, there was a clear winner (concept 2) which we decide to progress with.
Next we move to stress testing as its a key part of the design process, especially for world service. In the above examples, we are stress testing different scripts to ensure the solution works across the board and the solution is scalable for all our sites.
06. Accessibility
The whole of the BBC aims to make all products WCAG compliant at least AA and above. Some examples of things covered within World Service News have been colour contrast, reduced motion, no javascript, ARIA labelling and tabbing ordering (as seen above).
07. Pairing with developers
Once our designs are signed off, we create variations of the designs at different breakpoints with annotations and further information, which supports the build. These specifications will be put on Zeplin, with regular UX/Dev reviews throughout the build.
08. Desktop exploration
80% of our users are mobile based so the scope of this work was only for mobile, but I wanted to explore how this solution could translate to desktop - which also works.