HCI (Group 4)

Sunway College DIIT Human Computer Interaction
DIPLOMA IN INFORMATION TECHNOLOGY
COURSEWORK
Subject: HUMAN COMPUTER INTERACTION

Subject code: HDT1223
Lecturer’s Name: Mr Tan Kwong Hwee
Deadline: November 20th, 2022
Submission Date: November 19th, 2022
NAME STUDENT ID
Goh Chun Xin 20056388

Jung Kamchan 21018817
Max Liew Zee Kit 21016506
Wong Hoe Yin 21015078
Page 1 of 55
INSTRUCTIONS TO CANDIDATES
This assignment will contribute 40% to your final grade.
This is a group assignment (maximum of THREE-FOUR students in a group).
IMPORTANT
The Sunway Diploma Studies requires students to adhere to submission deadlines for any
form of assessment. Penalties are applied in relation to unauthorized late submission of work.
- Coursework submitted after the deadline but within 1 week will be considered as late
submission.
- Work handed in following the extension of 1 week after the original deadline will be
regarded as a non-submission and marked zero.
Academic Honesty Acknowledgement
“We verify that this paper contains entirely my own work. We have not consulted with any
outside person or materials other than what was specified (an interviewee, for example) in the
assignment or the syllabus requirements. Further, we have not copied or inadvertently copied
ideas, sentences, or paragraphs from another student. we realize the penalties (refer to the
student handbook diploma and undergraduate programme) for any kind of copying or
collaboration on any assignment.”
Name Signature Date
Goh Chun Xin 19-11-2022
Jung Kamchan 19-11-2022
Max Liew Zee Kit 19-11-2022
Wong Hoe Yin 19-11-2022
Page 2 of 55
Group Member Contribution Form

INSTRUCTION
The contribution must be signed by all members. 3 marks will be deducted from the total marks
awarded if the group fail to comply with this requirement
Group Name: Group 4
Student Name Student ID Signature Role & Responsibilities

Analysis (Persona & Environment
Analysis), Design (High Fidelity
Goh Chun Xin 20056388
screenshots & Described the Low
Fidelity screenshots)
Proposal (Introduction),
Jung Kamchan 21018817 Design (Usability Goals),
Design (Cognitive Issue)
Delegated the tasks, Proposal (PACT
Analysis on People & Technology),
Analysis (Persona, Task Analysis
(HTA) & Scenario of Current Task),
Max Liew Zee Kit 21016506
Design (Described the Low Fidelity &
High Fidelity screenshots & Design
Decisions), Compiled the overall report,
Submitted the overall report
Proposal (PACT Analysis on Activity &

Wong Hoe Yin 21015078 Context),
Design (Low Fidelity screenshots)
Page 3 of 55
Table of Contents
1. Proposal...................................................................................................... 5
1.1 Introduction ......................................................................................... 5
1.2 PACT Analysis .................................................................................... 7
1.2.1 People ......................................................................................... 7
1.2.1.1 Target Users .................................................................. 7
1.2.1.2 User Characteristics ..................................................... 8
1.2.2 Activity ....................................................................................... 9
1.2.3 Context ....................................................................................... 9
1.2.4 Technology................................................................................. 10
1.3 Usability Goals .................................................................................... 11
2. Analysis Report ......................................................................................... 14
2.1 Persona ................................................................................................. 14
2.2 Task Analysis of Current Task.......................................................... 15
2.3 Scenario of Current Task ................................................................... 16
2.4 Environment Analysis ........................................................................ 17
3. Design & Prototyping Report .................................................................. 18
3.1 Preliminary Design ............................................................................. 18
3.1.1 Storyboard Design .................................................................... 18
3.1.2 Low Fidelity Design .................................................................. 23
3.2 Detail Design - High Fidelity Prototype ............................................ 35
3.3 Design Decisions .................................................................................. 47
3.3.1 User Needs ................................................................................. 47
3.3.2 Usability Goals .......................................................................... 48
3.3.3 Cognitive issues ......................................................................... 55
Page 4 of 55
1. Proposal
1.1 Introduction
Whether you’re looking to have something to fill up your stomach when time is limited
for you to prepare them or not, ordering the food that you crave through an app does
solve the problem faced by the majority who have time against them. However, preparing
and serving food is deemed stressful to some people as it does take up a fair amount of
time, especially for those who have a hectic schedule.
An online restaurant, also known as a ghost kitchen, is one of the businesses that is about
food service. It serves consumers exclusively by delivery and pick-up, through online
ordering. As a result, the days of calling your nearby restaurant to book a top-choice table
may well be coming to an end as the comfort of online innovation gets to be basically
overwhelming. It provides greater convenience for customers. There is no human error,
and it may help keep hosts focused on the task at hand. On top of that, the owner can
optimise staffing and improve cancellation notifications. Lastly, it can help capture
customer information. This framework was created to mechanise the day-to-day actions
of a restaurant. A restaurant could be a kind of business that serves individuals all over
the world with ready-made food.
This framework was developed to supply benefits from office to eatery jointly to the
client. This restaurant management system can be utilised by employees in a restaurant to
handle the clients' orders and can help them effectively discover free tables or place
orders. With this system online, ordering and reservation management will become easier
and more systematic to replace traditional systems that are still using paper. To order a
meal online, the customer is required to be a member first, and then they can access the
latter part of the site. This project is to facilitate customers' online ordering and
reservation. The option of becoming a member was only an attempt to avoid placing the
fake bookings.
Many restaurants manage their business by hand, especially taking customer orders. In
the traditional booking system, a customer must go to the restaurant or make a phone
call to book. Today, the restaurant waiter takes the customer's order by manual system
using paper. Then he demands for today’s menu and does some discussion over menu
items, then he orders. It takes a short time to book the order and the waiter books the
order on paper, so there is a probability of loss and duplication of customer information.
The restaurant's management system puts the order in a queue with specific priority
according to time and quantity, and then a cook is assigned to the specific order to
complete it.
Page 5 of 55
In this analysis report, we analysed the target users' characteristics, activities, context,
technology, and usability goals. Furthermore, there is information about personas, task
analysis, scenarios, and environments in the analysis report. In the next part, preliminary
design, detail design, and design decisions are subsequently made.
Page 6 of 55
1.2 PACT Analysis
1.2.1 People
1.1.1.1 Target User
This system aims to achieve in gaining a variety of users to use their
system. Among the targeted users include:
• Students
This can be a good option for students who don’t have sufficient time
to find something to eat as they are in the midst of getting their work
done, especially when their deadline is tight. To solve the problem of
students getting hungry too often when their schedules are hectic, the
existence of various online food delivery applications does solve most
of the problems faced by students with tight schedules without having
the necessity for students to leave their respective homes just to
purchase their food or beverages. All he or she has to do is perform a
few clicks on their application via their mobile devices and continue to
complete their errand while waiting for the rider to deliver their order
to their doorstep.
• Working Adults
As working adults get occupied with their work 24/7, they tend to skip
regular meals as they do not have sufficient time to take five for a bite.
That’s because they do it for the sake of conserving time by finishing
their tasks on time and meeting the deadline set by their supervisors.
Over time, this causes these working adults to experience various
discomforts in their bodies, such as gastric etc. The implementation of
the online food ordering system does alleviate the chances of these
individuals to order their food or beverage with a few clicks without
having the necessity to leave their workplace to go out to buy them.
This also helps them to save travel time from their workplace to the
shop where the food or beverage they intend to buy is located.
Page 7 of 55
• Tourists
Ordering food online also helps tourists find food while on the go.
Regardless of whether they are on a backpacking trip or not, it still
helps them to find something to bite into if there are limited food
options available. Tourists can also get confused over what to order
whenever they go to local stores to look for it, especially when they
want to approach the seller who doesn’t speak the tourist’s language.
Therefore, the application does make things easier for tourists to find
something to eat or drink when time is against them and to eliminate
the necessity for them to leave their place of accommodation just to
buy their food or beverages.
1.1.1.2 User Characteristics
• Technology Literate
Students and working adults who are accustomed to using a variety of
electronic devices, such as computers, smartphones, tablets, etc., are
the primary target users. These individuals were given training in
using and understanding a variety of app interfaces. As the target
people age, it becomes tougher for elderly people to perform
complicated motions as their motor skills degrade with age. Therefore,
older people may need some guidance and have some trouble
adjusting to current technologies.
• Abilities to Know Their Desired Food/Beverages

