my role: ux design & ux research

As a designer with a creative background, I wanted to develop a platform with not only an appealing interface, but also with a beneficial purpose. Therefore, I decided to reach out to my surgeon cousin, Dr. Leyla Khalilova, to get more insight 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 based on their symptoms. In addition, the app will keep a record of the symptoms in order 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 Resourcesfull path of the prototype

An algorythm to locate the digestive issues and a guide to find the right type of doctor

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 research, I discovered that proctologists screen their patients with specific sets of intimate questions. This helps to locate the few variations of the medical issues as well as the locations of these issues. 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.

goals

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

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?

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. Furthermore, I also interviewed 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.

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

Notebook page listing the ideal user goal and the golden path: intro, quiz, prognosis, news, forums, accessibility, resources to find the right doctor.

Notebook page of interview notes on digestive symptoms and how people describe them.

Notebook page working through the causes and symptoms of abdominal complications.

Notebook page of brainstorming with Dr. Khalilova on how proctologists screen patients.

Notebook page sketching the two hypothetical personas and the problem areas they map to.

Research plan: project background and the problem gut check sets out to solve.

Research plan: research goals and the questions the study needs to answer.

Research plan: methodology and how the interviews were run.

Research plan: participant screening criteria.

Research plan: the interview script and sample questions.

Research plan: more of the interview script, covering symptoms and history.

Research plan: notes on the intimacy of the subject and how to ask about it.

Research plan: findings and where the study pointed the design next.

1 / 13

Turn through the scans with the arrows — or open any one of them full size.

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 other planet...

There are a lot of causes and symptoms that occur in the digestive system for people around the world, no matter their location or genetics. This requires more specialized resources for people in need.

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 may have trouble remembering the frequency or symptoms they’ve experienced which can result in wasted 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.

beginning of the app intro animation about the app pt1 about the app pt2 about the app pt3 sign in/up page age/gender/weight lifestyle quiz pt1 lifestyle quiz pt2 lifestyle quiz pt3 lifestyle quiz pt4 lifestyle quiz pt5 female anamnesis vitae 2nd set of questions symptoms pt1 symptoms pt2 symptoms pt3 anamnesis morbi transition animation assessment animation full assessment is done!
resources/app gateway app home page check in page

Hypothetical personas with different symptoms

Below are 2 personas that Dr. Khalilova 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.

PERSONA A - FEMALE in her end of 30’s

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

Illustration of a pink coiled gut character beside a glass of red wine.

Illustration of a pink coiled gut character with green markers and a lit cigarette.

PERSONA B - MALE in his 55-60’s

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

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

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.

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

Fidan and her friend Maria at Disney, both wearing sequinned Minnie Mouse ears.

Maria is my dear friend that I met 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.

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 pleased 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. 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. However, this decision would add confusion for certain people with various backgrounds. In this case, using a universally recognized and designed icons were advised to be implemented by either using the current officially recognized accessibility logo or an icon from Apple’s, or Google’s library.

Live interactive prototype

Branding, illustrations, animations - graphic design

Main logo

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.

Animated logo

The pink g settling once the symptom has been located. — symptom located transition

Initial sketches on the logo

Color palette

#11676B

#FB607F

#CB4F06

#000000

#22A0A9

#FF91A4

#F99C67

#FFFFFF

The icon set: stethoscope, accessibility, water drop, sun, moon, calendar, bookmark, search, settings, location pin, home and more, drawn in white with orange accents. — Used icons

Sofia Pro Soft set in Bold, Medium, Regular and Light. — Used fonts

Sketches made in Procreate

Procreate sketch of a pink gut character with green eyes beside a slice of meat.

Procreate sketch working out the coiled gut shape in loose black line.

Procreate sketch of two gut characters leaning together into a heart shape.

Final illustrations

Final illustration: a pink gut character recoiling from a piece of meat. — a person who is disgusted by meat

Final illustration: a pink gut character sitting in a chair, reading. — a person who is browsing the articles

Final illustration: two pink gut characters facing each other. — two people creating a community

Final illustration: a bloated gut character holding a lit cigarette. — a bloated & nauseated person who smokes cigarettes

Final illustration: a bloated gut character beside a glass of red wine. — a bloated person who drinks alcohol

Conclusion & future plans

With this project, I wanted to challenge myself by not only 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 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 a handful of people with medical history, whether 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 field, rather than collaborating with one doctor. Coming up with a more 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!:)

Next Project