Overview :

1. About :
   Drugs.com is a comprehensive, independent online pharmaceutical encyclopedia providing free, peer-reviewed, and up-to-date information on over 24,000 prescription drugs, OTC medications, and natural products. Designed for consumers and healthcare professionals, it offers tools like pill identifiers, drug interaction checkers, and side effect guides.
   Key details about Drugs.com:

   • Information Source: It compiles data from trusted sources, including the American Society of Health-System Pharmacists, Cerner Multum, and Micromedex.

   • Key Features: Users can access a "Pill Identifier Wizard" a "Drug Interaction Checker," and information on medical conditions.

   • Target Audience: It serves both patients and healthcare professionals.

   • Availability: The site is available in over 40 languages.

   • Not Medical Advice: Drugs.com provides educational information and is not a substitute for professional medical advice, diagnosis, or treatment.
     Why it need to be redesigned?

   • To add AI feature on Drugs.com

   • To add new feature that can increase speed and accuracy for searching drug information

   • To efficient pharmacist's workload like drug dispensing, patient counceling, collaboration and discussion with phsycian, nurse, etc.

2. Duration : 4 month

3. Task : research, design, testing

4. Team : Muhammad Habiburrohman

5. Role : ui/ux designer

6. Metode: Qualitative moderated usability testing - in depth interview

7. Metrics :

   • Task Success Rate (Effectiveness)

   • Time on Task (Efficiency)

   • Cognitive Effort (Mental Load)

   • Confidence Score (Trust)

8. App version on android :

   • Drugs.com : 3.1.29

   • Medscape : 12.13.1.11869938

If you prefer explanation on video format, click this video below :

Stage 1 - Empathize

1) Observation :

I make observations by trying out the current web and app "Drugs.com" and see where I feel constrained when interacting with them. After trying this apps, I noted a few points that could potentially to be improved.

2) Research plan :

1. Background :
   Pharmacist is one of the profession that learn and get education about drug, medicine, cosmetics herbs, etc. They often get asked about medicine by other profession (like psycian, nurse, etc) in their workplace. They often get question also do counseling for the patient. So, they should have ability, knowledge and to answer the question accurately and precisely. But, sometimes they forgot about the subject or the topic about it's question. So they need to search on drugs or medicine database to get the information. Problem came when the time constricted, it takes a long time to only find the answer for the question. They have to click and search manually on the "drug information web". Of course, it's will wasting their time. They have to move to another work task.

   This problem can be solved by using AI. They need AI for his daily work as a clinical pharmacist. He needs app that can help him to get drug information precise, accurate and fast. Especially AI for drug information, because now we're in AI era. Until now he still not finding AI that specific on drug information, he still manually access drug information on website/app like drugs.com, Medscape and MIMS. AI can automate for searching on specific topic. It can reduce wasted time so they can move to another task.

   Therefore, me as an UX designer want to design an entire AI interface for a web and application. So, it can be apllied on drugs information website like : drugs.com, Medscape and MIMS. Of course optimize it for the user, who is pharmacist.

2. Objectives :

   1. Measure how fast and how easy user to find basic information of drug

   2. Scoring how clear and how trusted of the search result

   3. Observe how far the website to help take a case based decision. Including branded name drug

   4. Testing how strong AI that can give complex information

   5. Testing how website facing implicit question

3. Method : Moderated usability testing- in depth interview

4. Metrics/ parameter :

   • Success/ completion rate : It's often called the fundamental usability metric. completion rates are a simple measure of usability. If user succes on completing task, recorded as 1. If user can't, recorded as 0 (1=Task Success and 0= Task failure).

   • Time on task/ time completion : Time on task (TOT) tells you how long it takes a user to complete a task.

   • Cognitive Effort : This metrics measure "How mentally demanding was this task?”. It use scale 1- 5.

   • Confidence Level : This metrics measure “How confident are you in this result?”. It use scale 1- 5.

5. Sample specification :

   • Clinical / Community / Hospital Pharmacist

   • man/women

   • nationwide

6. key information areas :

   • User behavior

   • Pain point

7. timeline :

3) Discussion guide :

• Introduction :
  Hi, thank you so much for coming today! My name is Habib, and I’ll be guiding you through this usability testing session. The session will take around 40 minutes, and we’ll go step-by-step through some simple tasks on two websites.

• Voluntary participation :
  Before we start, please note that your participation today is completely voluntary. You can pause, take a break, or stop the session at any time if you feel uncomfortable. You can also ask questions at any point.