Users not only know what they want to order based on the description
of the food or beverage, but they also know what they want to eat or
drink. Targeted users tend to use their fine motor skills and cognitive
skills learned since childhood to determine which food or beverage is
best for them through their eyes. Language skills can come in handy
for these users as not only their fine motor skills and cognitive skills
are put to the test while using that specific application but also their
language skills, especially for foreigners, as some of them don’t
understand certain lines of words due to the complexity of that
specific phrase to be digested. As language skills are part of linguistic
skills, better linguistic skills imply better cognitive abilities.
Page 8 of 55
1.1.2 Activity
The whole purpose of this application is to simplify eating by allowing users to
place orders for food delivery to their doorstep. This system will allow for more
convenient and efficient time usage for users who have a hectic daily schedule.
This will prevent added stress and allow for a healthier food intake. This system
provides food delivery services through motorcycles and cars based in Malaysia.
To use our system service, both riders and customers must use an Android or iOS-
based system while enabling location and internet on their device. The riders will
tend to the users that are being relayed on their devices by going to the GPS-based
location for food pickup and later delivery to the user's inputted address. There
will be a few payment methods for users to choose from, which include cash, e-
wallets, online banking, and cards. Other than that, there will be a point
redemption system available for recurring customers. For example, users may use
points to redeem food discount codes or goodies like movie tickets, etc.
1.1.3 Context
1.1.3.1 Environmental Context

Most of the online food ordering algorithms take place indoors, usually in
residential areas. Ordering food online also expects users to wait longer
for their food and beverages to arrive at their doorstep, as their allocated
rider may have other locations to deliver other users’ orders or the rider’s
location to pick up the order is far from where the user lives.
1.1.3.2 Order Food Ordering Application

