Config 2024: Redesigning BBC.com: crafting a connected, contextual, and global experience

Summary

Sam Drew and Laura Wellen from BBC Studios discuss the monumental task of redesigning bbc.com for a global audience. They share the challenges and solutions encountered in creating a coherent, sophisticated user experience that reflects the BBC's mission as a global public service broadcaster, emphasizing the importance of storytelling, design system scalability, and cross-cultural communication.

Takeaways

• 🌐 The BBC is undertaking a redesign of its news website, bbc.com, to better serve a global audience and maintain its role as the world's first global public service broadcaster.
• 🔄 The redesign is a response to the realization that international audiences may not have the same association with the BBC brand as those in the UK, highlighting the need for a more globally relevant approach.
• 🏢 The project involves collaboration between a small, nimble design team distributed across the US and the UK, working within a large, established organization.
• 📈 The redesign process emphasized the importance of scalability, reusability, adaptability, and context sensitivity in design to accommodate the ever-evolving nature of digital content.
• 🤝 The team employed an inclusive approach, opening up concept storming sessions to a wide range of stakeholders to ensure diverse perspectives were considered in the early stages of the project.
• 🗣️ Language and communication presented unique challenges due to cultural nuances and the need for clarity in both team operations and audience communication.
• 🛠️ A high-fidelity prototype was crucial for gaining initial buy-in, illustrating the vision, and securing funding, despite not resembling the final product.
• 📝 The project required a meticulous and adaptable design process that evolved to include additional checkpoints and a more complex workflow to manage increasing complexity.
• 🧠 The design system was built around a series of components and content cards, allowing for a flexible storytelling approach that could adapt to different levels of prominence and urgency in news delivery.
• 🌐 The naming convention for the design system and editorial CMS was simplified using non-technical, easy-to-remember names inspired by US states and UK cities to aid clarity and cross-cultural understanding.
• 🔄 The project leveraged digital tools like Figma for prototyping, which served as a 'living' prototype that evolved with the project and provided a reference point for various stakeholders.

Q & A

Who are Sam Drew and Laura Wellen, and what roles do they play in the redesign of BBC's news website?

Sam Drew is the UX Director at UIC Digital, and Laura Wellen is the Creative Director of Digital News and Streaming at BBC Studios. They were responsible for leading the redesign and rebranding of bbc.com for a global audience.

What was the main challenge faced by the BBC in redesigning their news website for a global audience?

The main challenge was to create a platform that brings trusted, unbiased news and factual content to a wider audience in a more relevant and powerful way, while also overcoming the fragmented and inconsistent user experience that had developed over time.

How did the BBC address the issue of having a fragmented and inconsistent user experience on their website?

The BBC addressed this by recognizing the need for a more intentional approach to their international endeavors. They aimed to create a new, coherent, consistent, and sophisticated experience for bbc.com and its app.

What was the significance of the design team's small size in the project?

The small size of the design team allowed for nimble decision-making and quick adaptation of changes across different platforms. It also facilitated efficient communication and collaboration, despite the team being distributed across different geographies.

How did the design team ensure that their design decisions were relevant for a global audience?

The team ensured relevance by conducting concept storming sessions open to a wide range of stakeholders, testing ideas with both seasoned BBC users and complete newbies, and being mindful of the language used in the UX writing to avoid regional nuances.

What was the role of high-fidelity prototyping in the early stages of the redesign project?

High-fidelity prototyping played a crucial role in illustrating the functionality and design thinking to stakeholders, obtaining early user feedback, and securing funding for the project. It helped reassure stakeholders that the project was moving in the right direction.

How did the design team manage the complexity of the project as it evolved?

The team evolved their design process to include more checkpoints and organized their work into a more complex process diagram. This ensured that important requirements were not misplaced and that nothing slipped through the cracks.

What approach did the BBC take in naming the collections of content cards for their new design system?

The BBC named the collections of content cards after US states and individual content cards after UK cities, towns, and counties. This non-technical naming convention made it easier to keep track of the various components and facilitated cross-cultural understanding.

How did the design team address the issue of time zone differences affecting their ability to collaborate?

The team used various digital communication platforms and leveraged the time zone differences by leaving comments and feedback on designs that could be actioned by the other team during their working hours, thus making the most of the limited overlap in working times.

