This project was created as a Designlab capstone project. The aim of it was to design a superior user experience for’s new healthcare wearable and companion app for asthma tracking and management.

Client: designlab

The Problem

Asthma affects over 25 million people in the US alone and is responsible for 14.2 million physician visits each year as well as 1.8 million emergency care visits. The associated cost of treating this chronic disease is rising.

The Solution

The best way to stay healthy and keep doctor visits and costs down is to monitor and manage asthma. So we created an easy and non-intrusive way of managing asthma in the form of a wearable that detects user’s breathing patterns as well as other health vitals and can inform the user when their attention is needed through an intelligent and user friendly companion mobile app.

The Process

Stage 1: research

I started out my process by doing a competitive analysis of the top 4 asthma management apps. I found that there was a lot of room for improvement and space to enter into the market. I created a research plan consisting of user interviews, surveys and secondary research. After interviewing a few people I knew personally who had asthma I found that their asthma was very mild and they only occasionally experienced symptoms.  So I ventured out to find people online. I posted in the asthma Subreddit and got at least 10 people to fill out my extensive online survey. I was able to gain some insight into the daily struggles that these people were experiencing. This was crucial for me since I didn't have a great understanding of asthma before and being able to empathize with them was what would enable me to create a user experience that could be life changing.

After creating an empathy map and personas to really wrap my head around the statements people made, the key insights I gathered for moving forward involved creating an app with a low barrier to entry because people are lazy, and having the app be very intelligent and dynamic by detecting certain times and environments and prompting the user when their attention is needed - like a personal assistant of sorts.

The Wearable

Throughout this process I was trying to find the best ways to integrate the capabilities of the wearable technology with the companion app so that I could create a really great experience and ease the lives of these people a bit more. After researching each of the specs and their capabilities I found ways to utilize the GPS by using the user’s geolocation to collect data on weather, air pollution and pollen count. I also thought of using the accelerometer to let the user quickly report an emergency by doing something such as flicking his wrist. One major flaw I found was the lack of inhaler integration. The one thing all asthma users have in common is the use of an inhaler. It is crucial that they know where it is at all times and know how many puffs they have left.  The current technology of the AMMA wearable has no way to connect to an inhaler. Adding a tracking chip should be looked into for future versions.

Stage 2: Strategy

I created a UX strategy blueprint to focus the research and direct the project moving forward. After creating a list of features I would like in the app, I created a project roadmap for version 1 as well as future updates.

I then quickly sketched out a rough storyboard to see how the app and wearable could incorporate into the user’s daily routine.

Last, I made an app map to determine the structure and flow of the application. 
I split it into three sections: onboarding, the main app flow and notifications.

Stage 3: wireframing

Then I moved on to wireframes. I started out by doing some rough sketches and then moved onto making higher fidelity digital wireframes. The following are version 1 of the wireframes before user testing was conducted and iterations were done.

main dashboard navigation drawer Dr. Inbox peak flow peak flow logs wearable alert uncontrolled dashboard action plan emergency

Stage 4: Prototyping and testing

I created a prototype using Marvel and high fidelity wireframes. The users I recruited to test the app did not have asthma so that affected some of the results. Instead, all I could test for was usability and not the effectiveness for the asthma users. I found some usability issues, made changes and tested again.  I also created some UsabilityHub click tests to gain some insight on how people perceived the app and if it was obvious where to click.

Stage 5: Ui Design

I wanted to create a clean and flat design using some Google Material principles such as cards and a floating action button. I also wanted to include modern illustrations to indicate the weather and environment since that is a big trigger to some. The colors, fonts and layout I chose are meant to give off a sense of calm and space.

possible directions

Final app Designs

dashboard dashboard menu Logs peak flow uncontrolled asthma action plan dr inbox

Landing page design

landing page
← back to projects

Get in Touch

Have a project you want to collaborate on? Want to tell me how much you like my work?  
Send me a message - I'd love to hear from you!


Your message has been sent. I will get back to you shortly.
Oops! Something went wrong while submitting the form. Please try again.
- OR -