HCI Group and Individual Assignment

GROUP ASSIGNMENT
HUMAN COMPUTER INTERFACE
CT026-3-2-HCI
PETROSAINS: THE DISCOVERY CENTRE
INTAKE CODE:APU2F2008MKT(DM)
LECTURER: RIZAWATI BINTI ROHIZAN
Group 17 members name

KAREN KANINI NZIOKI TP056953
JALNA EMMANUELLA MARY TP057011

ISAAC
DAYNA HELENA VOZZA TP055266
LEE JIALE TP051935
1
TABLE OF CONTENT
GROUP COMPONENT.........................................................................5INTRODUCTION
5OBJECTIVES.....................................................................7PROBLEM STATEMENT
7PROPOSED SOLUTION..............................................8INDIVIDUAL COMPONENT
91.0..................................................................................... STAGE 1: User profiling and Task Analysis
91.1................................................................................................................................................... Introduction
91.2............................................................................................... Stakeholder identification and Analysis
91.3................................................................................................................... Data Gathering and Analysis
111.3.1....................................................................................................................... Data collection Method
111.4.................................................................................................................................... Analysis of Result
151.5................................................................................................................................................ Observation
291.5.1....................................Analysis and conclusion of Interaction with The Discovery Centre.
291.5.2........................................................................................... Analysis and Conclusion of Ticketing
291.5.3.................................................................Analysis and Conclusion of Social Media Platforms
291.6................................................................................................ User Profile Table and Requirements
301.6.1................................................................................................................................. User Profile Table
301.6.2............................................................................................................................... User Requirements
301.7................................................................................................................... Hierarchical Task Analysis
312.0.........................................STAGE 2: Usability, Design guidelines and Competitive Analysis
372.1................................................................................................................................................ Introduction
372.2.......................................................................................................................................... Usability Goals
37
2.2.1 Usability Goal 1 – Learnability.................................................................................37
2.2.2 Usability Goal 2 – Subjective Satisfaction.................................................................38
2.3 Design Principles...............................................................................................382.4
Competitor Analysis...........................................................................................423.0
STAGE 3: Parallel Design, Participatory Design and Prototypes..............................463.1
Introduction.......................................................................................................463.2
Sketches......................................................................................................... 463.2.1
Log in page............................................................................................................ 46
3.2.2 Sign in page........................................................................................................... 47
3.2.3 Main page.............................................................................................................. 48
3.2.4 Hamburger Menu page............................................................................................49
3.2.5 Navigation center page............................................................................................50
3.2.6 Ticket price & Payment page...................................................................................51
3.2.7 Terms and Condition page.......................................................................................52
3.2.8 Feedback page........................................................................................................53
3.2.9 Visiting hour page...................................................................................................54
3.3 Participatory Design.........................................................................................553.3.1
Card sorting Technique............................................................................................55
2
Prototype........................................................................................................... 604.0
3.4
Stage 4: Formative Evaluation.............................................................................664.1
DECIDE Framework........................................................................................664.1.1
Determine the goals................................................................................................66
4.1.2 Explore the questions..............................................................................................66
4.1.3 Choose the evaluation Paradigm and Activities..........................................................68
4.1.4 Identify practical issues...........................................................................................68
4.1.5 Decide to the ethical issues......................................................................................69
4.1.6 Evaluation, Analyse, Interpret and Present the data.....................................................69
4.2 Usability Testing & Report.............................................................................704.2.1
Usability instructions for General Public..........................................................704.2.1.1
Task 1- Logging into Petrosains Mobile Application...................................................70
4.2.1.2................................................................................................... Task 2- Explore Terms and Conditions
70
4.2.1.3................................................................................................................... Task 3- Explore the Petrosains
71
4.2.1.4...................................................................................................... Task 4- Explore the navigation centre
71
4.2.1.5.................................................................................................................... Task 5- Explore visiting hours
71
4.2.1.6.......................................................................................................... Task 6- Explore ticket and payment
71
4.2.1.7...................................................................................................................... Task 7- Explore the feedback
72
4.2.1.8.........................................................................Task 8- Explore the social media pages of Petrosains
72
4.2.2 Usability Testing Report..................................................................................724.2.2.1
Introduction............................................................................................................ 72
4.2.2.2....................................................................................................................................... Executive Summary
73
4.2.2.3.................................................................................................................................................... Methodology
74
4.2.2.4................................................................................................................................................................ Results
76
4.3 Heuristic Evaluation 774.3.1 Introduction 774.3.2 Details finding 784.3.3 Executive
Summary 824.3.4 Impact 824.4 Subjective Satisfaction 834.4.1 Introduction 834.4.2 Results
86REFERENCE 90Appendix 91Project plan 91Workload Matrix 92Project
Summary 94Report Date94Project Name 94Prepared By 94Status Summary
94Project Overview 94task 94% Done 94Due date 94Prepared by
94notes 94Issue history 95issue 95ASSIGNED TO 95DATE
95CONCLUSIONS/RECOMMENDATIONS 95Project Summary 95Report Date
95Project Name 95Prepared By 95Status Summary 95Project Overview
96task 96% Done 96Due date 96Prepared by 96notes 96Issue
3
history 96issue 96ASSIGNED TO 96DATE
96CONCLUSIONS/RECOMMENDATIONS 96
4
GROUP COMPONENT
INTRODUCTION
5
A subsidiary of PETRONAS, Petrosains Sdn Bhd, is one of Malaysia’s operational multinational
oil and gas group, which oversees and manages the market and visiting activities of the country’s
two unique institutions, Petrosains, The Discovery Centre and the PETRONAS twin towers
(PETROSIANS, 2020). Petrosains, The discovery Centre, immersive and conceptual, is
everything a science center should be. It is the extension of PETRONAS’ dedication to nation-
building with exhibits, in-reach and outreach events that make STEM learning fun, by cultivating
the interest in STEM and driving the emergence of a new generation of science and technology
and science, innovative-inspired Malaysians. However, it is just one important component of the
goal of Petrosains Sdn Bhd to nurture an ecosystem with future-forward education.
At the Discovery Centre, learning is never dull. Contact, experience, and witness exploration
with their immersive displays and come face-to-face with science through their events, seminars
and shows enticing unprecedented opportunities. However, there is always something new to
explore each time their travelling exhibits and special themed events.
With the current situation of the pandemic and the close down of The Discovery Centre, users
remain alert of all information and announcements on the Petrosains website and get to see the
latest updates. However, on the Petrosains website, users can plan their visit. This includes
getting to the Centre, admission & ticketing, receive promotion, know more about the facilities
and the accessibility and many more. Secondly, they can know what is happening, in terms of
discovery Centre activities, workshops, competition and events, outreach programs, PETRONAS
Street-smart and Petrosains Play Smart. Thirdly, they can join and support the Petrosains by
simply hosting an event or becoming an intern. They also have the advantage in job opportunities
and many more. Users can also discover more about the Discovery Centre on its other social
media platforms, such as Facebook, Instagram, YouTube, and twitter.
6
OBJECTIVES
● We will design a well-rounded mobile application for Petronas in order to provide a more
user-friendly and convenient platform for customers to have access to all the necessary
information on their mobile device.
● To enable customers to be able to purchase admission tickets in advance as well as have

an in-built location detector to enhance safety measures at Petronas.
PROBLEM STATEMENT
Understanding that the old ticketing system of Petrosains Discovery Centre (physical purchase
ticket and website purchase ticket) is no longer keeping up with the current technology. There
are several problems that need to be solved by Petrosains to ensure that the company’s operation
will not be eliminated by time.
Old ticket purchase system
Along with the technology of electronic wallets and online purchase in mobile applications
becomes more and more common, people will have less demands for physical money in the
future. Therefore, the old ticket purchase system of Petronas needs to be improved and innovated
to meet current people needs. The old ticketing system required people to go to the counter to
line up and buy the tickets. This will cause some tourists to be reluctant to come experience the
facilities of Petrosains.
Inconvenient to check availability
With the popularity of smartphones, people are becoming more and more dependent on
smartphones, they will use the mobile app to plan their next itinerary such as booking a
restaurant for dinner with a mobile app. Hence, when Petrosains cannot provide tourists with the
convenience of checking availability on mobile apps, it will cause some tourists to go to
attractions that provide these conveniences.
7
Tourists cannot quickly obtain first-hand information
In general, when most tourists go to travel in other countries, they only bring their smartphones.
Therefore, when tourists want to obtain the information of Petrosains such as upcoming events
and latest promotions, they can only get from the official website. This will greatly reduce
convenience for tourists to obtain the latest information of Petrosains.
PROPOSED SOLUTION
The proposed solution for Petrosains, The Discovery Centre is to create a mobile application to
enable users to make their ticket payments on their smartphones as it will be more convenient. It
will also be able to provide the necessary information about Petrosains for the users such as
checking the viewing availability and even the number of viewers who are able to book a slot in
a day. The application will have information on navigation of the Discovery Centre to enable the
tourists to be able to find their way in and out of the Centre.
The application will also have features of showing timings of rides, price of the tickets and
operation days and time. Within the application, there will be a Notification Centre whereby the
users will be able to find information on the latest updates of Petrosains.
8
INDIVIDUAL COMPONENT
1.0 STAGE 1: User profiling and Task Analysis
1.1 Introduction
The essential reason of this stage is to allow the application designing group on what precisely is
wanted to be executed to the application to be built, how the design may be and who may be the
user of the application. All those may be protected below by the use of exclusive strategies such
as stakeholder analysis, user profiling and task analysis.
1.2 Stakeholder identification and Analysis
According to Landau (2017), described stakeholders as either a person or corporation who is