What was the significance of the 'diamond prototype' in the development of the new BBC website?

The 'diamond prototype' was a living, breathing, fully interactive prototype that served as a source of truth for the design team, ad sales team, senior stakeholders, and developers. It allowed them to visualize and test how newly designed components would fit into the wider context of the site or app.

How did the BBC ensure that their redesigned website maintained a consistent look and feel while also being adaptable to different types of content?

The BBC designed a series of content cards with various design treatments that allowed for flexibility in storytelling. They arranged these cards in content templates to set the context for each story, ensuring a consistent look and feel while also allowing for adaptability to different content types and priorities.

Outlines

00:00

🌏 Global Redesign of BBC's News Platform

Sam Drew and Laura Wellen, from UIC Digital and BBC Studios respectively, discuss the monumental task of redesigning bbc.com for a global audience. They highlight the BBC's mission as the world's first global public service broadcaster and the importance of delivering unbiased news during a time when democracy is at stake. The challenge of condensing years of work into a 20-minute presentation is mentioned, along with the need to understand the differences between international and UK audiences. The BBC's history and its evolution in online content delivery are outlined, emphasizing the shift from a UK-centric approach to a more globally inclusive one.

05:01

🛠️ Collaborative Design Challenges and Solutions

The speakers delve into the challenges faced during the redesign project, such as collaboration across continents and time zones, managing a large number of stakeholders, and the exponential growth of the design system. They discuss the importance of treating the project as a series of challenges rather than mere deliverables. The concept of 'concept storming sessions' is introduced, where a wide range of BBC staff contributed ideas for the new product. High-fidelity prototypes were used not only for design illustration but also for strategic decision-making and early user feedback. The small but agile design team's structure and the use of various digital tools for effective collaboration are highlighted, along with the unconventional challenges posed by a globally distributed team.

10:03

🌐 Adapting Design for a Global Audience

The paragraph focuses on the evolution of the design process as the project progressed from big-picture thinking to granular details. The team's shift to a more complex design process is detailed, which included additional checkpoints to prevent oversights. The importance of designing for adaptability, scalability, and context sensitivity in a constantly evolving digital content landscape is emphasized. The design decisions that led to the creation of a flexible card system for content representation are discussed, allowing for a range of storytelling weights and prominence. The use of US states and UK cities for naming design components to simplify the organization and aid in cross-cultural understanding is also mentioned.

15:05

🗣️ Language Nuances and the Importance of Clear Communication

The final paragraph addresses the cultural and linguistic nuances that the team had to navigate, both in terms of internal communication and in ensuring the UX writing was accessible to a global audience. The challenges of date formatting and translating British English into a form that resonates with an international audience are highlighted. The paragraph also underscores the role of Figma in creating a 'diamond prototype' that served as a living, interactive representation of the product, useful for various teams within the organization, from design to ad sales and senior stakeholders.

Keywords

💡UX Director

UX Director stands for User Experience Director, a role that focuses on the overall user experience of a product or service. In the video, Sam Drew, as the UX Director at UIC digital, is involved in the redesign of bbc.com, ensuring that the website provides a coherent and user-friendly experience to a global audience.

💡Creative Director

A Creative Director is responsible for overseeing the creative aspects of a project or company. Laura Wellen, the Creative Director of digital news and streaming at BBC Studios, plays a key role in the redesign process of the BBC website, aiming to enhance its storytelling for a global audience.

💡Global Audience

The term 'global audience' refers to the worldwide viewers or users of media content. The script emphasizes the importance of redesigning bbc.com to cater to this diverse group, ensuring that the news platform remains relevant and accessible to people from different cultures and backgrounds.

💡Rebranding

Rebranding is the process of changing the existing brand identity of a company or product. In the context of the video, rebranding bbc.com involves not only redesigning its visual elements but also ensuring that the brand's message and values resonate with an international audience.

💡Design System

A design system is a set of reusable design elements that ensure consistency across a product or service. The script mentions the creation of a design system for bbc.com, which is crucial for maintaining a coherent look and feel as the website evolves and expands.

💡Content Cards

Content cards are modular design elements used to display information in a structured and visually appealing way. The video discusses the use of content cards on bbc.com to provide a flexible system for editors to create a hierarchy and pacing in their storytelling.

