Aug - Oct 2022
Time
Information Visualization
Industry
Role
Lead end to end process from research, design, data analysis to code
Haoran Xu
Members

Why

When people feel sick, most of them will search for the symptoms on Google. However, these symptoms can lead to results for something common, like a cold or something terrible like cancer.


Google did not reveal the connection between the symptoms and diseases and only gave people the most attractive answer. And for the most part, that could be cancer.

does every Google search for a patient's symptoms lead to information about cancer?

Discover the connections between symptoms and disease and provide more accurate information to educate people before they get professional advice.

I found several datasets related to the symptoms and diseases and did research to reveal the insightful information.

HOW MIGHT WE...
The quotes from user

I need to understand if my symptoms potentially lead to risky disease to decide should I go to hospital.

I have the chronical disease, I need to know what the fetal symptoms and good lifestyle are.

I wish I have a more trustful data source to search the disease.

The doctors appointments is complicated, so I research online for the existing symptons, and see related diseases.
Data Exploration
I listed a series of questions I want to answer in the datavisualization.
What is the correlation between symptom and disease. (What is the most intuitive way to present the information for the ordinary people to understand the connection between their symptoms and possible disease.)

What is the way to reveal the relationship between severity and symptom, or even more, the relationship between severity and disease.

How do we predict the potential symptoms and precautions based on the related symptom/disease.
How do we inform the people who have the chronic diseases the potential risk symptom and the precautions of the disease.
01
02
03
03A
research questions
the dataset

I used the “Disease Symptom Prediction Dataset” to explore the data visualization, which contains most of the details that the users want from pre-diagnosis disease.

Wireframe 01
-Disease Database Network

I uses Python + PyVis to created a interactive diagram that reveals the connections of the diseases and symptoms.

Search Objects
Disease
Symptoms
Search Objects
Disease
Symptoms
Search Objects
Disease
Symptoms
Alcoholic hepatitis is a diseased, inflammatory condition of the liver caused by heavy alcohol consumption over an extended period of time. It's also aggravated by binge drinking and ongoing alcohol use. If you develop this condition, you must stop drinking alcohol
*Doctor advice required
Precaution
Discription
Avoid fatty spicy food
Drink plenty of water
Take plenty of rest
Alcoholic Hepatitis
Severity
5
Plot type: Network Graph
Visual element: Position, Color, Size
Variable: Symptom, Symptom Severity, Disease, Disease Precaution
usability test
I designed a usability test procedure that helped me to figure out which prototpye is the best fit and how should I improve it.
research questions
Does the navigation system help user to discover the information they need?
Ask about user’s first impression, task completion
Does the graph provide user enough information to achieve the goal?
Ask the expected pattern on the graph, measuring the time of completion
Are there any misleading information or patterns?
Completeness, ask user for feedbacks
What is the performance of the interface while user is sick?
Given scenario as a context and ask feedbacks
test methods
Wireframe 02
-Disease Database Network
(With Severity)

I uses Python + PyVis to created a interactive diagram that reveals the connections and severity of the diseases and symptoms.

Plot type: Network Graph
Visual element: Orientation, Position, Color, Size
Variable: Symptom, Symptom Severity, Disease, Disease Precaution
Wireframe 03
-symptom&disease distribution

I used Tableau to created a interactive diagram that shows the distribution of different symptom severity in each diseases in candlestick chart.

Plot type: Candle Chart
Visual element: Position, Value, Size
Variable: Disease, Symptom Severity, Disease Precaution
Wireframe 04
-symptom&disease severity chart

I uses Tableau to created a interactive diagram that shows the distribution of different symptom severity in each diseases in stacked bar chart.