• Purpose :
  The purpose of this session is to evaluate the design and usability of these app. We’re not testing you as a person, but we’re testing the design of the app. What we’re trying to learn is how real users like you — a pharmacists — actually experience the process of finding drug information online.

• Protocol :
  During the session, I’d like you to say everything that’s on your mind while using the websites. There are no right or wrong answers here. For example, tell me what you’re looking for, what confuses you, or what you like or dislike, like the button, the icon, the color, etc. Just do it naturally at your normal pace, just like you would do in your daily work. Of course I'm gonna timering every task done, but it's just for the research not for competition.

• My role :
  I’ll mostly stay quite and take notes while you’re completing the tasks. Sometimes, I might interrupt or ask follow-up questions,its' normal, it’s just part of the process. If you ever feel stuck, I might give a small hint, but I’ll try not to lead you too much.

• Recording consent :
  On this his session, I will record the screen and your voice (mic) so we can review your interactions later. Is that okay with you?

• Warm-up Question :
  Before we start the actual tasks, I’d like to ask a quick question:

  • Could you tell me a bit about how you usually look for drug information in your daily work? For example, what websites or apps do you use most often?

  • which device you usually use? PC, laptop, or phone?

• During the task :
  good job !, So now we’ll move on to the tasks. Remember, just describe what you’re doing and what you’re looking for. Do it at normal pace. I’ll give you one task at a time.

• Closing :

  • Thank you again for your time and your insights — they’re really valuable to help us make the design better for pharmacists like you. That’s all for today’s session.

  • Do you have any last thoughts or comments before we wrap up?

4) Conduct research:

Usability testing of the current application is to find out how users interact with the application and to find out what pain points are felt by users. 5 users participated in this test. This test was moderated face-to-face. In this test, I have prepared 5 tasks for users. I record the screen so I can analyze how they interact with the app and can track important points when the user runs each task.

Task List

TASK 1 — Pediatric Dosage Retrieval (Basic Clinical Information)

Scenario: “A 5-year-old child needs paracetamol. Find the recommended dosage.”

• Version A: Use Drugs.com search.

• Version B: Use Medscape AI Search.

TASK 2 — Side Effects Identification

Scenario: “Find the common side effects of amoxicillin in adults.”

• Version A: Use Drugs.com search.

• Version B: Use Medscape AI Search.

TASK 3 — Branded Drug in Pregnancy (Real Clinical Case)

Scenario: “A pregnant woman in her first trimester takes Panadol Extra. Is it safe?”

• Version A: Use Drugs.com search.

• Version B: Use Medscape AI Search.

TASK 4 — Drug Interaction Analysis

Scenario: “Check if there is an interaction between warfarin and amoxicillin. Include monitoring recommendations.”

• Version A: Use Drugs.com search.

• Version B: Use Medscape AI Search.

TASK 5 — Exploratory / Ambiguous Question

Scenario: “What is the best medication for mild flu symptoms in adults?”

• Version A: Use Drugs.com search.

• Version B: Use Medscape AI Search.

Post-Task Questions

This question asked after finishing one each task (for both platforms) :

1. “How mentally demanding was this task?”
   (1 = Very easy, 5 = Very difficult)

2. “How confident are you in this result?”
   (1 = Not confident at all, 5 = Very confident)

Usability testing result on current design

Participant Overview

Raw Task Performance Data

Per task comparasion

Platform Comparison

Competitive benchmarking revealed that while Medscape AI demonstrated superior efficiency and lower cognitive demand, users reported slightly higher confidence levels when using Drugs.com. This suggests an opportunity to improve usability performance without sacrificing perceived credibility.

Stage 2 -Define

1) User persona

Person 1

1. Name : Wisnu Pradana

2. Age : 35 yo

3. Profession : Clinical Pharmacist

4. Workplace : Hospital

5. Location : Blitar, east java

6. Status : marital, 1 child

7. Behavior & Habits :

   • Uses online platforms such as Drugs.com, Medscape, and MIMS to ask for drug information such as : drug interactions, dosages, etc.

   • Often multitasks between patient consultations, prescription reviews, and documentation.

   • Prefers quick, trustworthy information sources that don’t require excessive navigation.

   • Comfortable with digital tools but prefers clean and intuitive interfaces.

   • Uses mobile devices during ward rounds.

8. Frustration :

• Feels overwhelmed by long articles and poor search accuracy when using conventional databases.

• Too much scrolling to get to essential details like contraindications,side effect or pregnancy safety.

• Wishes he could just “ask a quick question” (like with AI search) and get a reliable summary.

