Cover.png
Interactive App Design

Role

Product Designer
Group Project

Timeline

January 2022 - February 2022

Software

icon.png

Figma, FigJam

CoverPhones.png
 

What is this project?

Context

ResMed manufactures medical devices used to treat respiratory conditions such as sleep apnea. While ResMed has been around for a relatively long time, there are always more opportunities to potentially augment an organization’s value through new services.

Opportunity

By investigating the current contexts of sleep apnea treatment and ResMed’s services, we identified an opportunity to better serve the loved ones of sleep apnea patients. The app we designed, OurSleep, uniquely leverages both the patient and their partner’s data to improve collective sleep quality.

Our team’s goal was to design a service in the form of a mobile app that would help ResMed’s stakeholders better achieve their goals.

Cover.png

User Research

Background research, project understanding, and insights

Research Process

Background Research

ResMed Objectives

Sleep Apnea

ResMed's Brand Identity

Secondary Research

ResMed Competitors

Stakeholders' Domains

Stakeholders' Needs

Stakeholder and User Insights

Jobs-to-be-done framework

Stakeholder Mapping

Value Flows

What does ResMed do?

Background domain research to understand ResMed's objectives

Sleep Apnea

Before delving further into the problem space from ResMed’s perspective, we were first eager to understand what sleep apnea or sleep-disordered breathing (SBD) entails. We learned that SBD is any abnormal respiration during sleep, including snoring, lapses in breathing and reduced airflow. It is estimated that more than 100 million people globally are affected by SDB, and nearly 90 percent of that population does not receive treatment. Furthermore, the treatment often involves a continuous positive airway pressure (CPAP) machine, which can be quite noisy.

ResMed's Goals

We gathered information about ResMed’s internal structure, featured products, etc. This allowed us to learn about ResMed’s long and short-term goals, as well as the tone and voice that the company adopts when they communicate their market value and services to different customers. This information would help us establish stronger alignment between our design and ResMed’s brand identity. We also looked into ResMed’s competitors to identify comparable services and brainstorm ways in which we could help ResMed stand out more.

Stakeholder Needs

Utilizing the Jobs-to-be-Done framework, we determined that the main job that patients are trying to accomplish is improving their sleep quality.

stakeholderNeeds.png
Stakeholder Needs

Stakeholder Mapping

Because ResMed offers a wide variety of services, we identified many different stakeholders, from patients to doctors to equipment suppliers. Using the structure of a map, we drew key connections based on how different stakeholders interact and transfer value to each other. Although the flow of monetary value may be more recognizable, we also determined that value can come in many different forms, such as data, feedback, knowledge, or improved health.

 

As we considered each stakeholder relationship in detail, it became apparent that connections and exchanges between stakeholders often entail the co-creation of value

stakeholderMap.png
Stakeholder Mapping and Value Flows

As we considered each stakeholder relationship in detail, it became apparent that connections and exchanges between stakeholders often entail the co-creation of value

Cover.png

Ideation

Brainstorming products ideas that would provide value to our client

Reverse Assumptions

Our ideation process started with us generating assumptions about ResMed, their current products/services, and sleep apnea patients. We then reversed these assumptions as a strategy for revealing latent opportunities.

This exercise pushed us to think beyond the services that exist under ResMed as of now and brainstorm novel ways of creating value for the organization and/or its stakeholders.

ReverseAssumptions.png
Reverse Assumptions Brainstorming

Finding our opportunity

Based on our research and analysis, a key stakeholder that none of ResMed’s services seem to directly target is the partner of a sleep apnea patient.

value.png

To not consider the partner is a missed opportunity because they likely have a co-dependent relationship with the patient. More specifically, the sleep qualities of the patient and their partner are interconnected, so providing benefits to one will naturally lead to co-creation of value: improved collective sleep quality.

Design Brief

Using the “When I... But.... Help Me... So I...” design brief format as a starting point, we decided on the context, barrier, goal, and desired outcome for our target users: partners of sleep apnea patients.

designBrief.png
Design brief specifying context, barrier, goal, and desired outcome 

Given our focus on the co-creation of value between partners and patients, we wanted to convey the sentiment of collectiveness. In addition, we phrase the intended outcome as “collective sleep quality,” which further emphasizes the co-creation of value between sleep apnea patients and their partners.

Adopting ResMed's Tone and Voice

Keeping ResMed’s current services and marketing in mind, we decided that we wanted the our app’s tone and voice to be caring, informative, and conversational.

toneVoice.png
ResMed Brand Voice Chart
Cover.png

Visual Design

Sketches, iterations, demo prototype, and more iterations

Lo-Fidelity Ideation - Iteration #1

User flows, sketches, reflection

User Flows

The user flow allowed us to visualize how our target users would navigate and access core features within the app.

userFlow.png
ResMed Brand Voice Chart

Wireframes

We then sketched out rough wireframes for each of the screens and features within the user flow. Ultimately, we decided to include screens for a home/dashboard, a journal for users to log their day, a library of strategies, and statistics from the past. As a team, we agreed to keep our sketches simple so we could focus on improving the app's structure rather than diving into the visual design of the interaction experience.

wireframes.png
wireframes.png
Some key wireframes

Feedback and Next Steps

