UX Case Study | A Gastrointestinal Disease Support App

Did you know?

61% of female Americans are diagnosed with gastrointestinal diseases and 39% of male Americans.

Role: UX/UI Designer

UX Design Tool: Adobe Xd

Timeline: 10 Day Sprint

Our Process

I decided to follow the Double Diamond design process model developed by the British Design Council in 2005.

My goal was to analyze the problem space thoroughly and uncover solutions that added the most value to our users.

The Brief

The National Wellness Insitute is the leader in providing professional development and engagement opportunities that support individuals from a variety of disciplines in promoting whole-person wellness — nationalwellness.org

As UX designers, the goal was to help the National Wellness Institute provide people with a product that would help fuel their professional and personal growth.

The National Wellness Insititute promotes six dimensions of wellness. For this project, I decided to focus on the physical and emotional aspects of wellbeing.

Six dimensions of wellness

While designing this product, the National Wellness Institute required that the application have the following features:

  • Communication with coaches
  • Setting goals
  • Tracking progress
  • Distinguishing feature

Discover

Secondary Research

When I first started my wellness project, the goal was to solely focus on Crohn’s disease. I began conducting research starting from the root of the disorder which led me to examine gastrointestinal diseases as a whole.

Once I discovered and investigated the different types of gastrointestinal disorders, I gained an interest in the similar patterns experienced by those affected by digestive diseases. It turned out that there was a correlation between the psychological and physical effects of gastrointestinal diseases.

As I pivoted my project towards gastrointestinal diseases (GI), I dug deeper into the emotional patterns associated with Gastritis, Gastroesophageal Reflux Disease (GERD), Inflammatory Bowel Disease (IBD), Irritable Bowel Syndrome (IBS), and Celiac Disease.

I was hooked and fell into a Reddit rabbit hole, absorbing numerous comments and posts regarding the low states of emotion GI patients face on a daily basis. It saddened me to learn that many were dealing with negative thoughts as a result of their condition, which in turn made me want to explore the matter further. Many joined forums to express their sadness, anger, frustration, nuisances, and dispair in regards to symptoms of gastrointestinal.

If you’re not familiar with gastrointestinal symptoms these are examples of what GI patients experience: heartburn, indigestion/dyspepsia, bloating, constipation, diarrhea, nausea, vomiting, abdominal pain, and acid reflux.

What many don’t realize is that these symptoms can’t always be controlled. In fact, despite taking medication, some people aren’t sure when or if they will get better. This major concern along with the symptoms leads to psychological distress.

The uncertainty of the diseases’ triggers and the patients’ recovery timeline, encouraged me to dive deeper into the psychological angle of my users. I felt compelled to explore the discussions made in several forums and based on the below comments shared, I could sense a spirit of helplessness and a cry for hope. That call for help spoke to me as a designer and I knew this was a way for me to create something that could make a much-needed impact in an underserved community.

Lean UX canvas

Once I gathered data from my secondary research, I used the lean UX canvas to help define the current state of my user and the business problem. This allowed me to set up the initial strategy and see the current areas that needed exploring.

Feature comparison chart

I then needed to explore the gastrointestinal disease applications that were already in the market to reduce the risks of going off my assumptions. This tool gave me access to the lack of emotional support and dieting features in my competitors' products, which showed gaps in the market.

Market positioning chart

This overview of the features users have and lack from the feature comparison chart, along with my research, allowed me to create axes for the market positioning chart.

This living document helped me see the position of my competition. Users were looking for personal discipline along with physical and emotional support. As you’ll see from the chart, my competitors offered both personal discipline and physical guidance. As I was able to identify and understand the competitors, I noticed that the uncontested market place lay under personal discipline and emotional support.

User Research

I was finally ready to start my user research and gain rich data to validate the assumptions made from my secondary research.

When I created my survey, I wanted to make sure I asked my users questions that would help me understand their pains and needs at a deeper level of empathy. I asked questions such as:

  • What mood/emotional changes do they experience most frequently?
  • How did their daily habits change since their GI diagnostics?
  • How do they deal with flare-ups?

Quantitative data from 61 survey responders:

  • 84% Frequently experience stress/anxiety.
  • 56% Seek resources that relate to their specific condition.
  • 54% Keep their emotional state to themselves.

I needed to understand what they currently experienced and what they were looking for as far as support. This helped me narrow my interview questions to focus on the biggest problem area.

To avoid knowledge gaps during my affinity mapping process, I created a set of questions to ask my users during the interview. Although I knew the personal nature of the questions might be a blocker for some of my respondents, I was still confident that I’d get a defined pattern. Fortunately, this allowed me to better understand my users’ pains and identify similarities.

Qualitative data from my 5 user interview that help tell my users’ story:

