Google Aria
Building an Android application to take the headache out of managing Asthma
Branding / User Research / UX Design / UI Design / Prototyping / Usability Testing
BACKGROUND:
When it comes to monitoring asthma, there is current gap in the market for wearable technology that allows users to track their vitals. In an effort to solve this, Aria, a combination of a wearable patch and mobile app, has been created to aide asthmatics in monitoring their symptoms. An app is needed that will be developed primarily for Android to be used in the Google suite of apps.
PROBLEM:
Design an Android mobile app that helps users monitor and manage their asthma.
*This is a speculative project, and I am not affiliated with Google.
OBJECTIVES:
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
PROCESS:
01. RESEARCH
Market Research / Competitive Analysis / Contextual Inquiry Interviews
MARKET RESEARCH:
While I knew people who had asthma, my knowledge of the specifics of the condition was limited. To make sure my app would be medically accurate and address user needs, I conducted market research, before engaging with stakeholders and users. I used market research to better understand the demographics of those with asthma and how they manage their symptoms.
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.
ASTHMA APPS
• 100% of top core asthma apps are on iOS, and around 50% are also available for android users
• Reasons why apps have been unsuccessful in attracting and sustaining user numbers;
- No updates
- Little added value
- No behavior change support
- Little Coaching / AI Support
- Little automated data input
- Seldom healthcare practitioner support offered
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. I conducted contextual inquiry interviews with 5 asthmatics about their experiences living with asthma and managing asthma. By the end, I was able to better understand who the target users of Google Aria are the role that asthma plays in people’s lives.
Number of Participants: 5
Gender: 3 male / 2 female
Age: 19-34 years old
02. DEFINE
Empathy Map / Persona / POV Statements + HMW Questions
EMPATHY MAP:
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 a priority for them to take certain precautions to avoid triggers and save time. This translate into the user needs of Aria’s target user.
PERSONA:
To represent the data synthesized from the empathy map, I created the persona “Timmothy.” By giving context and personality to the research data, I can better empathize with the target user throughout the design process. It’s important to realize here that Timmothy represents a specific target user group of Aria but most likely doesn’t include all target user groups. I decided to focus on the target user group that I collected the most primary data about.
POV STATEMENTS + HMW QUESTIONS:
After defining Timmothy 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 Timmothy’s problems.
03. IDEATE
Product Roadmap / Sitemap / Task Flow / User Flow
PRODUCT ROADMAP:
Using the how-might-we questions, I conducted a rapid brainstorming activity and chose features to prioritize for each of Timmothy’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 Timmothy’s needs, avoiding designing too many features at once.
SITEMAP:
I then created a sitemap in order to visualize the information architecture of the app. Since design patterns for asthma management tools are not as well established, I analyzed the patterns in existing asthma apps and empathized with the target user. By thinking about how Timmothy would use the app and process information, I was able to identify the most intuitive way to structure the app.
USER FLOW:
I then mapped out three user flows based on common scenarios I found from the research phase. Examining the sequence of user actions for each scenario highlighted the relationships between various screens
TASK FLOW:
Next, I explored these user flows in more detail by sketching out a task flow for a user looking to manage their asthma. These task flows allowed me to step into the user’s perspective and understand what information would be most important to them.
04. DESIGN
Sketches / Mid-Fidelity Wireframes
SKETCHES:
I started designing the UI of the new features by roughly sketching out screens, Based on my task and user flows, I sketched out ideas for the pages documented in my sitemap and UI requirements document. During this process, I became familiar with Android and Material Design patterns.
MID-FIDELITY WIREFRAMES:
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. Doing so taught me that a hamburger navigation menu would be more intuitive. Below are some select screens.
05. PROTOTYPE
Mid-Fidelity Prototype / Usability Testing
MID-FIDELITY PROTOTYPE:
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.
USABILITY TESTING:
Objectives:
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
User Tasks:
I asked participants to complete tasks based off different scenarios. Here are the basic tasks:
Complete on-boarding
Identify if there are any environmental triggers present
Complete creating a reminder to take medicine
Identify how to log the symptom/triggers of an alert
Results:
I received a lot of helpful feedback from the testing sessions, with participants commenting on how useful its features were, but finding certain design patterns confusing. To make sure I was making improvements based on overall insights, I grouped my notes by similarity.
06. ITERATE
Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit
AFFINITY MAP:
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.
BRANDING:
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. The revisions I made are displayed in the finalized prototype below.
UI KIT:
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.
REFLECTION:
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. Although research was difficult (recruiting participants, finding common pains and needs across a wide variety of experiences), I can reflect on specific stories and feedback that defined the outcome of this product and proved valuable to asthmatic testers.
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.
NEXT STEPS:
Conduct research with other target groups, such as caretakers or those with severe asthma
Design wireframes for other features such as action plan and educational
Gather usability testing data from target users
Continue organizing design deliverables for handoff