Case study of a health diary mobile app enabling quick and easy access to a comprehensive range of health information.
I executed the entire UX/UI design including UX research, information architecture, wireframes, visual design, and prototyping.
iOS application
Adobe XD
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.
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.
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 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.
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.
User 1: Shaun, 54-year-old male
Web Developer & Author
Heavy/Enthusiastic Tech User
Health Conditions: Stroke Survivor (Disabled)
User 2: Dee, 32-year-old female
Yoga Instructor & Artist
Medium/Necessity Tech User
Health Conditions: Prediabetic, High Blood Pressure
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.
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.
"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." - Shaun
*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.
Both participants figured out how to add a new category within a couple seconds.
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.
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.
This question was asked to test the “comprehensive” claim of the app.
"The only thing I don’t see is goal setting. It would be nice to incorporate weight and step goals to feel motivated." - Shaun
"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." - Dee
Recommendation: Consider adding new features like goal setting and health records in future iterations.
"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." - Shaun
"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." - Dee
*Recommendation: Consider altering color scheme to gender neutralize.
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
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.
Screen 1: Home screen in grid view
Screen 2: Home screen in list view
Screen 3: The History screen allows the user to filter past entries by tag, category, or any other searchable element.
Screen 4: The Analytics screen is for correlating 2 different health categories.
Screen 5: 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.
Screen 6: 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.
Screen 7: Users can either search for medication, barcode scan medication, or choose from most recently used medications.
Screen 8: Once one or more medications are selected, the user is taken to a final page to determine medication quantities.
Screen 9: Users can select stool type on a scale and/or add an open-end entry describing bowel symptoms.
Screens 10 & 11: In the reproduction category, users can toggle between pregnancy or menstruation mode.
Gut check was a great learning experience of a start-to-end project where I was making decisions at every stage.
This was an MVP case study. If given the opportunity to ship a higher fidelity prototype, I would expand the project with more user testing to discover edge cases and would consider adding new features like goal setting and syncing to health records. An initial questionnaire for users to understand relevant health categories and patient health history would be implemented as well as a clinician interface where doctors could track patient diary data. Especially since this is health app with a wide user base, implementing ADA compliance would be necessary as well.
Success would be measured by the following metrics:
Long-term metrics would include: