Rebuilding the native Dysport dosing guide to a Progressive Web Application

Progressive Web Application


  • Rebuilding Dysport Dosing Guide from native app to Progressive Web App with Vue.js in 5 months
  • Improved user experience, newly added analytics tracking and more powerful calculations for driving adoption

The challenge

Dysport, Ipsen’s botulinum toxin type A, focuses on treating patients suffering from Limb Spasticity and Cervical Dystonia. In 2020, Dysport was administered mainly with a paper dosing chart by Health Care Providers (HCP) around the world. Even though Ipsen had an existing native mobile iOS/Android Dysport Spasticity Dosing Guide app, its adoption was suboptimal due to the app not fitting the HCPs way of working and regulatory barriers in some markets. In addition, the app was not suited for scaling as the code lacked global standardisation, missed basic analytics of measuring user behaviour and required significant time and effort to do updates due to having to maintain 2 versions (iOS, Android).
In order to create an easily scalable and adoptable dosing guide for Health Care Providers, Rangle proposed to migrate to a web-based application in just 20 weeks.

The process

For the new Dysport Dosing Guide, Rangle built a Progressive Web Application (PWA) using Vue.js. Taking a risk-based approach compliant with ISO 14971, we re-designed an easy-to-use five-step dosing calculation. In particular, using a customer-centric approach focused on usability to streamline the PWA build.
PWA technology allowed the application to act similarly to a native app, but be accessible through a web browser. As a PWA, the HCPs are able to add the application to their mobile device and laptop home screens and use it even when they do not have Internet access. Additionally, there is no need to upload the app to any app store and in the future, the web application can leverage native mobile functionality without tying it to a platform. We also took into consideration to build an SSO solution that can be first leveraged for Dysport and later be scaled to other Digital Health apps.
Vue.js provided a lightweight JavaScript framework to enable starting this project quickly and easily train new Ipsen developers to maintain and scale it. Furthermore, it provided less overhead than comparable technologies so HCPs got a more modern and performant experience.
One of the largest challenges in building SaMD (Software as Medical Device) is alignment across departments (Brand / Marketing, Patient Safety, IT Quality, Information Security, Regulatory Compliance). In 20 weeks, we used a holistic Agile approach with weekly involvement from each department to ensure quick decision making and consensus.

The outcome

We delivered a regulatory compliant and user-focused PWA Dosing Guide for Dysport. We not only significantly improved user experience and visual design to increase ease-of-use, but we also added analytics tracking via Amplitude and more advanced calculations for dosing (amount, in range, variability based on the patient’s age, weight, and muscle mass). We made sure that the application was standardised for all markets and platforms so that updates and maintenance can be performed more effectively.
Moreover, as past of pur Compliance by Design framework, we delivered software architecture documentation following the C4 standard and change management plan documentation following the ISO13845 and 21CFR820 guidelines. These enable Ipsen to apply for Medical Device Class 1 certification in the future when they are entering regulated markets with the product.
Have a project for us?