top of page
Online Tutorial

Implementation

On this page, we created a simple walkthrough through screenshots as well as a video to guide the user on how to use the Antibio Advisor website.

Walkthrough

Video Walkthrough

Below is a video walkthrough of the website.

Guide with Screenshots

Antibio-Advisor, a web app tailored for individuals 18 or older but available for all. Our web app offers an array of vital features: an intelligent chatbot for medical guidance, an interactive map to locate pharmacies and general practitioners, and a comprehensive term guide. Prioritising user awareness, our platform provides essential information in the form of a FAQs page, an informative Quiz and a prescription info page. The web app features mentioned above needed to be implemented in such a manner that they are easily accessible and usable. This was facilitated through a variety of different features such as:

​

  • Web Page Demo which guides the user on proper usage of applicable web pages.

  • Dynamic page size applicable for use with computers, mobile devices and tablets.

  • Colourful and simple interface to ensure easy navigation.

  • Elderly individuals were also considered through the use of a large font to ensure ease of use.

Chatbot

ChatbotLabelled.png

As outlined above the chatbot has a myriad of different features ranging from:

​

  • Set of initial prompts aimed at providing the user with a possible conversation starter.

  • Clear button allowing the user to clear the current conversation and start afresh.

  • Speech to text button allowing to use voice to communicate with the chatbot directly.

  • Text to Speech button and volume slider allowing users to have messages read out loud.

​

These features and the general chatbot layout was selected whilst keeping the possible users in mind to ensure a pleasant user experience. Additionally the UIs adaptability to different screen sizes maintains the ease of use of the chatbot and its features.

FAQ

The FAQ page is composed of a variety of relevant questions sorted according to relevant age groups these being General, Adult, Child, Elderly. This is done as certain knowledge is more applicable to certain age demographics. Additionally the FAQ can be sorted in accordance with the symptoms these being General, Cough, Rash, Skin Condition.

faqs.png

Further adding to the intractability of the webpage each question only displays the answer when selected by the user. This can be seen in the image showcased in this slide.

Prescription Info

The main components of the Prescription Info page showcased here consist of three dropdowns relating to the antibiotic name, abbreviations and notations used by doctors when prescribing medicine.

​

These dropdowns when appropriately selected provide the user with explanations regarding their antibiotics and the relevant dosages as denoted by a medical professionals prescription notation. The dropdowns in addition to a sample explanation can be seen below.

prescription.png

Map

The map was designed to showcase the users nearest pharmacies and general practitioners, this was carried out to provide the user with all the required information they might require to purchase, enquire or return unused antibiotics. In the map the blue markers represent general practitioners and the red markers represent pharmacies.

maps.png

Learn More

The Learn More page similar to the FAQ page provides the user with a further degree of general information on the topic of AMR in contrast to the specific information presented in the FAQ page.

learnmore.jpg

This page contains an informative video alongside an interactive carousel composed of several infographics and informative paragraphs.

Quiz

The webapp also includes a quiz web page which compiles four questions from a possible set. This provides users a fun and engaging manner by which they can test their knowledge on AMR. Upon submitting the quiz users are provided with the correct answer where applicable in addition to a score showcased below. Furthermore the quiz can be regenerated multiple times and additional question can easily be added through the editing of a simple .json file.

quiz.png
bottom of page