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 Research
Competitor Analysis
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.
User Persona (left), Empathy Map (right)
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.
Feature Roadmap
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.
Sitemap (left), Task Flow (right)
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.
Low-Fidelity Wireframes
I designed low-fidelity wireframe sketches to identify any problems in the early stages and uncover all my ideas. I used inspiration from different Asthma apps and Google apps when sketching the wireframes. I made sure to adhere to Material Design Guidelines when sketching the different pages. I used the task flows to design the key pages needed for each task.
Low-Fidelity Wireframe Sketches
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.
Logo development
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.
Preview of Mid-Fidelity Wireframes
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.
Affinity Map
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.
Preview of Final UI
Key Takeaways
During the testing phase, I was able to test the design for its usability. The tests allowed me to watch the user go through the app to uncover any errors or pain points. I created an affinity map, based on the feedback I received from the usability tests. Then, I updated the design and prototype for further testing.
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.