9. Goals & Needs:

• To find accurate, evidence-based drug information quickly during clinical decision-making.

• Needs tools that summarize key details (dose, interactions, contraindications) in a clear, trusted format.

• Desires a system that helps her validate clinical decisions while saving time.

• Wants to reduce cognitive load and avoid misinterpretation of complex pharmacological data.

Person 2

1. Name : Setya Cahyaningtyas

2. Age : 28 yo

3. Profession : community pharmacist

4. Workplace : Pharmacy

5. Location : Blitar, east java

6. Status : Single

7. Behavior & Habits :

   • Works full-time at the pharmacy, serving around 80–100 customers daily.

   • Frequently searches online for generic–brand equivalents, dosage verification, and OTC drug counseling.

   • Uses Drugs.com, Medscape, and MIMS Indonesia interchangeably.

   • Often uses smartphone browsers during work for quick lookups.

   • Relies on experience + digital tools when explaining drug usage to patients.

8. Frustration :

   • Takes too long to find the right info when customers are waiting.

   • Ads and cluttered layouts on websites slow him down.

   • Sometimes finds inconsistent information between sources.

   • Wishes there were a simpler, conversational way (AI-like) to ask drug-related questions quickly.

9. Goals & Needs:

   • To access clear, concise drug information instantly during patient interactions.

   • Needs to quickly confirm dosage, contraindications, or side effects for common branded products.

   • Wants mobile-friendly and time-efficient tools that support day-to-day counseling.

   • Seeks to improve accuracy and confidence when providing recommendations to patients.

2) User journey

Persona: Setya Cahyaningtyas (Community Pharmacist, 28 y.o.)
Scenario: Needs to quickly check if Panadol Extra is safe for pregnant women in the first trimester.

3) User flow

User flow "Drugs.com"

1. User flow Task 1.a

   

2. User flow Task 2.a

   

3. User flow Task 3.a

   

4. User flow Task 4.a

   

5. User flow Task 5.a

   

User flow "Medscape AI"

1. User flow Task 1.b

   

2. User flow Task 2.b

   

3. User flow Task 3.b

   

4. User flow Task 4.b

   

5. User flow Task 5.b

   

4) Identifying the Problem

Based on the results of the analysis on usability testing and the user journey map, there are main problems faced by users.

On Drugs.com :

1. A lot of users, experienced miss click on acces "drug information article"

   • Location : search result

   • Problem detail : when user want to access article, they experienced missclick on title link, clicking back button, because of lack interface.

2. Users need to summary by themselves on specific topic.

   • Location : full drug article

   • Problem detail : user have to sumamrize by themself when they need specific information. like on pregnancy & breastfeeding case, drug comparison. Especially if they on rush hour work

3. Users confuse choosing menu

   • Location : homepage

   • Problem detail : when user need to find specific topic like drug recommendation, pregnancy and breast feeding. They confuse which menu they should pick. Even if the menu is already showed on homepage. Especially if they on rush hour work

On Medscape AI :

1. User can't trust AI's answer

   • Problem detail : Not all user trust answer that generate by AI. Even this AI is made by drug information website and there is citation and reference in every answer.

   • Solution :

     • Keep placing citation and reference link on every answer.

     • Add disclaimer page that decision is on the user, not on the AI. AI is tools to help finding answer on specific topic

2. User feel exhausted on typing "prompt"

   • Problem detail : When user need answer from AI, they're very exhausted if they need to typing on specific prompt. They experience that different prompt can produce different answer, so they need to type prompt specifically.

   • Solution :

     • Add AI voice search feature

     • Add tutorial/disclaimer page to show how they should prompt on the AI search bar.

5) Actionable insight

1. According to analysis on usability testing and the user journey map. Adding AI search feature on drugs.com is very important.

2. According to usability testing on Medscape AI, there's improvement that we should implemented. Here it is :

   • Add AI voice search feature

   • Add discalaimer page

   • Add tutorial page

6) Prioritizion matrix

From the opportunity that we get from user journey map, I create a priority matrix to consider which opportunities I will implement into the design improvements.

Stage 3 - Ideate

1) User flow

User flow "Drugs.com"

1. User flow Task 1.a

   

2. User flow Task 2.a

   

3. User flow Task 3.a

   

4. User flow Task 4.a

   

5. User flow Task 5.a

   

User flow "Medscape AI"

1. User flow Task 1.b

   

2. User flow Task 2.b

   

3. User flow Task 3.b

   

4. User flow Task 4.b

   

