Asthma Care

Wearable Device Companion Mobile App


Asthma Is Complicated,And Can Be Hard To Manage created revolutionary technology that measures an asthma patient’s breathing patterns, blood pressure, steps, sleep patterns, and other vital statistics. They were seeking a user-centered design to integrate their wearable device into a full-scope management system.


Create Companion Mobile App To Make Managing Asthma Easier
My role was to create a companion mobile app for the wearable that included not only data visualization for the device information, but offered holistic care management for the asthma patient. This independent project plan started with multi-dimensional user research, and worked through the design process to then focus on UI, creating system branding and a web landing page to market the product.

  • User Research
  • Competitive Analysis & UX Strategy
  • Information Architecture
  • Interaction Design
  • Brand Development
  • User Interface Design

User Research

Having no personal knowledge of asthma care needs, the first challenge was to educate myself about the disease and current care methods. 

  • What is asthma, exactly?
  • Who does asthma affect? Who else besides the patient does it affect?
  • How many different types of asthma are there?
  • What kinds of medication and treatment options are there?
  • What triggers an asthma attack?
  • Why are some patients hospitalized for an asthma attack? How can this be prevented?

I discovered there are a variety of distinctions between types of asthma, and care regimens are layered and complicated.

Talking to Real People 
Secondary research brought on a whole new set of questions to ask. I sent out a survey to gain insights directly from patients.

  • What is it like having asthma? What limitations do you have because of asthma?
  • What medications do you use? How do you track usage?
  • How often do you have an asthma attack? What triggers it?
  • What else do I need to know, to create an awesome app to help manage asthma?

“Keep it fun and interesting, make it pretty.  Make the app very detailed because asthma itself is very detailed.”

The responses were informative and eye-opening.  Gaining empathy for chronic asthma suffers was instant, and making their day-to-day easier with this new technology was something I would love to help with.

One-on-one Follow-ups
My survey results were informative, but I felt like I needed to have conversations with a few people to really get a sense of their lifestyles.  

  • What's the difference between daily and rescue medications?
  • How often do you use a peak flow meter?
  • What vitals do you pay attention to?
  • Do you keep a journal to record your symptoms/triggers?

Of course, each interviewee had completely different answers to each of these questions, especially when comparing someone with mild persistent to severe persistent asthma. It was becoming clear that in order for the app to reach everyone it needed to, the app needed to cover a lot of information and be extremely customizable.

Persona Development
Identifying the ideal persona for this project was tricky, since there were so many variations to the care of asthma.  Since only a few of the survey responders were caregivers, I felt the results were not strong enough to support a second persona right now, but this could be added with a little more time.  Kaitlin became the primary persona for this project, and her needs are diverse.

  • Kaitlin Randall: Millennial. "Sometimes when I laugh hard, I literally can't breathe. I start wheezing and gasping for air, while still laughing. #asthmaprobz"

Competitive Analysis

  • Asthma apps already in the market: what features are the focus/important to them?
  • Wearable companion apps: what is being viewed in the companion app? How is it presented?
  • Fitness apps: How are they showing goals and progress? How are they displaying those stats?

Refining the Strategy

  • How would a management system make Kaitlin's life easier?
  • What does the device add that currently isn't available on a mobile app?
  • What would get Kaitlin to open the app and record a journal entry?
  • What elements of care need reminders? What would they look like? On the device? Notification on user's phone?
  • What are Kaitlin's wish-list items?

By re-evaluating the initial survey results and asking a few follow up questions in the online asthma forums, I was able to distinguish which elements needed reminders, and what wish-list items Kaitlin really wanted for her ideal app.​

Information Architecture


  • Starting with device info on landing screen, center in navigation. Each section really has a landing screen, that leads to more information/actions
  • Since each section has multiple functions, keeping menu navigation in the same place for each
  • Full management system: doctors, caregivers, emergency contact.
  • How can I simplify? Make it easier/faster for Kaitlin to get what she needs?
  • Medical information security concerns? How do I address those?

Interaction Design

Initial Wireframes

  • In order to develop the right visuals, I took a short break to do additional research on data visualization for vital signs, then how to make them clean and easy on mobile
  • My new friends in the asthma forums were helpful in finding realistic peak flow measurements
  • Looking back to the fitness apps showed visually clean statistics display

Usability Testing
Thinking about how Kaitlin might use her new device and app on a typical day, I created an initial prototype and asked users to attempt to complete several actions to find answers to these questions:

  • What else should be in "create account"?
  • Do the on-boarding screens show you what you need to use the app?
  • Do the "My Device" screens make sense? Can you find what you want easily?
  • Does the journal entry cover what you need to track?
  • Do the asthma attack give you what you need to accurate record triggers?
  • Can you easily change elements to overlay in "My Stats"?
  • What else is in the app that you like? What's missing? What else doesn't work?

Check out the interactive prototype

Design Challenges
Results overall were good, but there's a lot to work on. After just two users, I made the following changes:

  • Added wording to the back arrows to help identify what screen the user was navigating from
  • Added a confirmation screen after journal entry and asthma attack
  • Simplified navigation to accordion design for "My Stats" section

These changes helped the following users focus on other features. They had more feedback:

  • Two users asked if they could change their medication settings. I said yes, and they were both able to do so successfully. Think this is action should be more intuitive.
  • On-boarding needs to be re-thought once branding is complete, as three users found the arrows distracting from the info on screens
  • "Create Profile" screens need to be designed, which might help introduce some of the detailed actions to users

Going forward:

  • Kaitlin felt an online forum was really important, and should get attention sooner rather than later
  • One user asked what info could be sent to their doctor. Technically, anything in the app, but this should be reviewed with physicians, on the easiest way for them to view the data

Brand Development

Concept Board
Since branding was a big part of this project, I chose to spend the remaining time working on this part of the project instead of iterations of the prototype. 

  • Kaitlin wanted the app to be "fun and interesting...pretty"
  • is offering innovative technology to make life easier
  • What data vis looks pretty, but is equally effective at communication?

User Interface Design

Style Tile

  • Turquoise is considered friendly and happy, enjoying life. In color psychology, it heals the emotions and creates balance. Felt this was a subtle, yet important element for the brand

The Latest Wireframes
Adjustments were made to navigation based on usability testing results. I also chose a stand-in for the AMMA device has developed, in order to show a few features and screen colors.

Landing Page requested a Landing Page design to showcase the new product line, and share information to potential users.

Thinking Back, Looking Forward

  1. Talk to the developers: figure out what the device can physically show, and make sure to take full advantage of it's capabilities while understanding it's limitations 

  1. Learning to simplify data for mobile was a great experience. Thinking how to further simplify for the device display will be about prioritizing only what needs to be shown to convey the message

  1. ‍Develop screens for both device and phone for alerts. Test to see how different users want to be alerted, and at what levels.

  1. Work on motivation factors. Now that there's a lot of stuff in the app to help, what would make it more fun to use?

  1. It would be great to get a more hi-fi prototype in front of users like Kaitlin, that suffer from chronic asthma.  Then fine-tuning areas that only those with asthma know about would bring a level of detail they could be excited about
Back to Top
2017 Arin Clement