“It’s frustrating and gets disheartening at times that you don’t know if or when you’ll get better” — Simone

“I would skip meals and not go out with friends because of flare-ups” — Capucine

“I create and personalize my exercise that helps me feel better, for example, squats” — Maxo

For this wellness project, I thought it was important to also conduct interviews with three subject matter experts: a fitness coach, a dietitian, and a psychologist. These experts were key to determining the strategies and practices they offer to help their patients and clients’ develop a sense of well-being. By welcoming their input into the project, I was able to identify the areas for improvement in their field as well as tactics that have helped them work with their patients and provide their care.

Rich data gathered in my SME interviews:

“Nutrition is tied in to exercise. Base on the fitness guidelines, I can make sure if the patient is following the proper diet.” — Kaisha (Dietation)

“When you work out blindly you have no solidified reason to continue when you don’t see the outcome.” — Jas (Fitness coach)

“When patients are highly-stressed the cortisol goes to your gut. It increases stomach problems, you can get nauseous and get diarrhea.” — Mari (Psychologist)

Define

The goal was to synthesize the data from my secondary and primary research to move forward with brainstorming and make sense of the insights. I had to put different lenses on by using tools that would define the pains, gains, and jobs to be done.

Affinity Map

I started making sense of the data by laying out into an affinity map and grouping the themes. This tool gave me an insight into my users’ world and helped guide me into the direction of the product’s solution. Once I grouped my data into and sorted my findings, I summarized the stories my users were telling me in regard to the pains and gains they experienced.

Insight and discovery: The majority of patients feel helpless during flare-ups and try to find solutions that fit their needs.

I also synthesizing the data gathered from my SME’s interviews, to analyze the relationship between nutrition, fitness, and emotion.

Insight and discovery: The relationship between diet, fitness, and emotional state can affect the digestive tract.

Value Proposition Canvas

The value proposition canvas was key to understanding what the users are trying to accomplish. This allowed me to see what they want to see, the feeling they are seeking, and how they want to be perceived.

User Persona

Based on my data, I was able to create a user persona that represents the GI community. I had to understand the person I was designing for — their perception, their mental model, and interests, instead of focusing on someone that doesn’t experience those pains. This helped illuminate the character and personality of someone that didn’t fit the market space.

Task Analysis

The major sticking point during this project was definitely the task analysis. It was a challenge for me to minimize the tasks my users needed to complete to achieve their goal because I was planning for multiple scenarios. After going back to the value proposition canvas and my user persona, I was able to recognize my user’s biggest needs and created my tasks analysis.

User Journey Map

Visualizing the data in a closer way, the user journey map revealed areas for design opportunities. This allowed me to create problem statements and see how I could flip them into How Might We questions.

Problem Statements

  • Susie needs to find a way to get resources regarding her flare-ups because her symptoms and reactions differentiate from others, and she can’t find anything specific that can help her.
  • Susie needs to find a way to relieve her stress and anxiety concerning her gastrointestinal disease because it encourages her to flare up.
  • Susie needs to find a way to gain access to emotional support via the application because she has no clue what to do or who to go to for help during her flare-ups.

How Might We

As I prepared to move forward to ideation, I needed to convert the problem statements by turning them into How Might We questions. This allowed me to plan how I will help turn the user’s pains into pain relievers. Given that this was a solo project and UX is a team sport, I wanted to pair up with another UX designer to help me brainstorm ideas, luckily @seekatwrite was up for the challenge. As we came up with solutions collectively, we time-boxed ourselves to reduce the chances of being overwhelmed with too many ideas.

Develop

MoSCoW Method

Once I was done brainstorming and selecting the best solutions, I used the MoSCoW method to help distinguish and prioritize the applications must-haves, should-haves, would-haves, and won’t-haves.

My must-haves included:

  • A personalized plan of action.
  • Setting goals.
  • Progress Tracker.
  • Communication with a coach.
  • HIPPA Compliance.

My should-haves:

  • Chat and video feature.
  • Stress Relief Techniques/Suggestions.
  • Emergency button.
  • Educational articles/videos.
  • Accessibility.

One of the subject matter experts, the psychologist, Mari, explained that it was important that patients' information should be made secured. This made HIPPA compliance a very important factor for me to add to this application.

I also wanted to guarantee that this application accommodated a variety of use cases. I conducted research on accessibility laws and regulations to ensure that the application would cover web compliance.

Value proposition canvas — business fit

I was then able to define and explain how the product would directly impact our users by creating those gains and reducing the pains to align with what the user values. This business tool allowed me to analyze and determine if I had the correct product-market fit.

MVP

Before I reveal the minimum viable product, here is a quick recap of my user persona’s pains:

  • Stress/Anxiety due to flare-ups.
  • Lack of reliable resources and remedies.
  • Lack of symptoms relief and guidance