Plot type: Histogram
Visual element: Position, Value, Size
Variable: Disease, Symptom, Symptom Severity, Disease Precaution
*The data structure
https://www.kaggle.com/datasets/itachi9604/disease-symptom-description-dataset?select=dataset.csv
Search Objects
Disease
Symptoms
Risk Level
0
1
2
3
4
5
6
7
8
9
10
|
|
|
|
|
|
|
|
|
|
|
* The usability test guideline.
https://haoranx.notion.site/Test-template-cae8ff6c3be44696a67ee44a26f8eacc
interview questions
& test procedure
Pre-Flight
Asking permit, zoom recording
User Profiling
Task 1
Explaining the task 1 scenario:
You are now feeling some pain in your liver with swelling of stomach, try to identify the possible disease and its severity. (you got a fever, feels fatigue)
Wireframe 01
Demo the UI overlay in Figma, such as title of the chart, search bar, title of the element
Tryout the interactive webpage data viz, and ask user to remote control for interactively exploring the visualization and pretend the UI is there and finish the task.
Wireframe 02
The same process with Wireframe 01...
Wireframe 03
Tryout the Tablue interactive graph and ask user to remote control to explore and finish the task.
Wireframe 04
The same process with Wireframe 02...
Task 2
Explaining the task 2 scenario:
You've been suffering from alcoholic fatty liver disease, but you don't know how to take care of yourself in life and what constitutes a dangerous symptom. You want to find out the precaution of alcoholic fatty liver and what the severity of the symptoms are.
Wireframes
The same with the Task 1 process...
the parameters
I referenced the “Severity Ratings for Usability Problems” from Niesen Normal Group in order to design the parameters for ranking the priority of the problem.
https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/
0 = I don't agree that this is a usability problem at all

1 = Cosmetic problem only: need not be fixed unless extra time is available on project

2 = Minor usability problem: fixing this should be given low priority

3 = Major usability problem: important to fix, so should be given high priority

4 = Usability catastrophe: imperative to fix this before product can be released
the results
After the tests, I collected the results and rank them into a list, which I followed to iterate my prototype.
Most of our users found that the Wireframe 01 is the most potential prototype and can solves their problem in both scenarios.
I felt the Wireframe 01 is the most potential way for me to find the diseases and symtoms since the clear hierarchy of the nodes and reponsive interaction.
- Sam Gu

How Do Professionals Diagnose and What Is the Problem With Normal People Using It That Way?

Based on secondary research, most of the professionals working in the medical industry use the Disease Database to search for precise information and connections between the Disease and its symptoms.

However, most of the Disease Databases are extremely complex and not intuitive to use.

*References
https://www.malacards.org/
https://www.nlm.nih.gov/
https://disease-ontology.org/
http://www.diseasesdatabase.com/

Daniel can easily understand the relationship of the current symptoms and the related/possible diseases from the graph.


I highlight the selected node and its connected node in order to help people quickly filter the information.

Highlight Symptom and Diseases connections

Daniel can quickly check the severity of the possible diseases related to the symptom with the precaution and the description of the disease. Which can offer the user sufficient information to decide does he need to go to hosipital.


I color coded the severity for the first look. The red text is always been a indicator to remind people for seeking professional advice.

Severity Indicator
Scenario 01 - Search While Sick
Daniel is feeling cold and fatigue. He needs to identify the possible disease and its severity.

SeekNode to feed the Galvin what they should take care of based on his search history.


I implement this feature since it will help people with the existing disease gather more information.

AI suggested reading

Galvin can search the disease he have for quick access.


For the patient who already know the disease but just want to discover the symptoms, the searchbar can help them.

Search Feature

Galvin can found out what is the specific symptoms indicates for the disease he got.


The feature can help the users to know the context of the symptom towards a specific disease.

Symptoms detail based on connected disease
Scenario 02 - search for Chronical Disease information
Galvin knows which kind of chronical disease he have. However, he want to you what is the fetal symptoms and what is the precautions for the disease.
Persona

Defining the user, or patient, of the product based on previous research.

The next step
What if we are only use the network visualization to present disease and symptoms network, but also the knowledge database for the humankind, the Wikipedia.

Imagining a new way of designing the search engine, which not only give people the answer but also give the context and the connections of the knowledge to the people.
* Images from my ongoing project, Utopedia VR
In order to inspire more people
The project is open-sourced with GNU License on Github
Acquired Fatty Liver
Busy
With Medicare
Painpoints
Wants & Needs
Galvin
Employee in Tech
Due to intensive working schedule and lack of fitness, Galvin acquired fatty liver when he is 50 yrs old. He need to know the potential symptons of the disease and the correct treatments
Personal Info
Weak Immue system
Bad-healthcare
Painpoints
Wants & Needs

© Copyright 2024 • All Rights Reserved

+1 (323) 616 5096

hi@haoran.io