Home / Web Design / HERO - Naloxone On Demand App

Brand Design
Mobile App Development

The Brief HERO, or Helping Everyone Reduce Opioid Overdose, is a sophisticated, yet low-cost, scalable, crowd-sourced, mobile phone application that is intended to increase the likelihood that an opioid user and others in her network, along with sources of naloxone and/or first responders will identify and treat an opioid overdose with naloxone, thus preventing overdose death.

HERO app main screen

The Approach Three priorities were identified when crafting the user interface and experience. First, the app is very intuitive and easy to use. The main actions are very simple to execute, since the user might be unfamiliar with the interface and is likely to be under duress while operating the device. Second, the user interface was optimized to be very responsive and immediate, as every second counts when addressing a medical emergency and delays increase the chance of untoward consequences, including death. Finally, the design had to be both subversive and attractive, with wide appeal to a range of users. Lifestyle applications were the inspiration for the look and feel, providing seamless ease-of-use with a strong brand presence. The app was designed from concept to be rewarding to look at and use.

HERO app directions screen

The Design Colors were chosen to appeal to both men and women, skewing towards a younger demographic. Pops of the bright pink brand color were used to highlight important functions, and panels and menus glow and shift color in subtle ways following a timing that echoes the normal respiratory rate for a healthy adult. These elements all work in concert to make the application feel alive and provide an encouraging, attractive, and engaging user experience.

HERO app help screen

The Tech The application itself is written as a hybrid application consisting of HTML, CSS, and Typescript, which are compiled to both iOS and Android code using the Ionic application framework. The data in the application is backed by a NoSQL infrastructure consisting of a local and remote CouchDB database that allows users of the application to retain functionality in offline environments. Remote components of the application are hosted using Amazon Web Services running in a HIPAA compliant environment. Computationally intensive functions are delegated to outside services such as Amazon Lambda if applicable, or stashed until online service returns.

HERO app instructions screen