All the activities for the newly planned online food ordering application,
from establishing an account to ordering a specific food or beverage,
would be carried out within the mobile application itself, on either an
Android or an iOS device. Users will not be expected to place their
orders as frequently as there are some users who occasionally use the
application while performing their daily errands, whereby a stable
internet connection is always accessible to make the application work.
Page 9 of 55
1.1.4 Technology
1.1.4.1 Hardware
Smartphones and tablets are the only trusted hardware that is required by
the application to function properly, subsequently allowing users to
access and interact with the application’s programme by utilising the
touch screen functionality featured on all smartphones. The output does
come from the user's device display and displays a complete list of foods
and beverages from which to choose from a variety of restaurants. Once
the user has completed his or her selection of the desired food or
beverage, an interface displays an interface for users to double-confirm
their selection of their selected items prior to making payment. Users can
pay for their selected items using cash or contactless payment methods.
After completing the payment, an interface will show up with a message
indicating that their payment was successful, and the interface will be
overwritten with another, newer interface that indicates their food or
beverage preparation status and the estimated time of arrival of the rider
to deliver the user’s food or beverage to his or her doorstep.
1.1.4.2 Software
This programme will require Android 2.2 as the minimum version to
operate, whereas Apple requires IOS 6. Users don't have to worry
unnecessarily about the application taking up too much storage space on
their mobile devices, as it will only require a small amount of storage. To
successfully download the application, the user’s mobile devices need to
be able to gain access to the Google Play Store for Android mobile
device users, whereas for iOS mobile device users, access to the Apple
Store is required. To wrap things up, a stable Internet connection is also
needed for the application to be downloaded.
1.1.4.3 Internet Technology

When users log into their own accounts, they will see a history of their
food and beverage orders, along with the order details, which will be
saved to the server over the internet. As a result, users don’t need to
worry about losing track of the history of their orders. The user’s mobile
devices will also feature Wi-Fi or 4G capabilities, thus allowing their
mobile devices to gain access to an Internet connection. As the app
performs the backup of the history of orders made by the user, a wireless
connection with the server is successfully established.
Page 10 of 55
1.2 Usability Goals
1.2.1 Effectiveness
It is a common marketing strategy for a restaurant to introduce its own menu on
its own app to promote its own restaurant features on the one hand, and to bring
the restaurant to the attention of more people on the other hand, which is a win-
win strategy. Once the user has registered, the app will complete the user's
request, during which the user will be able to select his or her own needs,
including various restaurant food and beverage options, ongoing promotions, etc.
Before users continue to place orders from the app, they will go through an
introductory It is a common marketing strategy for a restaurant to introduce its
own menu on its own app to promote its own restaurant features on the one hand,
and to bring the restaurant to the attention of more people on the other hand,
which is a win-win strategy. Once the user has registered, the app will complete
the user's request, during which the user will be able to select his or her own
needs, including various restaurant food and beverage options, ongoing
promotions, etc. Before users continue to place orders from the app, they will go
through an introductory process that explains in detail how to order their food and
beverages in simple steps to make it more user-friendly for both the user and the
restaurant. The app is a convenient way for users to enjoy food from distant
restaurants while staying at home. The process explains how to order their food
and beverages in simple steps to make it more user-friendly for both the user and
the restaurant. The app is a convenient way for users to enjoy food from distant
restaurants while staying at home.
Traditionally, people only have access to buy-out services at fast food restaurants,
but not every restaurant has access to them. This is mainly because the distance
between the restaurant and the user is too great, and even if the restaurant is near
the user, the address is not known, and it is not cost-effective. However, with the
development of the internet and the rise of smartphones, every user can now
choose the restaurant they want for delivery service.
The user will order through the app, and when the restaurant receives the order
from the user and completes it within the time limit, it will deliver it to the user's
place of residence, giving the user the best experience. The app also has other
features such as introducing nearby food, offering discounts for a limited period,
and a membership mechanism to stimulate users.
However, it seems to be a perfect app, but as other users of the same nature start
to prioritise their needs, the app may lack riders because the demand is higher than
Page 11 of 55
the supply, some restaurants do not join the app, and the price difference. If
consumers delete the mobile app after the first use due to poor results, the user
experience will be negatively affected. Users may delete the mobile app after the
first use if they do not get the expected results, which can reduce user happiness
and damage the reputation of the mobile app.
Effectiveness is critical to our proposed mobile app for ordering food because the
convenience of adding takeout to our daily lives through design allows people to
have a highly customizable and personalized experience. Failure to achieve good
effectiveness will result in users uninstalling the mobile application after their first
experience with it, thus lowering the user satisfaction and harming the mobile
application’s reputation.
1.2.2 Efficiency
For a takeaway application to work, it must be efficient and user-friendly. In this
age of the Internet of Things, people spend a lot of time surfing the web. Why go
to the trouble of ordering food from a restaurant when the user can order it online
and have it delivered to the user's place of residence at any time? The mobile app
allows users to enjoy the freedom to eat and drink regardless of the time of day. It
allows users to become more productive and use that time to do more effective
things.
In addition, the smartphone application allows customers to order food from

