Interactive App Design
Role
Product Designer
Group Project
Timeline
January 2022 - February 2022
Software
Figma, FigJam
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.
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.
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.
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.
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.
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.
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.
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.
ResMed Brand Voice Chart
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.
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.
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
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
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.
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
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
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
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.
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.
We structured our presentation in the following format
Pitch Structure
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!