The National mobile app transformation: From legacy system to modern flutter-based solution
The National delivers in-depth reporting and nuanced perspectives on the Middle East and the world. With a focus on insightful analysis, compelling storytelling, and diverse viewpoints, The National is a trusted source for understanding the complexities of today's global landscape.
.png)
From a legacy app holding the newsroom back to a unified, high-performance mobile experience
The National, one of the UAE’s leading English-language media outlets, had a mobile audience growing fast but its existing app couldn’t keep up. The design was outdated, the codebase hard to maintain, and the experience no longer reflected the publication’s refreshed digital identity.
Editorial teams lacked control, analytics were missing, and readers couldn’t authenticate or subscribe from within the app. It wasn’t “broken,” but it was holding everything back.
To stay competitive, The National needed more than a facelift. It needed a complete media mobile app rebuild; powered by modern technology and designed for scalability, performance, and editorial autonomy. But the real game changer? The implementation of Piano Analytics, therefore transforming The National from flying blind on mobile performance to having granular, real-time insights into every reader interaction. For the first time, they could measure what truly mattered: content engagement, user journeys, and conversion paths across their entire mobile ecosystem. This wasn't just about building a better app; it was about unlocking data-driven decision making that would revolutionise how The National understood and served its mobile audience.
Contexte
The National’s old mobile app delivered an outdated experience with a design that no longer reflected the brand, a codebase that was difficult to maintain, and almost no editorial autonomy.
The National’s legacy mobile app suffered from several constraints that prevented it from evolving with the newsroom’s needs:
- Legacy architecture that was difficult to maintain or update
- An outdated experience that no longer reflected the renewed brand identity
- No in-app authentication or subscription capabilities
- No mobile audience analytics or behavioural tracking
- Editorial teams entirely dependent on developers for layout and homepage changes
With a fast-growing mobile audience and a platform that couldn’t reflect the brand or support core business needs, rebuilding the app became essential.The opportunity was clear: deliver a modern experience with stronger performance, full analytics, editorial autonomy, and a unified approach across iOS and Android.
Solution
Code.store proposed rebuilding the app entirely using Flutter for the front-end and Arc XP for the back-end CMS. This approach consolidated iOS and Android into a single, efficient codebase, delivering speed, design consistency, and easy maintenance.
Flutter made it possible to:
- Launch faster with one unified codebase
- Maintain identical UX and UI across iOS and Android
- Reduce cost and time-to-market
- Ensure high performance across devices
In short, cross-platform mobile development enabled The National to innovate quickly without sacrificing quality.
Arc XP: The backbone for content and layout
Arc XP provided the flexibility the newsroom had been missing. Through its PageBuilder, editorial teams could now update layouts and sections directly without any developer involvement.
This CMS integration allowed:
- Real-time content delivery
- Single-source publishing across web and mobile
- Seamless analytics connections (Piano, Parsely, Google Tag Manager)
“A front-end built for speed. A back-end designed for live data.”
Piano Analytics: Understanding mobile behaviour for the first time
One of the most impactful improvements brought by the rebuild was the introduction of a complete analytics layer through Piano Analytics.
The legacy app offered no mobile audience insights, but the new stack delivered:
- Behavioural tracking across all mobile user journeys
- Unified audience segmentation through GTM
- Clear visibility into content performance
- A data-driven foundation for editorial and product decisions
For the first time, The National gained a real understanding of how mobile readers interact with stories, sections, and subscription flows turning the app into a measurable, optimisable channel for growth.
How do you create a media mobile app that serves both readers and editors?
By combining the best of technology and editorial workflow.
The National’s rebuild introduced several firsts for the brand:
- In-app authentication and subscription management via Piano
- Audience analytics powered by Parsely and Piano Analytics
- Flexible tracking setup via Google Tag Manager
- Unified content delivery through Arc XP
This setup gave The National full visibility into reader behaviour for the first time transforming its mobile channel into a measurable, data-driven product.
Approach: From UX scoping to launch in 4 months
The project followed a clear and collaborative process:
- Two Product Owners from The National worked daily with code.store’s PM and The National designer
- UX scoping and development ran in parallel for faster delivery
- Arc XP was integrated early to test live data during build
- Continuous QA ensured zero disruption for editors or readers
- Piano was implemented early to validate authentication, subscriptions, and analytics flows
Within four months, the new app was ready for launch with nearly a year of ongoing improvements afterward.
The result was not just a redesign, but a complete mobile app development transformation built for long-term scalability.
Results: A future-ready media mobile app
The National now operates a fully modernised media mobile app that does far more than reflect the brand’s new digital identity; it finally gives the newsroom and business teams the tools to understand, convert, and grow their mobile audience.
The rebuild unlocked capabilities that were simply impossible with the legacy app:
- Editorial teams gained full control via Arc XP PageBuilder, updating layouts and sections instantly
- Authentication and subscriptions were introduced in-app for the very first time, powered by Piano
- Piano Analytics and Parsely turned the mobile app into a real measurement engine, enabling behaviour tracking, segmentation, and content performance insights
- The app’s performance, speed, and UX were dramatically improved, creating a smoother path from discovery to conversion
- Maintenance costs dropped significantly thanks to Flutter’s single, unified codebase
But the most transformative shift came from Piano: for the first time, The National could see, understand, and act on the behaviour of its mobile readers, unlocking new subscription potential and giving teams the data they needed to make confident, informed decisions.
FAQ
How do I create a mobile app for my website?
You need a CMS with a mobile layer (like Arc XP), a unified codebase (like Flutter), and integrations for subscriptions, notifications, and analytics.
What kind of media is a mobile app?
A media app delivers news, content, and subscriptions directly on smartphones, ensuring speed and engagement across iOS and Android.
What is cross-platform mobile development?
It’s the process of building one app that runs on multiple devices (iOS and Android) from a single codebase reducing cost and improving speed.
How long did The National’s rebuild take?
The app was completely rebuilt and launched in just four months, followed by nine months of continuous optimisation.
Why did The National choose Flutter?
Flutter allowed a unified design, high performance, and faster releases — all crucial for a newsroom operating at daily publishing speed.