negatively or positively stricken by an outcome of any task, and they may be actively concerned
within the task, making their interests probably inside or outside the corporation hosting the task.
From the above definition, it is easy to summarize that stakeholder evaluation is an overview of
the strategies or strategies used to look for the wishes of particular human beings inside or
outside the task environment. Stakeholder evaluation blessings encompass risk identity,
decreasing terrible evaluation after the assignment is done, makes it less complicated to install
vicinity higher techniques and clever choices and enables in know-how the human beings
stricken by the trouble with the aid of giving appropriate solutions.
Primary stakeholders: are individuals who gain directly from the task, as they are the reason
the challenge is put in place.
Secondary stakeholders: consist of people or companies with pursuits within the place being
wondered as they are not directly concerned through the challenge.
Tertiary stakeholders: those are different from primary or secondary stakeholders due to the
fact their hobby comes from positives or negatives administered through the company.
9
Stakeholders Justification
Primary (Novice) Tourists are the main users as they purchase tickets to view
the attraction site and also learn more about what is within the
Tourists
discovery Centre.
Students tend to directly gain from the application as the

educators purchase tickets for them in order to learn more
Students about objects that may be mentioned in the syllabus.
Conservators use information they gain to help inform and

document any conservation treatments performed on objects.
They reference important object information such as material
Conservators type, and review any previous work done. Once they have
completed conservation or restoration work, the conservator
will update an object’s information to help inform future
conservation work. They support object reports that provide
areas where conservation information can be easily stored and
retrieved by relevant staff.
Secondary
(intermediate)
The management will get the reports from the system and they
Management will also get the payment details of the customers. They have
the ability to get the tickets available and the ones already sold
in a day.
10
Tertiary Each provider wants to attract customers more to their
products or service and therefore use various methods to
Competitors
attract the customers to their attraction site. This system is also
a part of high-end technology. If the system is successful and
efficient then more customers will be attracted to the centre
and competitors such as My Langkawi and KL Tower
Malaysia applications will be affected by it.
1.3 Data Gathering and Analysis
1.3.1 Data collection Method
Data is critical for task management because it acts as a stronghold for each choice made
throughout the task. Collected statistics should be organized clearly so that the evaluation of the
outcomes will display the task managers to recognize the stakeholders, especially primary
stakeholders. Data collection and evaluation allows stakeholders. Data collection and evaluation
makes it smooth to apprehend the different choices of our customers as a result, saving time
through just specializing in the preferred specifics. For this assignment, surveys can be used
particularly questionnaires for statistics collection from potential users and because of COVID-
19, and the Controlled Movement Control Order (CMCO) placed in Malaysia online
questionnaires seemed more appropriate as no physical contact is required. Online questionnaires
save time as many questionnaires are virtually distributed and money which is going to be used
to travel from location to location. More so, a bigger sample may be used to make sure the
validity and reliability of outcomes. However, regardless of the benefits above, questionnaires
can deliver faulty statistics because of dishonest answers or any misinterpretation of the
questions and therefore, observation will also be implemented as a data collection method.
11
Sample Questions
1. What is your gender?

a) Female
b) Male
2. What is your age?
a) 15-20 years old
b) 21-30 years old
c) 31-40 years old
3. What is your current occupation?
a) Student
b) Lawyer
c) Doctor
d) Other
4. How often do you visit Petronas?
a) Once a year
b) Once a month
c) Twice a week
d) Other
5. How long do you wait to buy tickets at Petrosains during your visit?
a) Less than 30 minutes
b) More than 30 minutes
c) More than an hour
d) Other
6. How do you find the existing tour package provided by Petrosains?
a) Average
b) Perfect
c) Can be improved
7. Do you think that by using the app it would be easier to navigate around Petrosains?
a) Yes
b) No
c) Maybe
12
8. Do you prefer to read articles or watch videos?
a) Articles
b) Video
a) No
b) Maybe
9. Do you have a strong mobile data signal inside Petrosains?
a) Yes
b) No
c) Sometimes
10. Do you have any disabilities?
a) Yes
b) No
11. Do you make use of smartphones when visiting Petrosains?
a) Yes
b) No
12. Do you share pictures taken in Petrosains on social media?
a) Yes
b) No
13. Have you used a QR code scanner previously?
a) Yes
b) No
14. How do you find The Discovery Centre user interface?
15. How easy is it to access information from their website?
13
Domain
Interaction wit
Observation 1: H
their way inside
Observation 2: H
interact with the
Observation 3: H
make use of the
interaction with
Ticketing
Observation 1: H
queueing to pur
Observation 2: W
by visitors durin
Social media p
Observation 1: H
upload videos a
about The Disco
Observation 2: H
pictures taken in
social media?
1.4 Analysis of Result
14
Justification: This question is asked to find out about the responder’s gender
Analysis: From the analysis, we can conclude that most of the responders are
females with 85.7% and then males with 14.3%.
Impact: The question is more towards acquiring user profile data. In conclusion,
the females are majority.
Justification The question is asked in order to find out the age of the responder.
Analysis After the analysis, it is found out that the age range of 21-30 years old
are the major participants, with 85.7% and the age range of 15-20 years
old with 14.3%.
Impact The user profile data will be derived from this question. At the end of
the analysis, we concluded that the application will be designed for
adults as most responders are above the legal age of 18 years old.
15
Justification The purpose of the question is to find out the responder’s occupation.
Analysis After analysis, we found out that students were the major participants.
Impact The analysis will be used to derive the user profiling data.
Justification The purpose of the question is asked for the purpose of finding out how
often the responders visit Petrosains
Analysis After analysis, it is concluded that most responders with 42.9% visit
Petrosains once a year, while 42.9% visit at other times and the least
visit Petrosains once a month.
16
Impact The purpose of the question is to derive the user profiling data.
Justification This question is asked to find out how long the responders wait to buy their
tickets.
Analysis We concluded after the analysis that majority of the responders wait more
than 30 minutes.
Impact From this data, we will add an online ticketing system in the application.
Justification This question is asked to find out the satisfaction of the responders
towards the current tour packages by Petrosains
Analysis After the analysis, 57.1% which are the majority of the responders find
it average, while 42.9% say it can be improved.
Impact The information collected will assist in adding new and improving the
17
packages offered to the visitors.
Justification The question is asked to find out if the responders would find it
easier to navigate Petrosains.
Analysis After analysis, 85.7% of the respondents agree that it would be

easier to use an application, while 14.3% of them are not sure.
Impact Since most responders agree that the use of a navigation feature
would make it easier during their visit, the navigation feature
will be included in the design of the application.
18
Justification This question is asked to the responders if they prefer articles or
watching videos.
Analysis After analysis, we conclude that most of the responders prefer watching
videos to reading articles.
Impact Since the responders find it easier to watch videos, the feature will be
added to the application as a way of informing the user of the updates or
information that needs to be put across.
19
Justification This question is asked to find out if the responders have connection when
inside Petrosains
Analysis From the analysis, we conclude that most responders, 57.1% get a good
connection while 42.9% sometimes get a connection and sometimes do
not.
Impact After obtaining this analysis, the application will be accessed both offline
and online in case there is no connection.
20
Justification This question is asked to the responders to
find out about their disabilities.
Analysis After the above analysis, it is found that

responders non responders have disabilities.
Impact This question is more to find the user profile

data. Due to this, it is not necessary to have
the use of sign language added to the new
application.
21
find out if they use smartphones when making
their visit to Petrosains.
Analysis After analysis, we conclude that most

responders use smartphones during their visit
to Petrosains.
Impact Because most of the responders use

smartphones, the application should be able to
keep track of the location of the user to assist
them to find their ways to a certain area.
22
Justification This question is asked to the participants to
find out whether they have use a QR code
scanner previously.
Analysis After analysis, we concluded that most

responders are familiar with the QR code
scanner.
Impact As most users are familiar with using QR

scanner, the new application will have the
feature of scanning QR codes using the phone
camera.
23
Justification This question is asked to the responders to find out if they share
photos taken in Petrosains: The Discovery Centre on social
media platforms.
Analysis After this analysis, it is found that most responders,75% do not

share their pictures on their social media pages, and only 25%
share on their pages.
Impact As most people do not share content on their socials, the

application would have to have a feedback and sharing page to
increase the number of users. The few people who share on
social media with their following, will make the new application
have a direct link with Facebook and Instagram.
24
find out about the user interface of The
Discovery Centre website.
Analysis After analysis, it is found out most

participants found the user interface to be
poor, unattractive colors have been used.
Impact As most of the responders did not like the user

interface, the new proposed system should
consider having a user interface that is user-
friendly.
25
Justification This question is asked to the responders
concerning the reliability of the website.
Analysis After analysis, it is found that most

responders, 58.3% found the website
somehow reliable as some information is
available while some is complex to use.
Impact From the analysis, the present system is not

