Inhale Asthma App

iOS asthma management and monitoring app


There is no permanent cure for asthma, but its symptoms can be managed and controlled with adherence to a proper treatment plan.

Inhale is a combination of a wearable patch and a mobile app that helps people monitor and manage their asthma. It can track a user’s breathing patterns, sleep patterns, symptoms, triggers, medication, and other vital statistics. My role in this project was to design an easy to use mobile app for the wearable device.


Research Findings

I conducted research on asthma to better understand the difficulties asthmatics face and the current methods of managing asthma. I searched facts for various questions: What is asthma? How is the current market for asthma management apps? I also gathered survey results online and conducted interviews with asthmatics to gain insight into dealing with asthma on a daily basis.


The results from my research concluded that Inhale would effectively benefit people who are recently diagnosed with asthma because Inhale will help them to understand and monitor their asthma closely. To represent the data synthesized from the empathy map, I created the persona “Matthew.” By giving context and personality to the research data, we can better empathize with the target user throughout the design process.


Defining the Features

By reviewing all my research and returning to the project brief, I was able to identify key business & user goals. Design decisions from that point onward needed to be made with these in mind. My question at this time was: "How might we design an app that meets some of these goals?"


The next step in understanding the users and their needs was to establish an organized hierarchy to outline specific features and understand what steps a user might take through the product. By thinking about how Matthew would use the app and process information, I was able to identify the most intuitive way to structure the app. I’ve provided high-level descriptions about how I organized the app’s information architecture in the sitemap.


To further visualize the process that users will go through in the app, I developed a user flow. Examining the sequence of user actions for each scenario showed the relationships between screens which gave me a better sense of how to create the user interface.


Mid-fidelity Wireframes

I started designing the UI of the new features by roughly sketching out ideas. From the sketches, I was able to gain valuable feedback from peers and mentor about the flow and UI elements. Throughout the wireframing process, I referenced Apple's Human Interface Guidelines for iOS as well as design patterns in competitor apps. Below are some select screens along with a few of the main UI changes I made since the sketches.


Usability Testing

Using the mid-fidelity wireframes, an interactive prototype was created with Marvel App for usability testing. The goal of the prototype was to test the overall flow and user pains for the Inhale mobile app. Testing was completed through remote moderated testing and remote via the Maze platform. I conducted usability testing with 4 asthmatics who have a similar background to our persona, Matthew. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.


Key Findings

Users were generally able to complete all the given tasks fairly quickly and easily with few errors, however, the qualitative feedback we received was extremely rich and there were several takeaways that forced us to rethink the design. The most important discoveries we made in usability testing were related to users' varying levels of knowledge. Here are a few examples...

"I was wondering how recommendations were determined (why 2-3 puffs every 15 mins)?"

"Who would get the phone call if I clicked on the “Call emergency” button and what are the next steps?"


Brand Style Guide

I put together the new iOS Design System components that I need to build for the UI involving the new feature. One of the high-level design goals for this project was to name the product and choose a visual design direction. Up to this point, I wasn't sure what to call the app! I created a UI Kit so that I would have all of the UI and branding elements in one document, and could easily apply them to my wireframes to create hi-fidelity mockups.


Keeping it Simple

I applied Inhale’s UI elements to create consistent visuals across all screens. I designed the screens and overlays required for users to complete core tasks involving onboarding, medication intake and starting action plans.


1. Conduct research with other target groups, such as caretakers.
2. Gather usability testing data from target users.
3. Design, prototype, and test other features from my roadmap.
4. Explore the idea of kid-friendly interfaces.
5. Explore the idea of opening to other bronchial issues and COVID-19.

A key goal moving forward would be to identify other potential user groups and design for their needs as well. The UI has to be intuitive to a broad population of patients, but each asthmatic views and handles their asthma differently. Usability testing is even more necessary to understand how the product can accommodate different levels of needs.


Keep iterating, to infinity and beyond

I was challenged with a subject matter I wasn’t familiar with. As a result, I paid more attention to gathering research and empathizing with a target user group that I couldn’t directly relate to as somebody without asthma. I had to rapidly learn and incorporate the subject matter into my designs. Looking back, I only had time to concentrate on designing for one persona, but the research indicates that Inhale could cater towards other certain user groups, such as caretakers and those with more severe asthma.