Overview
Client:
Designlab & Google.org Healthcare Initiative
Roles:
UX Researcher. Interaction Designer, UI Designer, Branding
Tools:
Sketch, Marvel App, Usability Hub

What is AMMA?

The Asthma Monitoring and Management app or “AMMA” for short is a new wearable health tracking and monitoring device for asthma sufferers. Asthma affects over 25 million adults and children in the US alone and is responsible for 14.2 million physician visits each year as well as 1.8 million emergency care visits.

AMMA features a child mode, which helps caregivers monitor their child’s asthma when they are not around and alerts a school nurse or doctor if the child has an asthma attack. The product also teaches children the necessary techniques for monitoring and managing their asthma. This helps to reduces the stress of parents or caregivers.

Challenges

Make it educational:
Help children and caregivers gain a better understanding of their asthma and prepare users to manage their asthma in more efficient ways.
Create options:
For child mode, allow parents to choose what their children can view in the app. Make it customizable to the users needs.
Make it kid & adult friendly:
Use color, icons, and gamification that catches and keeps a child’s attention, but is mature enough for a teenager or an adult to use.
Make it learnable:
Use easy to digest graphics and charts that are understandable at a glance.
Make it consistent:
Keep the design consistent with Google’s Material Design.

Research & Strategy

Competitive Analysis | Contextual Inquiries

I started researching by doing a competitive analysis to learn about the current market space and what different problems they solve. I researched current asthma apps as well as non-asthma apps that are medical or allergy based. I found out that there was room for improvement and then started to conduct a contextual inquiry to allow me to empathize with asthma sufferers. This allowed me to learn about their every day struggles and what kinds of data they like to track to help manage their asthma.

From the contextual inquiries, I discovered that parents stress a lot about their children when they are in school. One interviewer told me a story about how the school nurse didn’t reach her daughter in time to give her the inhaler, which could have prevented her child’s asthma attack.

From the data collected, I realized that a focus should be on the caregiver and their child in order to help reduce stress of the caregiver and to prepare children to learn how to manage their asthma properly.

Based off the research collected, I created an empathy map and two personas that focused on the caregiver
and their child.

Information Architecture

During the Information Architecture and Interaction Design phase, I created a business and customers goals and a product feature matrix which plans what features will be a priority for the first design iteration of the app based off the user’s needs and business goals.

Once I prioritized which features would be a priority, I began creating user flows and an application map to map out how a user will perform certain functions within the app.

Interaction Design

Once I understood how a user would potentially navigate the application, I created low fidelity wireframes. I first started with sketches and then brought them into Sketch to get a better idea of how the application will look.

In order to test the usability of my wireframes, I created a prototype using the low fidelity wireframes using Marvel app. I performed in person usability testing using my phone with friends and people recruited via social media. I asked them to navigate the application freely by first signing up. This allowed me to see how a user would normally use the app, without any guidance.

Remote testing was conducted via Usability Hub. I wanted to test the usability of turning off alert forwarding and turning on child mode. For alert forwarding, my original intention was to have users long press on the contacts, which would bring up icons on the top navbar to enable or disable alerts. I discovered that none of the users tried long pressing, but instead chose to click on the three dot menu at the top. Based on the research, I removed the long press function and changed alert forwarding option to be included in the three dot menu.

Turning on child mode was a success and majority of the users tested were able to turn it on and off.

User Interface & Branding Design

I created a mood board to inspire me to find better and more creative solutions. It helped me find the right direction for the visual language of the design. I wanted the visual language to be adult and child friendly, to have a calming affect on the user, and to follow Material Design guidelines. I then designed a logo, a brand style guide, and a UI Kit that will best solve the problem.

After making revisions based off of the usability testing that I conducted, I created high fidelity wireframes.

Next Steps

Moving forward, it is important for AMMA to improve and further develop child mode, to make it more appealing to children. Right now the main focus for child mode is the wearable, but for future iterations the phone app could include more educational content and an improved UI that differs from non child mode.