Project Part 4 (Prototyping & Evaluation)

 INTRODUCTION

In this phase of the project, we focus on prototyping and evaluating the key features of our proposed digital clinic management system designed for PKU students. Building upon the wireframes and design concepts developed in the earlier phases, a high-fidelity prototype was created using Figma to visualise and simulate the core functionalities of the system. The prototype focuses on three primary features, Booking Medical Appointments, Online Bill Payment, and Viewing and Printing Medical Records, which directly address common issues faced by students such as long queues, extended waiting times, and difficulty accessing medical information.

To evaluate the usability and effectiveness of the prototype, a usability testing session was conducted involving three participants, each representing a different user group identified during the user analysis stage. Participants were asked to complete a set of predefined tasks based on the real-life scenarios presented in the storyboard, including making an appointment, paying bills after consultation, and accessing medical records. Throughout the testing, users were encouraged to think aloud while interacting with the prototype, allowing valuable insights into their decision-making processes and pain points to be captured.

This report presents the prototyping approach, usability testing process, key observations, and identified usability issues along with proposed improvements. Through this iterative evaluation process, the project aims to deliver an intuitive, efficient, and user-centered clinic system that aligns with Human-Computer Interaction (HCI) principles and improves the overall healthcare experience for students.

Testing for User 1 was handled by Danish Izz Khan
Testing for User 2 was handled by Pravein
Testing for User 3 was handled by Sarah Hamizah

PROTOTYPE

Login

Sign up

Book Appointment

Pay bills

View Medical Record

BRIEFING NOTES

Welcome to the usability testing session for the PKU Digital Clinic System. Thank you for taking the time to participate in this evaluation. The purpose of this session is to gather your feedback on a prototype designed to improve students’ experience when interacting with PKU clinic services.

Before we begin, here are a few important points:

Purpose of the Test

We are testing the usability of the system, not your ability to use it. Your honest feedback will help us identify areas for improvement and refine the design.

What to Expect

Tasks to Complete

You will be asked to complete three tasks using the PKU Digital Clinic prototype. These tasks are based on common real-life situations experienced by students:

• Task 1: Booking a medical appointment
• Task 2: Paying medical bills online
• Task 3: Viewing and printing a medical record

Think-Aloud Protocol

As you navigate through the prototype, please think aloud. Share what you are trying to do, what you expect to happen, and any confusion or difficulty you experience.

After each task, you will be asked a few short questions about:

• What you liked about the design

• Suggestions for improvement

Guidelines During the Test

• Feel free to explore the interface naturally.
• There are no right or wrong actions.
• If you feel stuck or unable to continue, please inform us and we will proceed to the next task.
• If any text or information is difficult to read, please mention it during the task.
  
  

Confidentiality

All data collected during this session will remain confidential and will be used solely for academic evaluation and design improvement purposes.

User 1 - Prepared by Danish Izz Khan

Welcome to the usability testing session for the PKU Digital Clinic System, and thank you for participating. The purpose of this session is to evaluate the usability of a prototype designed to enhance students’ interaction with PKU clinic services. You will be asked to complete three common tasks: booking a medical appointment, paying medical bills online, and viewing or printing a medical record. Please note that we are evaluating the system, not your ability to use it, and there are no right or wrong actions. As you proceed, we encourage you to think aloud by sharing your thoughts, expectations, and any difficulties you encounter. Your feedback will be kept confidential and used solely for academic evaluation and design improvement.

User 2 - Prepared by Pravein

Welcome to the usability testing session for the PKU Digital Clinic System, and thank you for joining today. The purpose of this session is to test a prototype designed to help users manage and access healthcare-related information more easily. You will be asked to complete three tasks: booking a medical appointment, paying medical bills online, and viewing or printing medical records using the prototype. Please note that the prototype is interactive but not all features are fully functional. While completing the tasks, please think aloud by saying what you are looking for, what you expect to happen, or if anything confuses you. Your feedback will be used to improve the system. All feedback collected will remain confidential and will be used solely for academic purposes and system improvement.

User 3 - Prepared by Sarah Hamizah

Welcome to the usability testing session for the PKU Digital Clinic System, and thank you for your participation. The purpose of this session is to evaluate a prototype designed to improve students’ access to and interaction with PKU clinic services. During this session, you will be asked to complete three common tasks: booking a medical appointment, making an online medical bill payment, and viewing or printing a medical record. Please be aware that this is a prototype, so some features may not be fully functional. We are evaluating the system itself, not your ability to use it—there are no right or wrong actions. As you perform the tasks, please think aloud by sharing what you are looking for, what you expect to happen, and any confusion or difficulties you experience. All feedback will remain confidential and will be used solely for academic evaluation and system improvement.

