Google Aria
Assisting caregivers manage asthma
Overview
Google Aria is a wearable device (necklace or chest patch) that pairs with a mobile application to help users monitor and manage asthma by tracking vitals and other signs, such as: (01) Heart rate (and zones); (02) Wheezing and coughing (intensity and frequency); (03) Respiration (breathing rate in breaths/min); (04) Exercise (detects walking, running, cardio activities, biking, or swimming); and (05) Sleep (duration and stages).
The Challenge
Google needs help with developing the new mobile application that pairs with the device to help asthmatic people and/or their caregivers manage asthma.
Objectives: (01) Design an Android mobile app that helps users monitor and manage asthma and adheres to Material Design and other Google apps; and (02) Design a logo for Google Aria that fits with the Google family
Role: UX Researcher, UX/UI Designer, Interaction Designer
Duration: 2 weeks
Tools: Pencil + paper, Figma, Illustrator, Airtable, Trello, 850 Post-its + a Sharpie
This product is fictitious, and this project and its content are used for educational purposes only.
Design Process
01
Empathize
02
Define
03
Ideate
04
Prototype
05
Test
06
UI Design
01
Empathize
I started this project knowing very little about asthma, so I needed to conduct research to learn about how asthma impacts people and how people currently manage it.
PROCESS: 01 Plan research | 02 Conduct research | 03 Synthesize findings
01 Plan research
RESEARCH PLAN
To direct what I wanted to learn from research, I created a Research Plan.
Research goals
Determine the user’s goals, needs, motivations and frustrations regarding managing their asthma
Determine the caregiver’s goals, needs, motivations and frustrations regarding managing another person’s asthma
Determine the characteristics of people who use their mobile device to track personalized data
Methodologies
Secondary: Market research, Competitive analysis, Provisional personas
Primary: User interviews
02 Conduct research
MARKET RESEARCH
Conducting market research helped me gain a broader perspective about who asthma affects, how it affects them, its prevalence, and how people currently manage it. I also learned what types of people use wearable technology and/or mobile apps to manage their health.
Asthma
PREVALENCE (USA)
1 in 13 people have asthma (2019)
More than 25 million Americans have asthma (2018):
7.7% Adults and 8.4% Children
Asthma is a leading cause of limitations in daily activity and costs the US $81 billion annually
1 in 12 (About 6 million) children in the US ages 0-17 years have asthma
Asthma is the leading chronic disease in children (2018)
1 in 6 children with asthma visit the Emergency Department annually
About 1 in 20 children with asthma are hospitalized for asthma annually
Emergency Department and urgent care center visits related to asthma attacks were highest among children ages 0-4 years and Non-Hispanic black children (2016)
Asthma attacks occurred most frequently among children younger than age 5 (2016)
Asthma has been increasing since the early 1980s in all age, sex and racial groups (2018)
DEMOGRAPHICS
Age Groups (Asthma is more common in children than adults)
1) Adolescents (Ages 11 - 21)
2) Children (Ages 5 - 11)
Gender
1) Female adults (Ages 18+) - 9.8% Women vs. 5.4% Men
2) Male children (Ages <18)
Poverty level
1) 450% of poverty threshold or higher
2) 100% to less than 250% of the poverty threshold
Asthma Demographic Data (United States, 2018)
Race (All Ages)
1) White (Non-Hispanic)
2) Black (Non-Hispanic)
3) Hispanic
Race (Children)
1) About 16% Black children
2) About 7% White children
Mortality Rates
1) African-American (more than any other race)
Wearables & Health Apps
STATISTICS
In 2016, consumers agree that wearable technology:
88% - helps people exercise smarter
87% - helps parents keep their children safe
81% - relieves stress
80% - makes them more efficient at home
78% - makes them more efficient at work
78% of respondents with a smartphone-connected wearable say they use it more frequently precisely because of that connectivity
97% are satisfied with the smartphone application supporting their device
Parents (adults with at least one child in the household) are significantly more likely (49%) than non-parents (24%) to own multiple wearable devices
62% of parents own a wearable device
DEMOGRAPHICS
Roughly 1 in 5 U.S. adults (21%) regularly wear a smartwatch or wearable fitness tracker
About 1 in 3 Americans report at some point having:
34% - Worn a fitness tracker, or
32% - Tracked health statistics on phone/tablet app
Roughly 50% of U.S. adults in upper-income households were current or former fitness tracker and health apps users, versus:
About 1 in 3 in middle-income households
About 1 in 4 in lower-income households
Fitness trackers and health apps are more popular among women than men
Adults ages <55 are about twice as likely to have used these products as adults ages 55+
Nearly 50% women ages <50 used these products
Men aged 50+ are the least likely group to use them
35% or more of city and suburban residents used these products
Less than 3 in 10 rural residents used either one
Demographic Data (United States, 2019)
COMPETITIVE ANALYSIS
I sought direct and indirect mobile app competitors to understand how they currently help people manage asthma, as well as, how Google Aria could potentially be positioned amongst them.
PROVISIONAL PERSONAS
Using demographic data and general trends from Market Research, I created provisional personas to determine who Google Aria’s potential users are and to direct my recruitment for user interviews.
The School Kid
Ages 5 - 18, lives in a suburb or urban city, White (Non-Hispanic), male
GOALS
Reduce daily asthma symptoms
Be able to participate in all school activities
Prevent asthma attacks
PAINS
Constantly checking mobile device during class time
Always having to carry an inhaler
Remembering to take the right medication at the right time
Tracking conditions that trigger asthma
Communicating needs to other people/ caregivers in the event of an attack
The Worried Parent
Ages 30 - 45, tech-savvy, may be caregiver of child with asthma, lives in a suburb, has young children
GOALS
Prevent child's asthma attacks
Efficiently monitor child's vitals
Ensure child takes the right medication at the right time
PAINS
Not always having access to child's vitals
Communicating child's needs to other people/caregivers
Being away from a child with severe asthma
Taking the time to log child's asthma activity
USER INTERVIEWS
To gather users’ perspectives, I conducted remote 1-on-1 interviews with six participants, who have/had asthma or who are/were caregivers for asthmatics, to ask about their experiences managing asthma and using health mobile apps.
Participants
Ages: 19 - 52
Gender: 4 Male; 2 Female
Race: 5 Caucasian (including 1 Russian & 1 Hispanic); 1 Asian
Occupation: 2 Unemployed; 1 College Student; 3 Working Professionals in health-related and technology industries
Marital status: 1 Married; 1 Divorced; 4 Single
Dependents: 2 participants have dependents
Location: 3 Texas; 2 Wisconsin; 1 New York/Massachusetts
03 Synthesize findings
With all my observations, I needed to organize and analyze them and find a way to effectively communicate my research findings to relevant stakeholders.
EMPATHY MAP
With one observation per sticky note, I sorted (and resorted) similar sticky notes into themes to create an Empathy Map. After finding more than 15 themes, I selected the most prominent ones, each from which I distilled an insight and then extracted a need.
From research, I learned caregivers play a prominent role in managing asthma, so I decided to focus on the following insights and needs relating to caregivers.
Insights
Users want to be able to breathe well
Users want access to their medication
The frequency of asthma issues indicates whether there is something wrong
Many documents are required to be shared regarding details about a child's asthma
Children generally have to take their medication regularly
Needs
Users need to know whether their medications are effective at alleviating asthma
Users need to know where their medication is
Users need to know how frequently they are having issues
Certain caregivers need to know how to manage a child's asthma
Users need to know if a child is taking their medication at the right time
PERSONA
I extracted user needs, motivations, frustrations, and goals regarding asthma management from my Empathy Map and consolidated all my research findings into a caregiver persona to help me communicate my research, build empathy with relevant stakeholders, and inform my design decisions for the remainder of the process.
Joanna Peterson
“If you can’t breathe, you could lose consciousness ---none of that is good.”
THE WORRIED PARENT
Ages: 45
Race: White
Gender: Female
Location: Texas
Occupation: Technical trainer for a technology company
Household: Married with 2 children (1 son has Asthma)
Goals
To prevent her son from having an asthma attack
To make sure her son takes his daily medication
To ensure her son can participate in as many activities as he would like
To make sure her son has access to his rescue inhaler wherever he goes
Needs
To know where his medications are
To know how frequently he is having issues
To know whether their medications are effective at alleviating asthma
To know if her son is taking his medication at the right time
To know how to manage a child's asthma
Frustrations
Worrying that he forgot to take his daily medication
Completing the detailed paperwork for other caregivers to help manage her son's asthma
Remembering the conditions during one of her son's asthma attacks
Constantly paying attention to how he breathes
Worrying that there may be triggers she doesn't already know about
Motivations
Love for her son
Wants her son to be healthy
Concerned about her son's livelihood
02
Define
After learning about the asthma management issues, I needed to frame them in different ways to facilitate ideation.
PROCESS: 01 Frame from user perspective | 02 Frame for problem solving
01 Frame from user perspective
POV STATEMENTS
I created point of view (POV) statements to frame the problem from the user’s point of view by structuring user insights and needs from my Empathy Map in the following format: User [need] because [insight].
Joanna needs to know whether her son’s medications are effective at alleviating his asthma because she wants her son to be able to breathe well.
Joanna needs to know where her son’s medication is because she wants her son to have access to his medication.
Joanna needs to know how frequently her son is having issues because the frequency of asthma issues indicates whether there is something wrong.
02 Frame for problem solving
HMW QUESTIONS
I created a How Might We (HMW) question for each POV statement to help frame the problem in a question that enables brainstorming for many solutions.
How might we help Joanna evaluate whether her son can breathe well after he takes his medication?
How might we help Joanna know where her son's medications are at all times?
How might we clearly convey how often Joanna’s son is having asthma issues?
How might we help Joanna determine if her son is taking his medication when he is supposed to?
How might we help Joanna more easily share details about how to manage her son’s asthma?
03
Ideate
After framing issues into questions, I began thinking of ways the mobile app could provide solutions.
PROCESS: 01 Generate ideas | 02 Strategize | 03 Build information architecture | 04 Design for interaction | 05 Sketch
01 Generate ideas
BRAINSTORMING
I began Ideation by brainstorming as many ideas as I could for each HMW question.
Method
Mindmapping for 3 rounds (2 mins/round) for each HMW question
Themes
After completing Mindmapping for all HMW questions, I synthesized the ideas to identify major themes across all mindmaps. Below are the themes I discovered:
Importance of data collection
Trust vs. Empathy (i.e., trust asthmatic person to relay information vs. understand how asthmatic feels)
HMW Question #3: How might we clearly convey how often Joanna’s son is having asthma issues?
02 Strategize
PRODUCT GOALS VENN DIAGRAM
To define the product goals, I had to identify different stakeholders’ goals, see how they align, and understand their impact on my design decisions. To identify stakeholder goals:
Business goals: I referred to the design brief.
User goals: I pulled goals from the Persona.
Technical goals: I thought of goals developers may have for the mobile app.
After plotting all the goals in a Venn Diagram, I could identify the aligned goals (in the middle) that I would use to direct my design decisions going forward in the process.
PRODUCT FEATURE ROADMAP
I created a Product Feature Roadmap to help prioritize product features that best address the project objectives, the HMW questions, and products goals.
The Process
01 Research features competitors have
02 Identify how features address product goals
03 Determine effort required to implement features
04 Estimate feature’s effectiveness in meeting product goals, project objectives, and/or user motivations, frustrations, and needs
05 Prioritize features to identify which feature(s) to design first
03 Build information architecture
APPLICATION MAP
I created an Application Map to incorporate features and content prioritized from the Product Road Map into the mobile app’s information architecture. It also helped me think about navigation, content grouping, and placement of content, functions, or features.
The Process
01 Compare competitor application maps
02 Reference application maps of other Google apps
03 Reference aligned product goals to further build out the Application Map
Here is a snippet of a major area in Google Aria’s information architecture
04 Design for interaction
To help validate the app’s information architecture and content placement, as well as, understand how a feature might work, I thought about how users might interact with the app to accomplish main tasks.
UI REQUIREMENTS DOCUMENT
While referring to the Product Feature Roadmap, Application Map, and Product Goals, I created a UI Requirements Document, documenting which screens, content, features, and functions users might interact with: To add an asthma incident for Joanna’s son.
TASK FLOWS
I mapped task flows to determine which screens, content, features and functions users would interact with and how they would interact with them to accomplish major tasks.
Depicted above is the task flow for the following task: To confirm a potential incident for an asthmatic person.
USER FLOWS
To help determine content and feature placement that assists users with decision-making and task completion, I mapped user flows for the Persona and a School Nurse, selecting their tasks and noting my assumptions about them before I began.
Depicted here is a user flow for the School Nurse: To view the persona’s son’s Vitals Subscreen
05 Sketch
Sketching helped me visualize screen layouts, determine product feature placement, and apply information architecture.
LOW-FIDELITY SKETCHES
Using the UI Requirements Document, Task Flows, and User Flows as guides, I sketched the main screens users would encounter during major tasks in the app.
04
Prototype
I prepared a mid-fidelity prototype of the mobile app to quickly test its usability and validate its information architecture, hoping to gather more accurate and honest testing findings without the distraction of user interface (UI) design.
PROCESS: 01 Create mid-fidelity wireframes | 02 Build prototype
01 Create mid-fidelity wireframes
MID-FIDELITY WIREFRAMES
To assess the app’s overall tone and begin building the app’s layout and design, I created mid-fidelity wireframes in Figma.
The Process
01 Identify main screens involved in major tasks in the app
02 Create grayscale elements and components from Google’s Material Design kit
03 Reference low-fidelity sketches while placing elements and components across major screens to create a consistent design
Here are the Home screen, Vitals Subscreen, and Specific Incident Subscreen
02 Build prototype
MID-FIDELITY PROTOTYPE
Before creating a prototype in Figma for usability testing, I thought of the main tasks users might want to accomplish in the app. Then, gathering my mid-fidelity wireframes, I built more mid-fidelity screens to flesh out the task flows and interactions.
05
Test
Testing the app’s mid-fidelity prototype would evaluate its usability and validate its information architecture, which would inform improvements before applying UI design.
PROCESS: 01 Decide what to test | 02 Conduct usability tests | 03 Synthesize findings | 04 Revise wireframes
01 Decide what to test
USABILITY TEST PLAN
I wrote a Usability Test Plan to serve as my guide for conducting usability testing.
Method
Remote Think-Aloud usability testing for Google Aria’s mid-fidelity mobile app prototype in Figma
Tasks
Add a new incident for Joe Peterson with the details of the [asthma] attack
Email the potential incident for Joe to his pediatrician, Beth Hayward, for confirmation
Find out how many hours Joe was asleep last night
Find out what the name of his daily inhaler is
02 Conduct usability tests
USABILITY TEST FINDINGS
Using my Usability Test Plan and my mid-fidelity prototype, I conducted usability testing with five participants, who each shared her mobile device screen while completing tasks.
Participants
Ages: 23 - 49
Gender: 5 Female
Race: 3 Asian, 1 African/Syrian-American, 1 White
Marital status: 2 Married, 2 Single, 1 Divorced
Dependents: 2 have 1 child
Occupation: 3 Medical professionals, 1 Medical Student, 1 Working professional in communications
Location: 1 California, 2 Florida, 1 Hong Kong, 1 Massachusetts
Traits:
All are asthma caregivers
2 have asthma
Average completion time: 12.4 mins
Test metrics
Test Completion Rate: 75% of the users completed all 4 tasks
Task 1: 0 incomplete
Task 2: 2 incomplete
Task 3: 1 incomplete
Task 4: 2 incomplete
Error-free Rate: 96% of the tasks were completed without errors
03 Synthesize findings
AFFINITY MAP
I created an Affinity Map to organize and analyze my testing observations, enabling me to identify the users’ main frustrations and generate and prioritize actionable revisions to improve the app’s usability.
The Process
01 Write one observation per sticky note
02 Group (and regroup) sticky notes into themes
03 Draw insights from largest themes that focus on user frustrations
04 Think of specific, actionable improvement for each insight
05 Prioritize revisions based on the effort required to make the revision and the impact the revision would have on the app’s usability
Below are the insights and correlating revisions in order of priority.
PRIORITY
High
Insight: Most users expect to access all information regarding the tracked person from their vitals subscreen.
Improvement: Make information from tracked person's profile in the Directory directly accessible from the vitals subscreen.
Medium
Insight: Most users did not know where to start looking for a tracked person's medication.
Improvement: Place medication information in a more obvious area (i.e., Vitals subscreen).
Low
Insight: Most users failed to complete tasks because they did not think to look at other sections of the IA.
Improvement: Make other sections of the app more accessible by placing CTAs or Menus on relevant screens.
04 Revise wireframes
I revised the mid-fidelity wireframes based on the effort and impact of the revision.
HIGH-PRIORITY REVISIONS
I only revised the mid-fidelity wireframes for the high-priority revision due to its overarching impact on the mobile app (i.e., indirectly implementing medium- and low-priority revisions).
After the high-priority revision, the New Contact Modal has a CTA to the Vitals Subscreen, where users can view all details about a Tracked Person.
06
UI Design
To meet product goals and project objectives, I had to create a logo and UI for Google Aria that aligns with other Google products.
PROCESS: 01 Create the brand | 02 Apply UI | 03 Build high-fidelity prototype
01 Create the brand
First, I defined Google Aria’s brand by undergoing the following branding process to identify its brand attributes:
01 Reference the design brief
02 Conduct research on logo designs for other Google products
03 Reference Google apps and Material Design for general UI elements and patterns
LOGO & STYLE TILE
Through the branding process, I identified the following brand attributes for Google Aria: clean, fresh, intelligent, and reliable.
Using these attributes and referencing logos of other Google products, I sketched logo designs based on various themes, such as air, flow, lungs, and the lower and uppercase letter “a”. In the spirit of maintaining Google’s clean UI, I chose a simple color palette as a backdrop for using additional colors to enhance data visualization features.
Logo sketches, exploration, and resulting options
02 Apply UI
After establishing a clear branding concept, I could begin applying consistent UI design across all screens.
UI KIT
To help create consistent designs going forward, I applied the branding concept to repeating elements, components, and templates and consolidated them into one place to create a UI Kit.
HIGH-FIDELITY WIREFRAMES
Using my UI Kit, I consistently applied branded elements and components to all mid-fidelity wireframes and finalized the design by refining content and infographics.
03 Build high-fidelity prototype
HIGH-FIDELITY PROTOTYPE
I gathered my high-fidelity wireframes, created additional screens to flesh out previously selected tasks, and connected all the screens with interactions in Figma to build a high-fidelity prototype that helps stakeholders visualize and experience the mobile app.
Conclusion
In helping Google create a mobile app to accompany its wearable technology to help manage asthma, I learned the following:
Remember your assumptions as you conduct research. I failed to realize the various caregiver roles during secondary research and therefore, overlooked interviewing medical professionals.
Just because everyone else is doing it doesn’t mean you have to, too. Nearly every competitor has a medication tracking feature, but Google Aria cannot track medication automatically (yet), which would not necessarily solve the issues I identified. Therefore, I did not prioritize this feature in my MVP.
Sometimes you just have to use what you have. Recruitment was difficult because I did not personally know anyone with asthma. I flexed my networks and even signed up to an asthma forum (!!!). In the end, while some participants did not entirely fit my criteria, I noted where they did meet them and used their most relevant insights for my design (because having something is better than having nothing).
Next steps
Hand-off current revised version of the prototype to developers using Figma’s spec tool
Build out screens for additional features based on priority in product roadmap, such as data visualization screens for week and month tabs and sharing functions
Conduct more research on what type of data is critical for caregivers
Monitor for and adapt to changes in the market and user needs, motivations, goals and frustrations
OTHER CASE STUDIES
PayPal
Improving consumers’ financial well-being
Coppell Deli
Enabling online sales channels
Kaus
Boosting insurance sales online