GUT:

the app that tracks your gut health!

UX Case Study: Enhancing User Experience for the GUT App

Project Overview

The GUT app is a health-focused application designed to help users improve gut health by providing tools for meal planning, symptom logging, habit tracking, and educational resources. The project aimed to create an intuitive and engaging user experience for a diverse audience, ranging from health enthusiasts to users new to gut health concepts.

I created the prototype for this app based on my own struggles with my gut health. I found a gap in the market based on what I wished existed.

This case study highlights my design process, usability testing insights, and the iterative improvements made to ensure the app meets user needs effectively.

My Role

As the sole UX/UI designer, I was responsible for:

• Conducting user research and usability testing.

• Designing high-fidelity mockups and prototypes.

• Developing a comprehensive design style guide.

• Incorporating peer and user feedback into iterative improvements.

Design Process

1. Research and Problem Definition

To understand the target audience and their pain points:

• Primary User Persona: Users who struggle with their gut health who may lack prior knowledge in the subject.

• Key Challenges:

  • Limited familiarity with gut health terminology.

  • Difficulty navigating daily logs and finding relevant features.

  • Desire for personalized reminders and tutorials.

The goal was to design an app that demystifies gut health, improves accessibility, and offers a seamless user experience.

2. Design Phases

Phase 1: Wireframes and Low-Fidelity Mockups
The process began with low-fidelity wireframes to map out the core user flows and establish the app's structure. These wireframes focused on functionality, ensuring that the design addressed user pain points and aligned with project goals. Early-stage sketches and mockups allowed for quick iterations and collaboration before moving to higher fidelity.

Phase 2: High-Fidelity Mockups
Once the wireframes were validated, I created detailed high-fidelity mockups using Figma. These mockups established the app's visual and interaction design foundation, focusing on intuitive layouts, clean aesthetics, and brand consistency.
View High-Fidelity Mockups

Phase 3: Interactive Prototypes
To validate user flows and test interactions, I developed interactive prototypes. These allowed users to experience the app's functionality and provided valuable insights into usability and areas for improvement.
View Prototypes

Phase 4: Design Style Guide
I developed a comprehensive design style guide to ensure consistency across the app. This document outlined typography, color schemes, button styles, iconography, and spacing guidelines, streamlining collaboration and development.
View Design Style Guide

Phase 5: UI Animations
UI animations were integrated to enhance user engagement, provide feedback for interactions, and create a more dynamic experience. These animations were carefully designed to complement the app's usability and aesthetic.
View UI Animations

Phase 6: Feedback Integration
Throughout the design process, I collaborated with peers and conducted usability testing to gather feedback. This feedback informed key iterations, improving the app’s clarity, navigation, and overall user experience.

Usability Testing Insights

To validate the app’s usability, I conducted usability testing with diverse participants. Key findings included:

1. Terminology Clarity

• Feedback: Users unfamiliar with gut health terminology felt lost.

• Solution: Added a glossary and info buttons beside unclear terms to provide instant definitions.

2. First-Time User Experience

• Feedback: Lack of an onboarding tutorial left users unsure of how to navigate the app.

• Solution: Designed a skippable mini-tutorial to guide first-time users through key features.

3. Navigation Enhancements

• Feedback: Users wanted easier access to previously logged days.

• Solution: Added arrow-based navigation on the homepage for "yesterday, today, tomorrow" views.

4. Push Notifications

• Feedback: Users requested reminders for meal plans and workouts.

• Solution: Integrated customizable notifications accessible via the calendar tab.

5. Labeling and Accessibility

• Feedback: Users found some buttons and sections unclear without clicking them.

• Solution: Updated button labels and enhanced the overall information hierarchy.

Key Design Iterations

• Before: Complex terminology without explanations.
  After: Clear glossary and info buttons integrated.

• Before: No onboarding process for new users.
  After: Seamless onboarding tutorial designed.

• Before: Limited navigation options for logged days.
  After: Arrows for quick navigation added to the homepage.

Final Outcomes

The design improvements resulted in:

• Enhanced accessibility for users new to gut health concepts.

• Intuitive navigation that aligns with user needs.

• Increased engagement through interactive tutorials and notifications.

Updated prototypes reflect these changes, preparing the app for the next phase of development.

Reflections and Next Steps

This project taught me the importance of:

• Viewing the product from the user's perspective.

• Iterative design based on testing and feedback.

• Balancing functionality with aesthetics for a delightful user experience.

Next steps include:

• Conducting A/B testing for further refinements.

• Collaborating with developers to ensure a smooth implementation.