Jessica W. Liu
UX / UI Designer
amma-header-bg.jpg

AMMA

AMMA

Asthma Management Mobile App Design

 

MY METHODS: USER RESEARCH, UX STRATEGY & DESIGN, PROTOTYPING, USER TESTING, UI DESIGN

AMMA is a fictional wearable device that helps monitor chronic asthma. This is my approach to designing a companion application to work in conjunction with the wearable device for my DesignLab UX Academy capstone project.

 
 
 

PROJECT BRIEF

The Asthma Monitoring and Management App or ‘AMMA’ is a new wearable health tracking and monitoring device for chronic asthma sufferers. The technology measures a wearer’s breathing patterns, blood pressure, steps, sleep patterns, and other vital statistics. It is different from a regular fitness tracker in that it is designed specifically to monitor chronic asthma.

 

THE CHALLENGE

To go with the new technology, AMMA will need a mobile app to work in conjunction with the new wearable device. The mobile companion app will allow users to track and organize data pertaining to their asthma.

 

 
Artboard 5.jpg
 

Research

To fully understand this area of medical technology, I began by doing research into the field of asthma management. I conducted a competitive analysis among current asthma management products and applications to understand how others were currently solving the problem of asthma management.

This helped me understand where the AMMA device had advantages and what worked/didn’t work among the competing products.

Next, I conducted user research to understand asthma from the patients point of view. Finding users with asthma severe enough to warrant monitoring was a major challenge as most people I had encountered had relatively mild and intermittent asthma. I instead went through various online asthma forums and communicated with asthma sufferers and caretakers through there.

I also created an online asthma questionnaire to gather more quantitative data on the average asthma patient. The survey garnered 16 responses, 3 of which were asthma caretakers (a parent of a child with asthma).

These were the main user research takeaways:

  • The respondents often take mental notes of their triggers and symptoms rather than noting it down anywhere

  • Respondents like asthma monitoring devices because it confirms their symptoms and allows for them to take the necessary medication.

  • Participants disliked the lack of clarity on what the devices read (“It can be hard to interpret what my oxygen levels actually mean, especially when it's okay but I'm having symptoms”)

  • Most people also do not have an asthma action plan in place, primarily because they do not know what it is.

  • A common fear among respondents is that they will not know when an attack is severe enough to warrant certain medications. Some also rely on going to a hospital as an action plan if an attack becomes severe enough (a very costly option).

  • A common fear is that many asthma sufferers will be without medication or medical help in times of an asthma attack.
     

USER PERSONAS

With these insights in mind, I then created personas to embody the goals and needs identified through the user research. Ultimately, I created 2 personas, one of an asthma sufferer (primary user/wearer) and one of their caretaker (secondary user)

 
 
 

USER SCENARIO / USER FLOW

To focus on the purpose of the AMMA app and wearable, I then created a specific use case scenario to help me identify the main requirements for the application

This aided me in the creation of a main user flow that involved both personas that I created.

 
 

APPLICATION MAP

Based on the user flow, I identified the main components and organization needed for the application by creating an application map.

 
 

WIREFRAMES

Based on the main user flow and application map, I hand sketched some potential designs on paper before making turning them into higher fidelity wireframes on Sketch.

The first iteration covered the basic needs from the primary user: a way to understand the asthma status, an easy to view and follow the action plan, a way to see the historical data, and any potential triggers for an asthma flare-up.

 
 Wireframes - Iteration 1
 

After discussing the wireframes with my Designlab mentor, I created a second iteration where I condensed the information shown on the home screen dashboard, which now focused only on information necessary for users to achieve their primary goals. I also iterated on the design of the action plan by making it a step-by-step process instead of a flat checklist of tasks to do.

 
 
 

PROTOTYPING & USER TESTING

Creating a clickable prototype through InVision, I conducted quick user tests focusing on usability and learnability of the design and flow. The users I tested were not asthma patients so feedback I received was solely for the overall functionality and certain design elements. I also conducted some UsabilityHub tests to find out if users understood where to click for certain tasks.
 

Testing helped identify areas where users were confused and revealed what elements were missing to make the app more functional. Based on the feedback, I updated the wireframes with the following changes:

  • Expanded asthma history screen to include conditions/triggers of previous days
  • Provided more clarity to users on what screen they are in
  • Consolidated "current conditions" on dashboard to bring the information up in the hierarchy
  • Included medication information

 

UI DESIGN

For the UI of the application, I wanted to create a sense of calmness and ease of breathing yet still maintain a sense of urgency in times of need. Since asthma attacks can sometimes be a scary and difficult situation, my main goal was to have AMMA’s companion app a reliable, trustworthy, and calming companion to any asthma patient

AMMA - Style Tile.jpg
 

DESIGN VARIATIONS

The possible UI variations I explored for the final design.

ui-versions.jpg

 

FINAL KEY SCREENS

In the end, I moved forward with following UI style for a calmer, more soothing aesthetic feel to the overall application with lighter colors. I wanted to create a sense of openness within the application so users didn't feel so overwhelmed with all the information and colors while still being able to distinguish asthma status (i.e. green/yellow/red levels).

 
 
 

REFLECTIONS

This project was one of the most challenging projects I have ever worked on as I owned the application (and UX design) process from start to finish. There were many possibilities and data points to consider so I had to learn to contain my ideas for future and nice-to-have features. With a set amount of time for the project, I learned to focus on an application that met user goals and primary scenarios first and foremost. 

If I were to continue with this project, I would conduct further, more thorough user testing with asthma patients to get their perspective on all aspects of the application, from functionality to design, and test the application's task completion success rate.