gut-check-animation-2.gif
branding&wireframes-06.png
ut-check-07.png

my role: ux design & ux research

As a designer with creative background, I wanted to develop a platform not only with appealing interface but also with beneficial purpose at the same time. Therefore, I decided to reach out to my surgeon cousin, Dr. Leyla Khalilova, to get more insights on what is missing in her proctology field. After a long conversation we both decided to collaborate on an algorithm to help people find the right doctor to contact through their symptoms, as well as keep record of the symptoms they experience to minimize the time spent on a doctor consultation.

course & time:

user experience design I

at the University of Colorado Boulder

mentor - Kevin Cook

spring 2021

tools:

adobe illustrator

adobe after effects

media encoder

figma

procreate

DOCTOR RESOURCES

full path of the prototype 

PROFILE
full path of the prototype

AN ALGORYTHM TO LOCATE THE DIGESTIVE ISSUES AND A GUIDE TO FIND THE RIGHT TYPE OF DOCTOR

sample interview questions for collecting data

 

How is your experience with finding a doctor?

 

Are you comfortable with sharing information with a doctor?

 

How long does it take you to seek help?

 

How do you find out about your condition?

background

In this platform, people with immediate or accumulated

digestive symptoms will be able to help both themselves and doctors to locate the problem and guide with their right type of doctor in that field.

 

From why research, I discovered that proctologists screen their patients with specific sets of intimate questions in order to locate the few variations of the medical issues and also the locations of these issues as well. this type of screening also lets the users choose between 4 different and common kinds of doctors that specialize in the digestive system area. This would allow people to comfortably answer questions due to an intimate nature of the subject and save some time for doctors before the appointment.

methodology

I mostly collaborated with my cousin, who is a surgeon in the proctology field, to come up with a platform that would reflect the real life experiences of patients and doctors. Further, I also interviewed a medical professional, friends and family who went through digestive conditions or abnormal experiences to collect as much data as possible. These interviews ranged from zoom meetings, phone calls and in person dinners throughout the project.

goals

To construct a practical and accurate algorithm in finding guidance for both patients and doctors. To create a comfortability and fun for first time patients in a fun interactive quiz type system. To build communities within the platform and record all the symptoms just like a medical diary. 

participant screening

Ages anywhere from 18 and up, since people can set up medical consultations/appointments after that age and it is an intimate topic. 

 

Any background with digestive history would be sufficient. Users must have some sort of medical scenario/experience before,.

PERSONAL NOTES FORM INTERVIEWS/RESEARCH

Above are some scans of my raw notes during my research, including:

  • Sample questions for people I interviewed

  • Interviews with people who had experience with diverse intestinal/abdominal problems

  • Interview and brainstorming with my proctologist surgeon cousin, Dr. Khalilova

  • Explanations of the causes and symptoms of abdominal/digestive complications

  • Creation of 2 hypothetical personas, to give examples of the location and resource for the experienced problems

  • Golden Path for users of gut check

“People are very insecure to share what is going on with their bodies, especially butts. This leads them to wait till their condition has become more serious and hard to deal with.”

- dr. Khalilova

RESEARCH INSIGHTS

digestive system is a whole another planet...

There are a lot of causes and symptoms that occur in the digestive system of most people around the world, no matter of their location, or genetics. This requires more specialized resources for people in need. The causes are so diverse that it is a robust process to heal the problem areas by doctors that are also branched out through the proctology field.

intimacy of the subject is real

A lot of people feel intimidated to share about what is going on with their digestive system. It is almost like women having periods, kinda challenging to share with people. Most people keep it to themselves until there is a serious problem.

doctors usually ask the same questions

When anyone gets a proctology related consultation, doctors usually ask the same sets of questions to locate the problem area and then prepare for the next steps. These questions collect data that can be recorded daily or as much as it happens. Some people forget the frequency or symptoms in general and this adds extra time during an appointment.

TURNING INSIGHTS INTO DESIGN

allow people to take a short quiz that would give them a resource

Currently, it is very common for a lot of products/companies to quiz customers to give the best customized and tailored experience at the end. This allows people to feel more connected to the product and get help that is meant for an individual taking the questionnaire.

accessibility is a heated topic currently for a good reason

Focus on accessibility for users who might want to either adjust

the interface to have a more comfortable experience or just simply have a fun recourse to make each profile unique to the user. 

help people not be intimidated by sharing intimate information 

Make the whole experience more friendly for each user by having appealing visuals and animations to help them get through the intimidation of the subject. Also focus on simplicity to be more legible for people from all walks of life.

AFFINITY MAP

PRIMARY USER FLOW

LOW FIDELITY WIREFRAMES | GOLDEN PATH

Wireframes below show all the sections of the questionnaire that is conducted by proctologist appointments, according to Dr. Khalilova. 

