BULLETIN OF COMPUTER SCIENCE RESEARCH
ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
User Interface Design for Doctor Reservation Website using Design Thinking Method Azelia Puspa Diah Narendri.
Ariq Cahya Wardhana* Informatics.
Software Engineering.
Telkom University Purwokerto.
Purwokerto.
Indonesia Email: 1azeliapdn@student.
id, 2,*ariqcahya@telkomuniversity.
Correspondence Author Email: ariqcahya@telkomuniversity.
AbstractOeIn the current era of digital transformation, the rapid integration of healthcare services is crucial to meet patient expectations and improve service delivery.
Klinik Putri faces challenges such as long queues and difficulties in booking doctor appointments, which negatively impact patient satisfaction.
This study aims to design a user-friendly, web-based doctor reservation system using the Design Thinking methodology, which consists of five stages: empathize, define, ideate, prototype, and test.
Usability testing was conducted using the System Usability Scale (SUS), a standardized tool for evaluating system usability.
The results showed an average SUS score of 83, placing the system in the AuacceptableAy category.
Grade B, and receiving an AuexcellentAy rating according to the Adjective Rating These findings demonstrate that the proposed website design effectively addresses user needs, enhances the user experience, and contributes to improving the efficiency of healthcare services at Klinik Putri.
Keywords: Design Thinking.
Reservation.
System Usability Scale (SUS).
UI/UX.
Website INTRODUCTION The information age is marked by rapid technological advancements and the exponential growth of information flows .
In this digital era, information dissemination is no longer limited to direct contact but is increasingly facilitated through online platforms such as websites, which broaden access and accelerate the spread of information .
Integrated information services are particularly crucial in the healthcare sector, where innovations such as online reservation systems are rapidly evolving.
These systems serve as technological bridges that connect patients with healthcare providers, enhancing access to essential services .
Online reservation systems significantly influence the quality of clinical services and reduce patient waiting times .
At Klinik Putri, reservations for obstetricians are currently made via WhatsApp or telephone, while appointments with general practitioners and other specialists require in-person visits.
Interviews with patients and administrative staff revealed that patients often face long queues and extended wait times due to inefficient reservation procedures.
A survey of 50 patients indicated that 80% felt discomfort while queuing, 76% were dissatisfied with the reservation duration, 92% struggled to view available consultation schedules, and 86% expressed interest in a web-based reservation system.
To address these issues, a web-based doctor reservation system is proposed to enable patients to schedule consultations, access doctor availability remotely.
This system aims to streamline the reservation process, reduce physical visits, and enhance user experience through a responsive and intuitive interface .
The design emphasizes visual consistency, structured layouts, and user-friendly navigation, aiming to reduce queues and improve service efficiency.
This study adopts the Design Thinking methodology, a user-centered approach that emphasizes understanding user needs and generating innovative solutions.
The methodology comprises five stages: empathize, define, ideate, prototype, and test .
User involvement is integral throughout the process, particularly during evaluation phases where feedback is gathered to refine the system .
Usability testing is conducted using the System Usability Scale (SUS), a widely accepted method for evaluating system usability .
A minimum SUS score of 68 is considered acceptable.
To identify research gaps, several related studies were reviewed.
Ghozali and Bangkalang .
Designed a UI/UX for an online book lending application using SEQ, achieving a score of 6.
Arisa et al.
Developed a UI/UX prototype for the CROWDE website using Design Thinking, focusing on agricultural services.
Puspitasari .
Created a UI/UX design for an e-commerce platform, achieving a 91% usability score.
Fiqriansyah and Suranto .
Evaluated the Besurek Coffee website using SUS, scoring 84.
Salsabila and Ramadhan .
Designed a posyandu data monitoring system emphasizing data recording and information delivery.
However, none of these studies specifically address UI/UX design for doctor reservation systems in local clinics.
Based on the identification of issues at Klinik Putri, this study focuses on designing a doctor reservation website tailored to the clinicAos specific needs, utilizing the Design Thinking methodology.
This approach was selected for its emphasis on understanding user needs and generating innovative, user-centered design solutions.
The objectives of this research are to develop a user-friendly, efficient, and accessible reservation platform and to evaluate its usability using the System Usability Scale (SUS) method.
The SUS provides a standardized framework for assessing the extent to which the proposed system delivers a convenient and appropriate user experience.
Through the application of these methods, the study aims to enhance the overall user experience and effectively address the challenges currently faced in the doctor reservation process at Klinik Putri.
RESEARCH METHODOLOGY
1 Research Stages Copyright A 2025 The Author.
Page 1011 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
This research process consists of several stages in accordance with the Design Thinking method, as shown in Figure 1.
The first stage is empathized, which is done by identifying problems through distributing questionnaires and preresearch interviews to understand user needs and complaints in depth.
The next stage is defined, which is used to analyze the data obtained in the previous stage and formulate the main problems from the user's point of view.
Furthermore, the ideate stage explores various ideas and solutions that can answer the problems that have been formulated.
The fourth stage, prototype focuses on designing the website interface design based on the ideas that have been selected, emphasizing a functional and user-friendly appearance.
Finally, the test stage is carried out to evaluate the prototype design that has been made, by involving users to test the level of usability and comfort of the system through the System Usability Scale (SUS) method.
Each stage in this process is interrelated to produce an optimal design solution that meets user needs.
Figure 1.
Research Flow 2 Design Thinking Design Thinking is a way to understand what customers need and offer creative solutions.
Concentrating on the user experience helps optimize user satisfaction and ensures that the product or service created matches the user's needs when using the system.
This method also allows users to verbally express their opinions when reviewing the interface .
Design Thinking is applied in a flexible way, where it can be done sequentially, in parallel, or iteratively .
Each result obtained at each stage can provide input for the previous stage, thus achieving the best solution .
Figure 2.
Stages of Design Thinking .
Design Thinking according to the Hasso Plattner Institute of Design at Stanford University is divided into five stages (Figure .
Empathize The Empathize stage forms the core of the Design Thinking process, emphasizing a human-centered approach to problem-solving.
This stage aims to understand the challenges users face by gathering insights through interviews and The research utilizes an empathy map comprising four quadrants: says .
hat the user say.
, does .
hat the user doe.
, thinks .
hat the user think.
, and feels .
hat the user feel.
, which collectively convey the user experience .
Define The Empathize stage forms the core of the Design Thinking process, emphasizing a human-centered approach to problem-solving.
This stage aims to understand the challenges users face by gathering insights through interviews and The research utilizes an empathy map comprising four quadrants: says .
hat the user say.
, does .
hat the user doe.
, thinks .
hat the user think.
, and feels .
hat the user feel.
, which collectively convey the user experience .
HMW questions reframe challenges into open-ended prompts that inspire innovative ideas.
User personas are structured representations of target users, created to better understand their goals, needs, and preferences .
Ideate The Ideate stage transitions from problem formulation to solution generation.
It focuses on brainstorming and selecting ideas that address the defined problems .
A user flow diagram is developed to illustrate the steps users take when interacting with the system, helping to ensure that the prototype aligns with user expectations and supports intuitive navigation .
Prototype The Prototype stage involves creating initial design representations to identify potential flaws and uncover new opportunities .
This includes wireframes basic layouts that define the structure and functionality of the interface created using Figma .
Mockups are high-fidelity visualizations of the application design, built upon wireframes and enhanced with visual elements to provide a realistic illustration of the final design.
These mockups are used for user testing and refinement .
Test Tests are conducted to gather user feedback on the final design .
The System Usability Scale (SUS) is employed to assess usability through a simple questionnaire consisting of ten statements.
The SUS questionnaire comprises ten statements answered using a five-point Likert scale, making it a closed-ended instrument .
SUS results are Copyright A 2025 The Author.
Page 1012 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
interpreted using three metrics: acceptability ranges .
ot acceptable, marginal, acceptabl.
, grade scale (F to A), and adjective rating .
orst imaginable to best imaginabl.
, as visualized in Figure 3 .
Figure 3.
SUS Score Level Category .
A minimum score of 68 is considered acceptable .
The scoring procedure for SUS follows a standardized formula.
For odd-numbered items, the score is calculated by subtracting 1 from the respondentAos rating (Qi - .
, while for evennumbered items, the score is obtained by subtracting the rating from 5 .
- Q.
The total SUS score is then derived by summing all adjusted item scores and multiplying the result by 2.
5, producing a final score ranging from 0 to 100.
The formula is described in Formula 1 .
R = ((QCAOe.
OeQCC) (QCEOe.
OeQCE) (QCIOe.
OeQCI) (QCNOe.
OeQCO) (QCOOe.
OeQCACA)) y 2,5 .
Description:
R = Final SUS score for each respondent QA = Scale value given by the respondent for the i-th statement Furthermore, the individual SUS scores were aggregated to obtain the total score, which was then divided by the number of respondents .
to calculate the average SUS score.
This calculation is presented in Formula 2 .
xE = Ocx Description:
= average SUS score Oc x = sum of SUS = number of respondents RESULTS AND DISCUSSION 1 Empathize During the Empathize stage, data was collected through interviews with administrative staff and patients of Klinik Putri, complemented by distributed questionnaires.
The insights obtained were synthesized into an empathy map to better understand user perspectives and experiences.
This process helped researchers identify key user needs and pain points.
As illustrated in Figure 4, users expressed discomfort with long waiting times during the reservation process and a desire for easier access to doctor schedules and a more streamlined booking system.
These findings indicate that the initial website design required significant improvements to enhance the overall user experience.
Figure 4.
Empathy Maps Copyright A 2025 The Author.
Page 1013 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
2 Define In the Define stage, the empathy map results were analyzed to formulate a Point of View (POV) that reflects the problem from the user's perspective.
Subsequently.
How Might We (HMW) questions were developed to guide the ideation of potential solutions.
Additionally, user personas were created to represent the target audience, enabling a deeper understanding of their context, goals, and expectations.
The POV transforms identified issues into actionable problem statements, while HMW reframes these issues into open-ended questions designed to stimulate creative thinking and generate innovative solutions.
User personas are fictional representations of target users, encompassing their demographics, occupations, and common challenges.
Point of View (POV) To clarify the problem from the user's point of view, a POV approach is used.
POV turns the issue into a statement that is user-focused, making it easier to find the right solution.
Table 1 presents the POV that can be used as a reference in the next stage to determine the solution that is most relevant to the user's needs.
Table 1.
Point of View User Patients aged 17-45 years old Need Need a doctor reservation platform with simple flow, fast process, and clear information.
Insight Patients aged 17-45 years old are at a productive age with a busy schedule, they value speed of process, clarity of information, and ease of accessing doctor reservation services.
How Might We (HMW) HMW transforms an issue into a set of open-ended inquiries intended to stimulate original thought and produce creative solutions.
Thus.
HMW helps turn challenges into opportunities.
The following HMW were generated (Table Table 2.
How Might We No.
How How to simplify the process specialization selection? How do I know the doctor's schedule and office hours? How to make the reservation process fast? How to make the time display consultation is clearer and easier to How patients can see their reservation status? Might Display specialty service categories on the home page Website.
Provides detailed information about the doctor's practice schedule .
octor's name, specialty category, day, and tim.
Simplify the reservation process by simply choosing specialty services, determining the date and time of consultation, and filling in the patient's biodata.
Create a date selection interface with the calendar and simply display the available consultation time slots.
Provide patient reservation history feature User Persona User personas are fictional representations of target users, encompassing their demographics, occupations, and common challenges.
Incorporating user personas into the design process enables a more focused and user-centered approach, ensuring that the website aligns with the specific needs and preferences of its intended users.
Figure 5 illustrates the patient persona developed for this study.
Figure 5.
PatientAos Persona Copyright A 2025 The Author.
Page 1014 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
3 Ideate The Ideate stage transitions from problem formulation to solution generation.
Based on the defined user needs and personas, various ideas were explored to address the identified challenges.
A user flow diagram was developed to visualize the steps users take when interacting with the system.
This flow ensures that the design supports intuitive navigation and aligns with user expectations.
As shown in Figure 6, the reservation process begins with account creation, followed by personal data input, specialty selection, date and time selection, and reservation confirmation.
Figure 6.
Userflow of Doctor Reservation Website 4 Prototype Wireframe The wireframe is a low-fidelity interface layout that outlines the basic user flow.
It was later refined into a high-fidelity design using Figma (Figure .
Figure 7.
Wireframe Design High Fidelity Design The high-fidelity design offers a detailed and realistic visual representation of the interface before development.
The design is shown in Figures 8Ae12.
Copyright A 2025 The Author.
Page 1015 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
Figure 8.
Home Page Figure 8 shows the Home Page, which allows users to make reservations directly and access the DoctorAos Schedule and Contact pages via the header navigation.
Figure 9.
DoctorAos Schedule Page Figure 9 shows the DoctorAos Schedule page, which presents general practitioner and specialist schedules organized by day and service time.
Copyright A 2025 The Author.
Page 1016 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
Figure 10.
Create Reservation Page Figure 10 shows the Create Reservation page, where patients can select a consultation date and time and complete their personal information to make a reservation.
Figure 11.
Reservation History Page Figure 11 shows the Reservation History page, which displays all user reservations in a table and includes options to cancel a reservation or view the queue number.
Copyright A 2025 The Author.
Page 1017 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
Figure 12.
Queue Number Page Figure 12 shows the Queue Number page, which displays the patientAos queue number along with details of the reserved specialty service, date, and time of arrival.
5 Test The usability of the website prototype was evaluated during the testing phase.
This evaluation was conducted using a set of predefined task scenarios that simulate typical user interactions, as detailed in Table 3.
Table 3.
Task Scenario Scenario ID The Task of Creating Reservations on Specialized Services Task Scenario Patients log in by completing a form containing a username and password.
The patient accesses the doctor's schedule information by pressing the Doctor's Schedule navigation The patient returns Home and selects of the Specialty Services.
Patient specifies Date and Time of consultation.
Patient completes the Patient Data form.
The patient confirms the reservation by pressing the Make Reservation button.
The patient presses the menu on the profile to access the Reservation History.
The patient presses the menu on the profile to access the Exit menu.
6 System Usability Scale (SUS) Testing Results The System Usability Scale (SUS) was employed to evaluate the usability of the prototype.
A total of eight respondents participated in the testing by completing the SUS questionnaire, as summarized in Table 4.
Table 4.
Respondents Responses to the SUS Questionnaire Respondents Respondent 1
Respondent 2
Respondent 3
Respondent 4
Respondent 5
Respondent 6
Respondent 7
Respondent 8
Questions Q5 Q6 Q7
Q10
The System Usability Scale (SUS) scores for each respondent are presented in Table 5.
Each total score was calculated by summing the adjusted item scores and multiplying the result by 2.
5, following the scoring guidelines Copyright A 2025 The Author.
Page 1018 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
outlined in Formula 1.
The detailed calculation results are shown in Table 5, which presents the individual SUS scores obtained from the usability testing.
Table 5.
Final SUS Score of Each Respondent (Q.
(Q.
Questions (Q5.
(Q.
Total SUS Score (Q.
Total Total x Based on the data, the total SUS score obtained from the eight respondents was 665.
Using Formula 2, this value was divided by the number of respondents to calculate the average SUS score.
xE = xE = 83 Thus, the average score obtained for testing using SUS is 83.
7 Discussion Based on the SUS testing results, the prototype achieved an average score of 83, indicating that the design meets usability The SUS score is interpreted across three evaluation dimensions, as illustrated in Figure 13.
Acceptability Ranges users are in the acceptable category.
Grade Scale falls into the B category.
Adjective Rating users are in the excellent category.
Figure 13.
SUS Score Level Category Results With an average SUS score of 83, the prototype falls within the acceptable category, indicating that users found the design comfortable and satisfactory.
This result demonstrates a high level of acceptability and suggests that the system can be effectively used in real-world scenarios without major usability issues.
Additionally, the Grade B rating on the SUS scale reflects a strong level of usability.
Although it does not reach the highest category (Grade A), the score indicates that most users were satisfied with their experience.
Minor improvements may still be considered to further enhance The Adjective Rating places the system in the AuexcellentAy category, suggesting that users perceive the interface as intuitive and well-designed.
These findings reinforce the conclusion that the prototype adheres to sound usability principles and effectively meets user needs.
CONCLUSION
This research aims to design a doctor reservation website using the Design Thinking approach and measure its usability.
This study aimed to design a doctor reservation website using the Design Thinking approach and evaluate its usability through the System Usability Scale (SUS).
The design process, which incorporated user input across all stages from empathize to test successfully produced a solution aligned with user needs.
The resulting prototype simplifies the reservation process and presents schedule information in a clear and accessible manner.
Usability testing yielded an Copyright A 2025 The Author.
Page 1019 This Journal is licensed under a Creative Commons Attribution 4.
0 International License BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Onlin.
Vol 5.
No 5.
August 2025 | Hal 1011-1020 https://hostjournals.
com/bulletincsr DOI: 10.
47065/bulletincsr.
average SUS score of 83, placing the system within the acceptable range, corresponding to Grade B, and receiving an AuexcellentAy rating on the Adjective Scale.
These results indicate that the system offers a comfortable, appropriate, and user-friendly experience.
However, this research has certain limitations.
It focused solely on interface design without addressing technical implementation or system development.
Additionally, the usability testing was conducted on a limited sample size.
Future studies are encouraged to involve a more diverse group of participants to obtain more representative data.
Further development may include features such as consultation reminders, reservation status tracking, and integration with automated notification systems.
With these enhancements, the system has the potential to deliver a comprehensive and efficient solution for digital healthcare services.
REFERENCES