💡CMS Platforms

CMS stands for Content Management System, a software application used to create and manage digital content. The script points out that bbc.com previously used nine different CMS platforms, which contributed to a fragmented user experience, and the redesign aimed to streamline this.

💡Prototyping

Prototyping is the creation of a sample or model of a product to test and demonstrate its design and functionality. In the video, high-fidelity prototyping was essential for the bbc.com redesign, helping to visualize the new design and gain stakeholder approval.

💡Strategic Thinking

Strategic thinking involves setting goals and developing plans to achieve them. The video highlights the importance of strategic thinking in the redesign process, as it was not just about applying a new design but also about shaping the foundational thinking of the product.

💡MVP (Minimum Viable Product)

MVP refers to a version of a product with just enough features to satisfy early customers and provide feedback for future development. The script mentions the MVP for bbc.com, indicating that the redesign started with a basic version that could be iterated upon based on user feedback and needs.

💡Storytelling

Storytelling is the art of telling stories to engage an audience. The BBC's mission, as mentioned in the video, includes being a global public service broadcaster, and the redesign of bbc.com aims to enhance the storytelling experience, making news content more engaging and relevant to a global audience.

Highlights

Sam Drew and Laura Wellen discuss the redesign of BBC's news website for a global audience.

BBC's mission as the first global public service broadcaster and its role in democracy.

The challenge of redesigning a platform to deliver trusted, unbiased news to a wider audience.

The evolution of BBC's online content delivery and the need for a rebrand to meet global standards.

Understanding the difference between the UK and international audiences' perceptions of the BBC brand.

The fragmented and inconsistent user experience of bbc.com prior to the redesign.

The strategic importance of a coherent and sophisticated bbc.com experience for global audiences.

Design team collaboration challenges due to geographical separation and time zone differences.

The use of concept storming sessions to gather ideas from a wide range of stakeholders.

The importance of high-fidelity prototyping in securing project funding and stakeholder buy-in.

Managing a small and nimble design team to ensure efficient decision-making and adaptation.

The introduction of a design manager to streamline administrative tasks and support the team.

The significance of clear and non-technical language in UX writing for a global audience.

The development of a scalable, reusable, and adaptable design system for bbc.com.

Naming conventions for design components to simplify the editorial and curation process.

The creation of a flexible card system for content representation and storytelling.

The use of content templates to set the context for stories and maintain consistent branding.

The importance of adapting the design process to avoid missing checkpoints and requirements.

The MVP product's reflection of the original design ambition to enhance storytelling for a global audience.

Transcripts

[Music]

thank you welcome my name is Sam Drew

I'm ux director at UIC digital and I'm

Laura Wellen creative director of

digital news and streaming at BBC

Studios Sam and I are here today to talk

to you about a tiny task we took on of

redesigning one of the world's largest

news websites for a global audience now

condensing the last two and a half years

into 20 minutes might seem like a

challenge in itself luckily though we

come from a long history of Storytelling

for those of you less familiar with who

the BBC is here's a little bit of

context Mr President pleasure to meet

you this border has become I'm highly

politicized the war in this area is

extremely

active the presence of international

media is rare

here these were the voices he felt were

unheard there's a new

king don't you feel an obligation or

Duty Humanity's approach is really not

working all they want is Unity cu

is one of the driving forces of

mankind um a very emotional statement

has just come through in

[Music]

fact so as you can see the BBC has a

wider Mission and purpose of being the

first Global public service broadcaster

and in a year where over two billion

people are going to be voting and you

might say democracy is at stake

redesigning a platform that brings

trusted unbiased news and factual

content to a wider audience in a more

relevant and Powerful way couldn't feel

like a more important brief or honestly

sometimes a bit of a daunting one so in

the UK the BBC has a long long history

of Storytelling over a hundred years in

fact but today we going to tell the

story of how we redesigned rebranded and

completely rebuilt from scratch bbc.com

for a global audience not just for those

in the

UK so as you can see from the variety of

design treatments here the way the BBC

has brought its content to audiences

online has evolved quite significantly

having launched .co.uk in

1997 um the audience the international

audiences have received quite periodic

