Substance use recovery app: Securing an 81% satisfaction rate for NJCounseling

Secure sign-up and login

By its nature, the NJCounseling mobile app handles sensitive personal data. Therefore, securing the data against potential cyberattacks was a must.

To that end, we implemented HTTP-Only cookies that prevent client-side scripts from executing. This protects the app against attacks like cross-site scripting (XSS). We also enabled secure storage and transmission for authentication tokens and used Supabase Auth for multi-factor authentication.

While securing access to the app, we had to counter the unusual login flows imposed by Supabase Auth to keep the experience simple for users. Despite those challenges, our approach worked: the login flow showed one of the highest task success rates during our user testing.

Daily check-ins

The daily check-ins are the mobile app’s core feature, with questionnaires developed by our client to take all possible therapeutic needs into account. We transformed these questionnaires into an easy-to-grasp check-in flow that takes mere minutes to complete.

To that end, we used the React Hook Form library to keep the form intuitive and responsive. The Zod library, in turn, powered advanced validation mechanisms to prevent unintentional mistakes on the users’ part.

Overall, daily check-ins proved to be one of the app’s most valued features during its rollout, helping it earn the 89 NPS as a result. The data also proved to be invaluable for motivating self-reflection, resulting in a 14% improvement in recovery engagement among early users.

Robust PDF export

Exporting responses for further discussion with therapists is the app’s another cornerstone feature, on par with daily check-ins. To implement this feature, we used two JavaScript libraries, jsPDF and jsPDF-AutoTable.

Thanks to our efforts, NJConseling users can easily export all the tracking data they entered into the app to a PDF file, making it one of the app’s value propositions. We made file generation as quick as possible (<500 ms) to avoid friction in the user experience, all while thoroughly testing support for complex layouts and data formats.

Seamless offline access

Consistent Internet access isn’t always a given, and our client didn’t want the lack of connection to become a barrier for the app’s users. So, we set out to ensure the app could support daily check-ins and offline data viewing without any detriment to user experience.

That meant we had to carefully design the syncing processes to prevent data loss or conflicts, which could compromise data integrity and cause frustration among users. We rose to the challenge, making data sync seamless and quick (<100 ms, in line with the average latency).

Regular reminders

To promote engagement and help users keep track of their recovery progress, the app reminds them about daily check-ins with timely push notifications. We implemented these push notifications using Firebase Cloud Messaging (FCM), a cross-platform messaging solution that offers great customizability and flexibility in push notification management.

These push notifications helped drive user engagement, contributing to the app’s 81% satisfaction rate. With an open rate of 23%, push notifications also reduced the proportion of users missing daily check-ins at least once a week by 31% after several rounds of A/B testing.

History view

The mobile app features a dedicated history screen that lets users review their previous entries and identify trends and insights in the data. To make it a truly valuable addition to the app, we visualized key insights, helping users grasp them easily at a glance.

As a result, the history view enables users to keep track of their recovery progress and take note of gaps in daily check-ins. The history view screen is one of the most commonly visited app components during an average user session, which typically comprises six screens.

Cross-platform tech stack

Our choice of Ionic React helped us overcome the architectural challenges of building the mobile app, all while speeding up development. Besides easy code sharing, Ionic React also provides facilitated access to native features via Capacitor plugins.

Thanks to this cross-platform tech stack, our client could quickly roll out the lean MVP to validate the idea and refine its features where necessary. At the same time, we delivered the two mobile apps 29% faster and at a 21% lower cost than we would have if we’d used a native tech stack.

Simple, intuitive user flows

We followed the tenets of the user-centered design to make the mobile app as simple and intuitive to use as possible. To that end, we initiated our design work with thorough user research. Our client’s first-hand experience in substance use treatment proved invaluable in the process, informing many of our design choices.

Based on our findings, we designed the information architecture and user flows, refining them through iterative development of wireframes and prototypes. Our iterative approach, combined with the user-centered philosophy, paid off: the app earned an 81% satisfaction rate and a net promoter score of 89.