quite reliable yet and therefore the complexity
of this system should be reduced by making
the new application simple and with
information that is understandable.
Observation for The Discovery Centre: Petrosains
26
Domain Observation Findings
Interaction with The Discovery Centre This observation is performed to find out
concerning the familiarity of Petrosains to the
Observation 1: How well do the visitors visitors.
know their way inside Petrosains?
Observation 2: How well do the visitors 1. The visitors asked about the exhibition room or
interact with the exhibitions and events? location of event.
Observation 3: How much do the visitors 2. The visitors asked the staff for directions.
make use of their smartphones to have an
interaction with the exhibitions? 3. The visitors made use of their smartphones to
capture moments and pictures.
4. Visitors has to search on google for information

about attractions.
5. There’s very minimal interaction between The

Discovery Centre activities and the smartphones of the
visitors.
Ticketing This observation is performed to find out how the

visitors purchase their tickets.
Observation 1: How much time is wasted on
queueing to purchase tickets? 1. Time is wasted in queueing to purchase tickets.
Observation 2: What are the limitations faced 2. Staff members at times have a hard time
by visitors during purchasing of tickets? understanding what the visitors are enquiring due to
language barrier.
Social media platforms This observation is undertaken to find out how

often visitors use social media when visiting
Observation 1: How often do the visitors Petrosains: The Discovery Centre.
upload videos and pictures on social media
about The Discovery Centre? 1. Most of the visitors use Instagram, Snapchat, Tik
Tok and Facebook to share videos and photos
Observation 2: How do the visitors upload
pictures taken in The Discovery Centre into Visitors should choose photos from their gallery in
social media? their phones to upload on social platforms.
27
1.5 Observation
1.5.1 Analysis and conclusion of Interaction with The Discovery Centre.
Most users tend to use smartphones to take photos and videos. Also, there is a lack of
information about the Discovery Centre which made the visitors search on the internet for more
information. The visitors struggle when it comes to finding which direction they should go for
different activities and exhibitions. In conclusion, the mobile application must be inclusive of
interfaces to assist the visitors to interact with the Discovery Centre. When the visitors scan the
Discovery Centre QR code, they should be able to access information on the application
interface. Lastly, a map in the application would assist the users to find their way around.
1.5.2 Analysis and Conclusion of Ticketing
It is so inconvenient to purchase tickets by queueing and wasting a lot of time. Also, more delays
may come up when the staff members communicate with visitors who speak many languages. In
conclusion, the application should consist of interfaces that a user can purchase a ticket online
and also make any bookings or purchase related to The Discovery Centre. In addition, the
languages used in the application should be understandable by the users.
1.5.3 Analysis and Conclusion of Social Media Platforms
The visitors use social media platforms mainly like Instagram, Snapchat, and Facebook to upload
contents. In conclusion, the application should involve interfaces to allow visitors to take photos
with their phones which will be saved in the gallery. Also, the application should be able to
allow users to upload pictures directly to social platforms.
28
1.6 User Profile Table and Requirements
1.6.1 User Profile Table

Participants
Gender 85.7% female
14.3% male
Age 85.7% (21-30)
14.3% (15-20)
Occupation Majority is students.
Nationality Locals, Foreigners
Technology Internet connection is available.
Disabilities No specific limitation.
Primary languages English, Chinese, Malay
Family Majority is single.
1.6.2 User Requirements
Additionally, to the user profile table, there are certain requirements that will be almost the same
for every user. The requirements are collected from the responses of the questionnaire conducted
during data gathering process.
➢ Download the application.

➢ Create an account
➢ Log in
➢ Navigate to Activities Page
➢ Purchase the ticket
➢ Make an online payment
➢ Navigate to map page
➢ Provide Feedback
➢ Edit/ delete profile
1.7 Hierarchical Task Analysis
29
Hierarchical Task Analysis (HTA) includes making an examination of how users perform a
group of tasks to make an achievement on an object or aim. It gives the ability to conduct proper
exploration of several approaches that could be contemplated to finalize on the tasks with an
improved and new system. Below is the hierarchical task analysis that is performed concerning
Petrosains, The Discovery Center:
 Viewing of the activity Petrosains, The Discovery Center details.
It involves several steps carried out by the users to see various activities and the information
related to the activity.
 Make Payment
Steps carried out by the users are involved to make payments when visiting The Discovery
Center.
 Provide feedback
This is inclusive of steps conducted by the users to share experiences or provide feedback.
Task Analysis 1: Membership Registration
0. To register membership
1. Collect a form at the counter.
2. Fill up the given form.
3. Submit.
4. Receive the membership card.
Plan 3: Do 3 if 1,2 is completed.
30
Matrix
Critically Difficulty Frequency
L L M
Collect the form
Fill up the form L H M
Submit L L L
Receive membership L L L
card
From the analysis above, the mentioned exercises are quite tiring to both clients and staff of
Petrosains and is likely that the filled form could even go missing. Therefore because of this, a
registration page will be added to the new application to ensure user details are intact and to save
on time. They will also receive e-member card in case they forget to carry the physical card.
Task Analysis 2: Booking Facilities
0. To book facility by members

1. Walk into counter or via phone call.
2. Provide member ID/ IC No/ Passport No.
3. Availability on slot, date and time checked by staff.
4. Provide booking details.
4.1 select age.

4.2 select date.
4.3 select time.
4. Availability on slot, date and time checked by staff.
5. Confirm booking.
Plan 4: Do 4.1,4.2,4.3 if 3 is available.
31
Matrix
Walk into counter / Via L H H

phone call.
Provide NIC/Passport L H H
No.
Availability of date and H M H
time check by staff
Select date and time L M H
Choose an available slot L M H

for visit based on
booking time and date.
Provide membership ID L L H
From the above Hierarchal task analysis, we see that the current booking process caused
problems and is also time consuming. Appointments by means of mobile phones are relying
upon the network connection. At times, there might be no final confirmation of appointments
being made. Due to this, we will update this in the new proposed application, for example,
remove certain actions to encourage the booking procedure to be more viable.
Task analysis 3: Make Payment.
0. Make payment
1. Go to counter.
2. Wait for your turn.
3. Provide payment information to cashier.
4. Select payment method.
4.1 Cashless payment

4.2 Cash payment
5. Collect receipt.
32
Plan 4: Skip 4.1 if user is paying by cash.
Skip 4.2 if user is doing cashless payment.
Matrix
Make payment H M H
Wait for your turn. H L H
Provide payment information H M H

to cashier
Select payment method H L H
Cash H L H
Cashless H L H
Collect receipt from cashier H L H
From the Hierarchal Task Analysis above, it is quite inconvenient for the users to waste time
queueing to make their payments. Also, at times the cashier may face problems such as system
running low or even language barrier. Therefore, the new proposed application should have a
Ticketing/ Payment page to allow users to make online bookings and payments by visa, credit or
Mastercard to save on time and for the convenience of the staff to reduce long queues at the
Discovery centre. The language to be considered in the application should be easily understood
by most of the users: English, Bahasa.
Task Analysis 4: Provide Feedback
0. Provide Feedback
1. Go to Petrosains: The Discovery Center website
2. Click on feedback button.
3. Fill in the feedback form.
33
3.1 Select type of feedback.
3.1.1 Enquiry
3.1.2 Suggestion
3.2 Insert feedback Title.
3.3 Insert Feedback Details
3.4 Insert Full name
3.5 Insert Age.
3.6 Insert Nationality.
3.7 Insert mobile number.
3.8 Insert email address.
4. Click on confirm button.
Plan 3: Do 3.1-3.8 in any order
Plan 3.1: Do either 3.1.1 or 3.1.2
Matrix
Critically Difficulty Description
Provide feedback
M M M
Go to Petrosains: The
Discovery Centre website. H L H
Click on feedback button.

H M H
Fill in the feedback form.

H M H
Select type of feedback

H M M
Enquiry
H M M
34
Suggestion
H M M
Insert feedback title

M M M
Insert feedback details

H L H
Insert full name

H L H
Insert age
H L H
Insert nationality
H M H
Insert mobile number

H M H
Insert email address