different restaurants at the same time and enjoy the food from different
restaurants. Previously it was no longer possible to enjoy food from different
restaurants at the same time. Because no one would choose to go to many
restaurants to order away and it would not be time and cost effective. But with
ordering apps, users have the flexibility to enjoy food from different places, at
anytime, anywhere, for the cost of delivery.
Efficiency and other factors are critical in mobile applications and must work
together to provide superior performance, excellent usability, and unique value to
users. As the market becomes saturated with other identical smartphone apps on
the rise, users will lose out on continued use and choose other identical apps. The
cost of producing mobile apps may increase due to inefficiencies. This may lead
to many unhappy customers.
Page 12 of 55
1.2.3 Satisfaction
The satisfaction of a smartphone application depends on the physical, cognitive,
and emotional responses of the user to the system, product, or service on which
the application is based, meeting the user's needs and expectations. With that said,
we developed an efficient and effective design for our delivery service app that
enables us to experience the food of a distant restaurant at home. To be satisfied,
these two factors are necessary. These two aspects are essential to achieving
satisfaction.
The design inspiration aspect is crucial in order to attract and stimulate the user's
attention to the application. If the application is not well designed or qualified, it
will be difficult to maintain the use of it to carry out procedures on the program. If
the application design is suboptimal or fails, it can cause some or many users to
move to another application of the same design. Most of the food delivery apps on
the market are almost the same, with simple navigation and clear pages. Users
nearly seem to love the design when they first see it, and when we make the
procedure simpler for them, they'll notice it. That much is certain.
For a programme to keep a high number of users, design is essential. From a

design perspective, good design ensures the user's interest in the application. Even
if an application's operations are all implemented flawlessly, if its architecture is
subpar, the software will still perform poorly.
Page 13 of 55
2. Analysis
2.1 Persona
Figure 2.1 Persona
Page 14 of 55
2.2 Task Analysis of Current Task
Figure 2.2 HTA
Page 15 of 55
2.3 Scenario of Current Task

Lee Chong Wei was a world-renowned badminton player turned coach, especially in
Malaysia; he is extremely passionate about badminton due to his achievements not only
in Malaysia but also around the world. Despite being an ex-athlete right now, Lee doesn’t
take this as an excuse to develop bad eating habits, such as consuming junk food, etc.
That’s because even as an athlete or a coach, Lee is required to consume not only healthy
food but also the right amount of food to ensure he doesn't overeat. Therefore, he’s able
to stay on top of his game. Lee has always wanted to explore various types of healthy
food to stay fit, but he has been struggling to allocate time to do it from scratch due to his
tight schedule of coaching his athletes for tournaments etc., and he feels bored eating the
same thing repeatedly every day.
In this daily schedule, Lee would receive requests from his supervisors to train more
athletes for upcoming tournaments. Lee would take this opportunity to get these athletes
physically and mentally prepared for tournaments. A lot of the time, Lee finds it difficult
to manage his time to take a break from his coaching to have a bite or have a sip of water
due to him worrying over the results produced in the tournaments from his training
sessions.
Unfortunately, finding a substitute coach for him to have his food isn’t easy. Lee would
have to walk around to identify coaches based on their uniform, and when he finally
found one, they were usually occupied with other athletes. Once the coach is free, Lee
would ask for requests he wanted, and due to the different schedules set by his supervisor,
Lee would have to ask other coaches via WhatsApp about their schedule, which is a very
tedious process as the other coaches don’t give instant replies often.
With the availability of an online food ordering system, Lee no longer needs to ask his
colleagues about their schedules to temporarily replace him in order for him to excuse
himself for food breaks. All he has to do is perform a few clicks on the application via his
phone, and the application will do most of the work for him. Therefore, he can continue
with his coaching while waiting for his order to be delivered to him, and he gets to enjoy
his meal free from the hassles of asking around fellow coaches.
Page 16 of 55
2.4 Environment Analysis

Events for large badminton tournaments are typically held indoors, such the National
Stadium. Even if there is air conditioning and chairs inside, it can still get very hot
because of the masses gathered, which frequently results in a very raucous playing
atmosphere. At least a thousand people may be walking around the stadium at the start or
end of the game, which can be very congested due to the single-entry, single-exit setup
that makes it nearly impossible for people to move freely without bumping into one
another. Many sports fans will congregate to support their favourite team or character.
Buyers must enter the tournament location according to the time slot they paid because
the various events will take place during various timeslots or dates. Buyers must consult
their favourite category indicator to decide which team or individual they are rooting for
in the tournament because there are numerous tournament categories, including singles
and doubles. Additionally, there will be counters and employees on hand to assist
customers or offer additional guidance on buying tickets before entering the stadium.
Page 17 of 55
3. Design & Prototyping

3.1 Preliminary Design
3.1.1 Storyboard Design
Figure 3.1.1 Storyboard Scene 1

Lee is a currently a former renowned badminton player turned coach. As a result
of his accolades achieved by him during his times as a top player, the Badminton
Association of Malaysia (BAM) who had previously hired him as an athlete hired
him as a coach to coach a newer generation of shuttlers who are willing to do
what it takes to excel not only within Malaysia but possibly outside Malaysia.
Page 18 of 55
However, due to the tournaments at national level around the corner Lee find it
hard to allocate his time to sit down and take a bite due to hectic schedule of
training his athletes for the upcoming nationals. As a result, he has been
experiencing gastric pain for the past few days.
Page 19 of 55
Overtime, Lee felt like even though he is going through the same struggle as a
coach every day when he hits the road to go to this training place. At a point he
wanted to throw in the towel not because he’s tired naturally but due to
circumstances imposed by his supervisors on him as a coach. Reflecting through
the years he endures hardships, he felt it’s going to be a disgrace for a former
national athlete to just throw in the towel
Page 20 of 55
As mentioned from the speech bubble in Figure 3.1.3, Lee is determined not to
give up easily as he had experience hardships throughout his days as an athlete.
On one of his days off from work, he thinks aloud over a possible solution that is
deemed efficient and effective to solve his prolonged problems. The solution Lee
had proposed is to use an online food ordering application that will prepare and
deliver his food right in front of him while anywhere and anytime.
Page 21 of 55
After trying out the application, Lee is satisfied that one application that allows
not only himself to enjoy him food while on the go but also on other users who are
suffering the same way as how Lee is suffering. As a conclusion, Lee can go for
his training sessions with an application on hand despite getting himself occupied
with training sessions to train his athletes for tournaments.
Page 22 of 55
3.1.2 Low Fidelity Design
Sign Up
Figure 3.1.2.1 Low Fidelity Design of Sign-Up Page
If Lee is new to ordering food online or he doesn’t have an account

