Al Jazeera Arabic Design Language System

Al Jazeera Media Network


Lead Designer / Full-stack Developer / Project Manager

Project Duration:

3 months


Set a strong thematic quality for Al Jazeera's products while ensuring brand and code consistency. The Design Language System aims to establish a common language, make testing easier, save time and effort, and create a useful reference for the teams. Most importantly, the design language system will create a future-friendly foundation for our network to modify, extend, and evolve over time.


  • Project Management
  • Gathering requirements
  • UI / UX design
  • Prototyping
  • Full-Stack WordPress development
  • Custom post types development
  • Custom plugins development
  • QA/Testing
  • Deployment


  • Improved consistency and clarity between design and development teams
  • Single source of truth for all branding needs
  • Fully customizable digital asset management system
  • Boosted digital productivity for faster project rollouts
  • Reduced cost and dependency on external resources
  • Consistent brand and user experience for company sites
  • Improved UX collaboration and review process
  • Defined quality target and standards


Al Jazeera has a large number of properties in its ever-expanding network and is already managing a large ecosystem of mobile touchpoints. In modern connected services, a key success factor is the ability to connect the dots of the experience across multiple touchpoints, contexts, and users and to maintain a cohesive user experience that spans through screen sizes and contexts of use.When individual touchpoints are designed, developed and governed by disparate internal and external teams and partners, achieving a consistent, integrated and well-orchestrated experience becomes challenging.The purpose of creating the Design Language System was to ensure a consistent brand and user experience across the current and future digital ecosystem.


During the Content Strategy and Site Mapping phase, I interviewed designers, product managers, and engineers to gather their thoughts and feedback. I considered their productivity pain points while iterating on the wireframes. My goal was to build a centralized design foundation for a consistent brand within their online presence and digital products.

Client Mockups

Client provided mockup - Homepage V1

Homepage V1

Client provided mockup - Homepage V2

Homepage V2

Al Jazeera Design Language System - Detail Page

Detail Page

Al Jazeera Design Language System - Component Detail Page

Component Detail Page

Live Screenshots

The DLS is built on WordPress, using the StudioPress Genesis Framework. Semantic HTML5 elements, custom PHP includes and functions, Gulp for task automations, and JavaScript for interactive functionality.

Concept: The Moving Frame

Get Your FREE Website Audit Today!

We'd love to learn more about your business goals, and challenges.

Contact us for free website audit and consultation.