H L H
Confirm booking
H L H
In order to provide feedback on the Petrosains website, the users have to fill in several details,
this is recurrent as they have to do this each time, they visit The Discovery Centre and would
love to leave a feedback which is quite irritating and consumes too much time. Due to this
analysis, the proposed application should be able to enable users to provide feedback and ratings
in a convenient way. The feedback page should be able to allow users to rate from 5 to 0 using
symbols (star) as well as provide written feedback/ comments. There will be no additional
information required as the users’ details will be saved upon signing in/ registration.
35
2.0 STAGE 2: Usability, Design guidelines and Competitive
Analysis
2.1 Introduction
The reason for this stage is to identify and select the usability goals that will be assigned towards
the new UI. The design principles/guidelines that will be used in achieving each usability goal
will also be proposed. Finally, a competitive analysis will be done to compare from the design
perspective and interaction style.
2.2 Usability Goals
Generally speaking, the term ‘usability’ is used when thinking about how and why people use a
certain product, although it is usually referring to a software. The first step that would go into
creating a usable product is by understanding these goals in the same context as the user’s needs
and then reflecting these needs in the design. These are simple principles that will allow the
developers to follow in order to achieve a greater usability. Based on the research and analysis
conducted in Stage 1 of this report, the two usability goals that have been chosen for the
proposed system are Learnability and Subjective Satisfaction.
2.2.1 Usability Goal 1 – Learnability
Learnability is known as the quality of interfaces that will allow the users to become familiar
with it fairly quickly, as well as make great use of the given features and capabilities in a short
period of time (Wigmore, 2016). The learnability goal is chosen due to the fact that this
application is made for popular known attractions. As stage 1 suggests, the stakeholders consist
of a wide number of users and demographics such as tourists and students from all backgrounds.
Hence, it is best to bear in mind that one of the goals is to make sure it is easy to use and to be
learned by every user and not just a certain minority, hence helping with faster system
onboarding and lower training costs. Also, considering the fact that the users are not familiar
with Petronas, therefore it is important to make the application look and feel as intuitive as
possible because this way the user can grasp how to interact with the new system. Moreover, the
aim is to also introduce new features for Petrona’s through this app such as the online ticketing
and a navigation system. These are other reasons as to why learnability is our chosen usability
36
goal because these new features should be simple enough to be learnt how to use by the users.
When the user feels like they can have so many benefits from one application, they will consider
it to be very efficient. By doing this, in turn they can feel satisfied with their overall experience
at Petrosains itself.
2.2.2 Usability Goal 2 – Subjective Satisfaction
Subjective Satisfaction basically refers to how pleasant it is to use a system. This can refer to
factors such the entertainment value offered on the system and the speed in which it takes things
to get done. In principle, subjective satisfaction can be measured by simply asking users for their
own subjective opinion. The overall purpose of having a subjective satisfaction usability goal is
to assess whether or not users like the system so therefore, multiple replies from different users
can be averaged together to measure the pleasantness of the system. Small questionnaires and
scale ratings (e.g. numeric scales from 1 to 5) where users can rate their experience on the
application can be given after the users have had a chance at testing it (Nielsen, 2010). Again,
bearing in mind this application will consist of new features such as online ticketing, navigation
systems and from the data analysis shown in Stage 1 some additional features such as “e-wallet”
and “promo codes” were also suggested. With the implementation of all these features, it would
only be appropriate to get feedback from users to see if they are pleased with them all. Every
user enjoys ‘convenience’ and with all these features effectively running under one application, it
is only right to ensure they are working in a way that does just that for them all. Subjective
satisfaction as a usability goal will ensure constant improvement for the application is strived for
to maintain efficiency.
2.3 Design Principles
Web designers use principles to address the basics of human behavior. Design principles can
guide actions. Usability Kingpin, Donald Nielsen provides us with the six best that can be abided
by when it comes to web and interaction design (Enginess, 2014). Those being visibility,
feedback, constraints, mapping, consistency and affordances. His idea is that there are two things
to avoid: “gulf of execution” and “gulf of evaluation”. The three design principles we have
chosen to implement on the proposed system in order to achieve the first usability goal
“learnability” are Visibility, Affordance and Feedback.
37
1. Visibility - this principle states that the user should know what is going on inside the
system. They should know straight-away what all the options are and how to access them.
For example, using interface metaphors to act as labels for each option to give
instantaneous knowledge. An object's function should be visible so that the user can see
what it is currently doing and see what buttons or controls are available. This can also be
achieved with different shapes or vibrations for example.
Figure 1:
Example of visibility on retail application
38
2. Affordance – Affordance can be known as the relationship between what something
looks like and how it can be used. The designers will ensure there are cues to help the
user determine when to carry out specific actions and whether or not it has been
successful. For example, the layout of the hamburger in the interface follows the standard
guideline from Jacob Nielsen which have been practiced in many other interfaces for
mobile applications with the structure having three-line icons indicating a list to view
more options. This principle ensures to design the interface in such a way that it is clear
what the options are used for, so the predictability of it will determine if the user can
determine the effect of future actions based on past interaction history.
Figure 2: Example of hamburger menu
39
3. Feedback – this principle refers to sending back to the user information about what
action has been done, allowing them to further continue with the activity. Various kinds
of feedback that will be implemented will be a combination of both visual and audio.
Examples of common feedback used are the “hourglass” displayed while the interface is
processing or a text box changing color when clicked on so it lets the user know that what
they have chosen is working hence the feedback given back to them. This encourages the
user to wait rather than doing the same thing more than once out of confusion about
whether or not it has worked.
Figure 3: Example of loading icon and selected option
The three design principles we have chosen to implement on the proposed system in order to
achieve the second usability goal “subjective satisfaction” are Task adequacy, Task completeness
and Responsiveness.
40
 Task adequacy - this principle refers to the ability of the system to justify to the user on
how to perform the task. The principle makes it easier for the user to know how to use the
system, especially if it is their first time. Examples of using this in an application are with
the use of labels or hints showing them how to carry out different tasks. The faster users
can grasp the system, it directly increases the user’s satisfaction towards the mobile
application.
 Task completeness - this principle refers to the system’s ability to do the desired task
performed by the user and therefore, the system should also be able to notify the user if
the task in the interface cannot be completed successfully. One way to include this into
the application is when a user is trying to make online purchases for admission tickets
and may accidentally have put in the wrong payment details. The system will notify the
user.
Figure 4: Example of declined payment method
 Responsiveness - this refers to the rate of communication between the user and the
application itself. Response time between different changes of states within the system is
important. Task completion time, consistency and response time of the system has the
ability to influence subjective satisfaction amongst users. Very short waiting durations or
instantaneous response times are way more desired and when an instantaneous response
cannot be given by the system, the system should be able to indicate to the user that it has
received the request and is processing an appropriate action in return.
41
2.4 Competitor Analysis
Competitor A: KL Tower Malaysia
This mobile application belongs to another famous tourist attraction in Malaysia. Menara KL
Tower is easily one of Malaysia’s popular and most recognizable landmarks in the city.
Screenshots of KL Tower Malaysia mobile application
Competitor B: My Langkawi
This mobile application belongs to the popular and widely visited island in Malaysia, Langkawi.
This application allows users to enjoy and have access to most popular tours, tickets and
activities in recommended locations across the island.
42
Screenshots of My Langkawi mobile application
Strategy Guidelines Used KL Tower Malaysia My Langkawi
Responsiveness The application is responsive, The application is responsive;

however, can take more however, it depends on the
seconds when clicking on internet connection.
certain options and also
depends on the internet
connection
Synthesizability When clicking an option, When clicking an option,

there is a highlighted there is a highlighted
animation on the button animation on the button
Affordance Has a standard interface Has a standard interface

design - hamburger menu and design - hamburger menu and
highlighted hyperlink on the highlighted hyperlink on the
login page to project to users login page to project to users
43
it is clickable. it is clickable.
Interface metaphor Has labels for each option to Has labels for each option to
give instantaneous knowledge give instantaneous
and a constant element which knowledge.
is the logo on different pages
to present authority of Menara
KL Tower.
Consistency Overall design and feel of the Overall design and feel of the
website are consistent website are consistent
throughout the application. throughout the application.
User-control and freedom Has a back button to undo Has a back button to undo
accidental clicks and freedom accidental clicks and freedom
to navigate through options. to navigate through options.
Flexibility and efficiency Users can choose other Users only have an email
options besides email, such as option to sign into this app.
Facebook and Google to sign
into this app.
Learnability Easy to learn Easy to learn
Memorability Easy to remember how to use Easy to remember how to use
Effectiveness Very effective as it also offers Very effective as it also offers

promotions, happenings and information on transfers,
attractions in the city e.g promotions .. However, these
(shopping) are only limited to Langkawi.
Recognition and recall Easy to recognize due to past Easy to recognize due to past
experiences with other experiences with other
applications applications
Impact towards competitive analysis activities

The competitive analysis carried out will be able to provide us with strategic insights into the
functions, features and overall feel evoked by the design principles of other mobile applications
available in Malaysia. By doing this, it creates an understanding and thereafter leaves room to
strategically design the interface, with the goal of creating a superior and effective application to
experience. When carrying out this analysis, it is important to keep in mind our own usability
goals, thereafter it is possible to learn from what has already been tried and tested, what is
currently in use and then leverage our own design. A UX competitor analysis is able to bring to
the surface faults as well as opportunities in order to create a great interface design and stand
out against competition.
44
45
3.0 STAGE 3: Parallel Design, Participatory Design and Prototypes
3.1 Introduction
According to Mika (2017), a prototype is a model or sample of a finished product that is used for
testing before it is published. Its aim is to put goods to the test. Until launching a product,
prototyping is critical for addressing usability issues. It may also show places where work needs
to be done. Digital prototyping is the most effective prototyping technique used in this
assignment because it is more practical enough to accurately monitor most elements and easier to
create than HTML. Donald Norman proposed seven guidelines in 1988 to evaluate the
relationships between humans and computers. It was suggested that these seven stages could be
used to turn challenging tasks. Heuristics evaluation is a methodical approach for detecting
usability issues in user interfaces. When a usability issue is discovered in a design, it is addressed
as part of the ongoing design process. Some usability concepts, such as Nielsen’s, are included in
the heuristic’s evaluation process. When auditing, it serves as a checklist for evaluating and
describing issues.
3.2 Sketches
3.2.1 Log in page
46
An example of a user’s log in screen is shown above. To log into the system, users must enter
their username and password. If the user does not have an account, they can create one by
clicking the sign in button, which is displayed. This page’s aim is to provide access to people
who use the application by allowing them to sign in or log in into the system.
Strategies used in screen:
 Match between system and the real world (Jakob Nielsen)