registered, he is required to sign up as a new user by inputting his details
which includes his email address, full name, username, and password. Once
Lee has completed inputting all his details in the textboxes above, he can
proceed in clicking the “Sign up” button for the application to register him as
the application’s user and redirect him to the application’s home page if his
registration is successful. An error message will show up if Lee keyed in one
of the details that may include one of the particular fields required being used
by another user and therefore, he needs to use one that isn’t being used yet by
somebody else.
Page 23 of 55
Login Page
Figure 3.1.2.2 Low Fidelity Design of Login Page
If Lee is an existing user, he is required to login to the application in order to

be redirected to the application’s home page. If he inputs the correct password
that matches his email address, the application will redirect him to home
page. However, if he inputs either his email address or password wrongly, an
error message will be shown that inform Lee that his input that is either his
email address or his password is inputted wrongly by him.
Page 24 of 55
Home Page
Figure 3.1.2.3 Low Fidelity Design of Home Page
After Lee has signed in or logged in, he will be redirect by the application to
the home page of the application. In there, Lee can view various widgets that
will redirect him if he clicks on them to a page containing an array of various
restaurants offering a variety of food and beverages separate by their
categories of cuisine (e.g., Vegetarian, Desserts, fast Food and etc). On top of
the search bar for Lee to search for his favourite restaurant is a section where
Lee’s address will be displayed. To achieve that, he is required to input his
address after signing in so that when he places his order the rider knows
exactly where Lee location by his address.
Page 25 of 55
Food/Beverage Selection Page
Figure 3.1.2.4 Low Fidelity Design of Food/Beverage Selection Page
After Lee has his address set, he will be able to browse a good number of
restaurants to decide what he wants for order. Below the restaurant name Lee
would be able to check an estimate of how long it would take for food to
arrive to his doorstep. After Lee has chosen his desired meals, the application
will navigate him to the food and beverages variation page.
Page 26 of 55
Food/Beverage Variation Page (Add Item to Cart Page)
Figure 3.1.2.5 Low Fidelity Design of Food/Beverage Variation Page
In this variation page the application will give Lee the choice to choose
various types of food and beverages that come with the set. After Lee has
chosen, on the bottom left of the screen the application will allow Lee to add
or delete another set of the same food that he has chosen. After everything is
as Lee wants, he may press the add to cart button which add the selection of
food to the cart for checkout.
Page 27 of 55
View Cart Page
Figure 3.1.2.6 Low Fidelity Design of View Cart Page
The cart page will indicate all the orders that the user has been added to cart.
In this page the application allows Lee to edit his orders (add, delete, change).
The screen will display on empty cart if the user hasn’t added anything food
or beverage into the cart prior to that together with a message that say that the
user hasn’t add anything to the cart yet.
Page 28 of 55
Order Confirmation Review Page
Figure 3.1.2.7 Low Fidelity Design of Order Confirmation Review Page
The order confirmation page will allow for the user to look through all the
order selections and an estimated time of arrival of the driver to delivery
Lee’s food. Other than that, the application also showcases the total sum of
the order and additional fees. Lee may also apply and search for usable
vouchers on the “apply a voucher” to get dedicated offers on his order. Lastly,
Lee may press the “Review payment and address” button and the application
will navigate to the checkout page.
Page 29 of 55
Order Confirm Address & Payment Method Page
Figure 3.1.2.8 Low Fidelity Design of Confirm Address & Payment Method
Page
On the checkout page, the application allows Lee to edit or add his prescribed
delivery address by interacting with the “pencil” button on the right of the
delivery section. Other than that, Lee may add/edit his desired payment
methods (e-wallet, credit card, debit card, PayPal) by pressing on the “pencil”
button on the side of the payment method section. After confirming with the
total cost of the order Lee may press the “confirm” button to finalize his
order.
Page 30 of 55
Finalize Order Page
Figure 3.1.2.9 Low Fidelity Design of Finalize Order Page
And lastly, the finalization of order page will indicate the total cost of the
order and generate an order summary for Lee to double check on his order.
And if everything is as Lee wants, he may press the button to confirm the
order therefore starting the search for drivers around his area and the order
will be sent to the destinated restaurant.
Page 31 of 55
Order Successful Page
Figure 3.1.2.10 Low Fidelity Design of Order Successful Page
If there are no errors to be reported, the application will show the order
success page indicating that the user’s order has been sent to the application
server to be relayed to the restaurant serving the user’s food or beverage. A
unique identification number of the order will be shown in the screen in an
event that the rider went missing in action while delivering the user’s order.
Page 32 of 55
Order Delivery Status Page
Figure 3.1.2.11 Low Fidelity Design of Order Delivery Status Page
After the indication of order is complete, the application will show the order
delivery status page to understand the current state of Lee’s order. This status
is also described in other words the live update of the user’s order that
includes the rider’s estimated time of arrival to the user’s address together
with the rider’s details.
Page 33 of 55
Order Received Page
Figure 3.1.2.12 Low Fidelity Design of Order Received Page
And lastly, if the driver has reached Lee’s destination, the application will
show that Lee’s order has arrived and may go out and collect it from the
dedicated driver.
Page 34 of 55
3.2 Detail Design - High Fidelity Prototype
Sign Up Page
Figure 3.2.1 Low Fidelity Design of Sign Up Page

