A user research and UX design project for my SUTD Technology Entrepreneurship (STEP) Masters’ Dissertation.
A user research and UX design project for my SUTD Technology Entrepreneurship (STEP) Masters’ Dissertation.
Skills:
User Research
Competitive Analysis
Wireframing
UI Design
Prototyping
Usability Testing
Role:
Product Manager
Timeline:
Jan 2022 - Dec 2023
Tools Used:
Figma
Adobe Illustrator
Adobe After Effects
The Problem
5% of residents in Singapore aged 18-69 years old have asthma, and 20% of children suffer from asthma as well (2020). While asthma treatment has improved rapidly, the number of hospitalizations continue to remain high (Chew, 2021). There also remains high cost of care for asthma due to drugs and consultation fees. How might we reduce hospitalization rate and ease these costs?
The Solution
CAMS (Comprehensive Asthma Management by Self) – Asthma Companion. CAMS is an app that is designed to help asthma patients better manage their asthma on their own. Through medication notifications and the use of streaks, asthma patients are motivated and reminded to take their preventer inhaler daily, which aligns with the current ACE Guidelines in Singapore. The implementation of a digital log also allows for the digital tracking of medication, allowing doctors to better understand their patient’s medication adherence as well as track common triggers to give better advice to their patients during asthma reviews.
User Research
Tools: Research Papers, Survey - Patients, Interview with Doctor
To design CAMS, I needed to understand the motivation and behaviors of both stakeholders – patients and doctors. I conducted surveys with asthma patients, as well as had several digital interviews with the doctor to better understand what both parties wanted. I also read through research papers of past studies done to help patients better manage their asthma.
Defining User Needs:
Patients’ main needs:
Medication Reminders and Notifications
Journal for attacks such as time, duration and location
Understand the reasons for their attacks and knowing how to manage them
Doctor’s main concerns:
Better understand a patient’s preventer and reliever usage over the past month
Current doctor workflow: The doctor tracks his/her patient’s medication intake based on how often the patient comes back for reviews or when new medication is being prescribed (This method is complex and it does not explicitly correlate to one's medication adherence)
Product Goals
Remind users when to take their medication
Remind users to log their medication when taken as well as allows them to record when they experience an asthma attacks
Patients have a better understanding of their asthma triggers and how to manage them
Doctors now have a more definite understanding of their patient’s medication adherence
Competitive Analysis
I began with a research paper that helped to identify common features in current asthma apps as well as the current limitations these apps have. Additionally, I studied various apps including FindAir, Asthma Buddy and AsthmaMD.
Lo-fi Prototype - Wireframing
Includes a streak to encourage users to take their medication daily
A 5 tab navigation bar design was also used since the use of a 5 tab navigation bar is common in popular apps
Asthma Action Plan provides information on various zones, this allows patients to understand how and what they need to do when they are in a certain zone
This tracks the patient's monthly asthma progress digitally, allowing doctors to have a better understanding of the patient's asthma progress over the past month.
Based on the first ideation of the low-fidelity prototype done on Figma, I received several feedback on the design and consistency of the screens and reiterated to create a high-fidelity prototype.
Hi-Fidelity Prototyping 1
Use of a 4 tab navigation bar was designed to keep the screen clear and user experience simple
Toggle buttons allow for the easy access to different zones
Orange button to make the button look clickable
Values are summarized and displayed on the screen for ease of reference during asthma reviews at the clinic
Usability Testing 1
With the high-fidelity prototype, I conducted a cognitive walkthrough with follow up interviews after the entire testing process. 5 participants were involved and both qualitative and quantitative data were collected.
Several methods of user research were used:
Think-aloud process
Quantitative analysis
System Usability Scale
Interviews
Observations
Findings (not all):
Users felt that there could be greater clarity of what each icon in the navigation bar meant
Users were confused with the language used (Asthma Action Plan and Asthma Control Questionnaire - this could be partly because these subjects were not asthma patients and hence did not understand the language used during the study)
Users were satisfied with the calendar page to track their progress
Based on the feedback provided and observations of where the users struggled during the different tasks, I moved on to the next iteration.
Hi-Fidelity Prototyping 2
Use of claymorphism was incorporated into this design. This helps to accentuate the importance of one's daily schedule for the day
Addition of a button to send location to an emergency contact was also implemented and proposed by an asthma patient
Concise text information allows patients to read their action plan quickly
A clearer view of the summary of one's progress provides doctors with a better understanding of their patient's adherence and medication use during asthma reviews
Usability Testing 2
After the second iteration, another round of user testing was done. This time, this was done with 5 different asthma patients.
The methods used were similar to that in User Testing 1.
Findings (not all):
Not all users use an asthma action plan, and moreover, they preferred to look at their symptoms instead of doing a questionnaire to understand which zone they were in
Users were confused how they could add reminders without a medication registering page at the beginning
Users wanted to see the summary of their progress on the home page as well instead of the image of a mountain
Hi-Fidelity Prototyping 3
After several more rounds of feedback from the doctor and the team... here's the final design!
In order to align to business goals, we decided to add "Medications" into the navigation bar
Since asthma action plan was also not used by all patients, it was no longer located placed on the navigation bar
To improve real estate, the boxes outside were removed
Change in "Asthma Symptoms Control" copy and color change to improve accessibility
Reflection:
This project started from December 2021 and had many pivots, which eventually led me to begin on an adult’s version of the app starting in January 2022. While schooling, I had to manage my time by setting aside time to work on the designs, complete my IRB, plan out tasks as well as conduct usability tests. This taught me the importance of time management. Moreover, I was given the opportunity to plan out the schedule to meet deadlines and communicate with the front-end and back-end developers throughout this process. This has taught me the importance of communication and like-mindedness toward a similar goal and purpose.
I started with little knowledge on asthma, but I have now arrived with a deeper understanding of asthma and why it is important to tackle the problem of asthma in Singapore. It has given me a greater empathy towards asthma patients as well as understood the importance of the role of primary care GPs.
This research knowledge on both user experience and asthma has given me a greater insight into the world of mHealth (mobile health) app designs. I really enjoy this experience as it merges both healthcare and user experience design, which are both of where my passions lie in.
Download our app from the brochure below!
The app is currently live on the app store. Nonetheless, if you have any comments on how I can better improve the user experience of this design, feel free to contact me! I will be more than happy to hear your feedback.
Note: Your region settings must be set to Singapore to download this app.