Mark Boulton

Al Jazeera

Four continents. Five languages. A global design system.

Al Jazeera is one of the world's leading international news networks. Originally a single channel: Al Jazeera Arabic, and the companion website, aljazeera.net, Al Jazeera launched Al Jazeera English and, with the advent of the Arab Spring, became the voice and platform of a generation.

The brief to me from Al Jazeera was to create an engaging design system and user experience, in collaboration with agency Lambie Nairn, Al Jazeera's in-house broadcast design team, and the editorial staff and stakeholders.

The designs of the new platforms had to reflect:

  • A dynamic, young organisation with resolute editorial guidelines.
  • How people consumed and engaged with the news
  • Increasing participation by young people in the Middle East in politics and provide a platform to do it.

The delivery team and I started by focussing on the user research; trying to understand the various audiences that consumer and engage with Al Jazeera and why they do.

Role

  • Creative Director

Services

  • Design Leadership
  • Strategy
  • Design system and tooling
  • Information architecture
  • Web design

How people consume news

We spoke to hundreds of people across the various regions and markets. From locals who have watched the channel, and sued the website, since its inception, to new users in the United States. From this extensive piece of work, we collected insights. I was particularly interested in how people consumed the news. Having an inkling from my time working at the BBC, I suspected the same bias existed at Al Jazeera; there was a disconnect between the editors and the users.

Journalists like stories. They have a beginning, a middle, and an end. For some users, they like stories like this, too. A comfortable read to take your time over. This is a place where a writer can wield their craft to the greatest effect. However, what I saw at the BBC, and in the research insights, was that most users do not engage with the news that way. Especially from Al Jazeera.

Users expected the truth from Al Jazeera. That's mostly why they visited. But, largely, they read many news stories and formed opinions on the subjects by forming their representation of what was happening. Because news isn't single pieces of content. It's many, many touchpoints of content forming into an impression of the story. True, a journalists long-form piece can inform this story, but it is but a piece of the puzzle. This is why, our new information architecture was built on two driving motivations for users: topics and recency.

Beware the hosepipe

A global news organisation produces a lot of content. Especially a broadcaster with an award winning website. News also happens quickly and with topics and time at the centre of our proposed user experience, we had to be careful in how we asked users to traverse it.

We experimented with different mechanisms of filtering. Putting the control into the user's hands of how and what they consume. Of course, we thought this was useful and prototypes initially tested well, but when we broadened them out to larger amounts of users for feedback, the idea started to crumble. Not because of usability issues, or any perceived usefulness, but as well as coming to Al Jazeera for the truth, they also wanted Al Jazeera to *provide* what was relevant. The curation of the news is as important as the news itself.

The project was developed mobile-first with a focus on imagery and supportive typography.

Empowering editors

When we reached the point of starting to look at the designs for the new system, we conducted a large scale internal audit of the CMS and how people were using it. It's no good creating an all-singing-all-dancing fancy design system if the technology did not enable the user to do what they wanted.

The insights were enlightening. Journalists were figuring out ways to hack around with the CMS and templates to create ever more bespoke layouts to meet the needs of the content and their users. Of course, this was creating many technical problems and hampering content reuse in particular. We needed to address this. The system – both on back and front ends – had to accommodate journalists needs to combine content with some design.

We accomplished this in a few ways:

  • Non-siloed content. We needed to coach the journalists through the process of them appreciating their content was not a silo. It was connected, via topics and time, to other content.
  • We provided template variants. Trying to avoid branded content – which can be a terrible burden for an in-house team – we focussed on providing a minimal set of templates which could be switched on or off depending on the needs of the journalists.
  • We also worked on providing component variants. When there was a particular breaking news story, we could provide mechanisms for the delivery of that.
  • Rich, editorial experience. By baking these changes into the CMS itself, we ensured we didn't get any degradation of the system by the journalists changing things. Providing guard rails can be empowering.
Al Jazeera Arabic. One system was rolled out across four markets.

A design system for four languages, four continents, many channels

The new design system was produced in collaboration with branding and broadcast designers. First, with Lambie Nairn in London, and then later on with Huge in New York.

The task at hand was daunting. One of the first responsive design systems to be launched in four markets and languages (English, Arabic, Turkish, Balkans). Later would come Al Jazeera America.

My main focus was insuring a consistent brand experience across all outputs. As Creative Director on the project, it was critical the integrity of the system was upheld as it was integrated into technical systems. This involved coordinating across nearly a hundred people split between four delivery teams and five time-zones.

A pattern library was developed for all patterns across mobile, app, and desktop.

Elsewhere