exports of very UK Centric websites all

of which have been designed for an

audience with a really deeply ingrained

relationship with the

BBC however as a British person that

lives in America I soon found that

International audiences don't

necessarily always have that association

with the brand that I do and

understanding that difference between an

international audience in the UK was

going to be crucial to the success of

this project so in the UK the BBC Is

Like Oxygen it's it's all around you you

just kind of absorb it you get

introduced to it at childhood and it

basically stays with you for the whole

of your

life but as I found having conversations

with friends in the US you often hear

things like oh the BBC that means the

World Service radio right or Oh you mean

that David atur guy and those

differences in perspective we really

starting to be reflected in our product

experience so up until 2022 and we took

on this product project International

audiences were receiving kind of an

alakar offering of our product

experience erience with slightly

mismatched dishes rather than a more

coherent elevated tasting menu

experience new sections had either been

inherited from. co.uk or been created

specifically for international audiences

and kind of just added on not

necessarily considering how it fit with

the rest of the product experience and

this as you can see basically led to a

whole load of different design

treatments a wide range of templates and

layouts we had quite inconsistent

branding different type of graphic

Styles we found out that we had we were

using S like nine different CMS

platforms to populate all of this and

ultimately it led to a fragmented

inconsistent user experience and quite

notably quite a confusing relationship

that the public had with the BBC brand

so you could say bbc.com had really

started to lose its

identity so it was time for a reset the

business recognized that we needed to be

more intentional about our International

Endeavors in order to achieve our wider

mission of being the world's first

public service broadcaster and this was

a really exciting opportunity for us to

help shape that Vision we knew we needed

to create a new coherent consistent and

sophisticated bbc.com and app

experience so the premise of this talk

is really just to look at some of the

challenges we fac on a project of this

scale how we solved them and importantly

what we learned along the way so firstly

how does a design team collaborate when

separated by three and a half thousand

miles and working in different time

zones how do we keep the hundreds and

there were hundred hundreds of

stakeholders up to speed with what we

were doing and importantly happy as a

design team how do we create and build

and then stay on top of a design system

that seems to be growing exponentially

with no sign of slowing down and how do

you take a fundamentally institutionally

British product and make design

decisions that make it relevant for a

global audience so where did we

start um well cont to what you might

think the design team working within

this highly Matrix kind of global

company we're very very small quite new

and we basically had to evolve how we're

working quite quickly um we joke that we

were like a little startup and this 100

year old Behemoth as as an organization

um so we really need to take steps open

up our creative thinking to enable us to

collaborate efficiently and really sell

our vision to those stakeholders and

ultimately the general

public I'm sure many of us are used to

operating as a creative team in a

corporate environment and often that

comes with being treated or maybe

perceived as a delivery commodity or

kind of service department well uniquely

for us we were actually at the beginning

of the reimagining of the business so

that meant we weren't just applying a

new design treatment to the product

experience but really intrinsic to the

Strategic thinking that helps shape the

foundational thinking of the products we

all know that designers are problem

solvers so a principle we applied

throughout the project and especially in

our briefing was to treat things as

challenges and not deliverables

so one thing was clear from the very

very start of the project we wanted to

hear everyone's voices everyone's

thoughts everyone's opinions so we

opened up what we called concept

storming sessions you can see behind me

and these were huge infinite boards open

to anyone product owners journalists

content Commissioners designers

development management everyone in

between and basically we just wanted to

hear everyone's ideas of what this

product could be those experiences we

felt had legs we would then put in front

of the public for testing and that would

ranged from kind of seasoned BBC users

right through to complete newbies who

had absolutely no idea who the BBC were

um and why was this important well it

meant that from the get-go the design

team weren't just working in a silo and

thinking alone and also it was very

important that we felt those people who

are going to be fundamental in bringing

this project together later on had their

voices heard at this very early

stage so having gone through that

arguably more fun part of the process um

intense ideation we really needed some

decisions to be able to move forward

with delivering a tangible product and

being able to start illustrating how

this actually might come to

life so you might think that a common

use of high high fidelity prototyping

was like nearing Handover in a design

process to illustrate to developers

functionality or kind of just

demonstrate thinking in design however

we needed something that would really

help us reimagine a complicated part of

this business coming to life we needed

