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

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.