Enable choice for those with sleep apnea

Project details

Name:

ResMed FreshAir

App:

Mobile with AR

Class:

CMU Interaction Design Studio

My Role:

Product Designer

My Tasks:

Concept map
User AR flow
Wireframes
SME interview

Team:

Cora Wang
Lena Li
Parker Nussbaum
Stephanie Wang (Me)

Time:

4 weeks

A Warby Parker style service for sleep apnea masks, our team designed a mobile AR application that enables customization and direct purchase of ResMed masks and accessories. It manages the life cycle of users products, uses AR for face fittings, and utilizes AR to customize feature for patients to co-create their own personal masks with ResMed.

Context

Sleep apnea is a hidden health problem in America

Sleep apnea is different from other diseases, it is something that people don’t want to think about. They just think "why can't I sleep?"

About 18 million of Americans suffer from the disease and those who do seek treatment face a complicated journey through the opaque healthcare system.

Prevalent

18 million people

suffer from sleep apnea in the United States

Undiagnosed

75%

of severe cases are undiagnosed

Risky

60% increased risk

of stroke when someone has obstructie skeep apnea

Solution Key Parts

Set up for personalization to proscribe the right mask

How Gauge Your Face works
As part of onboarding, users are prompted to use their phone to capture the dimensions of their face and a digital twin of their face will be created. This then will automatically be updated on their profile and will be auto filled in on future product searching.

Why this feature
‍A holistic service starts with personalization. The dimensions help determine what size their face is as to proscribe the right mask for them.

‍Design rationale
‍We designed a light around the ring indicate the progress of measurement. We also automatically let the user know their size and recommended items so that the user can try it on instantly.

Shop directly for masks made easy

How Products Page works
‍The product view allows customers to directly browse all hose, masks, and head gear ResMed offers.
The filters to help users find specific products quicker, it automatically shows products based on your recommendations, and lets you know which products have AR visualization customization. Users can tap the cards to go into the product detail page.‍

Why this feature
Direct product browsing gives users more control over their purchases. Instead of being offered limited choices by doctors and other stakeholders first, seeing all of the products easily provides more options for sleep apnea patient.

Design Rationale
The dual product layout maximizes the space for products to be shown. The cards make it easy to tap to view the product details. We decided to use an icon for the AR link to draw attention to that feature. The tradeoff is the there may be a first user challenge in understanding what the icon does. However, we believe that this will be overcome quickly once the user tries it out.

Try masks on before any commitment using AR

How the AR works
The AR page allows customers to swipe between different products and visualize the products directly on their face. It also gives users the ability to tap different components to customize the colors of the parts. Once they have a selection they like, they can add it directly to their cart and it will take them to the cart review page.

Why this feature
This is FreshAir's hero feature as this allows for the customization for the personalized and holistic service for people with Sleep Apnea. By allowing try on, it gives patients more autonomy when navigating the complex healthcare system.

Design Rationale
We decided on tapping for color change and swiping for product change so the AR screen isn't cluttered. For first time users, a one-time instruction overlay will also appear to show how the gestures are utilized.

Value Proposition

Improve holistic medical experience for those with sleep apnea

Our application serves to provide patients with a better medical experience. By providing sleep apnea patient with a value-add, we simultaneously generate passive and active data.

Passive Data

The length of time users spend using the AR camera
Frequency of app use
Frequency of color and product changes
App usage time

Active Data

Face sizes of users
User preferences for sleep apnea masks
User demographics
User sleep habits

Increase loyalty and customer usage for ResMed

Our application is central to a greater service ecology that we hold as part of our project vision. ResMed FreshAir serves as a positive symbiotic relationship between ResMed and the patient for the long run.

Process

Discovering the multiple layers of stakeholders involved in how sleep apnea masks are provided

In order to understand the problem and find the leverage point, our team first started making a stakeholder map. This involved identifying an exhaustive list of stakeholders that play a key role in the supply-chain of ResMed sleep apnea devices and patient experience including manufacturers, insurance providers, sleep study facilities, family, and bedmates.

We also started to connect the relationships between the key stakeholders such as how family members and bedmates would support the patient.

Understanding that patients have to go through numerous doctors to get their therapy prescriptions and Home Medical Equipment providers (HME) to receive the actual machines and masks

Reframing the problem using reverse assumptions

To rapidly generate where our service can be best served, we ideated and came up with a list with dozens of assumptions and reversed them.

Assumptions

ResMed sells products through HME providers
Patients need to go to a specialist for sleep apnea diagnosis
Patients go to primary doctors for sleep problems
ResMed devices are hard to wear

Reverse Assumptions

ResMed does not sell products through HME providers
Patients do not need to go to a specialist for sleep apnea diagnosis
Patients do not go to primary doctors for sleep problems
ResMed devices are not hard to wear

Rapidly generating solution concepts for feedback