to be able to demonstrate how this could

all come together to reassure our

stakeholders that the project was moving

in the right direction to get strategic

decisions on really complicated parts of

the project actually made to get some

early user feedback on some of those

initial design ideas and more

importantly obtain funding so this High

Fidelity prototype that you see helped

us get the project off the ground but

what's kind of interesting to note is it

actually looks nothing like our final

design decisions or MVP product you

might argue that we weren't doing a very

good job if it

did um so like our audience here today

like you guys um our design team was

distributed across different geographies

different disciplines and that came with

some predictable um results and also

some unconventional challenges um like

how Laura and I crafted this talk today

we use a wide range of tools and

Technologies and as did our design team

to basically ensure everyone could

produce their best work now for a

project of this magnitude as I mentioned

before our design team is actually

pretty tiny um and this was actually

quite

intentional you can see that we split

relatively evenly between the US and the

UK and we knew that having a kind of

bloated excessively large design team

was going to make going to mean things

like decision making was going to take

too long things would get lost in

translation lost in

communication the upshot of being quite

a small and Nimble team meant that

decisions made on one platform like web

for example could very quickly and

efficiently be um moved over to another

platform like mobile app and yeah it

kind of worked well but as the project

progressed this team makeup worked okay

but then as things got more complex as

more stakeholders are going to get being

involved we kind of really needed some

help so at that point we brought in a

design manager and they basically just

took care of all of the admin for the

design team and essentially enable the

design team to do what they did best

they they organize a meetings organize

sign off approvals that some sort of

thing and similarly and this is a common

theme through the project as we started

to get more into the details of the

components on the page we noticed that

the language that we were using really

became a focal point and British

terminology that Laura and I wouldn't

even think twice about using would make

absolutely no sense to an international

audience so at that point we brought in

a ux writer and we'll touch on that a

little bit later

on so given the distribution of our team

that's I'm mentioned with half the team

in London and half the team in New York

it was quite rare that we got to be in a

room together I think that only happened

maybe once or twice throughout the

entirety of the project however we're in

a post-pandemic world we're all used to

collaborating digitally and working

together on Zoom but the challenge we

faced was actually our time zones the

Practical work crossovers are only

really 3 hours and they often got filled

with meetings of more corporate

varieties so that meant it was really

tough to fit all of our creative

conversation and design chat into one

day and not least taking into account

that obviously Creative Energy doesn't

necessarily always fit into a 9 to5

window so as a team we generally use too

many platforms for our conversation

whether that's slack teams WhatsApp

email on sometimes even Instagram but we

really needed a space to be able to give

design Direction and feedback that was

really relevant to the work that the

team were doing so being able to comment

directly on designs gave us the

opportunity to feedback to the team and

ask questions on pieces of design work

that were really relevant and specific

and we could didn't get confusion around

which typographic style we were talking

about or which element of

functionality but mostly it actually

really made us able to make use of that

weird time zone crossover so I could

leave a comment in the early hours in

the in the early evening in the US and

the London design team had already

actioned it for when I woke up in the

morning they might tell you that further

facilitated my backseat

driving so you'd like to think after 2

and a half years on a project we would

have our design process fairly well

locked down but no that wasn't really

the case um you've probably seen design

process that looks something like this

or variation of this and and this has

served the digital design Community very

very well and it did for us to a certain

extent but as the project progressed and

as things got more complicated um

something was happening important

checkpoints were being missed uh

requirements being misplaced this is

especially true when we went from the

kind of big picture thinking like page

types of navigations to the much more

granular so we move to something that

looks more like this and you're probably

thinking this looks far too over

engineered way too complicated and to a

certain extent you'd be right

but the fact is we were actually doing

many of these steps before we just

simply weren't acknowledging them for

example the concepting workshop we

didn't need to have a concepting

workshop for every single design Sprint

but it meant just having it there as a

checkpoint meant if we did need it we

had plenty of time to get it organized

and get the right people in the room and

ultimately this kind of convoluted

process basically stops anything from

slipping through the cracks or basically

falling off the

radar so how did all of these principles

culminate in design decisions that

started to make up our MVP experience I

don't need to tell you that digital

content is constantly evolving and

moving but new especially is so rarely

