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 adheres to Google’s design principles.
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 various 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 every year, the usage of current management apps has always been low. Consequently, a challenge moving forward would be to identify how Google Aria can differentiate from existing 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 wearable devices 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. Therefore, Aria must be a product that is accessible to the everyday user and includes automated processes that make for a more intuitive and 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 living with asthma and managing asthma. By the end, I was able to better understand the role that asthma plays in people’s lives and who the target users of Google Aria are.
Number of Participants: 7
Gender: 6 male / 1 female
Age: 18-45 years old
Goal: To define the target user and understand their needs
Process: Empathy Map / Persona / POV Statements + HMW Questions
After gathering primary research data, I built an empathy map to synthesize the data into insights about the user needs. A main point was that most participants have controlled asthma and experience symptoms rarely. However, the empathy map findings indicate that it’s still a priority for them to take certain precautions, which translate into the user needs of Aria’s target user.
To represent the data synthesized from the empathy map, I created the persona “Allen.” By giving context and personality to the research data, we can better empathize with the target user throughout the design process. It’s important to realize here that Allen represents a specific target user group of Aria but most likely doesn’t include all target user groups. For example, future iterations of Aria might want to research those with more severe asthma, children with asthma, or even caretakers of asthmatics. Due to time constraints, I decided to focus on the target user group that I collected the most primary data about.
POV Statements + HMW Questions.
After defining who Allen is as the target user, I created point-of-view statements based on the user insights and needs. From these statements, I created how-might-we questions to encourage ideating solutions to Allen’s problems.
Goal: To ideate 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. The roadmap made it easier to focus on several key features for each of Allen’s needs, avoiding designing too many features at once.
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? By thinking about how Allen 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 analyze the flow throughout the app, I mapped out four user flows that were based on common scenarios I found from the research phase. Examining the the sequence of user actions for each scenario showed the relationships between screens, which gave me a better sense about how to craft intuitive experiences through the UI.
Next, I explored the flow in more detail by constructing a task flow about a user who wants to manage their asthma. This helped me understand more about how the user would accomplish certain tasks based on the decisions the user makes throughout the app.
Goal: To design the mid-fidelity 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. With the sketches, I was able to present my ideas to others and gain constructive feedback at an early stage of the design.
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 along with a few of the main UI changes I made since the skeetches.
Goal: To prototype and gather usability data
Process: Mid-Fidelity Prototype / Usability Testing
Before moving into high-fidelity wireframes, I wanted to first test the usability of the mid-fidelity 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 find areas of improvement based off of feedback from target users
To identify if the information architecture allows for ease of navigation
To determine the usability of the app features, including learnability and efficiency
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 who have a similar background to our persona, Allen. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.
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. Most of the insights involved confusion from lack of visual cues in certain features, which would be improved in the high-fidelity wireframes. Feel free to view the full affinity map here.
Before creating high-fidelity wireframes, I first defined Aria’s branding to ensure that it’s cohesive with Google’s existing brand. 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 its 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. Some of the main changes I decided to make are shown below. Feel free to view the full high-fidelity prototype 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 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. Therefore, A key goal moving forward would be to identify other potential user groups and design for their needs as well. Another challenge was overcoming all the nuances of the medical field. The UI has to be intuitive to a broad population of patients, but each asthmatic views and handles their asthma differently. Consequently, usability testing is even more necessary to understand how the product can accommodate different levels of needs.
Conduct research with other target groups, such as caretakers or those with severe asthma
Design wireframes for other features
Gather usability testing data from target users
Continue organizing design deliverables for handoff