Instead of using system-oriented jargon, it is necessary to use plain and precise language to make
the system more user-friendly. The labels “log in” and “sign in” have been added, as seen in the
above image, to help users understand the interface.
 Recognition and recall (Jakob Nielsen)

the user can only enter his or her username and password in the log in form. As a result,
placeholders are used to inform users of what should be entered in the text box, preventing users
from entering their email address or phone number.
3.2.2 Sign in page
47
Users must enter their information correctly and click the sign in button on the sign in page.
Users will then continue to log in the system after successfully signing up. This page’s aim is to
enable users who do not yet have an account to build one so that they can use the application.
 Error prevention (Jakob Nielsen)

Error prevention has been implemented to ensure that users can insert their data into the
appropriate text boxes. If a user types an incorrect email address, the machine validates it as the
user types rather than waiting to press send.
 Consistency and standards (Jakob Nielsen)

To avoid confusing users, consistency is a crucial aspect to remember. The text fields on the sign
in and log in forms are nearly identical. Both types use the same size and color scheme,
including the placeholder shape, size, and color.
3.2.3 Main page
48
Once the user has clicked the log in button, the next page that they will be taken to is the main
page of the mobile application. On the main page, as shown above, there is a hamburger menu
displayed on the left-hand side of the screen and a user profile button. In the hamburger menu
there are different sub-menus that users can select from and in the user, profile has all the users’
credentials. The purpose of this page is to allow users to browse through articles/news based on
Petrosains, The Discovery Centre, edit their profile and have other sub-menu options.
 Constraints ( Donald Norman)

This principle is applied on this screen because there are limitations on the design. The users do
not have control on system, and it is self-imposed as a way the system can improve a design.
This includes the specifications of the mobile app.
 Aesthetic and minimalist (Jakob Nielsen)

Users will be able to know the goal or purpose of this page. After the users have logged in, they
will be directed to the main page of the screens which make
it essentially to establish a good first impression of
the mobile app.
3.2.4 Hamburger Menu page
49
In the hamburger menu there are five sub-menu buttons that the users can select onto. Each sub-
menu has different function and purposes. The purpose of this page is to allow users to have a
choice to select different option.
 Visibility (Donald Norman)

Users need to know what all their choices are and got to get to them right away. This is included
in the hamburger menu since it has many sub-menus from which users can select as shown in the
picture above. Once a user notices the hamburger menu, they will automatically know that they
have other choice or
option, and the hamburger
menu is the accessible way to
get to them.
3.2.5
3.2.5
3.2.5
Na
vigation center page
50
For this page, a map of the Discovery Centre is shown as above. It has the location of the
showrooms, exhibition center and other part of Petrosains. The purpose of this screen will allow
and enable users, especially tourist or foreigners to navigate and to know the location of the
places they want to visit inside the center as it will be more accessible and easier for them in the
case, they get lost or ask for directions.
 Mapping
This design principle is the relationship between controls their movement or effects. Good
mapping is when the effect in the system corresponds to a user’s expectations. Colors, visual
languages, or icons can indicate mapping. Users will be able to pinch their fingers on the screen
to zoom in or zoom out and even move the map of the Centre around.
 Aesthetic and minimalist design

This design principles will allow the user to know what the purpose of the navigation Centre
page is. The minimalist design makes it simple to understand. The colors help to distinguish by
indicating the different types of rooms.
3.2.6 Ticket price & Payment page
51
As seen in
the above
image,
there are
three
pages.
One page
is the
ticket
price for
both
Malaysian and Non-Malaysian. Another page is for once users purchase ticket, they will need to
make payment and the last page is for users to confirm their payment or to cancel the payment if
they wish to.
 Affordance (Donald Norman)

This will allow the users to know how to use an object. In this case the “purchase ticket”. “make
payment” , “confirm payment” and “cancel payment” are the object that will give the users a
52
clue what to do by clicking the buttons it will perform an action. This is key to providing a good
UI design and UX.
 Flexibility and efficiency (Jakob Nielsen)

This design principle will allow the system (the payment page) to support the user in carrying out
their task and complete the frequent action faster. This is key in providing a flexible and efficient
usability interface with users when processing payment onto the payment page.
3.2.7 Terms and Condition page
Another sub-menu button found in the hamburger menu is the terms and conditions. The purpose
of this screen is to allow them to know the policies of the Discovery Centre and the mobile
application. Users will agree to abide by the terms of the service to use the offered service.
53
 Mapping (Donald Norman)
This principle states that it is the relationship between control and effect. It is applied to this page
because it will allow users to use the vertical scroll bar to move the page down at the same rate.
 Help and Documentation (Jakob Nielsen)

Help and documentation are an important element of user experience. They are often necessary
but in general users do not like to read nor like reading instructions. Anticipate when a user will
need help and provide relevant information that will support them in accomplishing their goal.
3.2.8 Feedback page
In the feedback page the users can provide ratings based on their visit to the Petrosains, The
Discovery Centre or on the mobile application itself. Moreover, the users can provide additional
comment in the text box as shown above. The ratings limit is 1 star poor and 5 stars good.
54
 Visibility of system status (Jakob Nielson)

This principle has been used to allow users to know what is going on inside the mobile
application. Moreover, users can do so by providing their feedback for their action. They will be
able to see what they have chosen once they have rated.
 User control and freedom (Jakob Nielsen)

Users will have the freedom of choice to perform specific actions. This means once rating is
performed by users, it can be changed or undo if they change their mind. This works as well as
for the comment section
3.2.9 Visiting hour page
55
This page consists of the opening and closing hours of the Centre. This will allow users to know
the time and dates of when the center will be opened and closed. As shown above, users will be
notified that the last hour of admission so that they are encouraged to come early to enjoy their
visit.
3.3 Participatory Design
User involvement in design for work practice for systems involving human work is known as
participatory design. It is focused on the idea that users should involve in the interfaces they can
use, and that all stakeholders, including and particularly users, should have equal input into
interaction design (Muller, 1993).
3.3.1 Card sorting Technique
Card sorting is a technique for organizing and evaluating data into logical classes. The option
chosen to solve the card sorting technique is the user preference. The first option was chosen
because it is easy and time consuming to analyze and evaluate. However, it will be unable to
identify what the participants like and do not like. For the discussion, an amount of ten (10)
participants was used to execute this activity. For each preference, four (4) card sample was
designed and the one with the highest number of responses will be the chosen to be
implemented.
3.3.1.1 Layout of hamburger sub-menus
Option A Option B
56
Option C Option D
The design layout of the hamburger sub-menu is a crucial component. It will determine the
appeal of the mobile application towards the users. To obtain the viewpoint of the users, a
sample of 20 random participants were selected to choose the layout design that appealed to
them. The participants were given 4 varying layout designs for their choice of option. The results
collected are as follow:
Layout Design A B C D
option
Participants 0 2 15 3
Based on the results obtained, the participants favored layout design option C. The sub-menu in
the hamburger menu will have five different icons that will be more attractive for users when
clicking the selected button. Images as icon makes the app more attractive because it will catch
57
the attention of the users rather than written words and the icons symbolizes/indicates what the
buttons are.
3.3.1.2 Font Type and Font Size
Option A
Option B
Option C
Option D
58
The font of the mobile application is the important part of the mobile app. The font type and size
were chosen according to the participants’ preferences of what they think will be best suited and
understandable and appropriate for the application. To obtain the viewpoint of the users, a
sample of 20 random participants were selected to choose the font type and font size that
appealed to be easier and more understandable to read. The participants were given 4 varying
layout designs for their choice of option. The results collected are as follow:
Font type and A B C D

size option
Based on the results obtained, the majority of the participants have selected font option B as the
most viable application for the Petrosains, The Discovery Centre mobile application, because it
is similar to the ones on the website. Therefore, it maintains similarity. The header will use
Roboto font type, size 36, the sub-header Roboto font type with the size 24, the contents will use
Noto Sans font size 18 and lastly, the buttons will use Noto Sans, size 20.
3.3.1.3 Color Scheme
Option A
Option B
59
Option C
Option D
foreground
backgroun
d
The color scheme of the mobile application applies color that will attract the users when using
the mobile app. The appropriate color scheme was chosen according to the participants’
preferences of what they think will be best for the application. To obtain the viewpoint of the
users, a sample of 20 random participants were selected to choose the color scheme that appealed
to attractive and suitable for the mobile app. The participants were given 4 varying layout
designs for their choice of option. The results collected are as follow:
Font type and A B C D

size option
Based on the results obtained, the majority of the participants have selected color scheme option
D as the most viable application for the Petrosains, The Discovery Centre mobile application,
because it is the main color of and represents the Centre.
60
3.4 Prototype
Figma was chosen because it is an intuitive and easy-to-use UX tool. It includes features such as
cell phones and desktop computers, as well as Android and IOS companion software. Figma can
be used for a variety of tasks, including wireframing websites, prototyping projects, and
designing mobile application interfaces, among others.
Link:https://www.figma.com/proto/XZVQnGY2ooeXEkclFyGcQE/HCIAU-Petrosains-App?
node-id=232%3A247&scaling=contain&page-id=232%3A246
61
62
63
64
65
66
4.0 Stage 4: Formative Evaluation
4.1 DECIDE Framework
4.1.1 Determine the goals
The main objective of conduct evaluation by using DECIDE framework is to ensure the
designed prototype can meets user expectations and satisfaction. The DECIDE framework will
evaluate the designed prototype and improve it based on the opinions and feedback of the
primary users of Petrosains which is the public. This evaluation is mainly to improve the error
and prototype inconvenience provided from the perspective of professionals and primary users.
Following are the usability goals of this evaluation:
 Goal 1: To ensure the learnability of designed system meets the expectation of primary