Tasks

Task 1: Booking a Medical Appointment

1. Log in to the system.
2. Navigate to the appointment booking section.
3. Select a consultation type and available date.
4. Choose a doctor and time slot.
5. Confirm the appointment booking.

Task 2: Paying Medical Bills

1. Navigate to the billing section.
2. View a pending bill.
3. Proceed to the payment page.
4. Enter payment details and complete the payment.

Task 3: Viewing and Printing Medical Records

1. Navigate to the medical records section.
2. Select a medical record based on date or consultation type.
3. View detailed medical information.
4. Print the medical record.
   
   

Questions After Each Task

• What do you like or dislike about this system?

• Is there anything you would want to improve?

USER TESTING

Task 1: Booking Medical Appointment

User 1 testing Task 1: User 1 Testing Video.mkv
User 2 testing Task 1: User 2 Booking Appoinment .mp4
User 3 testing Task 1: User 3 Testing Video

Task 2: Paying Medical Bills

User 1 testing Task 2: User 1 Testing Video.mkv
User 2 testing Task 2:User 2 Pay Bill .mp4
User 3 testing Task 2: User 3 Testing Video

Task 3: Viewing and Printing Medical Records

User 1 testing Task 3: User 1 Testing Video.mkv
User 2 testing Task 3: User 2 view medical records .mp4
User 3 testing Task 3: User 3 Testing Video 

OBSERVATION

Based on the usability testing conducted with three users, the following observations were recorded:

Task 1: Booking Medical Appointment

Description of User Experience:
All users were able to complete the appointment booking task successfully. The flow from login to appointment confirmation was clear and logical. Users found the interface intuitive and aligned with their expectations of a clinic system.

Common Positive Feedback:

• Clear layout and straightforward navigation

• Easy selection of appointment date and consultation type

Challenges Identified:

• Some hesitation when selecting doctors and time slots

• Users double-checked selections before confirming

Suggestions for Improvement:

• Highlight selected options more clearly

• Improve visual distinction between available and unavailable slots

• Provide more information on the appointment after booking

Overall Observation:

For user 1,  indicated a preference for the system to include more comprehensive information and a broader range of services beyond the current three offerings. Nevertheless, the user expressed overall satisfaction with the system, noting that it is intuitive and easy to navigate. Additionally, the user highlighted the usefulness of having upcoming appointments prominently displayed on the main page.

The booking procedure went smoothly for User 2, who was able to go from account registration to appointment confirmation on their own. The user accurately recognized the dashboard as the primary starting point for scheduling an appointment and showed an accurate understanding of the system's structure. The user expressed expectations and behaviors throughout the activity, demonstrating that the navigation flow and interface labeling were simple to understand. Before confirming the appointment, the user carefully verified the entered information, there were no indications of doubt or difficulty.

Lastly, User 3 was able to navigate through the system with ease and encountered no difficulties during the testing process. The user expressed a positive impression of the friendly and visually appealing user interface, which contributed to a smooth overall experience. However, the user noted dissatisfaction with the lack of detailed information available during the booking process, particularly when selecting services and confirming appointment details.

In summary, the usability testing indicated that the system is intuitive, easy to navigate, and user-friendly across all participants. Users were able to complete key tasks efficiently with minimal assistance, demonstrating the effectiveness of the navigation flow and interface design. However, feedback from multiple users suggests that the system would benefit from providing more comprehensive information and a wider range of service details, especially during the booking process. Addressing these areas could further enhance user satisfaction and improve the overall effectiveness of the system.

Task 2: Paying Medical Bills

Description of User Experience:
Users appreciated the ability to pay bills online, as it addressed the frustration of long queues shown in the scenario. All users completed the payment process successfully.

• Easy access to pending bills

• Payment flow was simple and well-structured

Challenges Identified:

• Users were momentarily unsure if payment was successful

• Confirmation feedback was not immediately noticeable

Suggestions for Improvement:

• Add stronger confirmation messages and visual feedback after payment

• Different colouring for boxes

• Add a separate section to categorize pending and paid bills.

Overall Observation:

