Inhale Asthma App

Role: UX/UI Designer & Researcher

Timeline: 4 weeks, 80 hours

Deliverables: Prototype, Branding

Problem

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

Solution

Create an app for managing asthma that adheres to Apple's Human Interface Guidelines.

Overview

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

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.

Competitive Analysis

The main takeaways from the competitive analysis were learning which features were expected from asthma management tools and why the products may have low usage. Therefore, Inhale must be a product that is accessible to the everyday user and includes automated processes that make for a more intuitive and usable app.

User Persona

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.

Empathy Map

I analyzed the information I gathered from the interviews and surveys. From that, I made an empathy map to help me synthesize my interview findings. The main point was that most participants have controlled asthma and experience symptoms rarely. This process helped me organize the results by the patterns I found within them. These patterns led me to several insights, and in turn, the ability to deduce the needs of my users.

Business & User Goals

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 or of these goals?"

POV & HMW

After defining who Matthew is as the target user, I created point-of-view statements based on user insights and needs. From these statements, I created how-might-we questions to encourage ideating solutions to Matthew’s problems.

Information Architecture

App Map

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.

User Flow

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.

Interaction Design

wireframe sketching

With the information architecture laid out, I Balsamiq tool for some wireframe sketching. I paid attention to iOS existing design patterns. With the sketches, I was able to present my ideas to others and gain constructive feedback at an early stage of the design.

Interaction Design

Mid-Fidelity Wireframes

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

Key Findings

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.

Affinity Map

From the feedback and observations gathered during testing, an affinity map was created to help pull out the common patterns and recurring themes. I was then able to identify key insights and recommend revisions to address each one.

User Interface Design

UI Kit/Brand Style

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.

High-Fidelity UI Designs

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.

Next Steps

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 a kid-friendly interfaces.
5. Explore the idea of opening to other bronchial issues and COVID-19.

Results

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.

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.