An intelligent application that enables consumer customization of ResMed device through AR application and personalized screens
An application that syncs with a wearable product to help accurately pre-diagnose sleep apnea or create an intervention for users to get accurate diagnosis
Direct B2C offering via mobile application on the best deals on products
An application that sets up home POS for ResMed fittings and products

Finding unanswered questions and constraints

We pitched four potential solutions that we concluded through the reversed assumption activity to our peers and received positive feedback on the idea of an intelligent application that enables consumer customization through AR application and direct purchase from ResMed. Our main concern at this stage is the legal constraint involved regarding selling direct to consumers and why ResMed currently does not have such system in place.

Gaining a better understanding of current state through secondary and SME research

We reached out to a Senior User Researcher at Philips Health who specializes respiratory devices. Simultaneously, we did secondary research.

"The medical equipment provider chooses the product. It may be the one that insurance covers or maybe not. The device you get is determined by the equipment provider."

Insight 1

Although sleep apnea devices require prescriptions, once a patient has a device, masks can be sold directly to consume

Insight 2

ResMed masks is compatible with non-ResMed devices as well.

Insight 3

At current stage, Because Home Medical Equipment (HME) providers have thin margins, many sleep apnea patients do not end up with the best products.

Figuring out key flows through sketching

Our team decided to design an AR application that allows users to customize the color and design of the masks and accessories offered at ResMed.

Wireframing mid-fi for onboarding, profile, product list, AR, and cart

We first started with designing the key aspects of the app including quiz to understand the patient, patient profile, product list for browsing and filtering, product details, AR feature and cart.
‍
By enabling customization and AR fitting, customers now have flexibility in choosing masks and making direct purchase without going through multiple layers of stakeholders.

Deciding on the critical parts for the AR onboard flow

Concept testing for gesture interaction using SparkAR

In the setup process, we want to measure the user’s face and create a digital twin for mask fitting. At first, we wanted to create a full on 3-D model of the head. However, we realized that the back of the head is not a critical component. We took inspiration from Apple's face ID set up for our design.

My teammate, Parker, create a proof of concept in SparkAR to explore the AR functionality as well as to test how users might respond to the customization shopping aspect.

We used it to test how the user would interact with the screen. We discovered it was most intuitive to tap for color switching and swipe for product change.

Final Design

Home Screen

The home screen shows off the ResMed logo and gives the option to sign up or log in. Users can also change basic settings of the app or ask questions on sign up page before starting.

Design Rationale
‍to modernize the design, we forgoed ResMed's colors. But to keep the consistency, we took inspiration from ResMed's logo for the wavy shapes. We named our service Fresh Air because we felt given the complicated stakeholder process for patients, this new direct ResMed to patient service would be a "breath of fresh air".

Pre-screen Questions

Pre-screen questions help users setup their profile as and to customize product suggestions

Design Rationale
we designed the circle along with color changes to indicate status change based on which survey question user is on.

Face ID with AR

Once user's are finished with the pre-screen questions, they are prompted to use their phone to capture the dimensions of their face and a digital twin of their face will be created. These are used to help determine what size their face is as to proscribe the right mask for them. This then will automatically be updated on their profile and will be auto filled in on future product searching.

Design rationale
we designed a light around the ring indicate the progress of measurement. We also automatically lets the user know their size and recommended items so that the user can try it on instantly.

Customer Profile

The profile page stores basic customer information, customer's mask and face information, and their preferences as proscribed from the pre-screen questions. It also shows the life span of current products they own.

Design rationale
we chose the sliding design to give the user more screen space, by tapping the bar, users will be able to see more details about their products and add replacements to the cart directly.

Product Catalog

The product view allows users to browse all hose, masks, and head gear. There is also filters to help users find specific products quicker, it automatically shows products based on your recommendations, and lets you know which products have AR visualization customization. Users can tap the cards to go into the product detail page.

Design Rationale
the dual product layout maximizes the space for products to be shown. We decided to use an icon for the AR link to draw attention to that feature. There may be a first user challenge in understanding what the icon does. However, we believe that this will be overcome quickly once the user tries it out.

AR Customization

The AR page allows customers to swipe between different products and to visualize the products directly on their face. It also gives users the ability to tap different components to customize the colors of the parts. Once they have a selection they like, they can add it directly to their cart and it will take them to the cart review page.

Design Rationale
‍we decided on tapping for color change and swiping for product change so the AR screen isn't cluttered.

Checkout

Users can review their cart contents and view final pricing. They are also able to edit the contents in their cart. If they swipe up, payment information will come up and they can submit to process. Once they press submit, their orders will be immediately added to their profile page and the status of the life cycle will automatically start once delivered.

Design rationale
‍To be consistent with the profile page, we chose the sliding design to give the user more screen space, by tapping the bar, users will be able to see more details about their payment details.