The National
Cross-Platform News Experience
The National is an Abu Dhabi-based English-language news publication covering the UAE, the Middle East, and international affairs.
The project focused on strengthening its digital experience across web and mobile as the publication accelerated its shift toward digital-first journalism. The experience needed to support high-volume news publishing while making a large and constantly changing content ecosystem easier to navigate, read, and explore across devices.
My work focused on the UX and design direction across the website and mobile applications, including information architecture, content hierarchy, interaction patterns, and a shared design system across platforms.
Scope:
UX Strategy · Product Design · Design System
UX Strategy · Product Design · Design System
Client:
The National / ADMIC
The National / ADMIC
Year:
2018
2018
The Challenge
A digital news product needs to present a large volume of constantly changing content without making the experience feel overwhelming.
The National had to support breaking news, daily reporting, opinion, features, multimedia, and long-form journalism across web and mobile, while maintaining clear editorial hierarchy and a strong reading experience.
Different priorities also needed to coexist within the same product. Readers needed fast access to relevant stories, editorial teams needed flexibility to give important coverage appropriate prominence, and commercial requirements such as advertising had to be accommodated without dominating the experience.
The challenge was to create a coherent cross-platform experience that could handle the speed and density of a modern newsroom while remaining clear, readable, and scalable.
Strategic Approach
The experience was designed around how people discover, scan, and consume news across different devices, while creating a system flexible enough to respond to changing editorial priorities.
• Designed mobile-first: Prioritized the mobile experience around contemporary news-consumption behavior while ensuring the system scaled effectively across larger screens.
• Strengthened content hierarchy and discovery: Structured navigation, sections, story prominence, and related content to help readers move through a large volume of continuously changing news without losing orientation.
• Designed for reading: Established typography, spacing, content width, and visual hierarchy around both fast scanning and longer-form reading across different devices.
• Created a shared cross-platform design language: Developed reusable patterns and components across web, iOS, and Android to improve consistency while respecting the interaction conventions of each platform.
• Balanced editorial and commercial needs: Integrated advertising and monetization requirements without allowing them to dominate navigation or the core reading experience.
• Built for a high-volume news environment: Created flexible and reusable patterns capable of supporting different story formats, editorial priorities, multimedia content, and the continuous evolution of the publication.
Product Impact
The project established a more cohesive digital experience across The National’s website and mobile applications, supporting its broader transition toward digital-first publishing.
A shared design language created greater consistency across platforms while giving editorial teams the flexibility required by a continuously changing news environment.
The redesigned information hierarchy, navigation, and reading patterns provided a scalable foundation for presenting high volumes of journalism across devices while balancing content discovery, readability, editorial priorities, and commercial requirements.
The Challenge
A digital news product needs to present a large volume of constantly changing content without making the experience feel overwhelming.
The National had to support breaking news, daily reporting, opinion, features, multimedia, and long-form journalism across web and mobile, while maintaining clear editorial hierarchy and a strong reading experience.
Different priorities also needed to coexist within the same product. Readers needed fast access to relevant stories, editorial teams needed flexibility to give important coverage appropriate prominence, and commercial requirements such as advertising had to be accommodated without dominating the experience.
The challenge was to create a coherent cross-platform experience that could handle the speed and density of a modern newsroom while remaining clear, readable, and scalable.
Strategic Approach
The experience was designed around how people discover, scan, and consume news across different devices, while creating a system flexible enough to respond to changing editorial priorities.
• Designed mobile-first: Prioritized the mobile experience around contemporary news-consumption behavior while ensuring the system scaled effectively across larger screens.
• Strengthened content hierarchy and discovery: Structured navigation, sections, story prominence, and related content to help readers move through a large volume of continuously changing news without losing orientation.
• Designed for reading: Established typography, spacing, content width, and visual hierarchy around both fast scanning and longer-form reading across different devices.
• Created a shared cross-platform design language: Developed reusable patterns and components across web, iOS, and Android to improve consistency while respecting the interaction conventions of each platform.
• Balanced editorial and commercial needs: Integrated advertising and monetization requirements without allowing them to dominate navigation or the core reading experience.
• Built for a high-volume news environment: Created flexible and reusable patterns capable of supporting different story formats, editorial priorities, multimedia content, and the continuous evolution of the publication.
Product Impact
The project established a more cohesive digital experience across The National’s website and mobile applications, supporting its broader transition toward digital-first publishing.
A shared design language created greater consistency across platforms while giving editorial teams the flexibility required by a continuously changing news environment.
The redesigned information hierarchy, navigation, and reading patterns provided a scalable foundation for presenting high volumes of journalism across devices while balancing content discovery, readability, editorial priorities, and commercial requirements.