static that we knew our product couldn't

be either we needed to design for a

world where we the way we told our

stories to users could adapt and flex

depending on the

context so we need to ensure that

whatever we were designing was scalable

reusable adaptable and probably most

importantly context sensitive at the

same time we need to be very very

conscious that we weren't just designing

for the consumers of the app and the

website but also an entire editorial and

curation team at the BBC as well as um

those into the commercial arm with

regards to ads and sponsorship so we

decided to build the product out of

basically a whole series of components

that allowed the curators to establish a

level of pace and hierarchy in their

storytelling we knew that stories would

need different levels of weight and

different levels of prominence so we

delivered these through a series of

content

cards so the variety of design treatment

we applied to these content cards

whether that was through size and scale

of typography or use and prominence of

imagery really gave us this flexible

card system which allowed us to

represent stories from the small scale

all the way through to the next big

breaking news piece and everything in

between all the time maintaining the

consistent look and feel we knew we

needed to keep build that association

with the wider

brand and those cards we arranged in a

series of content templates to really

set the context of that particular story

on the page and when you start adding

more content into there you can start to

see that kind of variety and hierarchy

come to life and then at a moment's

notice the whole thing can be

transformed when a breaking news story

hits everything else can be

deprioritized that new story can take

center stage and really this kind of

demonstrates how powerful this level of

flexibility can

be so how did we organize all of this

with now dozens of collections that

editors could choose from to build these

pages and templates we needed something

simple and memorable to stop this

getting confusing so so therefore the

collections of cards we named after US

states and this was an idea that we

applied both across the design system

but as well the editorial

CMS and all of those individual content

cards that make up those collections we

named after UK cities towns and counties

and this approach of using distinct easy

to remember non-technical naming

conventions meant it was really easy to

keep track of all of these through the

design and development process and as a

bonus really helped our kind of

cross-cultural geographic education as

well a little bit another C cultural

Quirk that we faced as a British

organization taking a product to a

global audience with our team

distributed across the US and the UK was

through language and communication now

that might seem a bit surprising right

because we all speak the same language

but there were nuances we had to

overcome in order to both operate

effectively as a team and also

communicate clearly to our

audiences even things are simple as

delivery dates became a challenge

because as I learned we write our dates

differently in the US to the UK so was

it due on the 4th of May or the 5th of

April on a lighter note even during

design discussions we often needed help

translating our Strange turn

phrase but more importantly in our ux

writing we needed to ensure our language

wasn't too nuanced and made sense to

that Global audience journalistically

and editorially we adopt British English

but in our functional and instructional

text we needed to be really careful that

we weren't being too joval or sarcastic

too Regional or God forbid overly

polite now Laura mentioned earlier how

important prototyping figma was at the

start of the project what continued to

prove invaluable and still does to this

day actually is the work stream to

create and maintain what we call the

diamond prototype and this kind of

living breathing fully interactive

prototype was basically created for all

devices That Grew and evolved from the

moment we had production ready assets um

this complex fully interactive showcase

is basically the source of Truth for so

many people for the design team it was a

great way to show how their newly

designed components would sit uh in The

Wider context of the site or the app the

ad sales team it was a great tool for

marketing ad and sponsorship spaces for

pages that hadn't even been built yet

for senior stakeholders it was a

fantastic way to represent the product

road map really being brought to life

and crucially from a developers

perspective it a fantastic visual

reference for all the dozens of cards

and collections we looked at

earlier now Sam and I could have taken a

very long time talking about every

aspect of delivering this massive

project and all the complexities and

complications that came with that

whether it was the fast turnaround times

and the wild deadlines we faced

navigating that complex globally

distributed team managing those

non-creative

stakeholders and arguably most

importantly building a huge yet

effective design system that's started

to make up our MVP product But

ultimately the products you see live

today do genuinely reflect our original

design ambition and that's to bring

great storytelling to in a more relevant

coherent and sophisticated way to a

global

audience and in true MVP fashion this is

really just the beginning of our design

ambition live is 5 4

3 this is BBC news the news headlines

this morning you are incredibly

influential

[Music]

why people are going to see what

happened

there in our connected world all news is

international everybody's got a story

The BBC's been granted exclusive access

content that comes closest to the red

line

[Music]