0-banner.png

Google Aria

 

Google Aria

Asthma Management App

 

Client: Google

Timeline: Nov 2018, 2 weeks

Deliverables: Android app prototype

Team: Self-directed, with feedback from mentor and peers

Role: UX/UI Designer

Tools: Sketch App, Illustrator, InVision

 
 

THE CHALLENGE.

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.

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.

design-process-grey.png
 

 

01. RESEARCH

Goal: To research the industry, competitors, and target users

Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews

 

Market Research.

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.

 

Competitive Analysis.

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

 

02. Define

Goal: To define the target user and understand their needs

Process: 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 still a priority for them to take certain precautions, which translate into the user needs of Aria’s target user.

 

Persona.

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.

 

03. IDEATE

Goal: To ideate features, information architecture, and flows

Process: Product Roadmap / Sitemap / Task Flow / User Flow

 

Product Roadmap.

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.

 

Sitemap.

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.

 

User Flow.

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.

 

TASK Flow.

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.

 

04. DESIGN

Goal: To design the mid-fidelity UI of the app

Process: Sketches / Mid-Fidelity Wireframes

 

SKETCHES.

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.

 

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. Below are some select screens along with a few of the main UI changes I made since the sketches.

 

05. PROTOTYPE

Goal: To prototype and gather usability data

Process: 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:

  • 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

Results:

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.

Testing with young adult asthmatics.

Testing with young adult asthmatics.

 

06. ITERATE

Goal: To iterate upon the design using usability data

Process: 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. 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.

 

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. 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.

 

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. 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.

Next Steps.

  • 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