User 1 navigated through the system with ease however he suggested that the interface would benefit from the use of slightly different box colours to clearly distinguish between paid and pending bills. In addition, the user recommended the inclusion of separate sections to categorize paid and pending payments, which would improve clarity and ease of tracking payment status.

User 2 had no trouble navigating from the dashboard to the billing section, and the payment process went easily. The user confidently went to the payment page after accurately identifying outstanding bills. The user indicated understanding of the confirmation feedback by verbally acknowledging that the payment was successful after finishing it. Overall, there were no major errors or confusion were observed during the task

User 3 was able to navigate through the billing task successfully  however, the user experienced some confusion when viewing the billing section. This confusion arose because the pending and paid bills appeared visually similar. The user suggested differentiating these bill statuses more clearly, such as through visual cues or labels, to allow for quicker and more accurate identification.

In conclusion, the billing and payment features of the system were generally easy to navigate and understand, allowing users to complete payment-related tasks with minimal difficulty. Most users were able to identify outstanding bills and complete payments confidently without encountering major errors. However, feedback from multiple users highlighted a usability issue related to the visual similarity between paid and pending bills. Enhancing visual differentiation through distinct colours, labels, or separate sections would significantly improve clarity, reduce user confusion, and enhance the overall user experience.

Task 3: Viewing and Printing Medical Records

Description of User Experience:
Users successfully accessed and printed their medical records. The list-based record display was understandable, and users relied on dates to identify the correct record.

• Clear record listings

• Printing confirmation was appreciated

Challenges Identified:

• Long lists required scrolling

• Important information was not immediately highlighted

Suggestions for Improvement:

• Add filtering or sorting options

• Highlight key medical information at the top

• Add a follow up with appointment feature

Overall Observation:

User 1 suggested incorporating a follow-up appointment function alongside the medical record. This enhancement would allow users to conveniently schedule subsequent appointments directly after reviewing or printing their medical records, thereby improving continuity of care and overall system efficiency.

It was easy for User 2 to access and print medical records without help. The user relied on dates to identify the correct record and found the medical records area with ease. The user verified that the printing process was finished and successfully viewed detailed medical information. The user noted that several text elements were small during the work and recommended improvements relating to readability, but there was no problem in finishing the task.

User 3 encountered no difficulties in completing the assigned task and navigated the medical records section smoothly. However, the user suggested that the information would be easier to understand if the data were organized into clearer sections rather than presented in long paragraphs. This restructuring would help  allow users to quickly locate relevant information.

Overall, users were able to access, review, and print medical records efficiently with minimal assistance, indicating that the medical records feature is generally intuitive and functional. Users successfully located relevant records and completed their tasks without major errors. However, the feedback highlighted opportunities for improvement in terms of usability and readability. Suggested enhancements include integrating follow-up appointment scheduling, improving text size for better readability, and organizing medical information into clearer sections rather than lengthy paragraphs. Implementing these improvements would enhance user comprehension, streamline workflows, and improve the overall user experience.

FINDINGS

Based on the usability testing, several usability issues were identified along with proposed solutions:

Task 1: Booking Medical Appointment

Usability Problems Identified:

• Minor uncertainty during doctor and time-slot selection

Possible Solutions:

• Improve visual cues and confirmation highlights

• Provide clearer availability indicators

Task 2: Paying Medical Bills

Usability Problems Identified:

• Lack of immediate confirmation after payment

• Hard to differentiate between paid and pending bills

Possible Solutions:

• Display a prominent success message with visual indicators

• Add a receipt or confirmation screen after payment

• Improve visuals by adding colours to boxes

• Add sorting and filter mechanism

Task 3: Viewing and Printing Medical Records

Usability Problems Identified:

• Difficulty locating records quickly

• Key information not immediately visible

Possible Solutions:

• Add filters and sorting options

• Improve information hierarchy with summaries

Summary of Findings

Overall, the PKU Digital Clinic prototype was positively received by users. The system successfully addressed the key problems highlighted in the storyboard scenarios, such as long queues, waiting times, and difficulty accessing medical records. While the core functionality was effective, improvements in feedback clarity, visual hierarchy, and navigation efficiency would further enhance the user experience.

CONSENT FORM

1) User 1 (Zaid Azwar)

2) User 2 (Manoij A/L Vegneswaran)

3) User 3 (Ahmad Syahmi Muhaimin bin Mohd Saidi)

REPORT LINK: Report Link

VIDEO LINK: Tic Tech HCI Concept Video (UTMSmartClinic)