Google.org Healthcare Initiative (GHI) developed technology for a new wearable health tracking and monitoring device for asthma sufferers. It measures a wearer's breathing patterns, blood pressure, steps, sleep patterns, and other vital statistics. GHI partnered with Designlab to design the companion app that syncs with the wearable to collect information and track medication usage and asthma attacks. It can also be programmed to alert an emergency contact when certain vitals reach a critical point. This project was for Designlab's UX design program.
We performed competitive analysis to understand how users of competing services track their asthma. We also surveyed asthma sufferers for their current asthma tracking habits. Fellow classmate, Celeste North, contributed her research as well.
I focused on one main persona for this project due to time constraints. Based on the research I collected, I created the following persona which represented a busy asthma sufferer who would need the app to be able to be easily integrated into their active lifestyle.
The home page would display the latest vitals, and users could see more details about each vital by selecting that vital. The main menu links to Charts, Reminders, and Settings. The Charts section contains graphical views of the data so users can see their data in a visual format and also export the charts if they need. The Reminders section allows users to easily set reminders for medication use and emergency notifications. The Settings section contains options for displaying data, what information needs to be entered, and modifying the user's profile.
Recording information is easy and accessible through the main menu which has a button for manually adding information such as symptoms, triggers, asthma attacks, medication uses, and peak flow readings.
I created the following low fidelity wireframes in Sketch. The top section is user onboarding which is important to introduce the user to the app giving them instructions and collecting medical/vital information.
The five sections below the user onboarding are for the main menu options: Home, Journal, Add, Charts, and Settings.
The home screen was redesigned after usability tests showed that users found it busy and cluttered. I put together four different designs to get feedback on. After getting feedback, I ended up creating something different from the original four designs. I decided to add an Edit button to the top right so that the user can easily modify the order the stats appear in and what stats are shown or hidden. I also added a share button to the top right so the user can easily share/export data directly from the home page. Lastly, I chose to combine the Journal view into the Home page and detailed views. The purpose of the Journal view was to give the user an overview of a particular day's stats. But the new Home page essentially accomplished this so all I had to do to give the user the flexibility of viewing a different day was to add a date picker to the top. These changes greatly cleaned up and simplified the flow of the app.
The visual design of the app was influenced by FitBit's clean, monochromatic look. I explored various logo designs and settled on one with straight edges juxtaposed with the curves of the wind logo. I chose blue as the dominant color to represent clarity, breath, and the sky.
Below is the flow from the home page to a detailed view page to recording an asthma attack.
While creating the high fidelity mockups, I focused on implementing the home page changes and adding in the visual design elements. I wanted the app to be inviting, clear, and intuitive so that users who don't normally monitor their asthma would find this app to be easy and satisfying to use.Click to open in a new tab
I created a landing page for the app and wearable as well. I kept within the same theme as the app (clarity, breath, and sky) by using generous amounts of white and sweeping blue waves across the width of the page.