lo-fi-wireframes-09.png
6.jpg
3.jpg
4.jpg
5.jpg
1.jpg
2.jpg
lo-fi-wireframes-10.png
11.jpg
12.jpg
13.jpg
9.jpg
8.jpg
10.jpg
7.jpg
18.jpg
17.jpg
15.jpg
16.jpg
14.jpg
lo-fi-wireframes-11.png
19.jpg
20.jpg
21.jpg
22.jpg
23.jpg
lo-fi-wireframes-11.png

sign in/up page

lifestyle quiz pt1

intro animation

about the app pt1

about the app pt2

about the app pt3

beginning of the app

age/gender/weight

female anamnesis vitae

lifestyle quiz pt2

lifestyle quiz pt3

lifestyle quiz pt4

lifestyle quiz pt5

anamnesis morbi

2nd set of questions

symptoms pt1

symptoms pt2

transition animation

full assessment is done!

resources/app gateway

assessment animation 

check in page

symptoms pt3

app home page

below are some symptoms that this persona experiences:

She has a constipation  

Deification is painful  

She has a lot of bloating  

She has a very bright red bleeding in her stool  

She was pregnant before  •

She sometimes drinks alcohol  

She drinks a very low amount of water, mostly tea or coffee  

There is/are no case/cases of tumor in his family/genetics  

She is not overweight or not underweight  

She doesn't eat fruits that much  •

She takes about 3000-4000 steps a day  •

She is either overweight or normal weight  

She takes prescription drugs  

She has abnormal swelling around rectum/anus  •

these sets of symptoms/experiences are generally linked with problems located in Colon (which is around below the stomach area)

best advisable doctor to take care of this persona would be in the Coloproctology field, according to Dr. Khalilova

PERSONA A - FEMALE in her end of 30's

persona-13.png
persona-12.png

PERSONA B - MALE in his 55-60's

these sets of symptoms/experiences are generally linked with problems located in Duodenum (which is around above the stomach area)

best advisable doctor to take care of this persona would be in Gastroenterology field, according to Dr. Khalilova

below are some symptoms that this persona experiences:

•  He has pain in his abdomen when not hungry

•  He has a severe pain in his stomach

•  He has a lot of bloating

•  He burps a lot

•  He is constantly nauseous

•  He regularly drinks alcohol and smokes cigarettes 

•  He drinks tea or coffee a lot

•  There is/are a case/cases of tumor in his family/genetics

•  He doesn't eat fruits that much

•  He takes about 3000-4000 steps a day

•  He is either overweight or normal weight

•  If he takes aspirin cardio - might have a lot of pain - might cause bleeding

•  Lactose doesn't affect that much of the diagnosis in this case

HYPOTHETICAL PERSONAS WITH DIFFERENT SYMPTOMS

Below are 2 personas that Dr. Leyla provided from her personal experience with patients. These symptoms help her find the location of the problem area and then advice which specialist takes care of the specific issue that patient is dealing with.

ANIMATED HIGH FIDELITY WIREFRAMES

Below are some of the screens that transition to one another. These animated wireframes allow clearer representation of how user flow is set up.

initial intro animation

quiz

doctor resources 

outside the app

inside the app

calendar | check in page

handicapped-sign-08.png

ACCESSIBILITY

In gut check, I also wanted to implement a robust, yet simple accessibility tool for users not only to make the whole experience more fun and personal, but also elevate the experience for people with diverse backgrounds. I decided to add this tab in an easily reachable location and paired it with language tab to give access to people on all walks of life.

The importance of the Accessibility has become a heated topic recently, for a good cause and implementing such tools in any product creates a more comfortable place, as well as brings diversity to the platform. I have also conducted interviews with my quadriplegic friend, where I delved into deeper research on how accessibility can be used to improve user experience in this recent project that I created, MANATEE

Maria is my dear friend that I became friends with during our internship at Disney.

She was very kind and shared her thoughts and experiences as a person with motor disability and her interactions with technology in an interview. I collected keywords below from my conversation with Maria.

 

Further, I also collected some data from research on accessibility through various means that is also listed in my previous MANATEE project.

keywords from an interview with Maria

IMG_7424.jpg

accessibility tab

USER TESTING & FEEDBACK

During my initial attempts on high fidelity prototyping the gut check app, I was able to show and receive feedback on the overall, user experience and accessibility of the certain elements of the app. Below, I divided general feedback into constructive feedback, as well as positive feedback.

constructive criticism

I was able to collect important observations from my classmates, friends, and my mentor, Kevin. Initially, my prototype included both "find a doctor" tab and "resources" tab in one page, making people scroll a lot. Kevin advised me to separate the "find a doctor" section, to not take away the daily experience of the rest of the app. Later on, Dan Liu - a fellow classmate , reached out and gave me the idea of adding some tabs on top to eliminate the long scroll.

