Replacing native mobile apps: Reducing churn by 37% with a webview app
.svg)
Project overview
On the surface, building a fully native Android and/or iOS app may seem like the best option available. Yes, the upfront investment is higher, but in exchange, you get the highest performance and responsiveness possible, a fully native user experience, and seamless integration with the device’s hardware.
But all these benefits come at a hefty cost, one that not every organization can afford to pay. Besides higher development costs, maintaining and updating native apps is also expensive, as it requires specialized expertise in Swift (iOS) or Kotlin (Android).
Our client, a nonprofit behind a volunteer matching platform, encountered this very issue. The app for the platform was riddled with bugs, but the organization didn’t have the internal resources to have it fixed and maintain it later on.
As a nonprofit, the organization had to find the most cost-effective solution possible for resolving the persistent technical issues and addressing negative feedback. Fixing the app, however, was off the table because the client wouldn’t have the resources to maintain it in the future. Developing a new one, even using a cross-platform tech stack, would entail an upfront investment that was too high.
After some deliberations and consultations on our behalf, our client decided to leverage the existing website and make it available as an app on Google Play and App Store. We took on the whole switch, from development to app submission, publishing, and listing configuration.
Services
Challenges
Meeting both app stores’ stringent requirements was our main challenge while turning the website into a mobile app. To overcome it, we decided to develop a webview app, a native app that incorporates an embedded browser to display web content. This approach was best for maintaining the project’s cost-effectiveness and accelerating delivery time.
Our client was also on the receiving end of several negative user reviews. So, we were tasked with reviewing all that feedback to pinpoint and fix sources of friction and bugs. Our audit revealed a number of issues, from unclear error handling to the lack of push notifications.
Finally, our client didn’t possess internal expertise for working with app stores. So, we stepped in, supporting the organization at every step of the process. At the same time, the organization needed full visibility into changes to the website, requiring seamless coordination with the client.
During our thorough discovery, we defined the project’s scope based on the following needs and requirements:
Strategic business needs
01 Retire the existing native Android and iOS apps due to maintainability issues
02 Replace them with a webview app to limit upfront costs and capitalize on the existing website functionality
03 Have the development partner handle app submission, publishing, and configuration on both app stores
04 Have full visibility into the website changes required
05 Bring down the user churn by at least 30% after the new app’s rollout
06 Reduce the number of user-reported bugs by at least 20%
07 Improve the user satisfaction rate by at least 10%
08 Reduce the number of crashes by at least 25%
09 Improve user engagement by at least 10%, as measured by sessions per user and session length
Technical requirements
01 Wrap the server-side rendered website in a webview app using Capacitor
02 Develop an intuitive, user-friendly interface with React Native
03 Ensure changes to the website occur simultaneously with the ones to the webview app
04 Fix deep linking issues within the webview app for access on iOS
05 Add error messages during attempts to use the app offline
06 Implement file download and upload to the webview app
07 Integrate universal links and app links to the webview app
08 Add push notifications
09 Implement force updates for outdated app versions
10 Replace old apps in Google Play and App Store
11 Set up Firebase for app distribution and management
12 Improve the app’s performance by at least 15%
We’ll help you decide on the right approach: fixing it, rebuilding it with a different tech stack, or reusing your existing assets, all in line with your budget and time constraints.
Talk to an expert.webp)
Solutions
To turn the client’s website into a webview app, we first built the interface with React Native and then integrated it with the website using Capacitor. As a result, the website, rendered on the server side, is seamlessly displayed in the incorporated browser, all while providing a native-like user experience.
During the project, we worked in sprints, moving through the prioritized list of tasks as agreed upon. While we were at it, we kept our client in the loop regarding our progress. We also worked closely with the organization on all updates to the website itself whenever they were needed to support integration into the webview app.
As our client already had one negative experience with poorly built apps, thorough quality assurance was a must. So, we prepared a comprehensive testing strategy to catch and weed out any bugs and, with the client’s approval, acted on it.
Once the app was ready, we integrated it with Firebase for app distribution, performance monitoring, analytics, and management. We also handled app submission to App Store and Google Play, fixed issues to overcome rejections, and configured the listings for our client.
Following our work, our client received a webview app for both Android and iOS with several new features, such as:
- Error handling
- Push notifications
- Force updates
Capacitor-powered webview app
Our client’s website already allowed future volunteers to look up local opportunities and local nonprofits, schools, companies, and municipalities to publish volunteering opportunities. Besides, compared to the native apps, the website showed fewer bugs and better performance.
So, our solution was obvious: wrap the website in a webview app using Capacitor to replace the existing apps. To that end, we incorporated a browser view into our React Native interface and connected it with the server URL using a remote URL. To ensure that all links work as intended, we wrote a separate script file that identifies and supplies the correct URLs and files to the app depending on the environment.
Switching to a webview app helped reduce churn by 37% and crashes by 36%, all while improving user satisfaction by 17%.
Integration with Firebase
Firebase is a robust toolkit for both building and running apps across platforms. In this project, we used it to facilitate the distribution and management of mobile apps across stores, as well as to clean up the app before submission.
Thanks to the integration with Firebase, our client can now easily monitor the app’s performance, track metrics, and push updates to the app store. That speeds up app management and makes it easier, which was crucial for the nonprofit.
End-to-end app store support
Per our client’s request, we took over all the tasks related to making the new app available on Google Play and App Store. To that end, we leveraged Firebase for app distribution, submitted the apps for approval, and configured the listing after publishing. That enabled the nonprofit to focus on its core activities and changes to the website.
We also handled issues that arose during submission. For example, the App Store rejected our first submission due to issues with deep linking. We got to the bottom of the problem and added the AASA file to our client’s website. The file was served via HTTPS, without redirects, and made accessible without the JSON extension to meet the store’s requirements.
Error handling for offline access
Since the new app used an in-built browser to display the website, offline access wasn’t available right away. In line with one of the usability heuristics, however, the app had to notify users that offline use wasn’t possible. So, we added an error message to remove a potential point of friction from the user experience.
This, together with other UX and performance improvements, helped increase the Apdex score by 19% following the switch to the webview app.
Push notifications
Without push notifications, potential volunteers were left in the dark regarding the status of their application. Local organizations, in turn, had to manually check whether they had any new candidates.
User feedback reflected the frustration stemming from the lack of push notifications. So, we added this feature to the new app and set it up to send relevant notifications in real time. The new feature helped increase the average number of sessions per user by 12%.
Force updates
Outdated apps could pose a security risk, let users miss out on new features, or frustrate them with bugs that were fixed in later versions. To prevent that, we added a force update feature to the new app.
The feature compares the version of the installed app with the latest available one. If there’s a mismatch, a pop-up requests the user to update the app to continue using it. By ensuring all users have the latest version of the app installed, the client saw a 27% decrease in negative reviews concerning technical issues.
File uploads and downloads
To apply for a volunteering opportunity, candidates could be required to upload their resume or CV. Local organizations, in turn, may need to upload files for their listing (e.g., photos). To enable both file uploads and downloads, we added the functionality to the webview app, all while setting up appropriate permissions for device storage access.
We ran several rounds of testing on the feature to ensure its appropriate behavior. As a result, file uploads and downloads work smoothly regardless of the file format or size, enhancing the seamless user experience.
Tech stack
Impact
As a result of the project, our client could replace the former bug-ridden, hard-to-maintain native apps with a webview app promptly and on a tight budget. The new app showed a number of improvements compared to the previous ones, including:
We’ll get to the bottom of the issues that hold your key business metrics back and cause negative feedback — and fix them for you.
Contact usTestimonials
The responsiveness, attention to detail and high-level communication from Darly Solutions was outstanding. Communication with the team was all online and was absolutely seamless. They were highly responsive, worked to tight deadlines and provided great feedback and communication throughout the entire project to ensure it remained on schedule and all quality requirements were being met. They exceeded all of our expectations, from design through to delivery.
LLC Darly Solutions's team performs well since the collaboration started. They are fluent in specific programming languages, they are also fluent in English, and they have a great response time. What is most unique and impressive about Darly Solutions is that everyone in the team is inherently communicative and understands the expertise of their respective fields. The team is very agile and can predict stress situations in which we work together to fix and maintain.
Darly Solutions' work so far inspires confidence, as they're skilled and trustworthy. The health platform is incredibly happy with their work. The team at Darly is communicative, responsive, and responsible. I’d recommend them to people looking to do more than build a simple little software.
By collaborating with Darly Solutions, there is a significant improvement in the project's quality of codes compared to their original codebase. They lead efficient project management and keep the client updated with their reports. They're a flexible team that delivers promising results. They don't just do as they're told, they actively participate in the design process, which is going to yield us a much better platform in the end.
Darly Solutions was able to develop the site with all functions running. The team was responsive throughout the engagement. They excelled at scheduling and delivered projects on the specified timeline. The whole team was a pleasure to work with. I am very glad that I entrusted them with my project, this is the best company for me!
The quality of their work is very high, and we get very good customer feedback on what our site looks like. They're very reliable and have a great overview of the technologies they're using. They meet our deadlines and are very accurate with their time estimations on a project. In addition, they're responsive and great with communication with a great command of English — it's very easy to talk to them. Moreover, we've integrated them into our development and scrum process, where we have daily stand-ups with their project manager and developers through Slack.
LLC Darly Solutions are highly skilled at UI/UX and follow very good engineering standards, and have been very professional in its approach to all the work to date (including the initial consultancy, which was the deciding factor). They have taken ownership of the work in way that demonstrates how much they value the work they are doing and consequently the work we are doing. I am gaining confidence that the decisions they make are good decisions and that this will result in a product that will exceed our initial expectations.
Darly Solutions developed the app in a quick manner, and the code quality was excellent. The professional team was committed to building a successful product. The code quality was good, and the app has been built in a little more than 1 month, which is a result I'm very happy with. They were laid back but professional at the same time.
Darly Solutions’ work helped my business tremendously. They were able to identify key areas for growth and improvement. The team was communicative and professional throughout the entire engagement. LLC Darly Solutions is a solutions-oriented vendor that drives results. They’re really professional and they know what they’re doing. The team knows how to identify my problems and solve them.
Related case study
Connect with us
.webp)
We are a tech partner that delivers ingenious digital solutions, engineering and vertical services for industry leaders powered by vetted talents.
