Human Computer Interaction (HCI)

Menu

HCI-Sketching

We sketched the initial rough design of the application in Paint 3D. The first version sketches include the home page (navigation), the patient dashboard (infusion pump visualisation graphs), patient information page (treatment plan and personal information), and notifications page (any notes by the clinician or anomalies detected by the system).

First version sketches:

After evaluating the sketches and receiving feedback from the clients, we decided to go with a simpler design with fewer pages and more compact information. The client prefers this sketch as it is easier to navigate and find details as fewer buttons are needed to be clicked.

We removed the home page so that after a clinician logs in, they immediately see the patients’ dashboards, which can then be clicked and expanded. We believe that this simplistic design aids the usability of the system.

Improved sketches of the system:

Prototype

To further evaluate the usability of our sketch, the prototype was designed using Figma. Web pages with key functionalities and requirements are shown below. Arrows represent the transition from one page to another when specific buttons are clicked.

Prototype Evaluation

Heuristic based evaluation was carried out to eliminate flaws and improve the prototype.

Improved Prototype

The following improvements were made after heuristic-based prototype evaluation:

  • Search bar – allows users to search patients by names.
  • Patient details button – changed to hyperlink on the name of the patient instead, providing a cleaner UI.
  • Users have the option to change into a list display format in settings to have a better summary of patients’ information.
  • Sort by option added – users can change the order of the patients displayed. For example, sorting by recent activity will list the patients from most recent to the latest.

Final Prototype

According to the feedback from our clients, we made the following amendments:

  • Users can choose the way the data is presented (quantitative vs qualitative).
  • Added annotations to the graphs.
  • The navigation between pages made simpler.

Some of the employed changes above and the final prototype are shown in screenshots below:

Application Sign in page.

Overview page. The default landing page for the parents and family members. They will be able change the viewing in "Settings".

The landing page for the clinicians. Also can change the viewing in "Settings".

Added the "Change Treatment Plan" button for the clinicians, if the current treatment plan of the patient is not going well.

Patient Personal Information Page.

Notifications page. Anomalies that the system has detected.

You can interact with our final prototype here.