Skip to content
Ryan Leard
Ryan Leard
CTO, Spirosure

This was the best tested digital health product we've ever been involved with. Patients and their caregivers have information at their fingertips that they've never had before.

Ryan Leard
Ryan Leard
CTO, Spirosure

This was the best tested digital health product we've ever been involved with. Patients and their caregivers have information at their fingertips that they've never had before.

Huff, puff, quantify. Use data to empower people with asthma and breathing conditions.

Spirometrix
Pleasanton, CA
  • Visual Design
  • Information Architecture
  • Android Development
  • Interaction Design
  • Quality Assurance
  • Custom Hardware Integration
  • Animation

Spirosure called us when they were just months away from trialing a revolutionary medical device. The company’s spirometer, Fenom Pro (not yet available for sale in the U.S.), enables people with asthma and breathing impairments to measure the strength and quality of their breath, map that information over time and infer patterns based on their own unique attributes. The device, intended to be used by doctors and nurses in offices, clinics, and hospitals, consists of proprietary hardware running a custom version of Android.

The user experience had to be simple to operate for non-technical medical practitioners and engaging enough for both kids and adults. A custom Android app shields the user from all non-app Android functions – WiFi settings in particular. The custom app integrates with sophisticated sensors and custom hardware to bring the system to life. There are no frameworks that can be Googled, no shortcuts to take to make a product like this happen.

Our Approach

We worked closely (and damn quickly) with the Spiro team, hashing out concepts for the product in our Oakland office and talking strategy at a few of the many watering holes nearby, quickly honing in on a whimsical yet somewhat restrained illustration style that influenced the entire experience. The centerpiece of the experience, the area that drove the design style, was a set of motivational exercises to encourage full breathing into the mouthpiece of the device to accurately measure the nitric oxide in the patient’s breath.

Incentive illustrations

Incentive illustrations
Spirosure Team
Spirosure Team

We worked closely (and damn quickly) with the Spiro team, hashing out concepts for the product in our Oakland office and talking strategy at a few of the many watering holes nearby, quickly honing in on a whimsical yet somewhat restrained illustration style that influenced the entire experience.
The centerpiece of the experience, the area that drove the design style, was a set of motivational exercises to encourage full breathing into the mouthpiece of the device to accurately measure the nitric oxide in the patient’s breath.

INFORMATION ARCHITECTURE & VISUAL DESIGN

The Spirosure hardware and exterior were still in the manufacturing stage. The creative team was given only a resolution and screen size, and a one-day visit with a 3D printed sample of the casing. Not flying blind, but perhaps with one eye closed.

In the early days of mobile, user interfaces were conceived like card stacks (perhaps inspired by good old pioneering HyperCard) where one action triggers a screen or card change to the next card, which led to another, which led to another. Not as dynamic as the games and apps we are used to today. We followed a similar card-centric approach here to simplify the user interface, putting just one primary action on the screen at a time.

Origianl 3D Sample Casing

Original 3D Sample Casing

This allowed us to do a few important things:

  • It preserved screen real estate, leaving space for larger sized content on each screen.
  • Key functionality could be enlarged and larger type employed, to ensure viewability from a few feet away in an examination room.
  • Reduced complexity by focusing in on one primary task per screen, simplifying the choices on a device with no back or home button safety net.
Spirosure interface

Visual Design

We quickly settled on crisp sans serif type for legibility in situations where the device might be viewed from across a table, or a few feet away. We explored white vs. dark backgrounds and gravitated to a neutral scheme that enabled the data visualizations to pop.

Roboto Regular
Roboto Bold

Animation

We honed down a list of almost 10 possible motivators for the patients, ultimately focusing on four activities including the company favorite whale. The patient must consistently and forcefully breathe into the device and the corresponding animation reacts accordingly. In the end, testing and the timeline pushed us to select one approach – settling on the gauge exercise. We’re hoping the whale come back in future iterations.

animation

 

Development

Cainkade developers worked closely with the hardware engineers, device software and medical device testing teams, even going on site with cross-functional teams several times. All development was done using an emulator, with no access to production hardware and the actual mechanics of the device.

We had to customize Android to shield all system settings and options to get out of the app. The hardware boots right into the app. Even the WiFi settings had to be rewritten as these were the one set of system settings that could not be preconfigured.

Spirosure