To be able to use not only use the features of the application but also to make order from
it, Lee is required to register himself as a first-time user if he isn’t a user before that.
Page 35 of 55
Login Page
Figure 3.2.2 Low Fidelity Design of Login Page
If Lee is an existing user prior to that, Lee is required to login to his account using the
credentials of his existing account that includes his username and password. If Lee
forgets his password for a while, he can click the “Forget Password” hyperlink and the
application will redirect him to another page that prompts Lee to input his email address
and the server will send an email to his email address for him to reset his password.
Page 36 of 55
Home Page
Figure 3.2.3 Low Fidelity Design of Home Page
After signing up or logging in, Lee is able to view all the food and beverages offered by
various restaurants. This gives Lee more choices to choose from as this application isn’t
designed in a manner to prove limited choices on the food and beverages selection.
Page 37 of 55
Food/Beverage Selection Page
Figure 3.2.4 Low Fidelity Design of Food/Beverage Selection Page
After browsing through the restaurant that offer the food or beverage that Lee craves, he
proceeds to select it and have a closer look at the food or beverage offered by that
specific restaurant. These includes a la carte meals, set meals, promotion sets and etc that
were found in the page shown the figure above.
Page 38 of 55
Food/Beverage Variation Page (Add Item to Cart Page)
Figure 3.2.5 Low Fidelity Design of Food/Beverage Variation Page (Add Item to Cart
Page)
After choosing what exactly does Lee wants to order based on the previous figure, he
then proceeds to select the variation of his desired food or beverage. After completing his
selection, he then proceeds to add them into the virtual cart. The item will successfully be
added in if the item that Lee selected is available. He must repick his item again if the
initial item he wanted to select isn’t available. This action can be completed by clicking
the ”Add to cart” button.
Page 39 of 55
View Cart Page
Figure 3.2.6 Low Fidelity Design of View Cart Page
Lee can now view the items that he recently added into the virtual cart. This acts as a
checker for Lee so that he can decide whether he wants to keep it or remove it. If he
wants to keep it, he moves on to the next step. If he doesn’t want to keep it, the display of
the virtual cart page will turn the screen into the figure above here unless Lee insists to
browse for more items to be added into his cart by clicking the “Browse” button. After
clicking the “Browse” button, he will be redirect to the page based on Figure 3.2.4.
Page 40 of 55
Order Confirmation Review Page
Figure 3.2.7 Low Fidelity Design of Order Confirmation Review Page
If Lee has completed with his food or beverage variation selection, a partial auto generate
receipt containing the subtotal together with the delivery fee and the overall total cost will
be issued to Lee. If Lee is happy with the result from the figure above, he can proceed
into clicking the “Review payment and address” button to redirect him to another page.
Lee can also backtrack prior to conforming his order by check whatever he had missed
out on. Besides that, an icon denoting a rider with the estimated period for the rider to
reach Lee’s location. The progress of the ordering process is also updated situated on the
top of the screen.
Page 41 of 55
Order Payment Method Page
Figure 3.2.8 Low Fidelity Design of Order Payment Method Page
After confirming the item that Lee wanted to order is correct, Lee will be prompted to
review both his delivery address and the payment method. Lee can also edit his delivery
address and his payment method. Lee can choose from cash, credit card and etc as
method to payment for the order to the rider. Once satisfied with the correct details set by
him, Lee can press the “Confirm Address and Payment” button to proceed to the final
stage of the food ordering.
Page 42 of 55
Finalize Order Page
Figure 3.2.9 Low Fidelity Design of Finalize Order Page
After completing all the previous process of double-checking, Lee is redirected here for
the purpose of himself to do final checks on his order details before he proceeds to click
the “Confirm” button to place his order. The total price is all updated as the service tax is
added in to raise the total price slightly. A message highlighted in red colour is sown
before the “Submit’ is shown for user to agree to all the terms and conditions that were
applied to them.
Page 43 of 55
Order Successful Page
Figure 3.2.10 Low Fidelity Design of order Succesful Page
With the placement of order completed, a new screen with a newer interface will emerge
with the status that says Lee’s order is successful together with a tick logo inside a green
circle. All Lee has to do is to wait for further updates on the status of his order.
Page 44 of 55
Order Delivery Status Page
Figure 3.2.11 Low Fidelity Design of Order Delivery Status Page
As the order preparations progress and soon ready to be picked up by the rider, Lee is
notified on his app that the rider will collect his order and deliver it to his doorstep. The
status will also show the whereabouts of the rider and an icon of a food delivery rider
with the message “Your order is on the way” will be shown.
Page 45 of 55
Order Received Page
Figure 3.2.12 Low Fidelity Design of Order Received Page
If the rider has arrived at Lee’s doorstep, Lee is notified once again on his app on this
agenda. Lee then proceeds to the doorstep where the rider is waiting for him to collect the
order and pay the rider. Then, Lee can enjoy his food or beverage after paying the rider
the amount that was supposed to be given by him. The status now changes to the message
saying “Your order has arrived” and an icon showing cutlery inside a paper bag being
held by the rider.
Page 46 of 55
3.3 Design Decisions