5. User flow Task 5.b

   

2) Information architecture

3) Wireframe

1. Wireframe desktop

   

2. Wireframe mobile

   

4) Style guide

5) UI redesign

Stage 4 - Prototype

https://bit.ly/prototype_mobile_drugscom
https://bit.ly/prototype_desktop_drugscom

Stage 5 - Test

Usability Testing After Redesign

After redesign and evaluate it. I tested 5 users who already participated in the first test. I only tested my AI search design. This was using a Figma prototype. The users asked to run the prototype on the same device. This test also aim to know what the user’s expectations of the AI search design. The user also give a vote and suggestion about what kind of what item and component should be implemented on the app.

Table of usability testing result after redesign :

Attachment video :

1. Usability testing on mobile

2. Usability testing on desktop

Voting result

There's two option for homepage interface that already proposed to the user. Every user choose which option of every item that comfort on their use case.

• Homepage version 1 : 4 user

• Homepage version 2 : 1 user

Design feedback

• On this website, search on conventional mode should be separated with AI search page

• Need to add scrollbar on the right side

• Need to add auto scroll down button

• Need to add "follow up question" after below generated answer

  
  

Conclusion

By reducing cognitive friction and improving interaction clarity, the redesigned AI search experience transforms Drugs.com from a traditional information database into a more efficient AI-assisted decision-support tool, demonstrating how thoughtful UX design can make complex AI systems more practical and accessible for everyday use.

Design Implications & Future Improvements

While the redesigned AI Search experience improved task success and interaction efficiency, several opportunities remain for further enhancement.

First, future iterations could incorporate context-aware follow-up prompts to help users refine their queries without needing to rephrase them manually. This would strengthen the conversational nature of the AI interaction and further reduce cognitive effort during information retrieval.

Second, the integration of structured medical summaries (e.g., dosage, contraindications, and side effects) within AI-generated responses could improve scannability and support faster clinical decision-making.

Finally, the current usability evaluation involved a small sample size typical of exploratory usability testing. Future research could involve a larger participant pool and additional clinical scenarios to further validate the effectiveness of the redesigned AI search experience.

Overall, these opportunities highlight the importance of continuously refining AI-assisted tools to ensure they remain reliable, efficient, and supportive of users seeking critical healthcare information.

Reference

• Brooke, J. (1996). SUS: A Quick and Dirty Usability Scale.

• Hart, S. G., & Staveland, L. E. (1988). Development of NASA-TLX (Task Load Index).

• International Organization for Standardization. (2018). ISO 9241-11: Ergonomics of human-system interaction — Usability.

• Lee, J. D., & See, K. A. (2004). Trust in Automation.

• Nielsen, J. (2001). Success Rate: The Simplest Usability Metric. Nielsen Norman Group.

• Tullis, T., & Albert, B. (2013). Measuring the User Experience (2nd ed.).

• https://medium.com/@ranandayoanko/ui-ux-case-study-ikea-application-redesign-be2893e6c99

• https://www.behance.net/gallery/151330481/Redesign-Provita-Hospital-Website

• https://www.nngroup.com/articles/success-rate-the-simplest-usability-metric/

• https://www.usehubble.io/blog/guide-to-usability-test-plans

• https://www.nngroup.com/articles/usability-testing-101/

• https://www.nngroup.com/articles/qual-usability-testing-study-guide/

• https://www.nngroup.com/articles/quant-vs-qual/

• https://www.interaction-design.org/literature/topics/usability-testing#what_is_usability_testing?-0

• https://www.interaction-design.org/literature/topics/design-thinking

• https://medium.com/@ux.rurik/time-on-task-as-a-ux-metric-the-key-to-a-better-user-experience-and-more-efficient-digital-fecce9968dd4

• https://www.uxtweak.com/ux-glossary/task-completion-time/

• https://trymata.com/blog/time-on-task/

• https://www.crazyegg.com/blog/ux-metrics/

• https://maze.co/collections/reporting-analysis/measure-usability-metrics/#12-key-usability-metrics-and-how-to-calculate-them

• https://measuringu.com/task-completion/

• https://measuringu.com/determine-task-completion/

• https://www.nngroup.com/articles/usability-metrics/

Closing

This is the final part of my case study project, I got a lot of knowledge while finishing this project. Special thanks to all of my mentor, who help and support me on finishing this project. I open for critics and suggestions from you to help improve my knowledge and skills. I also open for collaboration if you have problem or project that I can be solved as an UI/UX designer.

Thanks a lot for your time and attention to read.