Vitality
An App for COPD Maintenance
Timeline
Dec. '22 to March '23
My Role
Sole Designer
User Research
UI/Branding
Prototype
User Testing
Project Type
School Concept Project
Background
The idea for Vitality started with seeing my family members struggle with various forms of COPD. COPD stands for Chronic Obstructive Pulmonary Disease. Under the umbrella of COPD are Asthma, Emphysema, and Chronic Bronchitis. Many people that suffer from a form of COPD rely heavily on steroids, nebulizers, and inhalers that cause unpleasant long-term side effects. Occasionally after a stint in the hospital, COPD patients will be referred to a week of pulmonary rehab or suggested to do a vague description of lung exercises. Patients are never really taught how or what to do. Various forms of pulmonary exercises have proven to help improve endurance and reduce COPD flares.
So What's the Problem?
There is no accessible way for people to access the knowledge of pulmonary rehab in a convenient way. People must research by scanning articles, and medical journals, or remember brief descriptions from doctors provided in a 15 min office visit. Often patients are left discouraged, unmotivated, and not informed on proper breathing techniques.
Problems To Address
1
Make COPD rehab exercises accessible with a database of on-demand tutorials for patients to learn and utilize breathing methods for better lung health.
2
Provide a variety of learning methods to make it more convenient and even fun to encourage daily exercise.
3
Enable access to health coaches who provide feedback and monitoring of lung capacity so users can see the results and benefits of their work.
The Solution
Create an app for COPD patients to access pulmonary exercises, monitor their lung health and progress, set daily habits to encourage more exercising, and ability to get a pulmonologist's feedback through messaging and prescribed exercises.
Empathize
Methods of Research
Secondary Research - Competitor Analysis and COPD Medical Research
Why? Secondary Research would give me insight into the strengths and weaknesses of competitor apps. To find indirect competitors for different modalities of therapies in which layout and design could still work for lung rehab to gather ideas. The next part of the research would be to gain an understanding of what therapies are offered and understand the physiological mechanisms of breathing with COPD so the app can work within those constraints and actually be useful to patients.
User Interviews
Why? User Interviews are very insightful into what day-to-day life looks like with someone who has COPD. I could understand what works and what does not work for their current line of treatment. Understand when they would use the app, how they would use it, and what they would hope to gain from the app. Also gauging if the app is even needed for real patients, or if they are satisfied with current modalities offered.
Observational Research at Pulmonary Rehab
Why? I had the opportunity to sit in on an introduction assessment with a COPD patient entering pulmonary rehab. I then sat in on six, one-hour pulmonary rehab sessions that had multiple patients doing various activities. This was useful to understand how therapists prescribe certain exercises and why, how the therapists monitor patients, and how patients engage with the activities. This was important in determining how to make the transition from live sessions to a mobile app version.
Secondary Research
Airofit App
Direct Competitor
Aerofit has a similar concept but requires a breathing apparatus to use the app. The incorporation of a breathing device allows for better accuracy and more specific lung training but is not necessary. Airofit's advanced breathing technology linked to the app is more advanced than the MVP of Vitality but also makes it less accessible financially.
Mind Breath App
Indirect Competitor
Similar concept for breathwork but not geared for COPD. This mindfulness app could be used for COPD patients but motivations for accessing and using this app may be different.
PhysiApp
Indirect Competitor
This app is similar in that doctors prescribe a type of exercise but for physical therapy, not breathwork.
SWOT Analysis of Competitor Research
Strengths
Gamifying exercises would engage patients in a way other breathing exercises do not.
Accessible and convenient. Patients can practice anywhere with their phone and track progress without going to in person pulmonary rehab.
Not many apps with the same targeted goal for COPD patients.
This could be a weakness if product awareness is not out there.
Patient accountability with doctors prescribing exercises and tracking lung improvements.
Opportunities
Opportunity to expand into AR and VR experiences with breathing device. (This would be the ultimate goal for the product.)
Creating unique games for all types of patients, young and old would engage more people, and set app apart from other types of rehab.
Possible opportunity for health insurance coverage and doctors able to bill for correspondence through app. (This might give incentive for doctor referrals.)
Better engagement with doctor and pulmonary therapists that was non existent before.
Weaknesses
Doctors would have to recommend and presrcibe exercises. Commitment of two parties involved - Patient and doctor.
This app does not have a breathing device developed to monitor lung function. Lung tests are up to patient reporting until next doctors visit.
Threats
Breathing app with integrated breathing device is on the market which is optimal for real time tracking of lung health and proper lung function.
Other virtual reality apps exist for breath exercises which could be more engaging.
Although, these apps are not geared to COPD and VR is not accesible to all.
User Interviews
Based on my analysis of my user interviews and observational research at a pulmonary rehab I created a Persona and Empathy Map that embodied the characteristics of the COPD patients I spoke with and observed. Creating these deliverables was a helpful way to synthesize a large amount of information into a well-rounded vision as a focal point to reference when remembering who this design was for.
Persona
Empathy Map
Define
The Site Map and User Flow were essential in building the foundation of the MVP app while keeping in mind, Alison, the main user of Vitality. Since this was a school project with the constraint of time, one main task flow was to be built out while considering the End to End app as a whole. The task that would be most beneficial to our main users and set Vitality apart from other apps was the feature of 'Creating a Daily Habit'. That is the task flow that will be explored here.
Site Map
User Flow
Wireframes
The wireframes were based on the site map and user flow. The primary focus for this MVP was
1) Onboarding screens to explain what the app was about
2) Including a registration code for a doctor referral sign-up option
3) Pro Version CTA and
4) A calendar for creating daily habits which is the primary goal of our users
Ideate
Style Guide
Final Design Choices
Final Design Choices
1st Prototype
Test Results
1st Task: Sign Up with Email and Create an Account
Task 1 Summary:
The most misclicks and problems arising with the first task was “about screens”. After watching the recordings and following up, I realized it was more of a problem with the prototype not functioning as smoothly as it should have since the swipe action was not working. The users had to tap on the indicator dots to progress. This was a limitation with the prototype, but I also made the mistake of not enabling the “Continue with Email” CTA to be clickable on all screens for people who did not want to read through the "about screens".
Feedback:
“I would expect to read about the app after signing in.”
“I didn’t really know these screens were going to tell me about the app.”
Solutions:
Include “About Screens” after the sign-up title or make headlines "About Screens" or have a title page before the onboarding series
The future prototypes should allow for more choices and paths to give a better result of what people chose instead of misclicking until they are forced into a path
2nd Task: Where would you go to create a daily habit? Once there, set a reminder alarm to practice the habit.
Task 2 Summary:
The only misclicks for this task were people selecting the “See all of Your Favorite Routines” link at the top of the profile feed. If the user was established, they would be able to create a daily habit from their favorite routines. As new users, they do not have saved videos so they needed to scroll down to the “Create a Daily Habit” card.
“I guess I realize now, I don’t have saved videos. I just wasn’t thinking to scroll all the way down.”
“I would expect to see a menu here.”
(at top of the profile page)
Feedback:
Solutions:
Add a top navigation menu or make cards more visible without scrolling
Possibly include a navigational onboarding instruction with pop-ups the first time they use the app to show where all the features are
In Future Prototypes, the fixed navigation menu on the bottom was only showing up for people who used tablets or laptops, not mobile devices. The nav bar was accessible in Maze prototype preview as well as the Figma prototype but did not transfer to user testing on mobile.
Solutions in Action
Original Design
Testers expected a menu,
which was only profile settings since there was a full Tab Bar menu.
Cards were large which forced users to scroll more and some did not know there were additional cards below.
Design Iterations
Add hamburger menu and kept Tab Bar at bottom.
Menu expanded
Made cards shorter in height to be visible all at once
Original Design
Above, in the original design, users had a sticky tab with 3 buttons to sign up but the top pages were a series of cards explaining the app. Users opted to immediately sign up and then wanted to read about the app. They were given too many decisions to make on one screen = cognitive overload!
Below, users will sign up with an email, create a password, and then read about the app or skip it. After the app walk-through, they will set up their profile.
Design Iterations
Final Prototype