We wanted to add an augmented reality (AR) tool or feature that would scan a CPAP machine and help users identify what parts of their machine needed to be fixed. However, this feature isn’t easily accessible or discoverable within our wireframes. There was also discussion about whether the term “AR” could risk confusing users, as not everyone would be familiar with the technology.

Those who gave us feedback suggested that including a tracking feature to gather data from the user while they sleep would be conducive to streamlining the narrative around our service, which relies significantly on tracking sleep data from users.

Our value proposition is that the app would help partners and patients improve their collective sleep quality. However, from our wireframes, it was not clearly shown how partners would be able to understand the data displayed and see how their sleep is affected by the patient.

Mid-Fidelity Mockups - Iteration #2

We continued with parallel prototyping as a way to avoid fixation and foster group collaboration.

As we transitioned from hand-drawn sketches to digital wireframes, we also paid more attention to the specific layout and visual hierarchy of different elements on the screen. A key milestone during our mid-fi work was shifting our focus heavily towards the strategies screen.

Challenges for this design

The challenge of designing effective input methods and output displays became more prominent through this process. Some questions we needed to consider included:

 

How might we allow users to log their day and check their sleeping patterns?

How might we present personalized strategies and their underlying, data-driven rationale?

Mockups

midfi1.png
midfi2.png
Mid-fi Prototype

These wireframes focused more on making sense of the labels and structural organization imposed by the home dashboard, as well as how they manifest on the remaining screens: journal, statistics, score, and strategies. We wanted data to be meaningful and intuitive in a way that would minimize cognitive load imposed on users.

Feedback and Next Steps

Parallel prototyping facilitated the integration of individual ideas into our mid-fi iteration, giving us the chance to explore several alternatives simultaneously and offer more constructive feedback to one another.

While the information architecture and data visualization of the application could be refined, we were diverting from the core objective of highlighting data that could inform strategies for enhancing collective sleep quality.

At the end of our mid-fidelity iteration, we agreed to adjust priorities and investing most of our energy on delivering data-driven strategies and showcasing the correlation between data from patients and their partners.

High-Fidelity Prototype - Iteration #3

Aesthetic and Branding

colors.png
Colors

Because our app prompts customers to log data at the end of the day and track their sleep, we inferred that customers would likely use the app right before bedtime and in dim lighting. As a result, we decided on a dark theme with complementary cool colors, reasoning that this would better accommodate the users’ eyes in a dark environment.

type.png
Typeface

For our typeface, we decided to use Apercu, a grotesque sans-serif. As a sans-serif font, Apercu conveys a modern tone and allows for greater legibility. The factor of legibility is especially important for our service because the informative descriptions that we include for strategies and graphs are relatively compact bodies of text.

 

Prototype

hifi1.png
hifi2.png
High-fi Prototype

We focused on screens that most acutely differentiated our service from existing offerings from ResMed and their competitors. These screens best represent how our service introduces value and rationalize why we deployed the service in the form of a mobile app instead of through other platforms.

Feedback and Next Steps

Some feedback suggested making the strategies screen more accessible, not only through a navigation bar, but also through correlating screens like the ‘partner profile’ screens. Overall, we were commended for our concept of targeting ResMed’s patients and their partners, allowing joint access to information to open opportunities for data aggregation, and delivering more personalized sleep apnea prevention strategies.

Feature Highlights

Microinteractions

microinteraction.gif

Trigger

User tries to access strategy that relies on aggregation and analysis of multiple users’ data

Rule

Microinteraction stops if and when system is done processing data

Feedback

Sheep animation indicates to users that system is in loading state

Loop

The animation in the microinteraction repeats until loading state has concluded

Data Collection

dataCollection.png

When granted relevant permissions to access both the patient’s data and their partner’s, our app automatically processes those datasets and identifies key correlations between the two individuals’ sleeping patterns.

Our app extrapolates different insights from aggregate data and pinpoints factors (e.g., mask seal strength) that are most likely to affect users’ sleep quality. The system then leverages this analysis to point users towards personalized and actionable strategies.

Cover.png

Pitch

The strategy and structure of our final presentation

Strategy

When creating a pitch for our service, we leveraged a narrative with four parts: problem context, solution, value proposition, and roadmap.

According to an online source, the three leading causes for divorce in the country are infidelity, financial trouble, and snoring, and about 73% of snorers have sleep apnea. This information served as an intriguing hook to engage the audience with our problem space and a data-backed justification for why we decided to focus on serving the patient’s partner.

To effectively demonstrate our solution in a real-world context, we walked through our interactive prototype through the eyes of a persona: Evelyn. We demonstrated how the app highlights key data correlations and delivers personalized strategies to boost Evelyn and her partner’s collective sleep quality.

Finally, we reiterated the value flow between ResMed, the patient, and their partner, making sure to highlight how our service’s attention to the partner generates new value.

pitchHook.png

We structured our presentation in the following format

pitchStructure.png
Pitch Structure
Cover.png

Final Thoughts

My reflection of this project

This project taught me a lot about maintaining an organization’s image, reputation, and overall voice towards users when designing products. I learned about using existing resources and products from ResMed and transforming them into new and improved services to benefit both the company and the user. For this unit, our team focused on an unusual user base, targeting patients’ partners instead of the patients themselves, which introduced interesting ways of thinking and components we needed to consider while designing our mobile application. For example, we had to not only think about what the partner would like to see in an app but also what they would need to see relating to the patients like their health data, sleeping cycles, etc. Overall, it was a fun project!