Al Arabiya / MBC News
Design Language Systems

Al Arabiya initiates the effort to revamp and build a DLS to improve the overall experience across their digital products. This is an active cross-collaboration project for English and Arabic editorial digital products, establishing new design systems from 0 to 1 for over 20+ million visitors. The goal of this revamp is to ensure consistency across digital products under the new branding guideline and improve user engagement with the articles.

Designers

Velta Destiana
Mina Awadallah + 5 others

Agency

genieology / IBM iX
2020

Output

Design systems
‍I/A and flows

Responsibilities

Design x Workshop(s)
Stakeholder Management

Background

AlArabiya.net, one of the leading news platforms in the Middle East, needed a full digital revamp to increase user engagement and unify its website and mobile apps under a cohesive branding identity. The outdated experience led to declining session durations, lower return visits, and ensure consistensies across platforms.

Personal contribution

✱ I was involved in end-to-end UX process and led the generative research effort.
‍
✱ Established workshop facilitation process with Product Owner and Scrum Master.

✱ Championed accessibility in components.
‍
✱ Concept Testing with branding and editorial team.

Design Process

Stakeholder management and logistics
‍tablish design principles that are language-agnostic and culturally inclusive. Instead of working with narrow personas, we have different user archetypes.

Prototyping
Design components based on epics that adapts to different screen sizes, languages, and layout orientations.

Documentation
‍Create comprehensive documentation for designers and developers and provide examples and guidelines for language-specific and cross-platform adaptation.

Ways of Working
brief and kick-off

Ways of Working: Agile, 2-weeks sprint, English and Arabic (RTL) components

Defining flows
information architecture

Audit or Heuristic Evaluation from as-is, rapid prototyping, design playback

Wireframing
testing and handoffs

Testing and interation with high-level components and do concept testing in-house

Design and test
testing and handoffs

Another round of and interation, handoff for native (iOS + Android) and responsive (desktop, tablet, mobile) for EN/AR languages

MAIN TAKEAWAYS
Mobile First
We built the design system with mobile-first mentality, catered for both responsive web and native apps (Android material design and Apple HIG). Ensures clutter-free UI with components such as Read Mode and light/dark modes.
Accessibility
By reviewing the as-is through technical audit, I ensure cross-platform compatibility.
Design for impact
Average visit duration of ~6 minutes indicates strong user engagement, as through this revamp we added supplementary components based on editorial team's feedback.
Scalable and sustainable
With over 70 million+ visitors a month, we built scalable components that can be used sustainably by client's internal team.
Cultural Aspects
Choosing the right type of typography and consistent branding across platforms and adaptive with current convention (i.e. Hijri dates on RTL layouts)