BAIT2203 HUMAN COMPUTER INTERACTION
ASSIGNMENT REPORT - DESIGN & PROTOTYPING REPORT
Programme :RST2 (Intake:202105)
Tutorial Group :1
Prototype name: Patient Appointment System(website)
Declaration : I/We declare that this assignment is free from all forms of plagiarism and for
all intents and purposes is my/our own properly derived work.
No Student Photo Student Name Student ID Signature
1 Darren Chan 21WMR02937
Yan Zhi
Muhammad 21WMR08669 Akram
2 Akram Bin
Ahmad
3 Tay Jun Sin 21WMR02976 SIN
4 Yee Sheng Yuan 21WMR03266 YEE
1.0 Preliminary Design
Figure 1.1 Sign Up Page
When the user first uses the website, they need to register and sign up a new account in order
to browse the website. They need to enter their name, email address and password to register
as their new account. After that they successfully created their account, they can proceed to the
login page to sign in and browse the website.
Figure 1.1.1 Sign Up Successful Page
When the user successfully created an account, the sign up successful notification page will pop
out.
Figure 1.2 Login Page
When users first enter the website, the first page they will see is the Login page. They will need
to enter their email address and password to log in and to proceed to the home page. If they
don’t have an account yet, they will have to sign up and register for a new account. The sign up
button will lead the user to the sign up page.
Figure 1.2.1 Login Page (Incorrect Credentials)
When the users entered the wrong email address or password, an error message will pop out to
inform users that a problem has occurred. This allow users to perform the required action in
order to correct the error.
Figure 1.2.2 Login Successful Page
When the users successfully login with their account, the welcome notification will pop out.
Figure 1.3 Home Page
In the home page, there are four big buttons that allow users to interact with. Users will be able
to choose the action from the buttons they desire to perform. The interface of this home page
will be simple to use because there are only a few buttons to be interacted with and all the
buttons are clearly labelled using meaningful words and icons that can be used to prevent
confusion. Therefore, users who are not good with technology will be able to understand and
coordinate the system easily and effectively. The hamburger menu on the upper left corner can
also be accessible by the user to perform any actions that are available such as edit profile and
settings.
Figure 1.4 Appointment Page
In the appointment page,users will be able to check the details of the appointment that they
have selected. On this page, users can easily check their appointment details at a single glance.
The details such as date and time or the doctor can be viewed and changed easily. In addition
to that, some additional info that would be useful to the user regarding the appointment is also
displayed. Info such as the location of the appointment and certain guidelines that the user
should abide to for the appointment is shown here.
Figure 1.4.1 Doctor Selection Page
The doctor selection page is used by the user to choose the doctor that they wish to make an
appointment with. The user could also view the picture, name and department of multiple
doctors at a glance to make their choice on which doctor they would prefer. The user could
swipe left on any of the cards list to show other doctors that are available in the hospital.
Figure 1.5 Payment Page
In the payment page, users will be able to choose their desired payment method, it can be
e-wallet, online banking, credit card and WeChat Pay. Users can choose their desired payment
method by clicking the radio button.
Figure 1.5.1 Payment Details
If they decide to make payment with a credit card, they are required to fill out all the required
information. There will be placeholder text provided in the placeholder to hint the users on what
they should be entering.
Figure 1.5.2 Payment Successful Page
After they have made their payment, they will be redirected to a page showing “Payment
Successful!” to inform them that their payment has been successfully made. They can then
press the “Done” button to return to home page
Figure 1.6 Activities Page
It is often that people will tend to forget even the important things. However, for the hospital’s
clients, there is a page in its website that can help with this. Here we welcome the activities
page. In this page, users will be given notifications and reminders of what they need to do or
have done. For example, if a user decided to book an appointment, the activity page will update
its feed with a notice saying that the user has successfully booked an appointment. Afterwards,
the system will prompt the user to confirm about the appointment details and all and the activity
feed will update accordingly. Not to mention, if a payment for an appointment was completed the
activity feed will update it as well. Best of all, the day before the appointment the system will put
out a reminder to the activity feed to remind its user of the appointment.
Figure 1.7 History Page
This page consists of the previous diagnosis for Miss Diana’s reference in case of anything. Any
detailed information or tips shall be put into this diagnosis report and is easily accessible at any
time for Miss Diana’s convenience.
2.0 Detail Design
2.1 High Fidelity Design
Figure 2.1.1 Sign Up Page
Compared to the low fidelity design, we added different colours for the buttons and texts. We
also apply text style so that the text looks more attractive. There is a background image which
we purposely blurred so that it won’t affect the visual experience. We added radius to the boxes
so it looks more attractive compared to the previous which looks like a square box.
Figure [Link] Sign Up Successful Page
For the Sign Up successful page in the high fidelity design, we added a welcome icon on the
page. We also added colours for the button and background. Furthermore, the text style was
added.
Figure 2.1.2 Login Page
Same with the Sign Up page, we added different colours for the buttons and texts. The text style
was applied so that the text looks more attractive. There is a background image which is the
same with the login page. The radius of the boxes was modified so it looks more attractive. Not
only that, we have also added a remember me button so that users will not need to re-enter
their information again every time they login to this application.
Figure [Link] Login Page (Incorrect Credentials)
We have added colours that are able to match the colour theme of our website to increase the
attractiveness. Not only that, we have also blacked out the background a little bit so that the
web page will not be so messy and the users will only focus on the error message.
Figure [Link] Login Successful Page
For the Login Successful page in the high fidelity design, we added a successful icon on the
page. We also added colours for the button and background. Other than that, the text style was
added.
Figure 2.1.3 Home Page
We have added colours to the background and the buttons that are suitable for our theme as a
hospital web page. Buttons were given colours that are different from the background to
increase the visibility of each button. Other than that, compared to the preliminary design we
have added a portrait of our best doctor of the year along with a suitable slogan.
Figure 2.1.4 Appointment Page
In the appointment page,users will be able to check the details of the appointment that they
have selected. This page has been redesigned in a way that it matches the colour palette of the
application. In addition to that, borders have been added to give a better visual separation of the
items on the page. On this page, users can easily check their appointment details at a single
glance. In addition to that, a mini map has been added to ensure that the users have a rough
idea of where the location of the appointment will be at.
Figure [Link] Doctor Selection Page
The doctor selection page is used by the user to choose the doctor that they wish to make an
appointment with. This page has also been redesigned to match the application’s colour palette.
Furthermore, there have been some background cards that have been added to indicate clearer
how the elements on the screen are grouped. In addition to that, the user could also use the
search bar to search for a specific doctor by name or a specific department. The doctor selected
by the user will also be highlighted in a different colour so that users know that the doctor has
been selected.
Date and Time Picker
Figure [Link] Date and Time Selection Page
This page allows the user to choose the date and time that they wish to have their appointment.
On the top half, there is a calendar where the user could choose the date that they wish to have
their appointment on. On the bottom half, a dial is used to allow the users to choose the
appointment time slot that is the most convenient for them.
Figure 2.1.5 Payment Page
In the choose payment method page, we got rid of the radio button design but instead we
decided to implement a logo of a different payment method. This is because some people might
not be able to remember the name of every payment method but they might be able to
remember the logo because human brains can remember images better than text. Other than
that, the selected payment method will also be highlighted in different colours to indicate that
which payment method has been selected.
Figure [Link] Payment Details
Previously in the preliminary design, we used the same colour which is white colour for the
placeholder and the background that might cause visibility issues to the user. Hence, we
decided to change the colour of the placeholder to a colour that can match our website colour
theme and also differentiate itself from the background. Not only that, we have also added a few
more required information for users to fill out which is the billing address to check if the
information matches with the card information.
Figure [Link] Payment Successful Page
In the payment successful page, we have added some new information regarding the
transaction ID, amount paid and the date and time of the payment made so that users are
aware of the action they have made. The colours were also changed to match our website
theme to increase the attractiveness.
Figure 2.1.6 Activities Page
In the activities page, Miss Diana can now have access to a few information regarding a notice
for her appointments. She will get a reminder and notice of confirmation for all of her
appointment details. Not just that, she will also be able to see if the doctor’s have uploaded a
diagnosis report on her last consultation.
Figure 2.1.7 History Page
In the history page, Miss DIana will be able to see a record of her previous appointment’s
consultation diagnosis report. She will be able to click on one of each to view the said report and
view it.
Figure [Link] Diagnosis ReportPage
This page is a continuation of the previous history page. Miss Diana will read the detailed
information about her diagnosis here on this page.
2.2 Design Decisions
2.2.1 User needs
From Diana’s persona, we can see that she is frustrated about booking appointments to
see the doctor. She needs to call the hospital and talk to the customer service then only to be
redirected to the department to try and book for a consultation. This entire process would usually
take up a considerably long time due to the inefficient process and also the lack of staff at the
hospital which can answer the phone calls. In Diana’s opinion this is unacceptable due to it
taking an unnecessary huge amount of time for the process to be completed. Her dissatisfaction
is further amplified as she is someone who hates wasting time. She believes that time is worth
much more than money. By using our system, she can go to the appointment page by clicking the
appointment button in the home page shown in figure [Link]. She can then search for the
department and also choose the doctor that she wants to make an appointment with if there is an
available slot (referring in figure [Link] and figure [Link])
Figure [Link] Figure [Link]
Figure [Link]
Furthermore, Diana always easily forgets the diagnosis during the consultation with the
doctor. Our system will record down the diagnosis report of the patient. Diana can view her
diagnosis report in the activity page as shown in figure [Link]. Inside the activity page, not only
the diagnosis report can be seen but also the notices and reminders.(refer to figure [Link])
Figure [Link] Figure [Link]
Other than that, Diana doesn’t need to manually go to the hospital counter and book for
her appointment herself which might result in long queues anymore. She can book an
appointment by just using our system without going to the hospital physically.
2.2.2 Usability Goals
Effectiveness
In this system, we aim to give the completeness and accuracy where users can achieve the
desired goal. The system’s main purpose is to allow its users to be able to book appointments at
any available Day and time slot. We provided, not just that but also the option to choose their
desired doctor. Not to forget, to make it easier for users, they can search for their desired doctor.
This helps a lot especially for Miss Diana who only prefers her appointments to only be with Dr
Ali Muthu AhKao because he is a doctor that Miss Diana really trusts. However, the longer she
uses the system, the system will automatically put its selected part on Dr Ali Muthu AhKao to
make it easier for other users.
Figure [Link]
Efficiency
The system should allow the user to book appointments without having the need to go
through complex workflows. In other words, it's about how fast and complete the user can use
the system. In this system, we will make the user go through the main page, then the select date
& time page, next is the Select doctor page and lastly the payment page. In our opinion, this is
the best minimalistic design we can create but also the most effective design that can be created
for this simplicity. Not to forget, users can always view their history page with simple and brief
details then click on each report to see the detailed information.
Figure [Link]
Figure [Link] Figure [Link]
Satisfaction
Satisfaction is the user’s physical, cognitive and emotional responses that result from the
use of the system that meets the user’s needs and expectations. In order to achieve this goal, we
have to first ensure that the system works as expected. The system should respond accordingly to
Diana’s input and commands. Furthermore, the UI is designed to be easy to navigate. The design
of the UI prioritises simplicity and consistency which allows Diana to have an almost immediate
climb on the learning curve. This allows Diana to fully utilise and take advantage of the system
provided to her without having any prior knowledge or experience with the system. In addition to
that, the UI is also designed to constantly communicate and provide feedback to Diana on what
has been done and what is going on. This can be seen from the activity page that has been
included in the UI. By designing the UI to make Diana the initiator of actions rather than the
responder, Diana would be able to have the perception that she is fully in control of the system
and thus the situation. All in all, this entire system ultimately allows Diana to get rid of the
frustrations that she has to experience every time when queuing up to make appointments.
Activities page which shows Diana what has been
done
Figure [Link]
To complement this system, we decided to implement certain principles from Shneiderman’s
Eight Golden Rules to improve the usability of our system.
1) Shneiderman’s Eight Golden Rules - Strive for Consistency
In this system, we aim to give the user consistency in terms of system layout and design
as much as possible. As shown in the sample, it is seen that the websites contain consistent
themes for most parts of the sites. In terms of colour, pattern and placement of items, it pretty
much looks identical to each other and that is the goal of consistency.
Figure [Link] Figure [Link]
Figure [Link] Figure [Link]
2) Shneiderman’s Eight Golden Rules - Enable frequent users to use shortcuts
Miss Diana is a middle-aged woman and sooner or later, she will grow tired of having to
type in her email address and password every time she wants to use the system. Therefore, to
assist in this the system is equipped with a checkbox. The function of this checkbox is so that the
system can confirm whether to keep her account logged in to the device that she is using or not.
If it is ticked, the system will not log out from her account as long as she is using the same
device for a long period of time.
Figure [Link]
3) Shneiderman’s Eight Golden Rules - Offer informative feedback
A good system must provide a form of feedback to its users whether it be in a form of
visual, audio or sensory. For this case, we chose to go with a visual feedback to indicate that the
payment method that is being chosen is selected properly. If this visual feedback is not there,
Miss Diana will be confused if she properly selected the payment method, or not.
Figure [Link]
4) Shneiderman’s Eight Golden Rules - Offer simple error handling
If an error is made, the system should be able to detect the error and offer a simple,
comprehensible mechanism for the error handling. Take a look at this login page for example,
where Miss Diana accidentally keyed in the wrong password or email address. When she clicks
login, the system detects the error and prompts a popup message saying that she keyed in the
invalid email address or password.
Figure [Link]
5) Shneiderman’s Eight Golden Rules - Reduce short-term memory load
We need to keep the system simple for its users, mainly Miss Diana because especially
for middle-aged citizens, overloading their memory could be a bad thing as they will easily
forget a lot of complex things. Therefore, the system’s interface needs to be kept simple and
make sure that users will not be distracted by unnecessary information so that the system’s
interface can be easily comprehensible for a large scope of users.
Figure [Link]
2.2.3 Cognitive Issues
Applying Gestalt Law of Perception
Gestalt Law of Perception is a set of principles that demonstrates and suggests how the mind
understands external stimuli as a whole rather than as individual parts. A cognitive process takes
place when viewing information as a whole as the mind makes a leap from comprehending them
as parts to realising the whole picture. We have taken advantage of these laws and applied them
in our UI design.
Proximity
Figure [Link]
In the Gestalt Law of Perception, it states that objects appearing to be close together in space
or time tend to be perceived together. In other words, proximity between different elements on
the page changes the way a user may categorise and group the elements on the page. In the
page where we choose doctors, the general doctors are grouped together in a way that they are
close with each other and are side by side. This is the same for the specialised doctors
category. They are grouped together in close proximity to indicate and give the perception to the
user that they are under the same grouping. For items that are not meant to be grouped
together or are in different sections, there are purposefully placed spacing between them to
indicate that they are meant to be separated.
Continuity
Figure [Link]
On the same page, the continuity concept can also be observed in our UI design. We have the
doctor’s picture, name and department listed one after the other from the left to the right.
Furthermore, the small right arrow on the bottom right indicates that the list of doctors could be
scrolled to the left to show more doctors. This creates a flow of continuity that indicates that all
the doctors listed here are under the same category, which is general doctors.
Similarity
Figure [Link]
The concept of similarity can also be found in our UI design. This can be observed when the user
is choosing the doctor. Although each doctor has different pictures, name and department, each
doctor's listing is formatted similarly and with the exact same font, dimensions and design. This
is being done so that these doctors are grouped and perceived as a unit when the user scrolls
through this section of the app.
Design for Memory
Remember me
Figure [Link]
We have implemented a “remember me” feature in the sign in page. This is to relieve the user
from relying on their long term memory. This is due to the fact that long term memory may
become less accessible after a long period of time. By having the “remember me” feature, user
can log in once and be able to use the account on the same device in the future without having to
type in their credentials again. Essentially, it makes the process of using the application much
more hassle free and efficient by allowing the user to skip the sign in process every time they
wish to use the app.
Memory Chunking
Figure [Link]
Figure [Link]
According to George Miller, the user will be able to remember more details if the items can be
chunked. Chunking can be done by grouping together pieces of information into separated
sections so that they become one single item to be remembered as a whole. It is an ideal solution
when the user needs to remember specific information that needs to be used later on. This
concept is applied and can be observed in our appointment details page. The important details of
the the appointment are chucked and separated into sections so that it is easier for the user to
remember the date and time of the appointment. The date and the time are written on separate
lines so that users could remember them as separate chunks. Furthermore, this can also be
observed in the important notes section of the page. The notes are written in a point form format
which creates different chunks of information that is easily remembered by the user.
Mental Model
Figure [Link]
The page where the user would choose the date and time of the appointment takes advantage
of an existing mental model that most users would have of a calendar. The UI of the date
selection section is modelled after a real life calendar with the exact same layout and format.
This allows the user to visualise the entire month into different weeks allowing the user to plan
more efficiently. Since most users are familiar with the layout of a physical calendar, they would
find it easy and convenient to choose the suitable date from a calendar with the same outer
appearance as real life.