← Home
Next Case →

AMMA: ASTHMA MONITORING AND MANAGEMENT APP

Helping those who suffer from Asthma feel more in control of their condition by managing and monitoring their day-to-day symptoms.
ROLE
UX/UI Designer
TIME
2 weeks

BACKGROUND

As part of my course at Designlab, I designed AMMA (Asthma Monitoring and Management App), which is a companion app to google.org’s healthcare wearable. The aim of this app was to design a user experience that helps those who suffer with asthma feel more in control of their condition.

PROBLEM

Over 39.5 million people (12.9%), including 10.5 million children (14.0%) have been diagnosed with asthma in their lifetimes in the US alone. 18.9 million (8.2%) adults and 7.1million (9.5%) children still have asthma (National Health Interview Survey 2011).

Asthma is responsible for 14.2 million physician visits each year as well as 1.8 million emergency care visits (Center for Disease Control and Prevention).

Research & Planning

A competitive analysis of the top apps for asthma management revealed that there was unexplored potential in this market. To explore the gaps in the market, I created a research plan to answer three initial questions:


Starting with secondary research, I poured through asthma related studies and blogs that documented asthmatics personal experiences with the condition. When I moved to primary research I ran into an obstacle. Since I didn’t know anyone personally with asthma, I hoped that I could find a friendly online community that might be willing to give me some insights.

After posting on some forums, I was promptly banned due to privacy concerns from the community. Instead of giving up on primary data, I attempted a more direct approach by reaching out to individuals who have tagged asthma related issues. After sending a couple messages, I found participants who were willing to give me a glimpse into their condition. I knew I would receive better data if I could interview them, however, I was concerned that it might either scare them off or that we would encounter scheduling difficulties. Since I had limited time to complete this project, I created an extensive survey for them to fill our about their experiences.

UX STRATEGY BLUEPRINT

With my primary and secondary research, I crafted a strategy blueprint for the UX.

Problems to Solve

  • People who suffer with asthma can experience an attack at any time. To keep them safe, they need an easy way to reach out for help when they are in danger
  • People often forget their inhaler’s and do not realize when their inhaler’s are running low on medication
  • With the unpredictability of asthma, people need to be able to track their past attacks, symptoms, medication, and peak flow so they can better adjust their treatment plan

Aspirations

  • For people who suffer with asthma to be able to live with more freedom

Guiding Principles

  • Create simple, clear interactions so the technology does all the work, especially in an emergency

Success Metrics

  • How often users are opening the app
  • How many users have set up reminders from the app
  • High user satisfaction through qualitative research

Application Map & Userflows

Based on my research findings, I documented the app’s key features and functionality through an application map and typical user flows.

USERFLOW - EMERGENCY

For an instance when the companion wearable detects the user’s asthma is out of control, I created a userflow showing how the user would be able to reach out for help.

Userflow - Tracking a Data Point

For another key feature of the app, monitoring symptoms, I created the userflow for how the user would track their asthma symptoms, triggers, medication, and peak flow within the app.

Userflow - Initial Onboarding

Finally, I created an onboarding userflow to document how a user would initially set up the app. Once an account is created, the user sets up reminders and enables push notifications, which allows us to prompt inactive users to check back in and track their symptoms.

Wireframes

Based on my identified userflows I created a wireframed prototype in InVision to test my assumptions.

Testing & Iterations

With these wireframes prototyped in InVision, I conducted in-person and remote usability tests and learned about the issues with this design:

So my goals moving forward:

This research prompted me to remove the inhaler status and the weather from the dashboard and rethink how I was going to prompt users to enter in the data they want to track. I explored a more focused and friendly version that would ask how the user was doing upon opening the app which would prompt them to create an entry for the day so they could have a running log of the quality of their asthma.

I also ran into another conundrum. With a wearable capable of providing endless amounts of health metrics, how was I going to condense it all for the user to understand? I began exploring different data visualization graphs that could show the correlation between weather patterns and asthma symptoms. But again, I was running into the issue of trying to present too much information to the user. To take the work out of the user’s hands, the app would correlate the users vital signs and the weather patterns that the user encountered to calculate what factors are most likely contributing to the users asthma. This would be displayed along with the other stats.

UI Design

To find AMMA’s identity, I created a mood board based on an exploration of the keywords provided in the brief: friendly, innovative, memorable, intelligent, and reliable.

The designs utilize white space with selected color accent to create a simple, clean interface. The color choices used were calming and light which contribute to a sense of ease for asthmatics who are struggling with their condition.

Drawing from my mood board, I began to develop the logo by seeing it different font choices and various arrangements. For colors, I chose a mellow apricot tone to be my the most dominant color because studies have show that pink has a calming efect.

I added the UI elements and colors to the final design. The goal was to keep the interface straightforward and consistent, while still providing a high level of functionality for the user.

Final Designs

User Flow For Adding a Daily Entry

Users have the option to add a note as well as their peak flow numbers to the entry.

Help Mode for Emergency Situations

If they signify that they their asthma is bad or hit the emergency button from the dashboard, they can reach out for help by sending an automated message that includes their location, inhaler status, and vital signs. From here, users call their primary contacts for assistance.

Dashboard View

These entries display the information provided as well as the captured weather data at the time of the entry. If they tap the top navigation, users can see their data at a glance at jump to other months.

Statistics View Scrolled to the Bottom

For the statistics, they can view how well they've been doing, their most frequently used triggers that month, as well as their average severity. The app gathers provided information and wearable data from the weather and correlates it to weather patterns to give users an idea of what environmental conditions are most likely influencing their asthma.

Filtering the Statistics View and Settings

To filter their asthma data, they can select a specific trigger and the chart will display only the entries that include that trigger. The settings page allows users to edit their contacts, set reminders, and offers further customization for their entries.

Icons created by Daouna JeongAlina OleynikMaxim KulikovJory RaphaelBaboon designsKamil ShahArtem KovyazinhunotikaShastryartworkbeanshashank singhAya SofyaIcons Bazaar via The Noun Project.

NEXT CASE: PODIST

A platform for connecting the podcast listening community.