ADN AMERICA is a bilingual news organization that provides breaking news in real-time, in-depth analysis and political reportage to Hispanics, the fastest-growing demographic in the United States, while also covering Latin America and other international regions and events.
The challenge
The ADN America team wanted to expand their presence on both iOS and Android platforms. Working with a native approach for two different devices was not an option. The challenge was how to design, develop, and maintain two dynamic applications with limited budget and resources. Integrating third-party functionality and making the overall user experience consistent would have required double the development effort.
The app should allow users to navigate in their preferred language (Spanish or English), get the latest news quickly, receive breaking news and push notifications on their smartphones, and watch video content fast and easily.
Another important challenge was that the application has to be very light and fast, given that the target audience sometimes does not have high-end or latest generation devices.
Hybrid Approach to the rescue
ParallelDevs’ team have extensive experience on web technologies and also other hybrid app development technologies like React Native and Flutter.
In this case we chose IONIC Framework so we can develop one code base to support Android and IOS platforms.
With lonic's pre-built components and well documented plug-ins we could use our atomic design and develop approach to build the Style Guide created by ParallelDev’s UX/UI team into a components library that can be shared across platforms, enhancing both apps quickly, without having to replicate integration work.
In order to feed the app content the idea was to use ADN America’s Drupal 9 website (https://adnamerica.com) as the backend of the application.
Drupal’s GraphQL module would let us craft and expose a GraphQL schema of all entities, media and data that would be pulled by the application via API integration.
The UX/UI Approach
Based on the client's requirements, and the needs that the application had to cover for the users, our UX/UI team created a design system with reusable components and clear guidelines for our app development team. They used an atomic design approach that in time would help us scale the app while reducing costs, improving workflows, and addressing accessibility factors.
Our UX process included:
- Discovery & definition
- Benchmarking
- User or Persona definition and User Stories definition
- Information Architecture - Alpha Architecture
- User/ platform language
- User Stories
- Wireframes and prototype
- User Testing
- UI implementation with Branding
Then it was time for our developers to apply the design and do their magic, resulting in an app that exceeded the client’s expectations and is now available for everyone.
Some of the App Features are:
- Single code for both Android & IOS
- Bottom navigation menu
- Top navigation menu
- Language switcher
- Quick country/region categorized navigation
- Modern and Clean design
- Categorized news
- Share news posts
- Latest & trending news
- Videos
- AdMob integration
- Push notifications integrating OneSignal ( https://onesignal.com/ )
Now ADN America is reaching users on both mobile platforms while they continue publishing content using their preferred CMS (Drupal).
You can download the free ADN America app in the following links:
