myAir v9 animation.gif

my air+

Enhance your sleeping testing experience with computer vision technology.



Project Goal:

To redesign the app myAir by ResMad, a sleeping testing and facilitating company to improving the overall user experience.

Team Members:

Yumei Jin, Alice Zhang, Ross Rybalov

My Contributions: 

High Fidelity Prototypes with Animations, Stakeholder Map, Ideation, Low Fidelity Prototypes, User flow, RoadMap

Research and Design Process

Preliminary Research

We started by making a brain dump of everything we could find out about ResMed and their various product lines (Figure 1). Right away, we realized that there were a lot of players in this industry, and a significant amount of unknowns.

It was vital to learn ResMed’s business model of manufacturing CPAP machines, and selling them to a consumer through a Home Medical Equipment Supplier. In order to do this, ResMed partners with a number of other stakeholders such as Sleep Lab Facilities (to diagnose the patient’s problem and fit them with the right machine), and insurance organizations. Medical systems also need to be involved to coordinate the interaction with the doctors.

Figure 1. Brainstorming of stakeholders


Stakeholder Mapping

Through our stakeholder map (Figure 2), we learned that ResMed’s customers are not the users. Or at least not right away. The path to get a ResMed product into the hands of a patient goes through two other middle-companies the sleep lab facilities and home medical equipment suppliers.

We identified that the current process for a patient who wants to purchase a CPAP machine takes them from a specialized doctor to get approval for a test, get to a sleep lab facility to get a formal sleep assessment, get a doctor’s prescription for sleep apnea, then after all that, purchase a CPAP machine through a home medical equipment supplier (HMES). ResMed’s role in this process is to provide sleep apnea machines to HMES as well as support in terms of educating customers on sleep apnea and its treatment.

After calling ResMed customer service, we learned ResMed doesn’t deal with their end-users until they call the company for support with their machine, when they have already made the purchasing decision and tried to use the product.

Through stakeholder mapping, we learnt that the end-user's path from requesting doctors' approval to actually getting a sleeping mask in use is zigzag. We want to help the end-user enjoy a more efficient journey by redesigning their experience of using ResMed's sleeping mask. As the result of this redesign would potential increase sales, we believe that this redesign would also provide more revenue to ResMad the company.

Figure 2. Digital Stakeholder mapping

Ideation and Clarification

With this new direction we thought of ways to solve this problem for the user and how ResMed could benefit. Our 20 questions and reverse assumptions exercises focused on going out and exploring some interesting solutions (Figure 3), but ultimately we honed in on solving one small problem space.

We knew that ResMed does have MyAir, an app already that is user-facing and stores/analyzes data on their CPAP machines, however it is very light touch and doesn’t provide much benefit to the user. It’s more of a monitoring service, but here lies our opportunity.

Our initial idea for a digital service here incorporates computer vision technology to guide users through the process of placing bluetooth sensors on their body in order to gather the same data they would at a Sleep Lab Facility, but in the comfort of their own home through myAir. Through this, the user is liberated from the multiple constraints of commuting to a lab for sleeping testing.


Initial Prototype (Low-Fidelity Take 1)

The first low-fidelity prototype used the ideas generated from the ideation exercises and visualized the walkthrough from a user perspective (Figure 4).

The user journey starts off because they have something wrong with their sleep. They would then log-on and have a profile page with filled info about themselves. After they move on to a kit set-up page, then to an AR walkthrough of how to place the bluetooth sensors on their face. After a calibration page, they would begin the test overnight.

After they wake up in the morning, they can see the diagrams for their sleep patterns, then they have a choice of either sending the info to their doctor OR getting recommended a new CPAP machine that would fix the issue that they have. The app would then send the patient data to a Home Medical Equipment Supplier for pickup.

Figure 4.  Lo-fi prototype

Figure 4. Lo-fi prototype


Digitizing Ideas (USer Flow + High fidelity take 1)

Feedback from the class crit on the lo-fi helped us hone in on some of the usability problems that we were having: the value flow and usability was still a bit unclear,  the tech needs more visual development, and there were questions about the overall user flow.

We first re-developed the user flow to be more explicit. This helped get us crystalize our ideas and start from the same page to create the first high-fidelity prototype.

The flow now included several steps to get from the home data page, through the computer vision portion, to the placement of the phone near the bed, to the end screen where it would interpret the sleeping from the night before.

There is also a walkthrough buddy avatar on the bottom right who walks you through the steps and does the work with you. However, at any point, the user can hit the question mark icon to reach support and help.

Figure 5.  Re-defined user flow

Figure 5. Re-defined user flow


Refining the Flow

Crit for this version included some great questions: Why does a user start with viewing the score screen? Why can’t the user start from the sleeping test? How does the user end the session after he wakes up? What the user supposed / can do after viewing the data analytics screen?