users
 Goal 2: To ensure the memorability of designed system meets the expectation of primary
users
 Goal 3: To identify any specific error found in designed system
 Goal 4: The user’s satisfaction on designed system.
4.1.2 Explore the questions
To make goals mentioned above is operational, the assessment report must explicitly express
the questions that must be addressed. To make the test much more fine-grained, questions may
be broken down into very detailed sub-questions. Following questions will be asked to test the
Goal 1 (To ensure the learnability of designed system meets the expectation of primary users).
67
 Q1: Is the interface design easily to understand?
 Q2: Is the natural mapping of interface design correspond to the desired outcome?
 Q3: The affordances of interface design are clearly?
 Q4: Is interface design provide context and feedback?
 Q5: Is the languages of interface design easy to understand?
Following questions will be asked to test the Goal 2 (To ensure the memorability of designed
system meets the expectation of primary users).
 Q1: Is the icon in UI design match the function?
 Q2: Is the icon in UI design match the word?
 Q3: Is the users able to recall enough information to use the UI design correctly in next
time?
 Q4: Is the UI design are familiarity to all age users?
 Q5: Is UI design contain the categorization menu for users?
Following questions will be asked to test the Goal 3(To identify any specific error found in
designed system)
68
 Q1: Do the design provide suggestion to users?
 Q2: Do the design provide any hints to user when they type the wrong information?
 Q3: Do design provide sufficient wide to input box for users enter the data?
 Q4: Do systems provide suggestion to user when the error is occurred?
 Q5: Do systems in clinical setting able to incorporate alerts into a more complex message
structure?
Following questions will be asked to test the Goal 4 (The questionnaire of user’s satisfaction on
designed system)
 Q1: I like to use this system more often
 Q2: I find this system to be more complicated than it should be
 Q3: I think the system is simple and easy to use
 Q4: I need technical support to use this system
 Q5: I find the system functioning smoothly and is well integrated
 Q6: I think there are a lot of irregularities in the system
 Q7: I think most people can learn this system quickly
 Q8: I find this system to be time-consuming
 Q9: I feel confident while using this system
 Q10: I think there are a lot of things to learn before I can start using this system.
69
4.1.3 Choose the evaluation Paradigm and Activities
In this step, the drafted and established questions is necessary so that feedback from users can be
obtained to ensure that the usability goals and effectiveness of the designed prototype are
excellent. In addition, the evaluation technique used in this step to evaluate the prototype will be
used Usability testing and Heuristic evaluation. To make usability evaluation better, the
suggestions and feedback of professionals and users are essential, so that this prototype can be
better improved.
4.1.4 Identify practical issues
To ensure this evaluation can achieve better results, some practical issues must be identified. For
example, users’ information, facilities and equipment, schedules and budget and evaluators’
expertise.
The following items will be delegated to perform Usability Testing:
 The respondents who evaluated the user interface will be the primary users such as
tourists and students.
 The equipment that provides to respondents to conduct the evaluation is iPhone X and
above and other same class and FIGMA will be the facilities in this evaluation.
 Each evaluation will be conducted 20 minutes and conduct in individual basis.
 There are 6 respondents are selected to Identify usability issues of user interfaces.
The following items will be delegated to perform Heuristic Testing:
70
 The 2 respondents will involve in Heuristic testing to evaluate the user interface, they
also have well knowledge on usability testing.
 The equipment that provides to respondents to conduct the evaluation is iPhone X and
above and other same class phones and FIGMA will be the facilities in this evaluation.
 Each evaluation will be conducted 1 hour and conduct in individual basis.
4.1.5 Decide to the ethical issues
As we know, it is important to consider ethical considerations when gathering data during an

assessment. There are some ethical issues will be addressed and confirmed by mutual party
before the evaluation is conducted:
 Explained the evaluation’s intent and procedure.
 Ensure the confidentiality of respondents' personal records.
 If the respondents agreed to the terms and conditions of the assessment, have them sign
the consent document.
 Ask for the participant’s permission for any data and feedback record purpose.
 The respondents have the rights to leave the evaluation if any content make them
uncomfortable.
 If there are other conditions, both parties must reach an agreement. For example, some
experts will require additional rewards before they are willing to conduct evaluation.
4.1.6 Evaluation, Analyse, Interpret and Present the data
71
Following the satisfactory completion of all user testing and interview tasks on each
participating respondent, the data would be analysed, interpreted, and addressed by recognising
the pattern of cumulative data collected based on a few standards and consistency. The usability
testing report will be create based on the data collected from usability testing that performed by
primary users. Whereas the Executive summary report will be create based on the data collect
from usability experts. Besides, the questionnaire will also distribute by administrator to random
participants to collect their feedback on our design prototype based on their using experience.
These 3 reports will use to improve the user interface design based on the error or imperfect
interface design that found in evaluation.
4.2 Usability Testing & Report
4.2.1 Usability instructions for General Public
Welcome to the Petrosains Usability Study
In this study, we would like to learn more about the problems users had with the Petrosains
mobile app. The Petrosains mobile application has been set up to allow customers to schedule a
tour, check the incoming events, search activities, purchase tickets, contact the company, and
even more. You must complete the tasks mentioned below, which will enable us to get a better
understanding of the mobile application. When you are doing these assignments, it is critical for
us to know your thoughts on our proposal. As a result, when you finish each mission, please give
us input on what you are looking at, what makes you think this designed application is flawed,
what is confusing you, and so on.
4.2.1.1 Task 1- Logging into Petrosains Mobile

Application
a) Open Petrosains application to enter login page.

b) Create the new account as new users with using Phone number or Facebook account.
72
c) Sign in to Petrosains with using registered account.
d) Log out to login page, assume you forgot the password and click on the forgot password
command to reset a new password.
e) Log in to Petrosains again to explore the functions.
4.2.1.2 Task 2- Explore Terms and Conditions
a) Click the Terms and Conditions option in menu

b) Read the accept Terms and Conditions for using this application.
4.2.1.3 Task 3- Explore the Petrosains
a) Take a minute to go over the home page.

b) Click the hamburger menu to explore the functions of the application.
c) Click the news to see the upcoming event.
4.2.1.4 Task 4- Explore the navigation centre
a) Click the navigation centre at the hamburger menu of home page.

b) Check the information of Petrosains.
4.2.1.5 Task 5- Explore visiting hours
a) Click the visiting hours option in menu.

b) check the available date and time for visit Petrosains.
73
4.2.1.6 Task 6- Explore ticket and payment
a) Click the ticket and payment option in menu.

b) Click the purchase ticket command to start purchase ticket.
c) Select the date and time that you want to visit the Petrosains.
d) Click on the confirm of booking.
e) Select the payment method.
f) Enter the details of your payment method.
g) Click on pay now.
h) Check your purchased ticket details.
4.2.1.7 Task 7- Explore the feedback
a) Click the feedback option in menu.

b) Enter your name and Email address.
c) Write your feedback about visiting Petrosains or any issue you face when using Petrosains
application.
d) Rate your experience of visiting Petrosains and application.
4.2.1.8 Task 8- Explore the social media pages of

Petrosains
a) Click the social media icon shown in bottom of menu.

b) Follow any social media page of Petrosains to obtain the latest information of Petrosains in
future.
4.2.2 Usability Testing Report
Petrosains Mobile Application
74
LEE JIALE
11 ay 2021
4.2.2.1 Introduction
Petrosains is the mobile application that designed and developed to use by the public, tourists,
students, and other users. The main purpose of developed this application is allow tourists and
users who want to visit the Petrosains discovery centre to purchase tickets more easily through
this mobile application, check the next itinerary and obtain other related information.
The accessibility of all the functionalities of the smartphone device architecture was tested by the
key target classes, the public and students. The experiment was carried out by the researcher on a
mobile device that was fitted with FIGMA and was used to run the sample design of the mobile
application. The research is carried out in a usability lab with a group of potential customers,
either online or on-site. The sessions are recorded and evaluated to identify potential areas for
improvement. Every user's completion rating for each mission, questions, reviews, and
satisfaction scores were recorded during the testing session.
4.2.2.2 Executive Summary
The usability test was conducted on 3rd of May 2021. The aim of this test was to evaluate the
interface's design, information flow, and information architecture of mobile application is
flawless as possible. On the 3rd of May 2021, six volunteers from the general population
participated in the usability exercise. Most of the 20-minute sessions lasted for each of the
respondents. Before they begin the usability test, they must sign a consent form, indicating that
they adhere to the terms and conditions of the test. Each of the participants agreed that the
application's architecture is simple and understandable, and 83.33 percent said it was simple to
understand and use.
75
There are several minor issues were identified during the test, these include:
 Inappropriate Button size.
 Colour Contrast.
 Typographical Hierarchy.
 Lack of the application index.
