iHPP

“A comprehensive health dashboard for monitoring Antimicrobial Resistance in humans and animals in Thailand.”

Timeline

Jan – Aug 2022 (6 months)

CLient

IHPP (Institute for Health Policy and Practice)

Employer

Boonmee Lab

Tools

Figma

Link

Visit website

Background

In response to the strategic goals of National Strategic Plan on Antimicrobial Resistance 2017-2021 (NSP-AMR), the Thailand One Health Dashboard on Antimicrobial Resistance has been built to monitor antimicrobial consumption and antimicrobial resistance in humans and animals, and knowledge and public awareness on antimicrobial resistance since 2017. The prospective users include researchers, scientists, policy makers, and private entities who can benefit from data analysis and trend forecasting.

my role

UX/UI Designer
Designed user experiences and delivered high-fidelity prototypes.

Leveraged a variety of data visualization techniques to to transform raw data into meaningful insights. Designed dynamic charts, graphs, and heat maps combined with intuitive user interfaces that allowed users to interact with data, revealing trends and patterns that help present data insights.

Conducted A/B testing, and usability evaluations to identify areas of improvement.

Delivered presentations and design proposals, ensuring clear communication of design rationale and project progress.

Final Design

We have undertaken a remarkable reimagining across various presentations, introducing novel and intriguing elements through these three aspects:

Antimicrobial Consumption – Sorted bump chart

For antimicrobial consumption, I used a sorted bump chart to show changes in consumption rates over years, ranked from highest to lowest. The connecting curves between columns to clearly indicate where changes in consumption rate and drug rankings occurred. When hovering over each drug, the chart highlights it, clearly revealing its change in amount of consumption. Clicking on a chart displays details about the drug and its consumption rate in a line chart for more precise information.

Filter control

On the left control, users can toggle specific groups of drugs they want to display in the visualization.

Show and Hide

In the right panel, users can hide specific drugs in the chart, allowing them to compare the distribution for particular sets of drugs more easily.

Detail page

On the in-depth analysis page, the chart and user interface allow users to explore various grouping patterns and be able to support the display of all 182 drugs in the dataset.

Antimicrobial Resistance – Dot plot

To display the bacteria resistance data, I used a dot plot chart to effectively show the distribution trends of resistance rates in various bacteria to different antimicrobials. A key advantage of this chart is its ability to facilitate easy comparison of resistance rates across multiple bacteria and drugs. The resistance rate in each year appears as a dot on the chart. The horizontal axis represents the resistance rate percentage for a specific antimicrobial drug, while the vertical axis shows each bacterium. Color-coding is used for distinguishing different bacterial groups.

Additionally, readers can interact with the chart by hovering over individual dots to reveal a reference point for baseline year. This allows readers to quickly assess changes in resistance rates over time by comparing percentages from subsequent years to the baseline. As a result, increases or decreases in resistance rates become immediately apparent.

Detail page

On the detailed page, you'll find more extensive antimicrobial resistance data for various bacteria and drugs. Readers can use the filter control on the left to select specific bacteria for display. On the right, line charts offer insights into trends over time.

Toggle between bacteria-based and drug-based perspectives

We offer a toggle to switch to a drug-based view. This provides comprehensive insights for readers who want to compare resistance rates of various bacteria for a specific drug.

Overall, the dot plot chart effectively represented the bacteria resistance data, providing a clear and concise overview of the trends and patterns. By designing custom visualizations for each section of the dashboard, my team and I transformed complex data into a user-friendly and visually appealing format, helping readers easily understand and interpret the information.

Knowledge and Awareness on AMR – Stacked Bar Chart

For the final topic on public knowledge and awareness, we chose a stacked bar chart to display survey responses to fact statements about antimicrobial resistance. The chart is split by a central line: those who believed the statement was true appear on the right side, while those who disagreed or responded "don't know" are shown on the left. This layout offers a clear comparable insight into people's awareness of antimicrobial resistance.

Generally, the survey is conducted every two years. The visualization arranges data from different years vertically, allowing readers to explore how people's perspectives have changed over time. Users can also click on each statement to view more precise data displayed in a line chart.

List of statements

Readers can scroll through the visualization to explore different statements from the survey.

Results

Despite taking over six months to develop the scientific narratives and create detailed data visualizations, this project has resulted in one of the most impactful dashboards I've ever created—one I'm incredibly proud of.

The website has been shared with international organizations and serves as a reliable dataset for policy planning and regulatory initiatives. Both the World Health Organization (WHO) and the Food and Agriculture Organization (FAO) have utilized the dashboard to track antimicrobial consumption and resistance patterns. This has led to more informed decision-making and the development of targeted strategies to combat the global rise of antimicrobial resistance.