At this point we went back to the drawing board and once again worked on the flow, trying to address how a user might engage with the app from scratch.

We decided to set the scenario of a returning user who will need to recalibrate their machine, and would schedule a test, which would come up in a pop-up, that would lead them to the test start page.


High-Fidelity Take 2

This version reflected our new flow which was more reminiscent of a story arch with a log-in screen, and a pop-up offering to start the calibration. The user would then go through a checklist to make sure all of the sensors are there, and then have a screen where they can end the session.

Crit of this version included further visual refinements, and challenging the user flow as why would a user need a log-in screen if they’ve been using it for a while, and why would they need to schedule a calibration?

Figure 9. Selected screens from the 2nd iteration of prototypes


High-Fidelity Take 3

This next version was a visual redesign to a dark night-time color scheme. It was a departure from the simplistic visual language of the previous work, and focused on building a holistic look from start to finish.

The flow now drops the user into a prompt to begin the user test. We added a 5 step tutorial on equipment setup that can be (partially or completely) skipped for expert users, and we replaced a computer vision walkthrough of their bedroom with an animated tutorial to alleviate the invasiveness.  

At this point we added a micro-interaction of a progress bar at the calibration state of the sensor application which indicates the percentage status and becomes a clickable button after the progress complete. By clicking that button, user enters the next screen and sleep testing begins.

The user then sees a comprehensive analysis of their sleep pattern with a customized product recommendation based on machine learning algorithms synced with ResMed’s databases.

Figure 10. Redesigned version including a skippable tutorial and a product recommendation page


Final solution

The final design solution further hones in on the user flow and how it is displayed in the app walkthrough.

Big takeaways were the redesigned user flow that started the sleeping testing from the onset with a simple and clean visual design. Rethinking of the button location and hierarchy to place importance on the tutorial, but also giving an expert user the option to skip it using design patterns.

The last step in the interaction was also made less “salesy” as the product recommendation was the first thing a user noticed. Now when a user wakes up and ends their  session - they are able to review their health score and detailed data analytics report first. When they scroll down, the user is given recommended upgrades by myAir and given the option upgrade or not. This let’s the user feel less forced into a decision and keeps the focus on their wellbeing.

Figure 11. Selected screens from final design


Microinteraction Rationale

While the user is putting on the sleep assessment sensors, an avatar with directions on how to place the sensors is displayed in the bottom right corner of the screen. The directions are animated to give concurrent indication based on users’ right or wrong operation. It also gives user a subtle feedback that they have moved on to a new step and will guide user on how to move on to the next step.

Once the user has placed all the sleep assessment sensors in the correct location, the myAir app will ask the user to remain still while the machine calibrates. During this time that the user must keep steady, a progress bar that slides to fill with color and displays the percentage of the calibration will inform users of how close they are to completion. Once the bar has loaded and calibration is completed, the percentage text will change to a clickable button that says “Click to begin test”. This indicates that the user can now move on to the next step which is to actually lets the machine know the test has began. This also gives the user some time to get ready and settle down for their sleep assessment.

Figure 12. Photo example of the progress bar micro-interaction at the sensor calibration section


Video Walkthrough of the Final Solution & Micro-interaction

Watch the video at


Data to be Collected

Our gathered data will largely be similar subsets, but with the added benefit of not only being able to collect it through the CPAP machine, but also through the sensors that the user will apply to their body. This facilitates much more accurate data which feeds into our machine learning software, creating more precise understanding of underlying conditions, leading to better product recommendations.

Data points will include:

  • Ongoing detailed nightly sleep quality info displayed over periods of time (usage hours, mask seal/fit, events per hour, mask removal times, overall sleep time, sleep quality measurement, and awake percentage)

  • Initial diagnosis data on sleep apnea via sleep assessment sensors (same data as above but before CPAP use - baseline)

  • Machine & mask fit (actual fit for user, not modeling or physical averages of body types)

  • Product issues linked to support (how support functions use the extra data we collect)

  • Product personalization (how people follow through on our recommendations)

12 data and upgrade@2x-min.png

Road Map

Our roadmap is divided into two sections, short term and long term plans (Figure 13). In the short term, myAir+ will allow users to send their data to their doctors. In our next step, myAir+ will increase communication between users and their doctors by allowing doctors to write prescriptions to users directly through the app.

This will streamline the process of obtaining a CPAP machine for the users and also build relationship between doctors and ResMed. Positive and strong relationship with doctors will result in an increase in our brand equity with doctors recommending ResMed brand products to more potential customers.  

In our long term plan, we hope to partner with third parties like home medical equipment suppliers/hospital systems and insurance providers. By partnering with third parties, ResMed is able to gain access to additional resources and grow its customer base as well.

Figure 13. Product roadmap