By identifying the constraint and the specific goal that the users were trying to attain, I came up with the minimum viable product. This includes:

Support: Access to psychologist, dietitian, fitness coach.

Personalization: Remedies based on their condition.

Monitoring: Learn new ways to manage their symptoms.

The Name

While discussing the scope of the problem and the user needs with fellow UX designers, I was suggested that the name should offer a sense of comfort.

The name of my wellness application would be called Remedy.

Jobs To Be Done

With the minimum viable product developed I was able to create the main job of the product. The Remedy app would help users:

Take control of your flare-ups and optimize your emotions, Day & Night

Referencing the job to be done framework, I was able to define the main feature story:

When stress arises before or during flare-ups, patients want to use the Remedy app to follow personalized techniques so that they feel calm, confident, and in control.

While creating the Remedy application’s main job, I went back to the data and focused on the best solutions to identify those that added value to the users and business.

User Flow

Before creating the prototype, I had to define the flow the user would take to attain their goals.

Aside from the task analysis, the user flow was another blocker I faced during this project. I couldn’t quite figure out how the user would approach the application. Instead, I decided to sketch low fi concepts first just to visualize the flow.

Once I was able to conceptualize the prototype, I completed the user flow. With my user’s happy path in mind, I did my best to imagine the seamless experience a user would want to encounter while using the remedy application. I was able to simplify the process and keep it minimal while still adding the key distinguishing feature to the flow.

This blueprint helped me move forward with my prototype with more confidence.

Deliver

Low-fi Prototype

I finally brought the data and value found in my primary and secondary research to life and tested my hypothesis through rapid prototyping. With the concept in mind, I created my low-fi prototype using my user flow to guide me. I definitely learned from my usability testing, specifically the importance of ontology.

Although I had my user flow defined, I struggled with my lo-fi prototype during my design process. There were many screens I wanted to share during my presentation, this led to a hard time trying to figure out how to make the flow intuitive.

Usability Testing

Another difficulty I faced was usability testing. The plugin I use had trouble recognizing states which led me to create additional screens. Given that component states in XD for streamlining workflow and design layout is fairly new, in order to gather additional data, such as heat mapping, screen recording, misclicks, and average time spent on screen I had to create additional artboards to test my prototype with the Useberry plugin.

After I conducted my 5 usability tests for my lo-fi, I had quite valuable discoveries as well as requests from my users. Ontology seems to have been the biggest concern. They were as followed:

  • The icon label “Support” should be changed to “Coach” for clarity.
  • The shadow I had placed under the icon for identification needed the opacity to be at a higher level for a better view.
  • The goal on the dashboard didn’t seem clear using just a simple line, there was no clear indication of what was the goal.
  • The bowel movement and mood needed to be separated from the other symptoms due to the simple fact that they were measured differently.
  • On the chat with Dr. Mari, she mentioned that the user should check her exercise by clicking on the track, which confused some of the users.
  • The instructions stated to click “no” when the user didn’t feel better, but there were no labels with the word “no.”
  • There was also no indication that the user needed to use “meditation” as their remedy of choice during onboarding.

I also got in touch with one of my subject matter experts to get her insight on my prototype. She had a few suggestions that helped with my chart and setting up a goal for the users. This was a great help, due to the fact that the majority of my blockers involved defining the chart.

Mid Fi Prototype

Once I gathered all the suggestions from my lo-fi usability test and applied it to my mid-fi prototype, I was able to visualize the application. The prototype was clearer which improved the user flow; I was nearly satisfied.

I had to put my mid-fi to the test by using the Useberry plugin for testing 5 users, who gave the following responses:

  • The ontology was much better!
  • For the chat screen, users preferred to be asked if they’d like to invite an additional coach to the conversation rather than be told to add them.
  • The vocabulary and grammar needed to be double-checked.
  • The smile and sad emojis’ position needed to be switched, smile to the right, and sad to the left.
  • Rather than be told to reach out to coaches, the user would also want the option to reject the invite.
  • On the instruction adding the word “Ok” or “Got it” at the end of the direction would help indicate that the users should click on the screen to move forward.
  • The word “my” in front of the scale numbers seemed a bit odd.
  • The “next” icon button on certain screens looked like a play button.
  • Typo also needed correction in the chat.

As I collected data from both lo-fi and mid-fi testings, I gained a deeper insight into the usability of the design. Once 85% of the application’s issues were identified while observing the 5 participants, I was prepared to move forward with making improvements.

Visual Comparison

I had to see what my users were attracted to visually by analyzing the current market. I conducted a visual comparison using two of my competitors UI: Cara Care and MyIBD. This tool allowed me to see what the users expected as far as design patterns. After observing their style choices, I noticed that my competitors were missing a sense of warmth in their UI design.

