Attico’s team has successfully completed a project to convert a Progressive Web App (PWA) into a native mobile application. This transformation helped to reach a wider audience by making the app available on both the Apple App Store and Google Play Store.
The customer is a non-profit association based in Switzerland, that shares leading science-based information and education with healthcare professionals, scientists, and nutrition communities. This organization unites more than 300,000 medical practitioners over the globe.
In addition to being one the largest private publishers of nutritional papers and journals, it organizes and hosts internationally acclaimed workshops and symposia, making materials available for free to all registered users through its education website and mobile application.
Attico International has previously cooperated with the customer on many projects, one of them being the development of a PWA that aims to provide healthcare professionals with a world of nutrition at their fingerprints. The app utilizes Drupal as backend and NativeScript-Vue as frontend.
In those days, the customer opted for a PWA for rapid deployment on the existing infrastructure to assess how mobile users would accept the app and to gather analytical data.
The analysis revealed that the engagement metrics for the PWA surpassed those of the responsive web version. At the same time, the customer was conducting a marketing analysis of their audience and discovered a decent share of iOS users.
This made them think about creating a native app, since PWAs have significant limitations for iOS users:
Taking all these factors into consideration, the customer decided to reach a broader audience of mobile users by developing a mobile application available both for iOS and Android users. They wanted to preserve Drupal as a backend and to standardize their several mobile applications to align with the brand style. Attico’s team proposed converting the existing PWA into a native mobile application integrated with the Mobile App Platform (MAP).
MAP is Attico’s proprietary tool, which can be referred to as a constructor for creating multibrand and multilingual mobile apps.
It streamlines mobile development efforts by providing countless standardized endpoints that can be consumed on the client side. The platform covers over 90% of the standard app functionality, including registration, login, social and biometric login, and content delivery via API.
Utilizing MAP enables reducing the development costs and time-to-market by at least 50%. We estimated that the app’s actual development time with MAP is 2,000 hours, while without MAP this would take 4,200 hours.
Apart from efficiency, having a native app integrated with MAP is a perfect solution for the client due to the following reasons:
The client was impressed by the ability to reuse Drupal as a backend, reduce mobile development costs, leverage native app functionality, simplify internal compliance, and get the app into both stores. They gave the go-ahead without delay.
The native app development lasted 6 months and passed several key stages.
Our team began by redesigning the app interface in Figma. Since the PWA design was initially made for the web, there were many limitations and discrepancies in display for Android and iOS users on the native app side. We followed iOS and Android design guidelines and best practices for creating a successful application.
To harmonize the application, our team created a design system component library enabling the reuse of patterns, colors, fonts, and layouts. This allowed the customer to be consistent in UX and fast in development.
We took a structured and collaborative approach by breaking down the project into specific tasks and working on both the frontend and backend development.
This parallel workflow ensured that we could efficiently tackle different aspects of the native app simultaneously, leading to a more streamlined development process. The stage entailed the core functionality development.
We selected a dedicated group of 15 individuals to participate in the closed beta testing of both the Android and iOS versions of the app. This was the first time when the client saw the app in action. This phase was crucial for gathering initial feedback and making necessary adjustments before the app’s official launch.
The security scan stage was one of the most complicated parts of the native app development, driven by the customer’s strong emphasis on security and their stringent internal quality standards. Each of their apps undergoes rigorous security scans after every major update using the client’s internal tool.
Attico’s QA team conducted a comprehensive security scan and performed a series of functional checks for each platform, making necessary adjustments based on the feedback received. After receiving approval from the stakeholders, we proceeded to the app launch.
The release process for Android was remarkably smooth. Upon submission, the app was quickly approved by the Google Play Store without any major issues. The iOS app, however, received a few comments from the App Store editorial team that we quickly addressed within a week. The app was finally brought to the public on both Android and iOS.
Our team made the transition from PWA to a native app as smooth for users as possible. Users simply needed to install the new version of the app from the stores or by clicking the link in a notification displayed in the PWA. Their accounts and settings remained unchanged, ensuring seamless user experience without any disruptions.
The native app’s functionality is designed to support medical professionals by providing them with educational content and useful tools in the field of maternal and infant nutrition.
The app gives on-the-go users access to the latest scientific resources, including articles, videos, workshops, conferences, courses, and CPD activities.
The app has a range of interactive widgets, including a BMI calculator and various growth charts to provide experts with quick access to the tools they use frequently.
The app comes with a set of decision trees with high qualification accuracy, that allows users to make medical decisions more reliably and effectively.
Users can register for live broadcasts of workshops, join them, download the agenda, save events to their calendar, and get reminders.
The app is constantly updated and enriched with new features. Recently, we introduced podcasts, allowing users to listen to engaging and informative audio content on various medical topics.
This was our second migration of a PWA to a native application. Attico’s team benefited from the lessons learned during our first project and managed to deliver the current one without any significant challenges.
The only difficulty was navigating through security scans and implementing functionalities that were not present during the initial project. This required extensive research and hands-on experimentation from our side, but the team performed this task successfully.
The native app surpassed expectations with download numbers on iOS and Android five times higher than those of the PWA during the first few weeks after release. Also, the number of Android users has increased to become as high as the number of iOS users.
The client expressed gratitude to our team for their diligent efforts, emphasizing our contribution in selecting the MAP:
We always try to leverage whatever we have. In this case it made a lot of sense to use MAP — we were happy to use Drupal for content management and user authentication, as it was an already approved system. Then we simply added a mobile interface on top of that.
There are further plans to grow the app, continually enhancing its user experience and broadening its functionality. The client was so pleased with the performance metrics that they committed to a full year of upcoming features, totaling 1,800 person-hours.
Attico’s team continues working on that project and consistently releases new features every month. Our upcoming plans include implementing the related videos block, integrating a QR code link, developing a questionnaire tool, and adding topics on the homepage among other things.