Project 3 Team_WeLoveHCI

 1.0 Storyboard 

1.1 Task 1- Making an appointment

Jaslene was sick, what made her even more uncomfortable was the hassle of having to queue up at the clinic. She wants to make an appointment before she goes to the hospital. However, when using the MyKlinik application, she needs to get the phone number and call the clinic that wants to make an appointment. Thus, she decided to use the Telehealth Malaysia app to make an appointment. When using the Telehealth Malaysia app, she found that this app brings convenience to her as she can directly make an appointment through this app by selecting the hospital she wants.











1.2 Task 2 - Schedule a video consultation

Jing Zhe is busy doing his work and has no time to go to the hospital. Thus, he wants to schedule a video consultation with doctors. Unfortunately, he noticed that he cannot select the specific doctor for his consultation when using the Speedoc application. Thus, he decided to use the Telehealth Malaysia app for booking a video consultation. He was glad that the app can select the doctors he wants before booking the consultation.














1.3 Task 3 - View medical history

Kee Yong always faced the challenge of recalling the specific details about his past medical consultations. He decided to use MyKlinik app to follow-up consultations with his preferred doctors. However, he found the MyKlinik app doesn’t have details of booking date, attending doctor and medical report. So he uses the Telehealth Malaysia app  as the app clearly shows the details of his medical history such as the date, time, attending doctor's name, and a summary of the medical results.










2.0 Alternative Design

Task 1: Making an appointment = Interface 1, 2, 3


Task 2: Schedule a video consultation = Interface 4, 5, 6


Task 3: View medical history = Interface 7, 8


Alternative Design 1 - HU YIZE


Alternative Design 2 - IVLYN TAY WAN ROU
















Alternative Design 3 - LEE XIN HUI

Alternative Design 4 - TAN YUN XI



Alternative Design 5 - WANG YU TING

    










Voting for Best Design


         













3.0 Wireframes

3.1 Task 1- Making an appointment

The Task 1 (Making an appointment) design applied several of Shneiderman's Golden Rules, Gestalt principles, and some necessary usability and user experience goals.


Shneiderman's Golden Rules:

Rule 4 - Dialogue

When an appointment is booking successfully, a confirmation message, ‘Booking Successfully’ pops up in the “After” section to reassure users that the appointment is recognized and booked through the system. This provides satisfaction to the user as the user will know whether the appointment is successfully booked.


Rule 6 - Permit reversal of actions

By applying the “Back” button, users are allowed to go back to the previous step instead of having to start over. This provides satisfaction to the user as the user can undo a previous action quickly and easily.


Rule 3 -  Offer informative feedback

In the choosing slot section, the color of the button changes to bold when the users select the date and time for making an appointment. This helps users feel more in control and confident while interacting with the system.

Gestalt Principle :

  1. Similarity - Same shape of icons is used so that the users know exactly what UI elements to look for.

  2. Proximity - Adequate whitespace to group “Days”, Morning”, “Afternoon” and  “Evening” icons provide users a clear visual hierarchy.

  3. Continuation - Icons lined up vertically, indicating a line.


Usability & User Experience Goals :

  1. Learnability - The icons are simple and easy to understand.

  2. Effectiveness - There is an effective ‘Back’ button which allows users to go to the previous step without starting over.

  3. Satisfaction - The icons and information are arranged neatly for the user to read.


3.2 Task 2 - Schedule a video consultation

Several of Shneiderman’s Golden Rules, Gestalt concepts and required usability and user experience goals were successfully applied in the design for Task 2 (Schedule a video consultation).


Shneiderman’s Golden Rules

Rule 1 - Strive for consistency

The similar shape of icons and terminology in the doctor list page helps users to recognise the pattern and create a more intuitive interface. 

Rule 7 - Support internal locus of control

The use of filter features allow users to customize their doctor search based on their individual preferences. For example, the users can use a filter feature for customizing doctors based on gender, reviews, and specialty.


Gestalt Principle:

  1. Proximity - Each information for a doctor in the doctor search list is grouped closely together, with spaces applied to each doctor.

  2. Similarity - The shape of each button is similar.

  3. Enclosure - There is a border to separate the filter section and doctor information section.


Usability & User Experience Goals :

  1. Usability - The intuitive interface and well-designed icons make the task easy to complete.

  2. Efficiency - With the filter function, users are able to search the doctor quickly which increases the efficiency.

  3. Satisfaction - With the information clearly stated in the review and payment section, the user can check the details and make the payment successfully.



















3.3 Task 3 - View medical history

The design for Task 3 (View Medical History) effectively applied several of Shneiderman’s Golden Rules, Gestalt concepts and required usability and user experience goals.


Shneiderman’s Golden Rules:

Rule 2 - Enable frequent users to use shortcuts

The “Contact Us” and “Book Again” buttons provide shortcuts to the frequently used users. Providing shortcuts allows users to work more efficiently, save time, and have a more positive experience with the interface. For example, the users can use the “Book Again” function to directly make an appointment again with the same doctor without having to repeat the whole booking process which may cause time wastage.


Rule 8 - Reduce Short-Term Memory Load