Brand Attribute

Based on my research, I gathered that my users were looking for support, healing, and progress, but they also seek a sense of hope, comfort, and trust. This allowed me to come up with my brand attributes to guide me while creating the UI. To be honest, a few words came to mind when I thought of what the NWI new GI support app should incorporate. My top 10 words were:

Healing, Helpful, Comfort, Relief, Relaxed, Safety, Understanding, Trust, Confidence, and Control.

I then narrowed them down to healing, helpful, relaxed, comfort, hopeful.

Moodboard

I created two mood boards based on my user’s mental model and the business fit. After a desirability test done with my classmates, I was sure that my creation would help guide me in the correct direction.

Desirability test

They shared that my first mood board as oppose to my second made them feel calm, hopeful, positive, healed, giving, nourished, comfort, peaceful. They were a little thrown off by remote control I originally placed on both mood boards to depict a sense of control but instead, they described it as technological and digitalized; out of place.

Once I shared my brand attributes with my classmates, they were convinced that I nailed it and suggested that I move the images that displayed healing and an image that portrayed relaxation from the second mood board to the first for a solid feel of my brand attributes. This was a helpful exercise because sometimes we may get too attached to our ideas and be misdirected by our own assumptions.

Style tile

I then moved forward with a desirability testing by using the style tile to showcase color, button, and pre-design choices made using the mood board.

My style tiles weren’t too different from one another. It was a priority for me to apply accessibility visual elements and features to my application in order for anyone to use it. I first conducted research on fonts that are considered ADA compliant and two of my favorite fonts were on the list: Verdana and Helvetica Neue.

I decided to create my first style tile with the Verdana font, including my logo and placing the colors from the favored mood board on the style tile. I also played around with Adobe Illustrator and added a splatter brush texture to my logo’s background and combined two icons together to form the Remedy logo. I originally had my buttons in black and white for more of a minimalist touch as well as for contrast effect for accessibility compliance. I completed my style guide with icons from my navigation bar and 3 photos from my mood board for a full effect.

My second style tile gave more of a corporate impression to my testers. I kept the circle of my logo round and solid outline. I also used Helvetica Neue in this style tile, but my testers said the font was too cold compared to Verdana’s softness. Judging by the remarks made in both styles it was clear that the first tile was the one that aligned with the brand attribute.

Atomic Design Inventory

I then created an atomic design inventory with repeated elements to use as the building blocks for creating the Hi-fi prototype.

Micro-interactions

For this project, we had to integrate some micro-interaction into our UI to take it to the next level. I intended to apply interaction to the scale displayed on my lo-fi and mid-fi prototypes. First I had to identify the four parts of the micro-interaction model in my design and implement it into the user flow.

Trigger: Drag the ellipse to input the users’ number.

Rules: The number increases or decreases based on the ellipse movement.

Feedback: Confirmation of the number change.

Modes: Mode would be based on changes made to the scale by the user.

Hi-Fi Prototype

Once I opened myself up to critique, it gave me access to new perspectives, from my SME, my users, and my testers. I was able to experiment my way forward through desirability and usability testing, which eased the creation of my Hi-fi prototype.

Giphy View

Success Metrics:

  • A high volume of engagement between coaches and patients.
  • Consistent use of the application by both SME and users.
  • 4 or 5 stars reviews.

Fail Metrics:

  • A low volume of engagement between coaches and patients.
  • Lack of daily input by both SME and users.
  • 3.5 stars or lower reviews.

Takeaways

Circumstances usually have problems and potential, where your focus goes energy flows. When designing new products, I do my best to trust the process because it'll lead to better designs. These were some of my reflections:

  1. The different tools used in this project helped me see the data in different lenses and allowed me to create a better experience for the users.
  2. Problem-solve and validate assumptions by gathering data. The users and data will guide you through your concept.
  3. Always experiment your way forward and test your hypothesis. By using the data as a guide, I reduced the risk of designing useless/poor products.
  4. Involving Subject Matter Experts into your process can help uncover new perspectives and design opportunities.
  5. Listening to the mistakes to see how they affect the business outcome. Test if features are adding value to users’ life.
  6. Testers will help you determine if design features align with your business goals.
  7. Don’t be attached to your designs, they may not work.
  8. Plan for different scenarios to avoid blockers.
  9. Understand the business constraints and what the user needs to achieve before jumping into prototyping.

10. Sacrificing beauty for usability is worth it!

Next Steps

Overall, I enjoyed working on this project. Given the time constraint, I was unable to add the following features to my applications. I definitely would move forward with turning this into an all-in-one application for the GI community.

Thank You

Thanks for the claps if you enjoyed this article. As always, feedback is appreciated. If you’d like to connect, please reach out!t! — Bianca Salomon

Product Designer

Unlisted

Product Designer