Google Flow App
Asthma-on-the-go
Client: Google
Project Timeline: Feb 2019- 2 weeks
Deliverables: App design
Team: Solo - with mentor guidance
Role: UX/UI Designer
Tools: Adobe Xd, Photoshop, Illustrator
The Challenge
Google (now Alphabet) has been recently investing more and more in the Healthcare space. They are improving Google search with specific healthcare cards and quick information for the user, as well as working harder on research and cloud initiatives.
The healthcare industry is also currently being revolutionized by wearable technologies. Over 65% of the wearables today are wrist-based devices shaped like watches, but there are also other wearables for the arms, torso, and waist. Aesthetics and data are driving factors in wearables, but also durability and weatherproofing are key. Armed with wireless connection and long-duration batteries, wearables can be read by a mobile app or a website in real time.
According to the Centers for Disease Control and Prevention, asthma currently affects over 25 million adults and children in the U.S. alone, and is responsible for 14.2 million physician visits each year and 1.8 million emergency care visits. Asthma is a chronic disease that makes breathing difficult. An inflammation of the air passages results in a temporary narrowing of the airways that carry oxygen to the lungs. This results in asthma symptoms, including coughing, wheezing, shortness of breath, and chest tightness. Asthma can be aggravated by weather, pollution, and many other triggers.
Google Flow’s greatest value to the market comes via wearable technology that allows users to track their vitals and other signs that could contribute to asthma at anytime. This wearable comes in the shape of a necklace that, for more accuracy, can also be worn as a chest patch. The battery is the same as that of a watch, so it only needs to be changed around once per year.
Google Flow is a combination of a wearable patch and mobile app that helps people monitor and manage their asthma. Google has been investing more and more in healthcare recently and they have contacted you to help them with this brand new application. The app will be developed first for Android, adhering to Material Design and Google’s guidelines. In addition to the Android app, it’ll also be nice to develop a web version (desktop) for a quick overview and a companion smartwatch app (Android) for notifications.
The Objective
Design an Android mobile app that helps users monitor and manage their asthma. The app should be in line with Material Design and other Google apps (check common patterns and styles for coherence and consistency)
Design a logo for Google Flow that is also in line with the Google family
P r o c e s s
1. R e s e a r c h
Goals: To research about asthma and asthma managing apps on the market
Process: Market Research / Competitive Analysis / Contextual inquiry
Research Goals
Identify and analyze similar organizations and competitors
Understand people’s asthma experience (pain points, frustrations, goals)
Discover how people manage/cope with their asthma symptoms
Assumptions
Kids under the age of 13 and adults of the ages 50+ will most likely have asthma due to weakened immune system
People with family members already having asthma will more likely to get asthma over the years than those who don’t
People living in most city/industrial area will likely to have asthma
People with asthma will likely own several devices and apps to help them cope with asthma attacks depending on severity
Research Questions
Demographics of people with asthma symptoms
How people are currently managing with their asthma attacks?
What are out in the market to reduce the asthma attack frequency or symptoms?
What kind of devices/apps are out in the market to help manage asthma attacks?
What factors influence people’s asthmas symptoms?Methodologies
Methodologies
Market Research [Secondary Research]: To learn about the current demographics of people with asthma and their ways to manage and cope with asthma symptoms
Competitive Analysis [Secondary Research]: Analyze the direct competitors and potential competitors.
Contextual Inquiry [Primary Research]: Interview people with asthma and or people who lives/interact with people with asthma
Survey [Primary research]: Survey large pool of people of people with asthma or who lives/interact with people with asthma (as a second option for primary research)
Market Research
To understand more about what this condition called ‘Asthma’ is and it’s demographics, I used market research to dig deeper into finding trends and patterns regarding patients who were diagnosed with Asthma. I tried to answer as many research questions (prior to starting the market research) while doing market research.
Competitive Analysis
With my market research I was able to find 4 asthma managing apps that are on the market right now. Each apps had their own strengths and weaknesses; which are all documented on the competitive analysis shown below.
Contextual Inquiry
To gather insight on the target user of Google Flow, I interviewed total of 3 participants. All females over the age of 18.
In order to look for participants that had asthma, first looked at Designlab’s slack channel under survey/test section. I was able to interview one person from slack channel and two people through a friend’s help.
Interviews were all performed on one day where they were asked series of questions regarding when they first got diagnosed, how they manage, and their frustrations regarding living with asthma.
Age: 24 - 35
Gender: 3 Females
Location: All city region
History of Asthma: 1 yes, 2 N/A
Assumptions
Kids under the age of 13 and adults of the ages 50+ will most likely have asthma due to weakened immune system
3/3 participants got diagnosed with asthma under the age of 13.
People with family members already having asthma will more likely to get asthma over the years than those who don’t
1/3 participants said had family members with asthma
People living in most city/industrial area will likely to have asthma
2/3 participants grew up in city area
People with asthma will likely own several devices and apps to help them cope with asthma attacks depending on severity
0/3 participants used apps; 3/3 participants all used 1 or more inhalers
2. D e f i n e
Goals: To define Google Flow’s target users and understand their needs, goals, and frustrations
Process: Empathy Map / Persona / POV Statements + HMW Questions
Empathy Map
I organized all the data points collected from the interviews into an empathy map. Each data point is categorized into sub categories such as - feel, does, think, see, pain, gains, and hear. I then rearranged them into common groups where insights and target user’s needs are deduced.
Insights
Users all use some sort of peak flow meter to measure their breath strength
Users have different triggers that may aggravate asthma symptoms
Users often forget to take daily medication
Users often forget to carry inhalers
Users still experience mild asthma symptoms from time to time
Needs
Users need a way to record their peak flow meter measurements
Users need a way to know what aggravate their asthma symptoms
Users need a reminder to take their daily medication
Users need a reminder to carry their inhalers
Users need a way to be prepared for emergency asthma attack
Persona
Next, I created “Dolly the Dragon boater” persona to help represent the needs synthesized from empathy map. Her persona allowed me to empathize with the end user throughout the whole design process.
Goals, motivations and frustrations were also inferred from empathy map.
POV STATEMENTS AND HMW QUESTIONS
Next, with Dolly'’s needs synthesized from empathy map, POV statements and HMW questions were made to make Dolly’s needs actionable tasks. HMW questions lead to open up some brainstorm ideas that could help solve some design challenges regarding main features of Google Flow
3. I D E A T E
Goals: To ideate features, information architecture, and flows.
Process: Product Roadmap / Sitemap / Task Flow / User Flow
Product Roadmap
Once common goals have been identified (overlapping of business and users goals), I prioritized them along with some key features that might potentially get incorporated into app design.
Site Map
Next, I created a site map to visualize how the site will be organized. Since it is a mobile app, point of entry will always be accessed through either the app or the wearables. (wearables only have limited features you can access the information from)
User Flows
User flow was created to show couple different entry point and different users could take navigating through the app. The entry points were common methods that current market users are taking.
Task Flows
Task flow was also created to analyze the steps users take to complete a certain task. The task for this particular scenario was for users to open the app, login and create profile (for first time users) and enter data for the day to log their asthma symptoms.
4. D e s i g n
Goals: To design responsive Mid fidelity wireframes
Process: Sketches / Mid-fidelity wireframes
Sketches
I started drawing out very rough sketches (low-fidelity wireframes) but adding just enough details to show the main structure of the app. Sketches were very rough and low-fidelity but annotated with important keywords to show stakeholders what each page is about.
Mid Fidelity Wireframes
Once low fidelity sketches were complete, I moved onto mid-fidelity wireframes using Adobe Xd. Designs were changed from low fidelity to mid fidelity while studying more on google’s material design guidelines.
View Wireframes: HERE
5. P r o t o t y p e
Goals: To prototype Mid-fidelity wireframes and use it for testing to gain feedbacks.
Process: Prototype / Usability Testing
Prototype
To use it for usability testing, I went ahead and used Adobe Xd to prototype the high fidelity wireframes from before.
Feel free to view the prototype below.
View prototype: HERE
Usability Testing
Tasks
Scenario: You were diagnosed Asthma as a kid. Severity of your symptoms tend to fluctuate from temperature/location/time and you want to document anytime you experience asthma symptoms to help you manage.
Task 1) Register and enter your first data entry for the day.
Task 2) Log a trigger notified from Alert tab
Objectives
Find areas to improve
Increase usability with feedbacks from participants
Gain insight on how users interact with the app
Results:
I was able to find 3 participants (2 males and 1 female) to do usability testing with. Due to snowstorm (a.k.a snowmageddon 2019) in Seattle, roads were impossible to navigate on, stores were closed, events were canceled, and accidents everywhere where it inhibited me from going out to find more usability testing participants.
Regardless! the results and feedbacks I got from 3 usability participants showed enough patterns for me to move onto affinity map.
6. I t e r a t e
Goals: To iterate design using feedbacks gathered from testing to High-fidelity wireframes
Process: Affinity Map / Logo + Style tile / UI Kit / High-Fidelity Wireframes
Affinity Map
I created an affinity map to synthesize findings gathered from usability testing. Patterns (based on what I observed while testing) and comments (what users have verbally said) were noted as well as success rates of tasks that were given to the participants. Insights have been inferred to prioritize recommendations that will be incorporated into final designs.
Logo + Style Tile
Created a logo and a basic style tile that is aligned with Google’s existing brand.
High Fidelity Wireframes
View prototype: HERE
UI Kit
UI Kit was used as a reference kit when creating Google Flow. Because Google is already an established brand, any new feature that gets implemented should not deviate from the brand’s guideline. I referenced back and forth to this UI kit for color palette, type font, button styles/colors and overall feel of UI to keep the brand feel more consistent.
REFLECTION.
Next Step
Continue working on high-fidelity wireframes + prototype
Gain usability on high-fidelity prototype (revised)
Design Wearable interface
Currently effecting over 25 million people, asthma is responsible for high hospital visitation rate. Although patients who were diagnosed as a child can live a normal life, there are times where unpredictable factors that may trigger symptoms. With this Google Flow, we’re hoping to help people manage their asthma symptoms and ultimately reduce the number of asthma attacks that may lead to hospital visits.
