The Asthma Monitoring and Managing App (AMMA) is a companion app that pairs with a wearable electronic device for managing and monitoring asthma. The wearable measures a user’s breathing patterns, blood pressure, steps, sleep patterns, and other vital information. The companion app allows patients to monitor and record their symptoms, triggers, medications, and asthma action plan.
This was a capstone project for Designlab’s UX Academy, so I performed all roles on this project: research, UX design, interaction design, UI design, and project manager.
My personas focused on two users with different types of asthma. Dan has exercise induced asthma and wants to maintain his active lifestyle while being able to better predict his asthma attacks. Abby has allergy induced asthma and is looking for a hi-tech solution for managing her condition.
My main focus for this project was the daily input of information. Because so many patients fail to properly monitor their asthma I wanted to focus on how the interaction design for that process might improve asthma management.
The dashboard displays information collected from the wearable device and prompts the user to enter any or all of the following information:
Based on the information input by the user and the wearable device the app will determine the patient’s risk zone and guide them through their asthma action plan.
The initial home screen provides the data collected from the wearable along with a CTA for the user to enter their data. The app will not display patient entered information until after the patient has input information on a given day. By requiring the user to actively input information in order to view all their metrics I hope to increase the rate of monitoring symptoms, triggers, and other conditions.
Once the user has entered this information it will appear on the dashboard for the remainder of the day. Individual metrics can be selected to display historical information.
An accordion screen allows users to enter feelings, symptoms, triggers, rescue inhaler use, and peak flow. Data can be saved at any point; not all areas need to be completed.
Asthma Action Plan
Once data has been entered, the app prompts the patient to complete their asthma action plan. The app determines the patient’s current risk level (green, yellow, or red) and walks them through the steps of the appropriate action plan.
The app features a timer that counts down the waiting period after the patient takes their medication and then prompts the user to indicate if they’re feeling better, at which point they may complete the action plan.
I used Flinto to created a mid-fidelity prototype with basic animations for usability testing. I tested with three users, and while they were somewhat confused by the limitations of testing with a prototype instead of a live app they had no trouble completing the required tasks within the app.
Because asthma risk zones and action plans are classified as green, yellow, and red I wanted a color palette that would be able to incorporate all three colors as accents on different pages. My primary colors of blue and gray provide a cool and subtle balance to the bright accent colors.
The A and M in AMMA are very geometric and pointy and the word itself has an inherent symmetry. I decided a geometric font would play up this nature and after trying several opted for Futura. For the body font I initially selected Gill Sans, but decided that, combined with Futura, it felt a little heavy for a user interface. In the end I opted for Roboto due to its widespread use in user interfaces, and my references to Google’s Material Design in other aspects of my UI design, such as the shadows on my buttons.
I sketched about 20 different ideas for the logo, trying several variations involving lungs and puffs or waves of air. I tried out a few different versions in Sketch and ultimately settled on an outline of a set of lungs with the AMMA wordmark slightly overlapping them.
Asthma Action Plan
Once I had my style tile established I began updating my wireframes into screen templates. I started with the steps of the asthma action plan, mimicking the look of onboarding screens that walk users through tasks one step at a time, using dots to indicate the user's’ progress through the plan.
For the data entry screens I kept the accordion style from my wireframes, and each option is a white rectangle that expands when selected.
I went through several iterations on the dashboard screen, drawing inspiration from other dashboard designs found online. I started with a flat design with brightly colored icons, changed the icons to outlines, and tried using cards before ending up at my final variation, a flat design with a greater emphasis on the numbers on the dashboard with smaller icons
Dashboard and Key Metrics
I applied my final UI to all versions of the dashboard and created screens for selected metrics. The heart rate screen is an example of a metric that is tracked by the wearable device and the peak flow screen is an example of a screen based on user input.
While I opted to focus on the daily input of information, I think there’s a lot of interesting potential for the onboarding process of an app like AMMA. The onboarding process could be as simple as collecting basic profile information, but could also be an opportunity to collect a patient’s common triggers and symptoms in order to customize the data entry process.
My research indicated that weather alerts were extremely important to users, and given more time I would have liked to explore the weather portion of the app, including how the alerts would display, how they could be customized, and how they might be integrated into the dashboard to provide a holistic look at a patient’s potential risk of an attack.
Because the AMMA app seeks to improve the rate of monitoring and managing asthma, I think it would be beneficial to implement a gamification aspect to the app, with badges awarded for regular monitoring, and for consistently remaining in the green zone, for example.