3.3.1 User Needs
Lee uses his persona to demonstrate his proficiency with technology despite being
groomed to be an athlete. Lee favours that system as being quick and effective, as
provisions had been made by him in the event of his schedule as a badminton
coach being hectic. As shown in Figure 3.1.2.1, the online food application
requires Lee to sign up if he’s a first-time user. After he has created an account,
Lee is able to pick what food or beverage to order without being hesitant.
Based on Figure 3.1.2.3, the Home page with all the food and beverages offered
by an array of restaurants will show up if Lee has successfully signed in with his
account. The application will bring Lee to another page displaying the food and
beverages offered by various restaurants on Figure 3.1.2. 4..
Based on Figure 3.12.5–3.1.2.9, Lee can now proceed to select his desired food or
beverage, starting with selecting his order variation and quantity of order, adding
his item to a virtual cart, confirming his delivery address, and selecting his
payment method. Once done, a digital receipt will be automatically generated and
issued to him so he can double check if his order details were correctly captured
by the application. If he is satisfied with the result that the application has
correctly inputted, he can proceed to place his order, or he can go back a step if he
has missed anything out on the ordering process of his items.
Next, a status indicating that Lee’s order has been successfully placed will be
shown. Lee then looks at his phone to know the status of the order in terms of the
whereabouts of the rider assigned to deliver it to his doorstep. Lee will be notified
whenever the rider picks up his order, followed by the rider hitting the road to
deliver his order to the address he set, and concluding with the rider delivering the
order to Lee’s doorstep and subsequently collecting the payment from Lee
himself.
As a result, Lee is able to resolve his problem of having difficulties finding

something to eat while his schedule is tight by just performing a few clicks on an
application.
Page 47 of 55
3.3.2 Usability Goals
One of the goals of fulfilling Lee’s persona is to be able to order what is necessary
for him to consume, so we implemented a variable food or beverage offering a
variety of healthier food selections on this application to achieve system
effectiveness. This motivates Lee when he realises how important it is for him to
eat healthier foods in order to stay fit during his training sessions. We used this
method because it is an effective behavioural psychology methodology for
keeping users returning to the app.
In addition, we implemented a simple design that allows users to view their order
history while minimising the time and effort required to navigate around the
application. Lee will be able to view and reorder his past orders all on one page,
eliminating the need to navigate to multiple pages just to find those specific
variations of food or beverages. He can see his order details, which include the
variation that was selected from the food or beverage’s content, all on one page.
We were able to incorporate a few of Shneiderman's 8 Golden Rules into our

online food ordering application to ensure our application design interfaces are
great, productive, and frustration-free.
Page 48 of 55
• Strive For Consistency
Figure 3.3.2.1 Home Page
Home Page Navigation

When users view their home page after logging in or signing up, all the buttons
and user interface for the online food ordering application are all about striving
for consistency by designing similar situations and sequences of actions using
familiar icons, colours, call-to-actions, and user flows.
On the section after the search bar for shops & restaurants and cuisine section,
users will see the buttons redirecting them to pages offering the food or
beverages from various restaurants with the same design. User can also click
the button as a 3 horizontal line button on the top left of the screen to be
redirect to a side menu containing the other option that users can do such as
viewing the order history, etc.
Page 49 of 55
There is also a shopping cart icon on the top right of the screen as it will
redirect users to a virtual cart page based on Figure 3.1.2.6 and the items that
the users had pending orders to be completed will be shown if they were added
by the users previously.
Page 50 of 55
• Permit Easy Reversal of Actions
Figure 3.3.2.2 Order Payment Method Page
In an event that the user may have missed the earlier process of ordering
his/her food or beverage or the user did not realize until the checkout process
whereby he/she had inputted one of the details in the ordering process
incorrectly. With the arrow button indicated on the top left screen on the figure
above, the user can backtrack to the earlier stages of the ordering process to
find that specific area that he/she had missed out earlier and rectify it.
Page 51 of 55
• Reduce Short-Term Memory Load
Figure 3.3.2.3 View Cart Page
Based on one of Shneiderman’s Eight Golden Rules, displays must be

maintained straightforward and multiple-page displays must be integrated due
to the short-term memory capacity of humans.
Since human attention spans are short, our short-term memory can only hold
around five things at once. Interfaces should therefore be as straightforward as
feasible, with adequate information hierarchy and a preference for recognition
over recall. Because recognition requires recognizing clues that enable us to
access our extensive memory and enable relevant knowledge to the surface,
recognition is always simpler than recall.
For example, the figure above shows the cart page of the online food ordering
application. Users can add their items into the cart by selecting their variation
and adding them into the cart and don’t need to worry as the unfinished item in
the cart will be there unless he/she opts to remove it permanently.
Page 52 of 55
3.3.3 Cognitive Issues
The human mind interprets environmental inputs as a totality rather than as