The view medical history feature is designed to allow users to easily access and review their past appointment information. By having this feature, users are not required to remember specific details or navigate complex processes.


Gestalt Principle:

  1. Proximity - Usage of whitespace for medical history information such as patient name, symptoms, scheduled time, attending doctor and fees provide users a clear vision.

  2. Similarity - Same shape of button. Each image has a square border.

  3. Figure and content - The black text and white background allow the appointment details easy to read by the users.


Usability and User Experience Goals: 

  1. Satisfaction - The medical history information is displayed neatly which allows users to see it clearly at a glance.

  2. Efficiency - The shortcut buttons such as “Contact Us” and “Book Appointment” allow users to perform the tasks quickly.

  3. Learnability - Simple icons make it easy for users to understand and learn when using it.



4.0 Interaction Metaphors 

Metaphor 1 - Back button

  (Figure from Wireframe task 1)


It allows users to navigate to the previous step or page. When clicked, the back button takes users back to the search results of the list of speciality: general health and no need to go back to the main page and make the same step to make an appointment again. 


Metaphor 2 - Share button

(Figure from Wireframe task 1)


The share button in the review page after booking an appointment lets users easily share and tell others about it. Users can use it to send the appointment details to friends, family, or anyone else, making it simple to let everyone know about your plans.





Metaphor 3 - Filter option

(Figure from Wireframe task 2)


The filter option simplifies appointment booking by letting users choose specific categories like general health, dental, aesthetic and so on. In this way, users can quickly find the type of service they need without sorting through irrelevant options and make the process easy.


Metaphor 4 - Search button

  (Figure from Wireframe task 2)


This search button lets the user search what doctor they want to make a video consultation. Once the user presses this search button, the system will list the doctor's profile, name, hospital and rate to let users choose the doctor they want. 


Metaphor 5 - Assistance button

  (Figure from Wireframe task 2)


The assistance button is used to solve the problem faced by the user. Users can get assistance from the assistance button, which offers a detailed tutorial on how to use the filter function. Users can refine searches or organize information more easily because it provides clear instructions and definitions for terms.





Metaphor 6 - Home button

(Figure from Wireframe task 3)


The home button used here is to allow users to go back to the main page after viewing medical history. The user does not need to press the “Back” button to return to the main page. It can ensure the convenience and satisfaction of the user while using this system.

Comments

Post a Comment

Popular posts from this blog

Project 1 Team_WeLoveHCI

Image
  1.0 Problem Current telehealth applications frequently have multi-step, complicated sign-up and login processes (a usability issue). Due to the lack of touch targets and ambiguous navigation, the interface, once logged in, might also be difficult for older or less tech-savvy users to understand (usability issue). Patients frequently struggle to decide which clinic or hospital department is best for their treatment and feel confused about their medical conditions. Patients are paired at random with any doctor available for video consultations, which results in minimal continuity of care (a user experience problem). Some people have problems getting access to healthcare because they are unable to go to hospitals or clinics for treatment. In these problems, this is not sufficiently addressed by  the 17 Sustainable Development Goals identified by the United Nations #3 (Good Health and Well-Being). Difficult to find a suitable clinic/hospital (usability issue) Figure 1.0 Figure 1...
Read more

Team Member Introduction ♡

Image
  Team member of Group WeLoveHCI ♡ :   1. Hu YiZe Hello, I'm Hu Yize from Hebei Province, China. I am a software engineering student in the second semester of my sophomore year. In addition to focusing on my studies, I have many hobbies. Music is an indispensable part of my life, I like different types of music. It can make me relax, but also inspire my creativity. In addition, badminton is one of the ways I exercise my body, which is full of fun. 2. Ivlyn Tay Wan Rou Hi, my name is Ivlyn Tay Wan Rou, currently a year 2 Software Engineering student. I’m from Melaka. My hobbies are watching drama and listening to music. Here’s a fun fact about me: I have a twin sister. Interestingly, it's easy to tell us apart because even though we are twins, we don't look alike. 3. Wang Yu Ting   Hi, my name is Wang Yu Ting from Pontian, Johor. I’m currently studying software engineering Year 2 Semester 1. I love sports such as playing basketball and badminton. Besides that, I also love...
Read more

Project 4 Team_WeLoveHCI

Image
  1.0 Introduction “Telehealth Malaysia” is an improved app from MyKlinik. It is a telehealth application that allows users to book appointments, schedule video consultations and access their medical history in an easy way. In Project Part 4, we will be conducting prototyping and evaluation of our application. Our user testing was conducted on 5 January 2024 at M01, Kolej Tun Dr. Ismail UTM. We designed our prototype using Figma which is the most suitable prototyping tool for our application.  The 3 main tasks chosen for our testing are making the appointment, scheduling a video consultation and viewing medical history. A total of 3 target participants were involved in our interview sections to experience our usability testing for our application. Throughout this interview, we discovered the weaknesses and strengths in the design of our prototype.  Testing for User 1 was handled by Wang Yu Ting Testing for User 2 was handled by Wang Yu Ting Testing for User 3 was handled ...
Read more