Gut Check Diary App

Case study of a health diary mobile app enabling quick and easy access to a comprehensive range of health information. Can’t wait? Skip down to the final app.

Role

I executed the entire UX/UI design including UX research, information architecture, wireframes, visual design, and prototyping.

Deliverables

iOS application

Tools

Adobe XD

Identifying The Need

Gut Check is for anyone looking to take control of their health, especially those trying to monitor or get to the bottom of a recurring health condition. 

%

of US adults had one or more chronic conditions as of 2012 according to the CDC¹

%

of deaths are due to chronic diseases each year²

%

of the nation's $3.3 trillion annual health care expenditures are for people with chronic and mental health conditions³,⁴

There is clearly a public need for health monitoring. Beyond the human benefit, this could lead to potential savings impacting the national healthcare system. Preliminary interviews were conducted to gather feedback from individuals with chronic conditions. A wide range of demographics was sampled since, as mentioned, Gut Check is meant for everyone. 

A major pain point was not having a comprehensive diary to track and correlate a variety of symptoms.

I want to see which foods are triggering my Crohn’s disease. If I’m logging food in one app and tracking pain or bowel movements in another app, it’s difficult and annoying to juggle the two apps to figure out what’s going on.

Even if a more comprehensive diary app was being used, users expressed frustration that applications were not easy or quick to use. Most users are using health diary apps on-the-go and need something more convenient.

How am I supposed to enter all this information when it takes 5 minutes to even find the right button?

This also relates to a need for customization. A male user expressed,

I’m obviously not menstruating, why do I need to see that on my home screen?

In addressing these pain points, Gut Check will provide a comprehensive and customizable health dashboard that is quick and easy to use.

What Are We Solving For?

I observed that existing health diary and specialized health apps are not mindful of user context (being on-the-go), demographics or health profiles (needing customization), and real-world use (desire to correlate a wide variety of categories). This is leading to ineffective management of chronic health conditions, which can be fatal and financially draining. Juggling many apps when attempting to decipher health symptoms also results in user stress and frustration. Health diary apps should empower users to be in control of their health.

Setting Up Intuitive Architecture

I needed to set up a navigational system that would fulfill the promise of being easy to use on-the-go. A home screen displaying all categories with the option of customization made the most sense.

The Initial Look

The initial concept sketches were merged into a wireframe design that offered multiple ways to view health categories. Circles indicate category widgets arranged in grid view. Inclusion and arrangement of widgets can be customized by the user and tapping on each widget takes the user to the category page. The app’s main navigation consists of the home screen (current), a barcode scanner that detects food and medicine labels, a history page where users can see past entries, and an analytics page where users can correlate 2 different categories.

What Did Users Think?

Methodology
2 primary participants were asked to complete a set of tasks to gauge usability. Both participants fell within the target in that they have chronic health issues. For the purpose of this report, I will cause User 1 “Shaun” and User 2 “Dee”. To protect participant privacy, stock images have been used.

Completion Rate
Overall, participants were able to achieve 100% task completion, although delays occurred for certain tasks which I will further discuss. No critical errors occurred. 

*Fixing existing features was prioritized over generating new features. Priority recommendations are starred.

User 1: Shaun, 54 year old male
Web Developer and Author
Heavy/Enthusiastic Tech User
Health Conditions: Stroke Survivor (Disabled)

User 1: Dee, 32 year old female
Yoga Instructor and Artist
Medium/Necessity Tech User
Health Conditions: Prediabetic, High Blood Pressure

Questions

You are currently viewing the categories in a grid, how would you view them in a list?
Shaun and Dee both navigated to the hamburger menu instead of the list view toggle. After approximately 5 seconds, they both found the list view toggle. 

Shaun

I feel like the views should be in the menu­…I don’t think people will be changing views that often­—it’s just crowding the interface. To me, the list view looks like the hamburger menu. Maybe you should add more lines to the list view so it doesn’t look like the hamburger.

*Recommendation: Change the list view icon to look less like the hamburger icon by adding more rows (not 3 like the hamburger menu) or consider shifting the view buttons to within the hamburger menu.

Now let’s customize your homepage. Add a new health category to your homepage.
Both participants figured out how to add a new category within a couple seconds. 