This evaluation includes a rating of how well each assignment was completed, as well as
complexity grades, participant feedback, mistakes, and enhancement suggestions.
4.2.2.3 Methodology
The research administrator used the public to contact and select participants. The test
administrator sent a WhatsApp message to participants reminding them of the test's details and
demanding their availability and involvement. Participants were asked to answer with a date and
time that was suitable for them. Each session lasted roughly half an hour. The test administrator
clarified the exam and asked the participant to fill out a brief background questionnaire during
the session. Participants read the mission scenarios and searched the mobile application for
answers.
The administrator asked the participant to score the design's interface on a 5-point Likert Scale
ranging from Strongly Disagree to Strongly Agree after each mission to evaluate the 3 subjective
goals that set before.
The following questions were asked to evaluate the first subjective goals which is learnability of
design:
76
 Q1: Is the interface design easily to understand?
 Q2: Is the natural mapping of interface design correspond to the desired outcome?
 Q3: The affordances of interface design are clearly?
 Q4: Is interface design provide context and feedback?
 Q5: Is the languages of interface design easy to understand?
The following questions were asked to evaluate the second subjective goals which is
memorability of design:
 Q1: Is the icon in UI design match the function?
 Q2: Is the icon in UI design match the word?
 Q3: Is the users able to recall enough information to use the UI design correctly in next
time?
 Q4: Is the UI design are familiarity to all age users?
 Q5: Is UI design contain the categorization menu for users?
The following question were asked to evaluate the third subjective goals which is identify any
specific error found in application:
77
 Q1: Do the design provide suggestion to users?
 Q2: Do the design provide any hints to user when they type the wrong information?
 Q3: Do design provide sufficient wide to input box for users enter the data?
 Q4: Do systems provide suggestion to user when the error is occurred?
 Q5: Do systems in clinical setting able to incorporate alerts into a more complex message
structure?
In addition, the administrator posed the following general questions of mobile application to the
participants:
• The participant's favourite thing.
• The participant's least favourite thing.
• Suggestions on this application
Participants
Six volunteers from the public who were able to volunteer to evaluate the mobile application
were contacted to receive customer input on the software. The research sessions took place
remotely over the course of one day, on May 3rd, 2021. All respondents completed the exam
during the day. Furthermore, five of the respondents were male, while the rest were female.
A simplified list was used to assess the respondents' roles. This is shown in the table below.
Roles
Educational Research Institution IT Institution Other Institution
Institution
2 1 1 2
Evaluation Tasks/ Scenarios
78
All test respondents were asked to complete the following activities, which were developed in
accordance with the mobile application's usability goals.
Task 1- Logging into Petrosains Mobile Application
Task 2- Explore Terms and Conditions
Task 3- Explore the Petrosains
Task4- Explore the navigation centre
Task 5- Explore visiting hours
Task 6- Explore ticket and payment
Task 7- Explore the feedback
Task 8- Explore the social media pages of Petrosains
4.2.2.4 Results
Task completion success rate
Based on this evaluation is carried out in the case of administrator monitor, which also allow
administrator to collect information about respondents to complete tasks. All participants
complete the task 2(Explore Terms and Conditions), task 3(Explore the Petrosains), and task
7(Explore the feedback) with successful. Five of the six respondents (83.33%) manage to finish
the task 4 (Explore the navigation centre) and task 5 (Explore visiting hours). Besides, four of the
six respondents (66.67%) were able to complete the task 1 (Logging into Petrosains Mobile
Application) and task 8 (Explore the social media pages of Petrosains). Lastly, three of six
respondents (50%) were able to finish the task 6 (Explore ticket and payment). The table below
demonstrates the data above.
Respondent Task 1 Task 2 Task 3 Task 4 Task 5 Task 6 Task 7 Task 8

s
1 √ √ √ √ √ √ √ -
2 - √ √ - √ √ √ √
3 - √ √ √ √ - √ √
79
4 √ √ √ √ - - √ -
5 √ √ √ √ √ - √ √
6 √ √ √ √ √ √ √ √
Success 4 6 6 5 5 3 6 4
Completion 66.67% 100% 100% 83.33% 83.33% 50% 100% 83.33%
rate
(Task Completion Rate)
4.3 Heuristic Evaluation
Client: PETROSAINS
Discipline : Usability
Project: Evaluated the Mobile Application of Petrosains to find the usability issue of the
design
4.3.1 Introduction
On May 5, 2021, a heuristic evaluation of the Petrosains mobile application was performed. The
evaluation's results and recommendations are presented in this article.
The mobile application is primarily use by public such as tourist and students who want to visit
Petrosains discovery center. The main purpose of the Petrosains mobile application is bring more
convenient functions to the public, such as online ticket purchase to avoid the situation of
queuing to buy tickets at the Petrosains discovery center, more convenient to access to the latest
news, and a platform for users to provide their feedback on the Petrosains discovery center.
The reviewer spent 1 hour using the mobile application and evaluated it against a set of accepted
guidelines.
80
The review was carried out on iPhone 11 Pro max and FIGMA mobile application with a
resolution of 2688 x 1242 pixels (3.3 megapixels at 458 ppi).
4.3.2 Details finding
The table below includes comprehensive conclusions for all the usability problems identified by
the reviewer. Each problem has been given a severity rating based on the potential effect on
customers. The following is a breakdown of the results by heuristic type: “Error Prevention”,
“Help and Documentation”, “Visibility of system status”, “Flexibility and efficiency of use”,
“Help user recognize, diagnose and recover from errors” and “User control and freedom”.
Reviewer 1: Pang Win Chin

Issue: Visibility of system status
Severit Location Issue Recommendation
y
Ticket and The ticket and payment The ticket and payment page
H Payment page page do not show the should include the progress
progress bar of payment to bar to user so that they know
user when they are making what the status is during
payment. making payment.
Feedback page do not show Progress bar that showing the
the progress bar when user percentage of submitted
submitted their feedback to status should be appear and
L Feedback
system. include when user submitting
page
the feedback.
Issue: Help and documentation

y
81
Login page do not provide The hints should be provided
the hints to users that what to users that what exactly
should users type in they need to type about their
M Register page
username and password username and password in
when they want to register register page.
new account.
Issue: Help user recognize, diagnose, and recover from errors

y
When user type wrong the The hints should be provided
username or password at to users that what exactly is
login page, the hints that the error and suggest the
M Login page
help the users to identify users to type again their
what is exact error and username and password.
suggest a way is not pop up.
Issue: Error prevention

y
The hints of error The hints of error prevention
prevention at register page should identify what is exact
is very vague when user’s error and provide a guideline
password is not reaching the such as password should
82
M Register page standard of requirement and include mixture of both
it will make users confuse uppercase and lowercase and
about what to type in. at least one special character.
Reviewer 2: Aw Zhang Yi
Issue: Visibility of system status
y
Ticket and The ticket and payment The ticket and payment page
H Payment page page do not show the should include the progress
progress bar of payment to bar to user so that they know
user when they are making what the status is during
payment. making payment.
Issue: User control and freedom

y
There is no undo button for Undo button should be
users when they provided in success message
accidentally submit the when users submitted their
feedback which is feedback. The success
L Feedback uncompleted. message should include undo
page and continue button for users
to choose.
Issue: Help user recognize, diagnose, and recover from errors
83
y
The hint for users is vague The hint that pop up when
when they type wrong their users type the wrong
credit card information. information should clearly
H Ticket and
identify to users what is
payment page
exact error and give the
suggestion to users.
Issue: Flexibility and efficiency of use

y
The design of payment System should include two
system in ticket and options for users to making
payment page might not be payments. For example,
Ticket and
suitable for all age users system can provide type in
M payment page
especially those users are card number option and real-
above 60 ages. time credit card scanning to
users.
4.3.3 Executive Summary
First reviewer Pang Win Chin identified 5 usability issues among 1 were high severity, 3 were
medium severity and 1 were low severity. Second reviewer Aw Zhang Yi identified 4 usability
issues among 2 were high severity, 1were medium severity and 1 were low severity. The
following are the similar usability issues that identified by the two reviewers.
84
 The ticket and payment page do not show the progress bar of payment to user when they
are making payment.
Following are the independent issues that identified by two reviewers.
 Feedback page do not show the progress bar when user submitted their feedback to
system.
 Login page do not provide the hints to users that what should users type in username and
password when they want to register new account.
 When user type wrong the username or password at login page, the hints that help the
users to identify what is exact error and suggest a way is not pop up.
 The hints of error prevention at register page is very vague when user’s password is not
reaching the standard of requirement and it will make users confuse about what to type
in.
 There is no undo button for users when they accidentally submit the feedback which is
uncompleted.
 The hint for users is vague when they type wrong their credit card information.
 The design of payment system in ticket and payment page might not be suitable for all
age users especially those users are above 60 ages.
4.3.4 Impact
After reviewing the recommendation that given by 2 reviewers, the following changes of design
will be made based on the recommendation above.
85
 Include the progress bar at ticket and payment page.
 Include the progress bar that showing the submitting percentage at feedback page.
 Provide the hints to users what they exactly need to type at register page.
 Provide hints to users what is the exact error and suggestion based on their error at login
page.
 Improve the hints of error prevention and identify what is exact error and provide a
