My Role
As a designer lead, I was responsible for all the design and research on the project. I was also responsible for all the usability testing and improvements.
Tools
Figma, Photoshop, Hotjar, Amplitude
Highlights
Redesign Dosing Guide from a native app to a Progressive Web App with Vue.js in 5 months
Improved user experience, and complete new design. 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).
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.
Discovery
An important piece of this project was to validate the redesign with real users. I managed to interview several doctors who inject butolin toxin in Germany. After the interviews, I've compiled findings and created two personas for the project. A challenge on this process was to navigate compliance related to medical devices. I had to propose a few versions of the user research plan before it got approved by the regulatory commission. This delayed the interview and I had little time to implement changes.
The redesign process
For the new Dysport Dosing Guide, our team 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, we used a customer-centric approach focused on usability to streamline the PWA build.
Once the previous version of the app was solely a native iOS version, we had to rethink the whole experience in desktop.
New IA including Desktop flows
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.
New illustrations were made to replace the old assets. Several aspects were considered on the new designs such as accessibility and responsiveness.
The outcome
Our team 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 standardized for all markets and platforms so that updates and maintenance can be performed more effectively.
Moreover, as part of our 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.
