Background

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.

Research

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.

RESULTS

  • The users surveyed did not track their asthma. This posed the challenge that the design must be able to convert users and retain them by changing the user's behavior to form the habit of tracking their asthma.
  • The most necessary features of competitors were being able to send data, view data, input data, have medication reminders, and record asthma attacks and peak flow readings.
  • Secondary features are having multiple accounts and having flexibility in what information the user must enter.

PERSONAS

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.

persona

Interaction Design

SITE MAP

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.

Click to open in a new tab sitemap

WIREFRAMES

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.

Click to open in a new tab wireframes

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.

Visual Design

STYLE TILE & ICONS

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.

styletile icons

Conclusion

Below is the flow from the home page to a detailed view page to recording an asthma attack.

mobilegif

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 mobile-final

MARKETING PAGE

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.

desktop-final