Al Jazeera Arabic Design Language System
Al Jazeera Media NetworkRole:
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.
