Google Aria
End-to-end mobile app
Project Overview
Google Aria is a combination of a wearable patch and mobile app that helps people monitor and manage their asthma.
Role
UX/UI Designer
Tools
Sketch
Miro
InVision
Timeline
4 Weeks
Challenges
  • Creating a usable application from scratch
  • The app will be developed for Android, adhering to Material Design and Google’s guidelines
  • Track users vitals and other signs that could contribute to asthma at anytime
Solutions
  • Design a mobile app that displays asthma data and information
  • Design a feature where users can input their daily symptoms and medication

Design Process

1. Research

The focus of the research is to better understand Asthma such as triggers and the market for Asthma tracking applications.

Market Research

I began by doing secondary research about Asthma to learn about the disease and discover the potential users. Although any demographic may have Asthma, I was able to identify the most common ones and what triggers cause them to have an Asthma attack. This helped me later create a user persona.

With a time limit on this case study, I attempted to find Asthma patients who I could interview to learn more about pain points and frustrations when monitoring Asthma. Unfortunately, I didn't find anyone who had the time and had to use secondary research to continue. Although during usability testing, some participants who had Asthma explained that weather was important for users because cold air could worsen Asthma symptoms.

Then, I created a competitor analysis and listed the strengths and weaknesses of each Asthma app. I downloaded many different Asthma app monitors to see the unique ways to monitor and categorize Asthma triggers. This helped me decide how I would later organize and label content on the sitemap.

User Persona & Empathy Map

Based on research and insights, I created a user persona and empathy map of Google Aria's target user to empathize with the users as well as address the major needs and pain points.

Since most people who have Asthma attacks are usually triggered by their environment, It is vital to inform users on any nearby triggers. Insights like these will help me design a usable and informative app.

Here is Aliyah who represents Google Arias target user. She was diagnosed with Adult-Onset Asthma and struggles monitoring and tracking her symptoms and medication. She wants to be able to use one application that helps her deal with all things Asthma. She fears being unaware of when her symptoms may flare and wants to be informed when she should go to the hospital before an Asthma attack. Having Aliyah as my persona helped me fixate on the target audience and address the key problems that need solutions.

Key Takeaways

During the research phase, I was able to learn about Asthma and any important information such as triggers that would be valuable in the app. I learned about the user frustrations of tracking and monitoring their Asthma. Then, I created a competitor analysis that helped me uncover various solutions to user problems when monitoring their Asthma. After, I create a user persona and empathy map that forced me to put myself in users shoes.

2. Define

During the define phase, I synthesized all the data I have collected during the research phase to define the core problems that were identified up to this point.

Feature Roadmap

Based on research, I created a feature roadmap which lists and prioritizes the features that should be added to the design. These features are the design solutions listed from most important to least. Keeping the list of features in mind, will help when creating a sitemap of the different pages that must be designed.

Site Map & Task Flow

Based on the feature roadmap, I created a sitemap to show the different categories in the app. The main navigation would include the "Dashboard," "Journal," "Reminders," and "Account" with a floating action button. Based on research, these were the most important pages that users needed when tracking Asthma.

Then, I created two task flows that the user may take when using the app. First, they connect the device with the application. Then, they add their journal entry for their symptoms and reminders for their medication. The tasks flows are essential when designing each page and the content inside.

Key Takeaways

During the define phase, I listed and prioritized the key features that I should include in the app. This helped me create the sitemap for the app. Then, I created two task flows that the user may go through when using the app. The first task flow is entering personal information and connecting their device to the app. The second task flow is a user adding a reminder and a journal entry.

3. Design

After the define phase, I integrated my findings and designed wireframes and logo.

Logo Development

Keeping Google's color palette and Material Design Guidelines in mind, I sketched different logo ideas and vectorized them using Sketch. The goal was to create a simple and clean logo that would be easy to remember, while using Google's color palette. I chose the inhaler because it instantly reminds users of Asthma.

Mid-Fidelity Responsive Wireframes

I created mid-fidelity wireframes and used InVision to test out the design. I used Material Design Guidelines UI Kit to help me put the design components together.

I used inspiration from Google applications and other Asthma apps to design the wireframes. I wanted to stay consistent with Google apps to ease usability.

Key Takeaways

During the design phase, I started by sketching each page of the task flow. I sketched many different designs to let out all my ideas and ensure the best result. Then, I designed mid-fidelity wireframes that would be used to develop the prototype for testing. After getting feedback, I was able to uncover any pain points users had while going through the flow. After, I started developing the logo based on the companies values and color palette.

4. Test

Prototype

After designing the responsive UI design, I used InVision to develop the prototype for usability testing.

Usability Test Plan

I interviewed 5 participants who fit Google Aria's target audience to find insights and pain points to improve the usability of the design. During the interviews I wrote down the steps the user took to complete the tasks and notes of any errors. Then, The insights were used to create an affinity map.
Insights:
  • When adding personal details, participant wasn't sure what information to input
  • Participant wasn't aware that he must press the device to connect
  • Many participants who don't have androids are not familiar with the hover action button, therefore used the navigation bar instead
  • While adding a reminder, participant couldn't see the "OK" button to save
Next Steps:
  • For personal details page, add instructions so users can understand what information to input
  • Add labels to devices that are not connected and connected
  • Add icons and labels to navigation
  • During the reminder entry, automatically continue to next step once the user presses a button

Affinity Map

Based on the feedback from the usability test, I created an affinity map to sort, prioritize, and rank user testing feedback and list the potential solutions and next steps. These insights allowed me to iterate on my design to increase its usability.

Final UI Design

After improving the designs usability, I updated the prototype for further testing.

Since the rise of popularity with 'Dark Mode', I chose to design the dashboard in dark mode while adhering to Material Design Guidelines.

Conclusion

Since I'm not familiar with Asthma, Google Aria was a research intensive case study. I learned important information that I was able to use when developing the app. It was challenging finding people with Asthma, but extremely beneficial. They gave me valuable insights on triggers and what is important for the user to know. This helped me organize each page of my design and prioritize certain information. Another challenge I faced, was having to follow Material Design guidelines. I always had to keep in mind the guidelines and apply it throughout the entire design. Although it was a challenge, I enjoyed working with the Material Design guidelines because in many cases, I will be working with a team that already has an existing UI kit. I enjoyed learning, finding a solution, and designing a usable interface for Asthma patients.
Preview of Prototype