top of page
top
Background:
While I was studying UX/UI Design at the University of New Hampshire, I chose a topic I was passionate about for my first capstone project. As someone who struggles with GI (gastrointestinal) issues, I've seen and tried numerous programs for fad and common diets such as keto, paleo, and gluten-free that focus on general health or exclusively for losing weight. These programs generally don’t work well for people with more complicated GI disorders such as IBS, celiac disease, lactose intolerance, or Crohn’s disease. Digestive disorders are not “in” to talk about, and eating healthy with one of these disorders is challenging. I would like to explore a solution to give people with these disorders a way to eat and be healthy.
My Role:
UX Designer and Researcher, UI Designer
Tools Used:
The Problem:
It’s a challenge for people who suffer from digestive disorders to find healthy food choices and manage their symptoms.
The Solution:
The goal of this project was to develop a solution to give people with these disorders a tool to help them feel healthy in both body and mind. I designed a mobile app that focuses on the gut-brain connection to help relieve the stress that food choices have on people with gastrointestinal (GI) issues.
Design Process:
Secondary Resesarch
A troubled intestine can send signals to the brain, just as a troubled brain can send signals to the gut. For example, a person’s intestinal distress can be the result of something physical such as a food intolerance or something mental such as anxiety. And conversely, when the mind is full of anxiety, a signal causes distress in the gut. That’s because the brain and the gastrointestinal (GI) system are intimately connected.
I studied a few common GI disorders which people in the US suffer from, including Irritable Bowel Syndrome (IBS), Celiac Disease, and Inflammatory Bowel Diseases (IBD), including Ulcerative Colitis and Crohn’s Disease.
Primary Resesarch
As part of my primary research, I created a survey as the basis to question potential users. I posted it on social media and shared the link via email with friends and family. After reviewing responses from 50 people, I narrowed it to seven people to conduct user interviews.
My goals for the user interviews were to gain further insights about:
• Specific issues people with digestive disorders face
• Diets or meal tracking they had used before
• Their typical eating routine
• Meal plans that work best for them
• Apps they have or previously used to track their food
• What mental wellness means to them in relation to their food habits
.png)
Primary Research: Key Findings
After I conducted the user interviews, I created an affinity map to organize my findings and to better understand the insights.
6/7 people said they feel sluggish and miserable when they go “off course” with their food plan
4/7 people said they have multiple foods that they need to avoid for their health
5/7 people said that negative emotions such as stress can trigger them to eat unhealthy food, which then causes them more stress
5/7 people said that they’ve tried meal delivery services and have eventually canceled their subscription because it became too expensive or it didn’t fit their dietary needs
Research
Empathy Maps
After gathering insights from the user interviews, I created an empathy map of a potential user, “Lauren,” to visually organize my insights. Lauren is someone who:
• is still struggling with a GI (gastrointestinal) disorder
• needs guidance to re-evaluate her food choices
• has a negative relationship with food which causes her stress
Personas
After making an empathy map, I also created the persona, “Amy” to further identify specific goals to create a good user experience.
• Amy recognizes the gut/brain connection and needs guidance
and tips
• Amy wants to improve her physical
and mental health
• Amy wants to achieve long-term, decreased stress related to food
User Stories
Keeping the user’s wants and needs in mind is key while developing features of an app. To help keep the user’s needs in mind I would ask myself:
“As a user, I want to be able to <do a task> so that <goal user wants to achieve”>
User Flows
I chose the following MVPs (minimum viable products) based on user research to create my red routes.
Based on the MVPs, one of the red routes is called “mind & body” which would focus on tracking the user’s emotional and gut health. The user would be given prompts to help them track their emotional and gut health, similar to tracking their food intake. With this analytical took, they would discover any correlations between what they eat and how they are feeling.
Synthesis
Early Ideations
After sorting through my research, user interview notes, empathy maps and personas, I started sketching possible screens, which then turned into low fidelity mock-ups.
Guerrilla Testing
After my initial research, and organizing my insights and sketches, I was then able to conduct guerrilla tests with potential users. Comments from guerrilla usability testing:
• The process for logging meals was intuitive
• Confusion about the difference between “today’s mindfulness” and “daily check-in”
• Some arrows and small CTAs were not obvious
• Users did not think they would utilize the grocery list feature
Insights from Guerrilla Testing
Overall, the users felt that the app was fairly easy to use, organized, and intuitive. Some minor issues popped up that multiple users shared. People found that logging a meal item was a straightforward task.
Four out of eight users went to the fruits section to find the apple, and the other users wanted to use the search bar at the top instead. Many expressed wanting to see a heart icon by food items so they could easily add it to their favorites.
Adding a note to a meal was the quickest task, but six out of eight users users expressed difficulty on how to return to the main dashboard or the previous page. Adding a back arrow or a more obvious home button would solve this issue.
Four out of eight users clicked on “today’s mindfulness” when asked to log in their emotional and physical health, instead of the intended option, “daily check-in.” I fixed this by rewording “today’s mindfulness” to “mind & body check-in” to avoid confusion.
Three out of eight users did not quickly see the “more” dropdown to see all of the options for the emotional health check-in. Some also commented that they would most likely not be interested in reading a page full of descriptors, they would just find the closest match to their feelings in the first 3 lines.
Others mentioned it would be nice to have a custom text option to add their own words or a 1-5 star rating. It is important not to overcomplicate any tasks and to provide a quick daily check-in process.
Ideate
Wireframes
After guerilla testing my sketches, I analyzed my insights and incorporated new solutions into new wireframes in Adobe XD.
1/2
Wireflows
Documenting Interactions: Part of my process was to create wireflows to show my designs in the context of common user tasks, such as logging a food item in a meal.
Below are the wireflows for Red Routes 2 and 3: Mind & Body Check-In and Articles
.png)
Brand Platform
Mission/Vision Statement
Having a gastrointestinal disorder or food intolerance should not take control of your life. We provide tools and resources to help people better understand the gut-brain connection, and relieve the stress associated with gut-related issues.
Brand Personality
Mood & Food is passionate about helping people overcome the stress and anxiety of having a gastrointestinal disorder or food intolerance, and aims to improve the quality of life of its users.
Brand Attributes
Gastrointestinal disorders and food intolerances can be frustrating, so a product that is helpful and supportive during a stressful time is very important. Providing insightful, informative data and resources that help the user will also create a sense of trustworthiness.
Style Guide
1/7
Mood Board
Usability Testing Round 1
For this usability test, users were asked to complete a series of frequently used tasks. Users began at the home page, then described how they would complete each of the tasks and subtasks. They were also asked how they would log a food item into a meal, add a note to a meal, how they feel emotionally and physically, and find articles.
Usability Testing Round 1 Findings
Four out of five users felt that the middle section of the home screen seemed unnecessary since most of the buttons did not lead anywhere that the bottom navigation didn’t already.
I decided to put more emphasis on the weekly insights by providing thumbnails of the weekly insight graphs, and I added additional graphics and photos to the homepage to make it feel more interactive.
The second task for users was to add a note to a meal. Three out of five users expressed difficulty in finding how to make a note. This made me realize that the note feature was not intuitive. To improve this feature, a note option was added to the meal 1 card so it wouldn’t be missed.
Prototpe and Test
Usability Testing Round 2 Findings
After making changes and adjustments to the screens based on the feedback from the user testing, 5 new participants were asked the same questions. They began at the home page, then described how they would complete each of the tasks and subtasks.
Two out of five users expressed some confusion on how to add a note, so I updated the prompt in the notes text box to make it clear.
A few users commented that the images at the top of the emotional and gut health questions didn’t really match the questions, so I made a quick fix by using the brand blue and teal colors with the apple logo pattern. All the emotional questions have blue backgrounds and gut health questions have teal backgrounds to stay consistent with the main mind & body page.
Interactive Prototype
Click here to view the interactive prototype in a new tab.
You can click through the parts of the app that are built out. If you click on something that is not built, blue boxes will flash over the places that are clickable!
Examples of flows that work:
- Log meals: meal 1, search for item, fruits- add an apple, add a note
- Mind & Body: choose "great" for both questions
- Articles: view the top article or "go to saved articles"
Int Proto
My goal with this project was to find a solution to give people with digestive disorders a way to feel healthy
in both body and mind. Through my research, interviews, and user testing, I believe I achieved that goal.
WHAT I LEARNED:
-
It is important to summarize the user testing notes immediately following the interviews in order to best record the findings and develop insights.
-
While conducting tests, it is essential to present questions with clarity, but without leading the user to the desired result.
-
Don’t assume the user will spend much time trying to find a feature that isn’t obvious.
-
I learned that InVision was an effective tool for the testing component with users, whether in person or on Zoom
bottom of page