individual pieces. We have adopted several grouping principles from Gestalt's
Law of Perception to develop a system that is mindful of users' cognitive
processes.
• Proximity
Figure 3.3.1 Home Page
We made sure to keep our design consistent throughout the online food
ordering application. By using the law of proximity, it was crucial to place
related elements near each other and unrelated elements apart from each other.
For example, the interface design for users to select their type of services and
food or beverage by cuisine category. Different cuisine categories are
displayed close to each other in rows and the buttons for the selected cuisine
are bigger in size together with an image depicting the cuisine are designed in
such a manner it prevents users from accidentally pressing the wrong cuisine
button.
Page 53 of 55
• Similarity
Figure 3.3.2 Food/Beverage Variation Page
Clear, consistent visual guidelines for each UI (user interfaces) element on our
homepage is critical for making the design easy to understand and use. This is
because each interaction shapes users' expectations of how other similar
elements will function. This page shows a page containing the food or
beverage variation selection for each meal set from every restaurant. The
designs for each variation section must remain similar for users to quickly
identify the bar as the food or beverage variation selection progresses.
Page 54 of 55
• Metaphors
Figure 3.3.2 Buttons on the Home Page
Metaphors have also been applied to explain the controls that users might be
accustomed to. At the top section of the Home page of the application, icons
with different logos are used to describe the features. It acts as a navigation
panel with common icons throughout to symbolize a specific function that
most users are familiar with. This is effective because it encourages
recognition rather than recall. For example, the shopping cart icon will indicate
to the user to access the virtual cart page, and the search icon in the search bar
would indicate to the user to input a restaurant name to be redirect to the
food/beverage page. The 3 horizontal lines icon will lead users to the side
menu page containing the settings and etc. And last but not least the section
after the search bar containing the button that consists of a chicken icon, ticked
icon and a shop as food delivery, pick-up and shops respectively is where users
can view the icons and click on them if they wish to place an order on the
application.
Page 55 of 55

HCI (Group 4)

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI (Group 4)

Uploaded by

Copyright:

Available Formats

Sunway College DIIT Human Computer Interaction

DIPLOMA IN INFORMATION TECHNOLOGY

Subject: HUMAN COMPUTER INTERACTION

Goh Chun Xin 20056388

Name Signature Date

Goh Chun Xin 19-11-2022

Jung Kamchan 19-11-2022

Max Liew Zee Kit 19-11-2022

Wong Hoe Yin 19-11-2022

Group Member Contribution Form

Group Name: Group 4

Student Name Student ID Signature Role & Responsibilities

Proposal (PACT Analysis on Activity &

1.2 PACT Analysis

1.1.1.2 User Characteristics

• Abilities to Know Their Desired Food/Beverages

1.1.3.1 Environmental Context

1.1.3.2 Order Food Ordering Application

1.1.4.3 Internet Technology

1.2 Usability Goals

In addition, the smartphone application allows customers to order food from

For a programme to keep a high number of users, design is essential. From a

Figure 2.1 Persona

2.2 Task Analysis of Current Task

Figure 2.2 HTA

2.3 Scenario of Current Task

2.4 Environment Analysis

3. Design & Prototyping

Figure 3.1.1 Storyboard Scene 1

Figure 3.1.2 Storyboard Scene 2

Figure 3.1.3 Storyboard Scene 3

Figure 3.1.4 Storyboard Scene 4

Figure 3.1.5 Storyboard Scene 5

3.1.2 Low Fidelity Design

Figure 3.1.2.1 Low Fidelity Design of Sign-Up Page

If Lee is new to ordering food online or he doesn’t have an account

Figure 3.1.2.2 Low Fidelity Design of Login Page

If Lee is an existing user, he is required to login to the application in order to

Figure 3.1.2.3 Low Fidelity Design of Home Page

Food/Beverage Selection Page

Figure 3.1.2.4 Low Fidelity Design of Food/Beverage Selection Page

Food/Beverage Variation Page (Add Item to Cart Page)

Figure 3.1.2.5 Low Fidelity Design of Food/Beverage Variation Page

View Cart Page

Figure 3.1.2.6 Low Fidelity Design of View Cart Page

Order Confirmation Review Page

Figure 3.1.2.7 Low Fidelity Design of Order Confirmation Review Page

Order Confirm Address & Payment Method Page

Finalize Order Page

Figure 3.1.2.9 Low Fidelity Design of Finalize Order Page

Order Successful Page

Figure 3.1.2.10 Low Fidelity Design of Order Successful Page

Order Delivery Status Page

Figure 3.1.2.11 Low Fidelity Design of Order Delivery Status Page

Order Received Page

Figure 3.1.2.12 Low Fidelity Design of Order Received Page

3.2 Detail Design - High Fidelity Prototype

Figure 3.2.1 Low Fidelity Design of Sign Up Page

Figure 3.2.2 Low Fidelity Design of Login Page

Figure 3.2.3 Low Fidelity Design of Home Page

Food/Beverage Selection Page

Figure 3.2.4 Low Fidelity Design of Food/Beverage Selection Page

Food/Beverage Variation Page (Add Item to Cart Page)