Asthma Management App
Timeline: Nov 2018, 2 weeks
Deliverables: Android app prototype
Team: Solo, with mentor guidance
Role: UX/UI Designer
Tools: Sketch App, Illustrator, InVision
Aria is Google’s up-and-coming project that targets those living with asthma. The product aggregates information about the user’s condition through a wearable patch and other Google services. Our mission is to create an app for managing asthma that extends upon Google’s current design direction.
This is a speculative project, and I am not affiliated with Google.
To design an app that follows Android design patterns
To follow Google’s most recent Material Design guidelines
To make managing and monitoring asthma a seamless experience for users
Goal: To research the industry, competitors, and target users
Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews
Being somebody who doesn’t have asthma herself, my first priority was gaining an understanding about the subject matter. I sought facts for the questions: What is asthma? What is the demographic like? How is the current market for asthma management apps? I was surprised to learn that despite asthma being a prevalent chronic disorder that’s increasing in numbers, the usage of management apps is consistently low. Consequently, a challenge moving forward would be to identify how Google Aria can differentiate from current solutions and encourage consistent usage.
To determine how Aria can compete against current asthma management solutions, I searched for direct and indirect competitors and then conducted online research about what they had to offer. This allowed me to compare strengths and weaknesses of various products, ranging from wearables to mobile apps. The main takeaways from the competitive analysis was learning which features were expected from asthma management tools and why the products may have low usage. Each product’s strengths couldn’t outweigh its main weakness, which was either requiring users to have professional knowledge or lacking automation of data input. To differentiate from competitors, Aria must be a product that is accessible and has automated processes that make for a more intuitive, usable app.
Contextual Inquiry Interviews.
After gaining a general understanding about the subject matter, I needed to learn more about how people live with and manage asthma. To do so I conducted contextual inquiry interviews with 7 asthmatics about their experiences with asthma and managing asthma. By the end, I was able to learn about the role that asthma plays in people’s lives and who the target users of Google Aria could be.
Number of Participants: 7
Gender: 6 male / 1 female
Age: 18-45 years old
Goal: To define the target user and understand their needs, goals, and frustrations
Process: Empathy Map / Persona / POV Statements + HMW Questions
To make sense of the primary research data, I organized data points from each interview participant into an empathy map. I then rearranged the data points into related groups to gain insights about the target user’s needs.
Next, I created the persona “Allen” to represent the user needs synthesized from the empathy map. Allen’s goals, motivations, and frustrations also reflect the the most reoccurring data from the interviews. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
POV Statements + HMW Questions.
After defining who Allen is as the target user, I created point-of-view statements based on the insights and his needs. From these statements, I created how-might-we questions that serve as starting points for ideating solutions to Allen’s problems.
Goal: To ideate website features, information architecture, and flows
Process: Product Roadmap / Sitemap / Task Flow / User Flow
Using the how-might-we questions, I underwent a rapid brainstorming activity and chose features to prioritize for each of Allen’s needs. I selected features based on feasibility, how many people the feature would impact, and how much impact the feature had on each person.
I then created a sitemap in order to visualize the information architecture of the app. From studying Google’s Material Design guidelines for Android apps, I decided to have the basic structure include a bottom navigation bar for the main screens and floating action button for user input. A challenge for me was deciding how to organize the features, since design patterns for asthma management tools are not as well established as other app services. To overcome this, I analyzed the patterns in existing asthma apps and empathized with the target user Allen - what would make the most sense for Allen when navigating through Google Aria?
To analyze the flow throughout the app, I mapped out four user flows that were based on common scenarios from the contextual inquiry interviews. Examining the the sequence of user actions for each scenario showed the relationships between screens, which gave me a better sense about how to create the UI such that the interactions are intuitive.
Next, I explored the flow in more detail by constructing a task flow about a user who wants to manage their asthma. In this process, I thought more about how the user will accomplish certain tasks based on the decisions they make throughout the app.
Goal: To design the basic UI of the app
Process: Sketches / Mid-Fidelity Wireframes
I started designing the UI of the new features by roughly sketching out ideas. I then made cleaner versions of the sketches, paying close attention to Google’s existing design patterns. In the sketches, I experimented with having five buttons in the bottom navigation bar because I thought that an “Emergency” screen that users can access in case of dangerous asthma situations should be more efficiently accessed through the app with less clicks. However, I decided that the “Emergency” screen should be within the “Medication” navigation button for three main reasons:
I realized when I started wireframing that there is simply not enough space in the bottom navigation bar for all five buttons.
Based on the user research, our target user Allen is somebody who very rarely experiences emergencies. Is the screen space on the bottom navigation bar worth dedicating to this feature? My guess was that it would be better to sacrifice a bit of efficiency in accessing the “Emergency” screen and instead prioritize information that would be more relevant to the user on a daily basis.
Doctors prescribe treatment plans for asthmatics that is commonly referred to as “Asthma Action Plans.” This plan includes medication and steps for daily preventative treatment as well as emergency treatment. Therefore, combining the “Emergency” features into the “Medication” screen would directly reflect how the information is conveyed between doctors and their patients.
From the sketches, I was able to gain valuable feedback from peers and mentor about the flow and UI elements. While constructing the wireframes in Sketch, I paid attention to following Google’s Material Design guidelines and considering the feedback I received from others. Below are some select screens.
Goal: To make a prototype for usability testing
Process: Prototype / Usability Testing
Before moving into high-fidelity wireframes, I wanted to first test the usability of the design with asthmatic participants. Therefore, I created an Android prototype in InVision using the mid-fidelity wireframes to prepare for usability testing. Feel free to interact with the prototype using the button below.
To test if users can accomplish tasks successfully
To identify areas of inconsistency within the design
To determine the overall usability of the app features
I asked participants to complete tasks based off different scenarios. Here are the basic tasks:
Create an account
Identify how to log a symptom
Identify how to view heart rate trends
Determine whether your asthma in under control
Determine if there are any triggers to be aware of
Log morning medication
Start asthma action plan
Indicate the trigger for asthma symptoms
I conducted usability testing with 5 asthmatics that had a similar background to our persona, Allen. I gathered data from direct observation and audio recordings.
Goal: To iterate upon the design using usability data
Process: Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit
I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. Then, I drew insights from the synthesized information, which informed recommendations for the next iteration in the design.
In order to create high-fidelity wireframes, I first needed to define the branding. I made a mood board with references from Google’s Material Design and the company’s recent brand refresh. After evaluating how Google brands its apps, I decided to stick to their iconic four colors against a white background theme and follow a similar direction for the logo design in terms of geometry.
High-fidelity wireframeS + prototype.
Finally, I created the high-fidelity wireframes to include the branding and reflect the recommendations from the affinity map. Based on the usability testing data, some of the main changes I decided to make were:
Redesigning the home screen to have clearer visuals of the user’s condition and potential triggers
Making certain UI elements, such as the vertical stepper, more usable and clearer in their functionalities
Feel free to view all the screens in InVision using the button below.
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. I based my design choices for the color, typography, iconography, and UI elements on Google’s Material Design guidelines and current branding of Google apps.
In this project, 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. Looking back, I only had time to concentrate on designing for one persona, but the research indicates that Aria could cater towards other certain user groups, such as caretakers and those with more severe asthma. Another challenge was dealing with all the nuances of designing for the medical field. Each asthmatic views and treats their asthma differently, so the UI has to be designed such that it makes sense to a broad population of patients.
Design wireframes for other features
Conduct research with other target groups, such as caretakers or those with severe asthma
Continue organizing design deliverables for handoff