Al Jazeera Arabic Design Language System

Role:

Lead Designer / Full-stack Developer / Project Manager

Project Duration:

3 months

Goals:

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.

Responsibilities:

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

Impact:

  • 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

Background

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.

Wireframes

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.

Al Jazeera Design Language System - Digital Elements
Al Jazeera Design Language System - Digital Components
Al Jazeera Design Language System - Digital Resources
Al Jazeera Design Language System - Color Palette
Al Jazeera Design Language System - Typeface
Al Jazeera Design Language System - Imagery and Card Application

Concept: The Moving Frame