My Role: End-to-end UX/UI Designer
Timeline: 4 weeks
Tools: Framer X / Sketch / Photoshop / Whimsical
Project Type: Mobile app concept for IOS devices
Problem
Medical research in the last decade has shown that the understudied gut has more impact on our health than we may think. As a result, At-Home Microbiome Kits are available to test what's going on inside our gut without needing to visit a doctor's office.
However, research shows that these tests are inconclusive and require the consideration of other factors such as past medical history, heart rate, fitness levels, mood, sleep, and hormone levels.
Solution
The Gut Life is a lifestyle app that uses AI technology to analyze and find trends using a broad range of data points. It provides custom insights such as tracking dietary trends and connecting them with a pain or sleep problem. In addition, this app is incredibly unique because it combines data analytics with genetic and microbiome test results to provide tailored health recommendations.
Process:
Empathize
Competitive market analysis of several microbiome tests and health apps revealed underserved user goals and pain points. See extensive research process here.
After analyzing the top four at-home microbiome kit competitors including Thryve, Viome, Day Two, and uBiome, I actually learned that while the idea of getting your microbiome tested at home sounds really cool the data obtained from these tests are not inconclusive. This is because the gut is a new area of study and there are so many factors that impact the gut. Additionally, each company uses different testing methods that provide different results indicating that it might not be worth it for consumers to spend money on data that don’t provide clinical value.
Takeaways:
1. There isn’t one company that has a leg up.
2. Test results rarely match up between companies.
3. The individual, time of day, and method of testing all impact results thereby making it difficult to provide a highly individualized meal program as well as diagnose microorganism-disease relationships.
4. Microbiome tests can be used as data collectors for the advancement of this understudied although certainly promising field of medicine.
5. These kits are best suited for individuals who are curious about their health. They are most successful for people who are willing to test consistently, trial and error food recommendations, as well as speak to medical professionals to interpret results.
2. Test results rarely match up between companies.
3. The individual, time of day, and method of testing all impact results thereby making it difficult to provide a highly individualized meal program as well as diagnose microorganism-disease relationships.
4. Microbiome tests can be used as data collectors for the advancement of this understudied although certainly promising field of medicine.
5. These kits are best suited for individuals who are curious about their health. They are most successful for people who are willing to test consistently, trial and error food recommendations, as well as speak to medical professionals to interpret results.
Define
Empathy Map
The data gathered from the market analysis informed me of the user's needs and shaped the UI/UX design process. I realized I wasn’t quite finished with my research. I went ahead and performed interviews, surveys, and an indirect market analysis of lifestyle-tracking apps in order to gain insight into users positive and negative experiences using said apps.
Persona
I developed Olivia, a mock target user based on underserved user goals and pain points I collected from my indirect market analysis.
Olivia is 28 years old and loves hiking and the outdoors. She maintains a fit lifestyle. She currently tracks her exercise, steps, and sleep with her FitBit and uses My Fitness Pal to follow her diet. Olivia often says, "I know all our bodies are different. I wish I knew more about MY body." Unfortunately, she hasn't found a successful app to help her keep track of everything in one place, and she is searching for something that will track her lifestyle and give her feedback to make changes in her fitness and health routines.
Ideate
Using the results of the market analysis and my modeled end user, I planned the interactive infrastructure of the app. First, I mapped out the user flow using Whimsical for two main user tasks: inputting and reviewing data. Then, referencing my UI requirements and user flow, I began laying out elements as shown below.
Design
After making rough mock-ups of my informed ideas for the app, I designed The Gut Life branding aesthetic: Intelligent, Energetic, and Clean. The brand's goal is to make users feel that their health is well organized and under control. The secondary color palette includes energetic green, yellow, and orange hues, which call attention to specific design elements without being too overbearing. Creating a UI Kit helped me to keep my design consistent throughout the app. I used repeated design elements, buttons, text, and icons.
Prototype
With mock-ups and a branded aesthetic, I developed a working, usable prototype.
This prototype was built on Framer. Below are three prototypes that show the on-boarding process, review, input of data, and the functions of the main navigation bar. Enjoy!
Test
With a functioning prototype in hand, I began distribution to end-users for product testing. I recruited four users: one male and three female, all in their 20's and 30's. All tests were conducted in person, and tests averaged about 20 minutes duration.
Tasks:
Review your HR data
Log your mood
Review daily tasks & achievements
Review your microbiome test results
Review The Gut Life recommendations for your mood, HR, exercise, sleep, and bowel movements
Log your mood
Review daily tasks & achievements
Review your microbiome test results
Review The Gut Life recommendations for your mood, HR, exercise, sleep, and bowel movements
Iterate
From product testing, I concluded changes were needed. I evaluated all the insights and recommendations and decided to implement some changes to the UI that test users found confusing. One of the most important revisions was differentiating between stored data and actively inputing data as it caused the user to have difficult understanding where they were in the application. See below for a before and after:
Additional changes included creating a better redeem vs. redeemed state. I did this by creating a greyed out redeemed state to show that the tool has already been used, a bright green to redeem state to show that it is active and ready to be used. I also added a blue not yet acquired state to show the user what tools they can obtain in the future.
I also added a separate back button because it was unclear if the arrow on the before version went back to achievements or the previous menu.
Lastly, I removed the weekly schedule as it isn’t relevant in the achievements panel as well as other areas of the application.
Summary
Overall, this is my favorite project yet, as it aligns with my mission to improve health and wellness through design. In addition, when thinking about the industry as a whole, I hope that I sparked insight into a new data collection method for improving research in this new area of health and medicine.