Now, please log a [health category] entry. 
Note: A couple different health categories were tested per respondent.
This is the app’s core offering so it’s essential that participants understand this flow. Dee and Shaun were able to quickly locate most of the health categories. I expect that users will take a short amount of time to acclimate to the icons, especially in the grid view since the icons are unlabeled. However, this is not a concern as Dee and Shaun thought most of the icons were intuitive so the learning period is expected to be fairly short.

What do you think each icon means? Would you change the symbol? What would you change it to?
This was asked as a followup to gauge icon understanding and to see if users were able to generate more relatable iconography. If users do not associate symbols with their health categories, I expect there will be a longer learning period and longer navigation time which will possibly lead to frustration and lower customer retention. Special colors have been associated with each health category to supplement association. It is important that users find categories quickly since a main focus of the app is on-the-go, speedy use. Dee had a little trouble locating the Reproduction icon but once she found it she “got” it and didn’t think it should be changed. Both Dee and Shaun considered the Illness icon the most confusing and Shaun suggested it should be changed to a stethoscope.

*Recommendation: Change illness icon. In the next iteration, consider an onboarding tutorial for icon explanation.

Do you think this app lives up to its promise of being “comprehensive”? What do you think it is missing?
This question was asked to test the “comprehensive” claim of the app.

Shaun

The only thing I don’t see is goal setting. It would be nice to incorporate weight and step goals to feel motivated.

Dee

It’s not just about fitness—it’s about your entire life, it’s everything. I would like to see the app incorporate health records like tests and vaccinations.

Recommendation: Consider adding new features like goal setting and health records in future iterations.

Other Feedback

Shaun

I like it, it’s intuitive. I would use it. But I think the color scheme is a little feminine—it looks like it’s for shopping.

Dee

The app is really effective. I can have all my data accessible and it’s really intuitive. It’s so easy to use—I would definitely use it. It’s made for someone like me. I can’t remember when my last menstrual cycle was, it must be written somewhere.

*Recommendation: Consider altering color scheme to gender neutralize.

Gut Check’s Visual Language 

Typography
There is one main typeface for Gut Check—Roboto. This is to ensure a streamline aesthetic while being unobtrusive and legible for viewing large quantities of information on the small space of a smartphone

Color Palette
The color palette is a robust, rainbow range so that colors can be associated with each health category to provide a visual shortcut when looking for a category. 

Main Brand Colors

#418895
#D66a63
#f0f0f0
#7d7d7d

Health Category Colors

#8cac72
#a0a55e
#f796a3
#cfa68b
#d26675
#e7c66d
#80b2a1
#c0c678
#7d92b9
#f08672
#70bdc6
#e5aa68

Home screen in grid view

Home screen in list view

The History screen allows the user to filter past entries by tag, category or any other searchable element.

The Analytics screen is for correlating 2 different health categories.

Each health category page works differently based on what would be considered relevant inputs for that category. For some categories, users are allowed to type in open-end entries to describe their symptoms, As the user is typing, they are offered autofill choices of past tags and when a new entry is written, it becomes a new tag. 

Users can search past tags by seeing the most recent ones below the open-end entry or clicking the 3 dots to see the full list of tags.

Users can either search for medication, barcode scan medication, or choose from most recently used medications. 

Once one or more medications are selected, the user is taken to a final page to determine medication quantities.

Users can select stool type on a scale and/or add an open-end entry describing stool symptoms.

In the reproduction category, users can toggle between pregnancy or menstruation mode.

Prototype

  1. Ward BW, Schiller JS, Goodman RA. “Multiple Chronic Conditions Among US Adults: A 2012 Update.” Preventing Chronic Disease, Vol. 11, 2014. Retrieved November 9, 2018.
  2. Centers for Disease Control and Prevention. “CDC National Health Report Highlights.” Retrieved November 9, 2018
  3. Buttorff C, Ruder T, Bauman M. “Multiple Chronic Conditions in the United States.” 2017. Retrieved November 9, 2018.
  4. Center for Medicare & Medicaid Services. “National Health Expenditure Data for 2016.” 2016. Retrieved November 9, 2018.

© 2019 Ayushee Aithal