UX Case Study: Design of an Asthma App
The Objective: Developed by the Alphabet, AMMA (Asthma Monitoring and Management App) is a wearable health tracking and monitoring patch for chronic asthma sufferers. I undertook a personal project to design a companion mobile application that will make it easy for wearers to record and track information from the AMMA device.
The Approach: To design a companion mobile app that helps people suffering from asthma to better manage their situation.
Goals:
- Develop a research-informed understanding of who suffers from asthma and how do they currently strive to manage it.
- Understand the current challenges people they face.
- Design a product that improves the user experience of managing asthma
Duration: 8 weeks, spending around 6 hours a week.
Tools: Google Sheets, Figma
Phases: Discover - Define - Strategy - Design
My Role: User Researcher, UX Designer, UI Designer
Phase 1: Discover
Through secondary research, I sought to gain an in-depth understanding of asthma. After preliminary research, I conducted interviews with 6 asthmatics (with moderate to severe asthma) as well as sent out an online survey to family, friends and through asthma forums.
Key takeaways about asthma
- Prevention and long-term control are the key measures to stop asthma attacks.
- Patients are required to recognize their triggers, take steps to avoid triggers and track their breathing to keep asthma under control.
- Asthmatics use devices to measure their breathing (called as “peak flow”). It helps to alert the patients when their symptoms are worsening.
- In case of an asthma flare-up, patients need to use a quick-relief inhaler.
- Asthmatics need to adhere to personalized asthma action plans, which require patients to pay attention to their own symptoms (self-monitor).
Next, through interviews and surveys, I tried to gain insights about the potential users of the app. Based on my findings, I established that there are two demographics that track asthma symptoms: adult asthmatics and caregivers of young children with asthma. This gave me a better grasp on my potential users.
By the end of the discovery phase, I had understanding of the disease and had identified target users of the app.
Phase 2: Define
From the user research takeaways, I created a personas for the two demographics that track asthma symptoms: adult asthmatics and caregivers of young children with asthma. I referred back to these personas throughout the project.
In order to better understand and prioritize the needs of the user, I decided to create empathy maps. Empathy maps not only helped me to strengthen my understanding about the user attitudes and behaviors, but also helped me uncover what was the key driving them.
Based on personas and empathy maps, I was able to identify essential user needs, which I translated into to user stories.
In order to further hone a user’s experience of monitoring their asthma, I developed customer journey maps for each user. I was not only able to identify six distinct phases in the journey, I was able to capture user thoughts, actions, moods and needs in each phase.
By the end of the define phase, I had identified the empathized with the users and had a good grasp of the needs of the users through personas, empathy maps, user stories and consumer journeys.
Phase 3: Strategy
Before designing any solution, I decided to conduct a competitor analysis of the existing apps available in the app store. I tried to reviewing their solutions, app features and analyse possible frictions and frustrations that the users may have while using with. I felt that the overall tone of these apps was very medical, which may restrict their use by patients.
Keeping in mind the limited time I had, I focused on prioritizing user needs with the help of a product roadmap. I felt that from the user perspective, it is very important to meet the needs of the asthmatics. Also, caregivers and doctors would be secondary users.
Before moving into design phase, I created an application information architecture for the high priority features.
By the end of the strategy phase, I had analysed the competitor products, prioritized user needs and created an information architecture for the app.
Phase 4 : Design
Wireframing
Having prioritized the user needs, I began to wire frame the solutions. I hand sketched my initial ideas, as this allowed me to try out a multitude of ideas and iterate them before settling on one.
I considered the following aspects of each option before settling on option 2:
- option 1 presents information in a clear hierarchy, but the horizontal scroll in the screen would have worked better if there are many items to scroll and is not best option for this case
- option 2 offers a clear organisation, however, it has a tad bit long vertical scroll
- option 3 represents ungrouped information to the user, which may be daunting for the user
- option 4 offers a clean UI, but does not cover all the relevant details for the user to view at a glance
Based on this analysis, I felt that the option 2 was the best way to present dashboard screen to the user.
Next, I designed the analytics screen and action plan screen:
For the analytics screen, I depicted peak flow with a continuous graph because I felt that users may have multiple measurements in a day.
Low fidelity design
Next, I started making low fidelity screens for my design.
High-fidelity design
Trying to keep the UI design simple and easy to use, yet informative, I engaged in high-fidelity designs.
By the end of the design phase, I had created critical screens for the app - dashboard, analytics and action plan.
Future
If this were an actual product, the next steps would be to design screens interacting with the user when they record critical medical information using the product. In the next phases, we can conduct usability testing and make the relevant changes to the interface based on user needs and behaviors.
