The first dashboard website that visualizes data on antimicrobial, antimicrobial resistance, and the antimicrobial resistance medicine usage in Thailand.
One Health Dashboard
META DATA
Timeline
JAN – JUN 2022
(6 months)
type
interactive data visualization website
CLient
IHPP (Institute for Health Policy and Practice)
Employer
Boonmee Lab
Tools
Figma
Datawrapper
flourish
Process
Data visualization
UX/UI Design
Usability test
Design system
Branding
Link
Visit websitearrow_outward
Background
The International Health Policy Program, Thailand (IHPP), focuses on improving the national healthcare systems by generating knowledge and reliable evidence on improving health systems and policy for the public. In this project, IHPP aims to publish their research on antimicrobial resistance in Thailand and research from member activities of Health Policy and Systems Research on antimicrobial resistance as well. With collaboration from IHPP on insightful data, we eventually came up with a powerful academic dashboard.

The website presents various information on the topic of antimicrobials including Antimicrobial consumption, Antimicrobial resistance Awareness and knowledge on antimicrobials therefore, we tailored different types of charts to best introduce each piece of information. The prospective users include researchers, scientists, policy makers, and private entities who can benefit from data analysis and trend forecasting.
Challenge
The primary challenge I faced was about organizing and analyzing the vast amount of data provided by the client to design complex data visualizations. Additionally, I needed to understand the scientific content and determine appropriate visualization techniques in order to create a strong narrative and consistency across three main topics: Antimicrobial Consumption, Bacteria Resistance Percentage, and Public Knowledge and Awareness.
my role
Lead 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.
Research
At the outset of the research process, I tried to understand complex terminology and foundational knowledge surrounding antimicrobial consumption and resistance. It was paramount to grasp how users interpret and analyze the data, as well as to identify the specific types of interactions they anticipated, such as comparative analysis and data filtering capabilities.
Throughout this phase, I engaged in extensive discussions with subject matter experts to ensure a solid grasp of the scientific concepts. This stage proved invaluable in designing intuitive interfaces that aligned with users' mental models and expectations.
Perhaps the most challenging aspect of the project was deciphering the intricate relationships within the datasets and determining the most effective way to distribute this information across various topics and presentation views.
One Health
Antibiotic Resistance
Defined Daily Dose
Target resistant bacteria
Percentage resistance
Patients with Hospital-Associated Infections
Medicated Feed through Feed mills
WHO CIA
ATC Level 2
Minimum Inhibitory Concentration
Empirical Therapy Combination
Prevalence of antibiotic use
UX Design
During this stage, I focused primarily on designing the website's navigation flows and developing the most efficient page structure.
Website structure
The purpose of the website is to present interactive dashboards that explore various subtopics within three main themes: antimicrobial consumption, antimicrobial resistance, and knowledge & awareness.
Reusable Navigational Hierarchy
I tried to explore a page layout that can be reused across dashboards and different presentation views. Following a simple navigational pattern, from top-to-bottom and left-to-right directions, I created the design divided into four parts.
1. Topic selection
Expand to view all topics and select to display on a page.
2. Views & Filters
Switch between presentation views, select grouping option, and apply filters to showing data.
3. Dynamic visualization
Display dynamic charts, based on the topic and configuration settings.
4. More detail
Relevant drugs or bacteria can be searched and explored for further detail.
Layer of information
The primary data visualization will be dynamically displayed in center of screen where users can interact and explore revealing insights. Additionally they can look for deeper details of specific drugs or bacteria. The information will show on the right panel.
1. Primary area
The main visualization will dynamically display in this center area, based on configurations and filters applied the left control panel.
2. Secondary area
More details about drugs and bacteria, such as class, priority, awareness, and target. It can be used for showing alternative visualization to substitute the main content.
Design iterations
The design process was iterative and thorough. It started with low-fidelity wireframes to establish layout and information hierarchy, which were refined based on feedback. I then picked up multiple chart types and data visualization techniques to clearly communicate complex information.
Wireframes & Charts
In the beginning, I tried to input the sample data into different types of charts to explore the best visualization technique.

For instance, when visualizing the consumption rates of various drugs, we experimented with both bubble charts and Sankey diagrams. The bubble charts were more effective in displaying numerical distribution and the contrast between high and low consumption. Meanwhile, the Sankey diagrams were better at illustrating changes in rankings over time.
Theme exploring
One of the graphical directions I proposed involved incorporating images of real objects into the visualizations.

For example, using drug pills to represent data in bar or bubble charts could enhance the context and relevance of the website. However, the client was uncertain about this approach and appeared to prefer simpler, less fancy data visualizations.
Micro interactions and design improvements
I explored subtle interactions, such as hovering and selecting specific chart elements, providing users with the ability to delve deeper into the data. For example, drug's detail and classes.

Furthermore, I utilized real data to populate the designed charts, ensuring that the visualizations accurately represented the complex information at hand.
Final Design
We have undertaken a remarkable reimagining across various presentations, introducing novel and intriguing elements through these three aspects:
Antimicrobial Consumption
Users typically expect to see trends and patterns in antimicrobial consumption over time, including the ability to compare different types of antimicrobials, identify the most commonly used drugs, and observe changes in consumption rates. They also anticipate the ability to filter data by specific drug categories, view detailed information for individual antimicrobials.
Sorted bump chart
A sorted bump chart shows 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.
description of the gif
Filtering
On the left control, users can toggle specific groups of drugs they want to display in the visualization.
description of the gif
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.
description of the gif
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.
Drilling down
The default view of drug consumption on the detail page is grouped based on selected criteria, such as chemical class. Users can expand each group to drill down into individual drugs within the cluster. Finally, by selecting a specific drug, users can access more detailed information, including a highlighted visualization of the consumption rate change over time.
Antimicrobial Resistance
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.

Dot plot
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.
description of the gif
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.
description of the gif
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.
description of the gif
View percentage changes
Users can click on charts to expand them, revealing detailed line charts that display percentage changes, allowing for more precise comparisons.
description of the gif
Responsive
All data visualizations are responsive, adapting seamlessly to various device sizes. Users can freely access the website on desktop, tablets, and mobile phones.
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.