MO NIT OR ING S L E EP A P N EA P RO C ESS BOOK By: Angela Kim Billy Lambos Alex Rausch
TABLE OF CONTENTS Sleep Apnea Current Technology Problem Our Solution Storyboard Flowchart Version 1 Wireframe Version 1 Paper Prototype Visual Designs Version 1 Final Flowchart Final Wireframe User Testing Modifications Final Design Style Guide iOS Guideline
1-3 4 5 6-7 8-9 10 11 12 13 14 15
16 17-18
19-20 21 22
According to the National Heart, Lung, and Blood Institute, more than 12 million people in the U.S. have sleep apnea.
Sleep apnea is a sleep disorder in which breathing repeatedly stops and starts. 1
According to the National Institutes of Health (NIH), breathing pauses can last from a few seconds to minutes and can occur 30 times or more an hour. When your breathing pauses, you’ll often move out of deep sleep and into light sleep. As a result, the quality of your sleep is poor, which makes you tired during the day. Sleep apnea is a leading cause of excessive daytime sleepiness.
2
Types of Sleep Apnea
Obstructive
Central
Most common form that occurs when the airway collapses or becomes blocked.
When the brain does not send proper signals to the muscles that control breathing.
Complex The combination of both obstructive and central sleep apnea.
3
Current Treatment Continuous Positive Airflow Pressure (CPAP) is the most common treatment for moderate to severe obstructive sleep apnea. The CPAP device is a mask like machine that provides a constant stream of air that keeps your breathing passages open while you sleep.
4
PROBLEM The goal of the CPAP is to improve breathing at night, but how do you know if the machine is working? The apnea hypopnea index (AHI) shows the number of apneas per hour, however it does not show the total number of apneas for the whole night.
None/Minimal: AHI < 5 per hour Mild: AHI ≥ 5, but < 15 per hour Moderate: AHI ≥ 15, but < 30 per hour Severe: AHI ≥ 30 per hour 5
Nea is an application for people with sleep apnea who wish to
monitor their breathing pauses by connecting their phones to their continuous positive airway pressure machine (CPAP). 6
9:00 PM
7
Storyboard
Bob is tired and gets ready for bed
Bob is unhappy with his sleep
8
He turns on his phone and opens the app He connects his phone to his CPAP machine
Bob goes to sleep and in the morning opens the app
Bob sees how his sleep apnea was the previous night
9
Flow Chart Version One Sleep
Activities
Goodnight Unlock
Instructions Info Home
Results
About sleep apnea Terms of use
History
Settings
Calendar Name Weight Height Notifications
Date
Results
10
Wireframe Version One Home Info
History
Settings
Breath Rate Graph
iphone home screen
Launch screen
SLEEP
Late Dinner
Caffeine
Late Dinner
Caffeine
Exercised
Alcohol
Exercised
Alcohol
Congestion
Smoked
Congestion
Smoked
SLEEP
SLEEP
Please place on bed Time Date
End
Launch screen
Launch screen
Launch screen
Goodnight
Slide to unlock
11
Paper Prototype
12
Visual Design Version One
13
Final Flow Chart Home
Sleep
Info
History
Settings
User clicks when ready for bed
User clicks to learn about sleep apnea
User clicks to track severity of apnea
User clicks to edit account info
(connect phone to CPAP) ( goes to sleep ) ( wakes up )
About
Date
Account
End
User clicks to stop monitoring
Results
User sees infograph of results
Information on disorder and treatment
Tips
Advice on helping the apnea
User chooses a specific time
User can log out of account
Results
Fingerprint
User sees infograph of results
User can edit fingerprint identification
Notifications
User can turn on/off notifications
14
Final Wireframe Landing Page Sign up Log In
Tips Button
Username Logo
Data Visual
Allow Nea to use your health data?
Password
Donâ&#x20AC;&#x2122;t Allow
Allow
Enter
Slide Page left for info page 2
End Sign up
Log In
Sleep
Sign up /Log in
Network signup -allow -dont allow
Info page 1
Sleep page Home Info History Settings
Home Info History Settings
Home Info History Settings
Tips Page Week
Slide Page right for info page 1
Weight
Sedatives
Smoking
Narcotics
Sleep
Sleep
Info page 2 Home Info History Settings
Home Info History Settings
Month
Year
Week
Data Visual
History 1
Home Info History Settings
Month
Year
Week
Data Visual
History 2
Home Info History Settings
Month
Year
Settings
Data Visual
History 3
Home Info History Settings
Home Info History Settings
15
Visual Design Version Two 7:30 AM
9:00 PM
9:00 PM
9:00 PM
9:00 PM
16
First User Testing
Feedback: -Unclear to know to press the lightbulb for the tips page -Navigation bar is too dark to see -â&#x20AC;?Moderate Populationâ&#x20AC;? graph is hard to read with the dark purple
17
Modifications
Changed icon to better understand it as a button 8:00 PM
9:00 PM
Navigation bar is lighter to see better
Lighter text to read better
personal a
week avg. ‘moderate populatio personal avg. week avg. ‘moderate’ population
is commonly prescribed to CPAP treat sleep apnea. The goal is to improve breathing at night, but how do you
know if th e CPAP is working ?
The (apnea - hypopnea index) can be a helpful measure to track the effectiveness of your treatment.
Continuous positive airway pressure
Apnea Hypopnea Index indicates severity of your sleep apnea Calculated: # of assisted vents / hours of sleep
Bolder text to read better
(apnea a helpful measu veness of your tre
18
Final Visual Design 9:00 PM
7:30 AM
9:00 PM
9:00 PM
night avg. ‘moderate’ population
8:00 PM
8:00 PM
is commonly prescribed to CPAP treat sleep apnea. The goal is to improve breathing at night, but how do you
know if th e CPAP is working ?
The (apnea - hypopnea index) can be a helpful measure to track the effectiveness of your treatment.
Severity Levels of Sleep Apnea Assisted Vents / Hour Normal
0 to 4
Mild
5 to 14
Moderate 15 - 29 Severe
Continuous positive airway pressure
personal avg. week avg. ‘moderate’ population
Apnea Hypopnea Index indicates severity of your sleep apnea Calculated: # of assisted vents / hours of sleep
edit username:
30 +
While the AHI can be a helpful measure to track the effectiveness of your treatment, it is unclear in telling what percentage of inhales you are breathing on your own. By taking the number of inhales vs. the number of assisted inhales done by your CPAP, you can see how much breathing you have done on your own in a percentage. Your goal is to breathe as much on your own as possible.
edit height: edit weight: age:
notifications: vibrate:
19
Second User Testing
With our improved visual designs, the user was able to see the navigation bar clearly, understand to push the tips lightbulb, and read the graph labels.
20
Style Guide TYPOGRAPHY
COLOR PALETTE
Avenir Light Avenir Medium GRAPHIC ELEMENTS
Adobe Color CC
21
iOS 9 Guidelines iOS Themes Deference: The UI helps people understand and interact with the content, but never competes with it. Clarity: Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Depth: Visual layers and realistic motion impart vitality and heighten people’s delight and understanding. Resolutions and Display Specifications Portrait
Landscape
750 pixels
1334 pixels
PPI 326 pixels per inch
Display Size 4.7’’
App Icon 120x120 pixels
Font Sizes Element
iPhone 6
Nav Bar Title Nav Bar Button Search Bar Tab Bar Button
Size(pt)
Weight
Spacing(pt)
17 17 13.5 10
Medium Regular Regular Regular
0.5 0.5 0 0.1
22