guideline to users at register page.
 Provide the undo button in success message when users submitted their feedback.
 Improve the hint that pop up when users type the wrong information of payment.
 Provide alternative options for users to making payments.
 Add FAQs pages in system as help and documentation to users.
4.4 Subjective Satisfaction
4.4.1 Introduction
The user's actual satisfaction with the interaction experience is referred to as subjective
satisfaction. Questionnaires are often used to gather data using Likert scale scores (e.g., numeric
scales from 1 to 5). The evaluation in this research was using standard questionnaire and
conducted by researcher in APU, each participant takes around 5 minutes to explore the
Petrosains mobile application that provided by researcher and finish the questionnaire after that
based on the experience, they use the application. The following picture are the questionnaire
that distribute by researcher to participants in order to collect the satisfaction of participants
toward Petrosains mobile application.
86
87
88
4.4.2 Results
Based on this questionnaire results that collected by administrator, this allows administrator to
collect information about the opinions of participants to the Petrosains mobile application. There
are 20 participants has answered the questionnaire. The pie chart below shows feedback from
each participant on each question.
I like to use this system more often

Strongly Agree Agree Neutral
Disagree Strongly Disagree
5%
10%
20%
65%
(Question 1)
i find this system to be more complicated than

it should be
Stongly Agree Agree Neutral
15%
40%
15%
30%
(Question 2)
89
i think the system is simple and easy to use
15%
55%
30%
(Question 3)
i need technical support to use this system

5%
5%
30%
25%
35%
(Question 4)
I find the system functioning smoothly and is

well integrated
21% 16%
6% 16%
42%
(Question 5)
90
I think there are a lot of irregularities in
the system
10%
25%
30%
35%
(Question 6)
I Think most people can learn this system

quickly
5%5%
10%
15%
65%
(Question 7)
I find this system to be time-consuming

15% 20%
10%
20%
35%
(Question 8)
91
I feel condifent while using this system
10%
20%
45% 25%
(Question 9)
I think there are a lot of things to learn

before I can start using this system
10%
50%
35%
5%
(Question 10)
92
REFERENCE
Enginess (2014) The 6 Principles of Design [Online] Available from:
https://www.enginess.io/insights/6-principles-design-la-donald-norman [Accessed: 8/05/2021]
Landau, P (2017). What is a Stakeholder? [Online]. Available at:
http://www.projectmanager.com [Accessed on 25/042021]
Mika (2017). Prototyping in Human-Computer Interaction. [Online] Available from:

https://mikalikes.men/prototyping-in-hci/ [Accessed: 15th May 2021]
Muller, M. J. (1993). PICTIVE: Democratizing the dynamics of the design session. In

Participatory design: Principles and practices, ed. A. Namioka and D. Schuller. Hillsdale, NJ:
Lawrence Erbaum Associates, pp. 349-380.
Nielsen, J (2010) What Is Usability? [Online] Available from:
https://www.sciencedirect.com/topics/computer-science/subjective-satisfaction#:~:text=The
%20final%20usability%20attribute%2C%20subjective,is%20to%20use%20the
%20system.&text=In%20principle%2C%20certain%20objective%20measures,pleasing
%20nature%20of%20an%20interface. [Accessed: 8/05/2021]
PETROSAINS (2020) About Us The Company. [Online] Available from:
https://petrosains.com.my/about-us/ [Accessed: 23 February 2021]
PETROSAINS (2020) Admission And Ticketing. [Online] Available from:

https://petrosains.com.my/admission-and-ticketing/[Accessed: 23 February 2021]
Wigmore, I (2016) Learnability [Online] Available from:
https://whatis.techtarget.com/definition/learnability#:~:text=Learnability%20is%20a%20quality
%20of,all%20their%20features%20and%20capabilities.&text=A%20very%20learnable
%20interface%20or,to%20interact%20with%20the%20system. [Accessed: 8/05/2021]
93
Appendix
Project plan
February March April May

Stage 1
Stakeholder
User
Profiling
Task analysis
Stage 2
Stage 3
Parallel
design
Participatory
Design
Prototype
Stage 4
DECIDE
framework
Usability
Goals
Heuristic
Evaluation
Subjective
satisfaction
94
Workload Matrix
Task Karen Dayna Jalna Lee Jiale
Proposal 25% 25% 25% 25%
Stage 1 100%
Stage 2 100%
Stage 3 100%
Stage 4 100%
95
Petrosain
s
PROGRESS
PROJECT REPORT
SUMMARY
REPORT PROJECT PREPARED
DATE
21/2/2 021 NAME
Petrosains BY
Karen
Nzioki
STATUS
SUMMARY
The stakeholder analysis table is still in progress, the questionnaire and observation questions have been decided upon. Collection and
analysis of responders data will begin soon.
PROJECT
OVERVIEW
TAS % DUE PREPARED NOTE
K DONE
100% DATE
28/5/2021 BY S
Stakeholder Analysis Karen
User profile 30% 28/5/202 Nzioki
Karen
Task analysis 40% 128/5/202 Nzioki
Karen
1 Nzioki
ISSUE HISTORY
ISSUE ASSIGNED TO DATE
CONCLUSIONS/RECOMMENDATIONS
96
Petrosains
PROGRESS REPORT
PROJECT SUMMARY
REPORT DATE PROJECT NAME PREPARED BY

15/3/2021 Petrosains Dayna Vozza
STATUS SUMMARY
Stage 1 was partially complete and the usability goals and competitors were decided upon.
PROJECT OVERVIEW
TASK % DONE DUE DATE PREPARED BY NOTES

Usability goals 100% 28/5/2021 Dayna Vozza
Design principles 30% 28/5/2021 Dayna Vozza
Competitor analysis 50% Dayna Vozza
ISSUE HISTORY
97
Petrosains
PROGRESS REPORT
PROJECT
SUMMARY
DATE NAME BY
22/2/2 021 Petrosains Jalna Isaac
STATUS SUMMARY
Stage 3 was partially complete and the participatory were decided upon
PROJECT
OVERVIEW
K
Parallel Design DONE DATE BY S
100 28/5/2021 Jalna Isaac
% Jalna Isaac
Participatory 50 28/5/2021
design %
Prototype 50 Jalna Isaac
%
ISSUE HISTORY
98
Petrosai
ns
PROGRESS
PROJECT
REPORT
SUMMARY
DATE NAME BY
7/5/2021 Petrosain LEE
s JIALE
STATUS SUMMARY
Prototype of Petrosains is still in progress, will start doing the framework and usability goals
DECIDE
evaluation for
stage
PROJECT
OVERVIEW
K DONE DATE BY S
DECIDE 100 28/5/2021 Jiale
framework % Lee
Usability 50 28/5/2021 Jiale
Goal % Lee
ISSUE HISTORY

Prototype Jaln 1/5/2021
issue a
99

HCI Group and Individual Assignment

Uploaded by

Copyright:

Available Formats

You might also like

HCI Group and Individual Assignment

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 and Individual Assignment

Uploaded by

Copyright:

Available Formats

GROUP ASSIGNMENT

HUMAN COMPUTER INTERFACE

PETROSAINS: THE DISCOVERY CENTRE

LECTURER: RIZAWATI BINTI ROHIZAN

Group 17 members name

JALNA EMMANUELLA MARY TP057011

DAYNA HELENA VOZZA TP055266

LEE JIALE TP051935

● To enable customers to be able to purchase admission tickets in advance as well as have

Old ticket purchase system

Inconvenient to check availability

1.0 STAGE 1: User profiling and Task Analysis

1.2 Stakeholder identification and Analysis

According to Landau (2017), described stakeholders as either a person or corporation who is

Students tend to directly gain from the application as the

Conservators use information they gain to help inform and

1.3 Data Gathering and Analysis

1.3.1 Data collection Method

1. What is your gender?

11. Do you make use of smartphones when visiting Petrosains?

12. Do you share pictures taken in Petrosains on social media?

13. Have you used a QR code scanner previously?

14. How do you find The Discovery Centre user interface?

15. How easy is it to access information from their website?

1.4 Analysis of Result

Analysis After analysis, 85.7% of the respondents agree that it would be

Analysis After the above analysis, it is found that

Impact This question is more to find the user profile

Analysis After analysis, we conclude that most

Impact Because most of the responders use

Analysis After analysis, we concluded that most

Impact As most users are familiar with using QR

Analysis After this analysis, it is found that most responders,75% do not

Impact As most people do not share content on their socials, the

Analysis After analysis, it is found out most

Impact As most of the responders did not like the user

Analysis After analysis, it is found that most

Impact From the analysis, the present system is not

Observation for The Discovery Centre: Petrosains

4. Visitors has to search on google for information

5. There’s very minimal interaction between The

Ticketing This observation is performed to find out how the

Social media platforms This observation is undertaken to find out how

1.5.1 Analysis and conclusion of Interaction with The Discovery Centre.

1.5.2 Analysis and Conclusion of Ticketing

1.5.3 Analysis and Conclusion of Social Media Platforms

1.6.1 User Profile Table

1.6.2 User Requirements

➢ Download the application.

1.7 Hierarchical Task Analysis

 Viewing of the activity Petrosains, The Discovery Center details.

Task Analysis 1: Membership Registration

Plan 3: Do 3 if 1,2 is completed.

Critically Difficulty Frequency

Fill up the form L H M

Task Analysis 2: Booking Facilities

0. To book facility by members

4.1 select age.