Below, i added the old version of the homepage with everything on a homepage, as well as some detailed criticism from Kevin on important points that i missed.

positive feedback 

I was also fortunate to collect more data on how I could improve on the user experience, through this feedback form.

I was very surprised on how people were interested in a bigger scale of this specific project and were please with the design. 

 

One of the participants shared a great suggestion by replying to a question: "What are some improvements that can be made to gut check?" with "I guess more options? I know that even though my "gluten problems" was actually laundry detergent problems, some symptoms to intolerance to food can be more than just digestive issues like eczema, hives, etc."

After all the received feedback, I was able to tweak the color hierarchy and used Deque University to make elements more legible and accessible

Some specific feedback I received:

  • Looking at the old process design, I positioned the logo on top with no particular purpose. I was advised to revise my design decision into more practical use by eliminating the interference with confusing user experience.

  • I also had a lot of color contrast issues with my conservative choice of colors. The whole hierarchy between buttons and other sections of the app lacked color contrast and was more leaning to focus on graphic design, rather than interaction design.

  • The use of a checkmark on the "check in" button showcased more vague interpretation and kept the graphic design built, rather than connecting the major function into something more connected to the concept.

  • All of the colors that I used were also not checked for their legibility and, therefore, I decided to update all the colors and shades to have the fullest contrast for people with accessibility needs.

  • The handicapped Icon was also a design that I came up with. This decision however, would add confusion for certain people with various backgrounds. In this case using a universally recognized and designed icons were advised to be used by either using the current officially recognized accessibility logo or an icon from Apple's, or Google's. library.

old process design

LIVE INTERACTIVE PROTOTYPE

BRANDING, ILLUSTRATIONS, ANIMATIONS - GRAPHIC DESIGN

MAIN LOGO

gut-check-animation-logo-3.gif
branding&wireframes-17.png
branding&wireframes-20.png
branding&wireframes-18.png
branding&wireframes-16.png
branding&wireframes-15.png
branding&wireframes-19.png

For the branding of this project, I decided to utilize the first letter of gut check in a very minimal, yet very dynamic way. I recently became very interested in animation, therefore, tried to implement my current skills to create a friendly identity for users to enjoy and not get bored. The overall concept of checking any symptoms or daily check ins allowed me to transform typography into a simplistic and a classic sign, mirroring a check in button.

Additionally, transforming the U and the T of the word gut into a welcoming smile was also another layer of making the logo a unique and fun visual, in general.

symptom located transition

gut-check-animation-3.gif
branding&wireframes-06.png
gut-check-animation-2_1.gif
branding&wireframes-06.png
gut-check-animation-2.gif
branding&wireframes-06.png

ANIMATED LOGO

loading transition

symptom assessment transition

INITIAL SKETCHES ON THE LOGO

branding&wireframes-01.png

COLOR PALETTE

#11676B

#22A0A9

#FB607F

#FF91A4

USED ICONS

branding&wireframes-21.png

#CB4F06

#F99C67

#000000

#FFFFFF

USED FONTS

branding&wireframes-25.png

SKETCHES MADE IN PROCREATE

branding&wireframes-22.png
branding&wireframes-23.png
branding&wireframes-24.png

FINAL ILLUSTRATIONS

a person who is disgusted by meat

a person who is browsing the articles

two people creating a community

persona-12.png

a bloated & nauseated person who smokes cigarettes

persona-13.png

a bloated person who drinks alcohol

CONCLUSION & FUTURE PLANS

With this project, I wanted to challenge myself not only by diving into a medical field, but also work on a topic that is usually sort of taboo to talk or share. As a female designer, I have come across to this type of intimate subject, similar to menstrual cycles, before and wanted to bring awareness to abdominal/digestive system, this time.

gut check is a product of collaboration

between a proctologist and a ux designer

In conclusion, this algorithm prototype has been constructed and designed with a lot of direct conversations between, not only a surgeon and a designer, but also handful of people with medical history, wether it is specifically in the proctology field or general history as well.

All the feedback received during the design/planning process have made a huge impact on making this platform as accessible and fun as possible.

surprisingly, most of the feedback from user testers have been encouraging and positive to make this concept live

From usability, concept, and all the way to design, gut check made a great impression on people with diverse backgrounds. Therefore, it is very exciting to create a product that reaches a specific audience that is also very common in any part of the world.

 

For the future of this app, I need to conduct a more robust research on how doctors conduct their assessments in various locations and specifically in

the proctology filed, rather than collaborating with one doctor. Coming up

with a most accurate algorithm is very important and is not reflected in this

initial prototype.

Thank you so much for taking your time and reaching the end!

:)