Al Jazeera

Celebrating its 25th anniversary in 2021, Al Jazeera is a leading news media outlet renowned for its coverage of major events. The 2006 launch of its English language service has increased the network’s profile and adoption as a key source of information and breaking news, and earned it recognition from organizations like Amnesty International, the Foreign Press Association, and the New York Film Festival, as well as Peabody, EMMY, and Webby awards.

The technology powering Al Jazeera, however, prevented significant growth and suppressed innovation, as the media network was split across multiple versions of Drupal, a custom in-house platform, and a customized third-party content management system (CMS). Led by a new Chief Technology Officer, Al Jazeera realized that continued innovation required a unified, secure, cost-effective, and flexible digital platform.

To achieve the organization’s 10-year dream of bringing all of its websites under one roof, introducing a dedicated home for podcasts, and launching the new AJ+ online news and current events channel, Al Jazeera’s CTO set out to implement a headless WordPress solution hosted with WordPress VIP. The ambitious goal required the assembly of a world-class engineering team with talent sourced from tech giants — and when it came to finding experienced WordPress talent, that meant engaging 10up.

Successful Staff Augmentation

In need of additional WordPress and React engineering talent to round out and accelerate their agile product team, Al Jazeera approached 10up, a WordPress VIP Gold Agency Partner, to discuss a staff augmentation partnership that would add another senior front-end engineer in their team. 

Embodying 10up’s client-first approach and commitment to world-class engineering, 10up’s engineer blended seamlessly into the Al Jazeera product team and Agile development workflow, prioritizing collaboration and empowering fellow team members to increase efficiency and do their best work. He stepped up to drive strategic discussions, teach others, and tackle any challenge presented in an open, synergetic way.

The initial staff augmentation partnership was so successful that Al Jazeera further leveraged 10up’s talent pool to embed an experienced, full-time senior product manager in support of the launch of the new unified content management system and manage and execute parallel initiatives that included:

• Designing and launching a prototype website for the AJ+ brand that targets a younger, ​​millennial audience and managing Subtext, the AJ+ newsletter. Built with Squarespace, the website was used as a proof of concept and opportunity to rapidly test content in a new market.
  
• Architecting the new Al Jazeera audio content strategy and migrating all English and Arabic podcast and audio content from the legacy site to the new content management system (CMS).
  
• Collaborating with the interactive content team to migrate all interactive content to the new CMS, preserve existing functionality, and launch new interactive projects, one of which was critically acclaimed and nominated for an Emmy award.
• Performing content audits, ensuring GDPR compliance, and working with legal teams to ensure all legal content is current.

Headless WordPress Architecture

The decoupled Al Jazeera digital platform has three layers: the back-end editorial experience in WordPress, a GraphQL query layer in the middle, and a React-based application on top. 

• Leveraging open-source software ensures Al Jazeera maintains control over its code and platform.
• Using WordPress as a CMS offers multi-language support, empowers editors to create content quickly, and decreases the amount of training required, shrinking team ramp-up times from weeks to hours. Its extensibility also gave engineers the ability to add several custom features.
• Employing React and GraphQL supports an infinitely scalable omnichannel experience by establishing a standardized content format that makes it easy to render content on multiple sites and applications, in multiple formats.

The first engineering sprint brought the team together, built momentum, made significant progress, and introduced new features. To the surprise of Al Jazeera leadership, future sprints saw the pace of production and the speed at which new features were added increase week-to-week–even as another agency partner exited the team.

A few of the more interesting engineering challenges included:

• A Right-to-Left (RTL) Codebase
  An engineer on the team hosted an Arabic language lesson for non-Arabic speakers to familiarize the team with the unique characteristics of the Arabic language. Each component must also service left-to-right (LTR) interfaces – making Al Jazeera’s component library one of the few true RTL / LTR systems in the world.
• AMP Integration
  The platform’s custom server-side rendering (SSR) architecture required a novel approach to accelerated mobile pages (AMP). 10up led the charge to architect a solution, including the react-amphtml NPM package in the custom SSR system to generate AMP content and leveraging a dedicated gulp script to provide granular control over the final AMP stylesheet.
• Monorepo Architecture
  All five of the main Al Jazeera news sites — two RTL sites and three LTR sites — share the same codebase. To maximize the efficiency of sharing code and React components, keep the universal design system aligned across sites, and ensure all sites remain compatible with each other, Al Jazeera engineers leveraged a monorepo. This meant solving challenges such as production code release coordination and comprehensive QA process development.

More than 3,000 Jira tickets later, and within a month of the targeted delivery date, the new headless platform rolled out on the WordPress VIP infrastructure and the main Al Jazeera (AJA) site launched seamlessly. Other sites launched on the platform include Al Jazeera Chinese (AJC), Al Jazeera English (AJE), and the AJ Podcasts platform, while AJ+ rolled out as a proof of concept on a separate platform.

While a typical migration of this magnitude often sees a temporary drop in search rankings, the team’s search engine optimization (SEO) efforts resulted in nearly zero measurable changes.

The new site has been well received by Al Jazeera leadership and the editorial team. One staff member who has been with Al Jazeera for 13 years shared that, “People have been talking about replacing the legacy CMS for 10 years. Honestly, we didn’t think it would be possible.”

A Continued Partnership

By combining experience in headless WordPress, leadership through product management, and a successful staff augmentation partnership focused on collaboration and client empowerment, 10up played an instrumental role in helping Al Jazeera rapidly achieve its goals. Key to its success was approaching the project with an ownership mindset and viewing every member of the team as a partner. 

“If you want to grow as a company, you need to get the right people involved because when you work with great people, you get great results. I cannot stress enough that if you get the kind of client-first, team-player attitude we saw with 10up’s team, it makes all the difference in the world. Partnering with 10up helped us move faster and become more self-sufficient. It has been a great experience and it’s a decision we would happily make again.”

— David “Hos” Hostetter, Al Jazeera Digital Chief Technology Officer

The success of both staff augmentations led to Al Jazeera’s continued post-launch partnership with 10up focusing on ongoing platform iterations, simplifying the onboarding of new engineers, better understanding the Al Jazeera audience, exploring opportunities to improve personalization, and pursuing new innovative business objectives.

This partnership stands as an example of how 10up can support the growth of organizations in unique and innovative ways and join in-house teams to supplement skill sets, fill gaps, and accelerate the delivery of priority initiatives.

To discuss staff augmentations, ways your organization can turn complicated legacy systems into modern, flexible digital platforms, and how 10up can help achieve your digital goals, contact us.