1

Words:
2013
Subject: Human Computer Interaction (CT026-3.5-2)
Submitted To: Mrs. Aida Zamnah Binti Zainal Abidin
Hand In Date: 30
th
August 2013

Submitted by:
Aprilia Ariesia TP025934
Chairunisa Bintang TP023847
Ibrahim Jamal TP027319
2

Table of Contents
Workload Matrix ........................................................................................................................ 5
Stage 1 User Requirements ..................................................................................................... 6
Introduction ............................................................................................................................ 6
Data gathering ........................................................................................................................ 6
Questionnaire ...................................................................................................................... 6
Responses summary ......................................................................................................... 10
Stakeholder analysis ............................................................................................................. 17
Stakeholder ....................................................................................................................... 17
Potential impact on system ............................................................................................... 18
Risk ................................................................................................................................... 18
Stakeholder analysis Matrix ............................................................................................. 18
Human Factors ..................................................................................................................... 20
Cognition .......................................................................................................................... 20
Physiology ........................................................................................................................ 20
Perception ......................................................................................................................... 21
User profiling ....................................................................................................................... 22
Hierarchical Task Analysis .................................................................................................. 23
HTA for Current System .................................................................................................. 23
Refined HTA (Proposed System) ..................................................................................... 25
Stage 2 Usability Goals & Competitive Analysis ................................................................. 26
Introduction .......................................................................................................................... 26
Usability Goals ..................................................................................................................... 27
1. Effectiveness ............................................................................................................. 27
2. Efficiency .................................................................................................................. 27
3. Learnability ............................................................................................................... 28
4. Memorability ............................................................................................................. 28
Usability Design Principles .................................................................................................. 29
1. Visibility .................................................................................................................... 29
2. Feedback.................................................................................................................... 29
3. Constraints ................................................................................................................. 29
4. Mapping .................................................................................................................... 30
5. Consistency ............................................................................................................... 30
3

6. Affordances ............................................................................................................... 31
Competitive Analysis ........................................................................................................... 32
Evaluation............................................................................................................................. 33
Stage 3 Prototype and Walkthrough ..................................................................................... 34
Introduction .......................................................................................................................... 34
Parallel Prototyping .......................................................................................................... 34
Peer to Peer Evaluation ..................................................................................................... 34
Final Sketch ...................................................................................................................... 35
Shopping............................................................................................................................... 39
Individual Part .......................................................................................................................... 43
User Requirements ............................................................................................................... 43
Introduction ...................................................................................................................... 43
User Profiling ....................................................................................................................... 44
User Requirement Analysis .............................................................................................. 45
Human Factors ..................................................................................................................... 46
Data Gathering ..................................................................................................................... 46
Questionnaire .................................................................................................................... 47
Interview ........................................................................................................................... 48
Naturalistic observation .................................................................................................... 49
Workshop or focus group ................................................................................................. 49
Studying documentation ................................................................................................... 49
Stakeholder Analysis ............................................................................................................ 50
Stakeholder categories ...................................................................................................... 51
Stakeholder analysis matrix .............................................................................................. 51
Hierarchical task analysis ..................................................................................................... 53
Conclusion ............................................................................................................................ 54
Usability Goals and Competitive Analysis .......................................................................... 55
Usability Goals ................................................................................................................. 55
Competitive Analysis ....................................................................................................... 64
Stage 3 - Prototype and Walkthrough ...................................................................................... 65
Introduction .......................................................................................................................... 65
Representation ...................................................................................................................... 65
Precision ............................................................................................................................... 66
4

Interactivity .......................................................................................................................... 67
Evolution .............................................................................................................................. 67
References ................................................................................................................................ 72


5

Workload Matrix
Individual Part Aprilia
Ariesia
Chairunisa
Bintang
Ibrahim
Jamal
Stage one
(User Profiling)
- 100% -

Stage two
(Design Principles,
Usability Goals and
Competitive
Analysis)
100% - -
Stage three
(Prototype and
Walkthrough
- - 100%
Signature

Group Part Aprilia
Ariesia
Chairunisa
Bintang
Ibrahim
Jamal
Stage one
(User Profiling)
20% 60% 20%
Stage two
(Design Principles,
Usability Goals and
Competitive
Analysis)
60% 20% 20%
Stage three
(Prototype and
Walkthrough
20% 2o% 60%
Signature

6

Stage 1 User Requirements
Introduction
Groupon Malaysia has been selected as the company for HCI assignment. Groupon Malaysia
is basically a franchise of Groupon Inc. that headquartered in Chicago, USA. In this first
phase, there are following parts that consist of data gathering, stakeholder analysis, user
profiling, human factors and hierarchical task analysis (HTA) that will be utilized within this
company. In addition, the motive behind of implementing these following parts within this
stage is carried in this assignment in order to ensure that the correct data is gathered to
conduct research analysis and as an enhancement outcomes of the interface design towards
the website by considering the human and computer aspects.
Data gathering
Questionnaire
The questionnaire towards the Groupon current website has been created that contains 15
questions. Those figures below show the snapshot of the questionnaire that has been created.
The fundamental aimed of spreading the questionnaire is to identify the respondent overview
and the satisfaction level towards the current interface design of Groupon website. Moreover,
this questionnaire also aimed to discuss the popularity level of Groupon websites with online
users. Thus, the questionnaire is spreading online so that user can easily fill in the form. In
addition, the link of this questionnaire is available on: https://docs.google.com/forms/d/1-
B15uJh2yu3o6MJrzHH8DNsrdwW2dbYV9SPbeyq9vQo/viewform








7

Snapshot of the Questionnaire

Figure 1.0: The introduction and profile of respondent in Groupon Questionnaire (Self-made)





8


Figure 2.0: Section A of Groupon Questionnaire (self-made)

9


Figure 3.0: Section B question number 1-3 of Groupon Questionnaire (Self-made)

Figure 4.0: Section B question number 5-6 of Groupon Questionnaire (Self-made)
10

Responses summary
Once the questionnaire has spread through online, the summary of responses is created based
on the questionnaire that has been filled by 37 respondents. In addition, those figure below
explicit the diagram of responses summary towards each questions within the questionnaire.

Figure 5.0: Summary of Age, Gender, and Occupation of Groupon Questionnaire
respondents. (Self-made)
As it is shown in Figure 5, 62% of the respondents are approximately between 20-30 years
old and the remaining are between 10-20 years old. This summary also shows whereby
Female is more attracted to Groupon website compared to male are slight below the female
percentage. In addition, the student is the main domination of the respondent occupation that
filled this questionnaire.

11


Figure 6.0: Summary of question number 1-3 in section A of Groupon questionnaire (Self-
made)
Relate to figure 6, it is shown that Groupon is one of the well-known company that are
operated through online. Therefore, almost quarter of the respondent knows the Groupon
through Internet, and followed by friend at 36% and advertisement at 17%. Figure 6 also
summarizes the question number 3 that shows alignment of layout provided is not fitted with
the screen of their PC, laptop, or any hardware connected to the Internet.




12


Figure 7.0: Summary of question number 4-5in section A of Groupon questionnaire (Self-
made)
Although the current Groupon website seems do not have any issues of the navigation bar
operations, Figure 7 shows that most of the respondent are disagreed that current website
presented by Groupon is clearly provides clear feature or content.








13


Figure 8.0: Summary of question number 1-2 section B of Groupon questionnaire (Self-
made)
Based on summary of responses that are shown in Figure 8, most of the correspondents stated
the restrains is due to following reason including the long scrollbar, it is not well-organized
website especially for the first-time user to look or specific categories. Figure 8 also shows
the summary of respondents in terms of the suggestion to enhance the current Groupon
website.
Figure 9.0: Summary of question number 3-4 section B of Groupon questionnaire (self-
made)
14

Figure 9 portrays the statistic of satisfactory level towards the current system. Approximately
31% or one third of the respondents chose level 3 that is categorized as moderate. An
explanation of satisfactory level chosen by respondents also has been justified in the next
questions.

Figure 10.0: Summary of question number 5-6 section B of Groupon questionnaire (self-
made)
Figure 10 explicit the statistic of satisfactory level towards feature accessibility of the current
system. More than quarter of the vote from respondents chose level 3 and 4. An explanation
of satisfactory level chosen in question number 5 by respondents also has been justified in the
next questions.
Moreover, aside of a questionnaire, the interview has been chosen to attain more data that is
necessary towards the current Groupon website. Three members of this group assignment
have conducted this interview where each member has assigned to conduct an interview with
either Groupon customer or non-Groupon customer. The interview topic has been chosen that
discuss the issues regarding the Groupon interface as well as the performance of this website.
In addition, the interviewee also provides their answer with solution as an enhancement
towards the current Groupon Website. The snapshot below shows the interview form that has
been taken by each interviewer.


15

Snapshot of interview

Figure 11.0: The first interview feedback.
The first interview conducted by Chairunisa Bintang towards Arvind Kumar Reddy (a male
Groupon customer).
Snapshot of interview 2

Figure 12.0: The second interview feedback
The second interview conducted by Ibrahim Jamal towards Fatma Barkey, (a female Groupon
customer.)

16

Snapshot of interview 3

Figure 13.0: The third interview feedback
The last interview conducted by Aprilia Ariesia towards Boronov Ilkhom, (a non-Groupon
male customer).









17

Stakeholder analysis
Stakeholder
The term stakeholder refers to an actor that can be a person or an object such as an
organization who has a vested interest in the natural resources towards the project. The
stakeholder has the capability to influence the project operations and have something to attain
or lose if the situation is unstable or remain the same (Brownen Golder and Meg Gawle,
2005). Moreover, there are several types of stakeholders that are entailed with the system
implementation. Each type of stakeholder differs his or her own aim and point of view with
another. For instance, some following stakeholders may concern towards the project to be
succeeded, whereas the other stakeholder are having a doubt to the result of the project.
Therefore, classifying stakeholder into certain groups can enable the Groupon to easily
maintain the stakeholder relationship within this company as a result from constructing
stakeholder analysis.
Basically, stakeholder analysis consists of four following types that contain facilitator,
primary stakeholder, secondary stakeholder, and tertiary stakeholder. Firstly, facilitator
stakeholder is defined as the users who manage the system within an organization. Moreover,
the primary user refers as the users who have a direct impact on the system because of this
stakeholder are the one who is using the system. On the other hands, secondary stakeholder
refers to the people who are not getting direct impact either positively or negatively of the
business activities and decisions. In addition, tertiary user is having capability to affect the
system within an organization. Relate to Groupon, Figure 13 shows the stakeholder analysis
that has been identified within this company.
Facilitator Stakeholder Groupons IT team
Primary Stakeholder Administrator
Secondary Stakeholder Customer, Members
Tertiary Stakeholder Competitors such as LivingSocial, Plum District
Figure 14.0: Groupons stakeholder analysis (self-made)

18

Potential impact on system
Each type of stakeholder is capable to give an impact regarding about the Groupon project.
Therefore, the analyst need to understand and identify the impact in each stakeholder towards
the project in order to attain more benefits that able to lead the project towards success. For
instance, Groupon consider each of their stakeholders that are influence them towards the
huge impact of the project, and creates the solution if the expectations are not walking in the
right path with the goal of Groupon.
Risk
Despite Groupons contained stakeholders that are assist the organization to increase the
profit and efficiency, there are still a chance of the risk in due to the system fails. Therefore,
Figure 14 shows the stakeholder analysis matrix that is used as the tools that map the
stakeholder in order to describe each of the stakeholders position, main involvement, impact,
and also the risk towards Groupon.
Stakeholder analysis Matrix
Stakeholder Analysis Matrix towards Groupon (self-made) is placed below.












19

Stakeholder Stakeholder
Types
Importance
towards the
system
Potential
impact to
the
system
Groupon
expectatio
n to
stakeholde
r
Risk Stakeholder
management
strategy
IT team Facilitator Entails with
maintaining
the system
High Monitor
the
system
operation
s
Lacks in
recoverin
g the
system
fails
Entails in
designing
and
implementa
tion phase
to
understand
the whole
elements n
the system
Groupon
Customer
Secondary Entails with
the result of
the system
High Satisfied
with the
new
interface
design
Do not
really
concern of
the new
design
Entails in
providing a
suggestion
for
designing
the new
user
interface
Admin Primary Entails with
using the
system
Medium Participat
ion in
designing
phase
Lack of
capability
to operate
with new
changes
resulting
inefficienc
Entails in
training
methods to
accommoda
te new
changes
20

y
Competitors
: Living
social
Tertiary Present huge
impacts to
the
organization
High Good
recognitio
n
Provides
better
interface
and
operations
Involved in
discovering
the issues
that being
arise within
Groupon
Human Factors
Cognition
One of the aimed of cognition is to make the user easily remember the website. In order to
attract the attention of their customer, this proposed website will be constructed with the aim
of reducing the complexity. The unorganized content that being a problem in current website
will be redesigned. For instance, designing the proper content and layout that fits with screen
and also do not show too much information unless the costumer click Read more for
further details. Therefore, this may reduce the customer dissatisfaction and also reduce the
confusion within the website.
Moreover, another goal of this proposed website is to enable the user to easily recognize the
website. Thus the interface is created as simple as possible with the enhanced feature of the
operations. For instance, the search engine will be implemented in home page for the
customer who wants to filter their preference based on the price, popularity, and the latest
deal.
The slideshow will be utilized in this proposed website as a solution that enable the user do
not scroll the webpage too much. One of the slide shows will contain 3-5 pictures due to the
bandwidth usage efficiency only able to hold this data. The risk of the website that use too
much picture will resulting the bandwidth slow that makes the website is slow to respond.
Physiology
Due to the Groupon is one of the companies that utilizing web-based interface, the user need
to be able operating with hardware that connected to the Internet such as a computer, and
laptop. Nevertheless, most of the online users may feel fatigue if they surf in the Internet too
21

much. Therefore, to make sure that proper setting is suitable with online user, there are
following applications that are not harmed to the user health that created to assist user to
operate the computer easily.
Categorized as one of vision tools, Zoom text magnifier may be one of the best software
which is an enhanced screen magnification program that able to enlarge the objects within
computer or laptop monitor, yet maintain the feature of the website to fit in every device that
the user are using. Therefore, this application can be a solution towards current Groupon
website that provides unclear layout whereby one of the side bar is too long compared to
other features that requires the customer to scroll down most of the times.
Aside of camera picture, and zoom in and zoom out feature, this software is also contained
visible pointer that roles as a particular locator to assist user to follow and manage the mouse
pointer during the movement on the monitor.
Perception
Last but not least, perception is the other human factor that is aimed for the user to easily
realize the content. In a simple word, as a website using the interface as a front-end to
communicate with customers, the design of the interface is essential to attract their
preference. The website also requires to directing to another link accurately. Moreover, the
navigation bar that provides to the user need to be seen easily within the page by holding a
record of history where the user have been surfing within the website and the current position
of the user. For instance, when the customer has been surfing from previous page into the
current page, the navigation bar that placed within the page need to show the different color
compared to other pages for the customer to easily realize that they are in one of the pages
provided in the website.



22

User profiling
The user within the website consists of admin, customer, and also IT team. Once they are
registered in Groupon, the user able to edit their details that will be automatically saved in
Groupon database. For instance, customer changes their phone number details.
Relate to Groupon, it is designed to attract potential customer to visit their website, thus the
users should be given by the webpages. The navigational tools also will be placed in the same
design as other webpages. Moreover, the Groupon logo within the website is required to
redirect the link to the homepage so that the user reduce any confusion in a certain page. The
website should also provided the security platform to secure the transaction that occurs in the
website such as SSL.
Towards the expert user, the preference of this user is more into feature available within the
website. The layout of the website are fit with the screen, the content is presented clearly, and
the application structure should enable them to discover enhanced features. For instance, the
user can check the calendar that are associated with the deals period of Groupon, GPS or
Google Map to easily show the place of the deals, slideshow, language preference, and many
more. These enhancement feature will be implemented by Groupon as a second choice due to
many user still decide to remain with old feature interface.
Scenario for the proposed system:
1. Register form
2. Login Form
3. 3. Purchased procedure
Since the current Groupon website do not provide a homepage, the proposed project will be
created a home page. Within the homepage, the users are able to choose their preference. For
those user who are not currently register as a Groupon customer, they can click the Register
button that placed in top-right of the website. After the sign up process has been succeed, the
users are able to adding content details about themselves. In addition, after customer filled the
registration form, Groupon will send email verification to the customer email.
Once the customer has registered as a Groupon member, they can continue to log in to the
website by providing their username and password as the authentication process. Once the
log in and password are corrects with the database, customer are now enable to check the
23

deals as well as edit their details. By registering as member of Groupon, the customer will
receive an email from Groupon regarding the promotion or latest deal.
Whenever a customer desires to purchase an item or even an offer, the buyer is then required
to approve the payment by verifying through the code given. The code can be found in the
provided e-mail address of the current buyer, which is then filled in the space where the
verification code is asked for. This stage is to verify and avoid any purchase that is not viable.
Hierarchical Task Analysis
HTA for Current System
Log I n Process











24

Registration Process










Purchase Process











25

Refined HTA (Proposed System)
Log I n Process








Registration Process







Purchase Process
26

Stage 2 Usability Goals & Competitive Analysis
Introduction
In stage 2, the designers or in some cases, the developers will then try to figure out the
concepts or possibly metaphors that are necessary to be implemented in the proposed website
of Groupon Malaysia, regarding the concerns of the Human Computer Interface (HCI). In
terms of determining the concepts, there are three main areas that should be taken into
consideration when it comes to implementing a successful website, these three categories are
known to be usability goals itself, design principles and last but not least, competitive
analysis; all known to enhance the website of Groupon Malaysia in terms of user
requirements.
In the first area which is the usability goals, we have implemented about 4 components of
usability goals which are known to be effectiveness, efficiency, learnability and
memorability. There components are being imposed in order to enhance the back-end system
for the users and to succeed in developing a superior usability for users, when compared to
the current website.
The second area talks about the design principles in which all 6 principles are being
implemented in the proposed website of Groupon Malaysia. The 6 principles are known to be
visibility, feedback, constraints, mapping, consistency and affordances.
Other than the first two stages, the third and last stage is to analyse competitors of Groupon
Malaysia. This is done in order to gather and research about the strengths and weaknesses of
its competitors. Once the research has been done, a discussion and conclusion of each
competitors interface design shall be compared with each other.

27

Usability Goals
These days, usability goals happen to be one of the most important factors that are needed to
be considered and carefully implemented in developing a website. In order to provide a
proper Groupon Malaysia website, there will be 4 components instrumented in the proposed
website design of Groupon Malaysia.
1. Effectiveness: Effectiveness is the most deliberate part of a website interface which is
necessary in the design of Groupon Malaysia. The proposed website of Groupon
Malaysia is designed to make sure that the website is able to provide tasks and
functions that has the ability to accomplish whatever it is supposed to do. Since
Groupon Malaysia is an e-business company that provides offers from several
retailers and even sells the product straight from their own offers (which has been
negotiated with the retailer itself). Therefore, the proposed website of Groupon
Malaysia is to ensure that users would have an easy access in purchasing and
inheriting information from the website itself due to the enhanced interface of the
website.
2. Efficiency: In order to make the website as efficient as it can be, the designers have
decided to discard any irrelevant information for users. Since the website of Groupon
Malaysia is only available for members to view items, there wont be a difference of
pages between members and non-members since non-registered members do have
access to the website. During the process of signing up, the user is only asked for
payment and personal details in order to proceed with exploring the offer that is valid
from Groupon Malaysia. There wont be a need of filling out any surveys or
questionnaires since it is considered to be a hassle for new users who are just about to
use the website.
Aside from the registration process, we have also implemented a home page for users
to view all categories of offers in one page or even sorted out in chosen ways. The
home page is to allow users to have an easy access to whichever offers they are
looking for and in need of the home page includes a navigation bar where users are
allowed to go through all the pages with one click, making it efficient for users to
navigate through the proposed website.


28

3. Learnability: In order to successfully implement learnability in the proposed website,
it is recommended to make the website as simple and elegant as possible, including
necessary information and hiding such redundant ones. The reason for making the
website simple is to avoid the user finding the website a challenge to navigate
through. Other than that, the payment process is highly secured since the user has
already provided such necessary information for payment. When a user decides to
purchase an item of a coupon, the user only needs to type-in information which may
serve as a verification code and the purchase would be successful, without the need to
refill the information all over again. These functions of the proposed website make it
possible for all target markets to be able to use the website without any further issues.
4. Memorability: Memorability has been implemented in the proposed website in order
to make it easier for users to visit again and remember where and how to navigate
through the website with a sleek and elegant interface. As to maintain an elegant yet
modest interface, the proposed website of Groupon Malaysia has the same format
between all pages, except the all deals page and the homepage since it may consists of
various sections in relation to the company. Providing the same format for pages such
as getaways, dining and shopping would allow the user to predict the location of
specific information where it is needed, making it possible to dodge the complexity of
the website.

29

Usability Design Principles
The current website of Groupon Malaysia is entirely unorganized due to the fact that there
is random information posted below and on the right hand of the interface. Many current
users are unsatisfied with the interface of the website, according to the questionnaires and
interviews done in the stage of user requirements. Hence, the researchers and developers
have decided to implement design principles in the proposed website of Groupon
Malaysia which are of 6 varieties.
1. Visibility: In the condition of giving a good interface design for the proposed website,
the developers would add a homepage where the user can have access to all the linked
pages within the website of Groupon Malaysia. In the home page, there will be a
navigation bar which will enable users to jump from one page to another without
having the opportunity to go back in order to have access to another page. Also, the
navigation bar will be available in a different colour than the background colour of the
website in order to make is possible for users to spot the navigation bar.


Figure 16.0: Navigation bar of proposed Groupon Malaysia Website (Self-made).

2. Feedback: In order to provide a successful feedback within the Groupon Malaysia
website, a change of colour will be placed whenever a button has been clicked in
order for the users to be aware if the task is in process or not. If the users has not
clicked the button or tab well, the colour of the tab would not have a fading effect
since it provides a knowledge that the task is not in progress. Other than that, for the
links which are able to be clicked on, there will be an effect such as the change of
cursor into a hand with its index finger at a point in order for users to be aware that
such text are linked with another page.

Figure 17.0: Navigation bar showing the user the current page (Self-made)
3. Constraints: In this proposed website, developers provide constraints when it comes
to registration and payment process. The purpose of doing so is to avoid irrelevant
accounts and also, Groupon Malaysia does not support the idea of a user having 2
accounts; one email address is valid to have only one account in order to avoid any
30

inconvenience and unnecessary accounts held within the database. On the other hand,
the payment process also consists of constraints in terms of payment. Whenever a user
wishes to register the payment information such as credit card number, card holders
name and several more, there are restrictions in verifying the specified payment
information. For example, if a user has given invalid Username or password, the
website will check in for verification and will deny if the account does not exist of
such.




Figure 18.0: Out of an invalid username entered by a User (Self-made)


4. Mapping: In the proposed website of Groupon Malaysia, the navigation bar has been
placed on top and the similar offers are right beside each other. These are the only
available functions which has a relationship with other links held within the website.
The navigation bar will be placed on the top middle of the interface and each tab is
located beside each other in order to avoid any confusion. Also, the similar offers are
available more on the bottom part of the website in which they are also beside each
other since the current website has issues mainly on the navigation of the similar
offers. This would possibly encourage the user to visit the website more due to its
convenience.

5. Consistency: In the proposed website of Groupon Malaysia, the appliance of
consistency only exists in the category of external consistency. In the appliance of
external consistency within the proposed website, only two icons which are links to
their social network. These icons are the popular icons of facebook and twitter, both
applied at the footer of the website.


Figure 19.0: external consistency of Facebook Inc. and Twitter Inc. (Self-made).

31

6. Affordances: In appliance of affordances, a slideshow of the latest deals will be
placed in the home page in order for users to be updated of the deals in Groupon
Malaysia. This slideshow will be located in the middle of the home page for users to
be able to verify the value of a slideshow. There is an option or previous and next
button for users to be able to view the offers that are either on the previous or next
slide. We made the symbols recognizable by all users since it is used worldwide.

32

Competitive Analysis
A competitive analysis between the competitors of Groupon Malaysia shall be displayed
below. These three competitors are known to be JetSetter, LivingSocial and Dealshelve.

Table 1.0: Competitive Analysis of Groupon Malaysia (Self-made).








Strengths
- Simple without any complications
- Functions are well arranged.
- Simple interface yet attractive.

Strengths
- Attractive design in interface.
- Images to describe the offers
- Good selection of color
- A balance of text and images.
Strengths
- All information visible.
Weaknesses
- Lack of suitability in colour
combination.
- Lack of functionalities provided.
Weakness
- Less information provided
regarding the offers
Weakness
- Too many irrelevant information
- Text is small (readable but not
convenient)
- Poor colour combination.
- Mapping is implemented poorly.

Usability Issues
- None
Usability Issues
- Category of deals are not
available
Usability Issues
- Irrelevant information on home
page.
33

Evaluation
Based on the implementation and analysis in stage 2, it is found that the developers should
design the website as simple as it can be with the possibility of making necessary information
visible to the users. This would make users feel comfortable while using the website since
they wont be facing any complicated procedures within the website. Aside from making the
interface simple, the tabs and buttons should be placed on the same location as it was with the
home page in order to avoid confusion with the other pages linked within the website.
Moreover, the fonts used in the website should be in the appropriate size where it is visible to
users but also, not so big due to the result of unorganized platform. In doing so, it is
important to use the same font style in all pages in order to implement recognition for the
users of the website. The colour combination should also be considered since it defines the
style of the entire website, whether it be elegant, bright or dull. In fact, adding in multimedia
contexts such as slideshows or videos would indeed attract that customers even more since it
makes the website have a glow to it.
Alongside, the proposed website of Groupon Malaysia has encountered all the principles and
usability goals and has been implemented well on the pages that are needed, allowing the site
of Groupon Malaysia to satisfy the usability of users while using the website.

34

Stage 3 Prototype and Walkthrough
Introduction
Groupon Malaysia was our chosen website for HCI assignment and we conduct three main
types to develop better website to Groupon Malaysia (www.groupon.com.my) by using
Parallel Prototyping, Peer to Peer Evaluation and Final Sketch by using the method story
board. These are methods help us to develop a website that is more useful and take attention
of visitors of Groupon Malaysia with the sample and developed website.
Parallel Prototyping
In this section, each of team members is contributing three scenario of storyboard that
will be used for creating Groupon Malaysia website:
- How to view deals and products easier.
- How to see the price and details of products that added to cart.
- How to view Groupon with Slideshow and more organized.
Please refer to appendix to see the sketches.

Peer to Peer Evaluation
After the parallel design that created by every team members, peer to peer evaluation
is needed to find out the most effective design as a final sketch. Below table is the
result of peer to peer evaluation:
Evaluator: Ibrahim Jamal

Factors Fatema Habib Aprilia Ariesia Chairunisa Bintang
Interface Design The interface is simple
and gives attention.
Each page has the same
interesting interface.
The designs of each page look
interesting.
Consistency Story-board that created
is understandable.
Storyboards that created are
consistent.
Storyboards that created are
consistent and reliable.
Efficiency Design of website is
efficient.
Overall storyboards are
effective for user.
Each page of storyboard are
efficient for users
Learn ability Interface with HCI is able
to learn.
It is easy to attract more
users to use the system.
Number of step is reduced so
learn ability is easy
35

Final Sketch
The conclusion of each design has its own advantages and disadvantages so team
members decide to draw the final sketches based on the design principles and usability
goals. The final sketch shown in the appendix is a result of the combination of different
design elements.
- Final Homepage
-
-
















Section Explanation
1 (Logo) The Logo presents GROUPON company and we just took it
and implemented on our website to show the same logo that
present Groupon brand.
2 (Select City) To give users options to select their area in Malaysia to view
the nearest products and deals to their city.
3 (Home) In home page, users or customers can see the hottest deals and
product in Groupon Malaysia.
1
1
2
3

6

6
4 5
8

9

10

14
13 12 11
15
7

6
36

























4 (Dining) Dining page is basically about food and restaurant around
Malaysia.
5 (Shopping) Shopping page contain a lot of shopping places and offers that
provided for customers.
6 (Gateway) Customers can easily see the deals for travelling and vacations
in this page.
7 (All Deals) Customers can view varies of deals.
8 (Login) Shows users how to login or register on Groupon Malaysia as
a member.
9 (Slideshow) Shows customers all the newest and hottest products and deal
on Groupon Malaysia.
10 (buy now) Shows customers details about the deals or product shown on
the slide show with the price to buy it if they would like.
11 (Popularity) List of the most popular products and promotions to
customers.
12 (price) List of products and deals according to the price of the
products.
13 (Latest Deals) List of latest deals in Groupon Malaysia.
14 (Recent
Promotions)
Shows customers what is the recent promotion in the Market.
15 (Follow Us) Shows the Footer part of the website to customers and the
linked to Groupon in Facebook and Tweeter.
37

I nteractive System Design
Home page

Figure 20.0: Homepage

Figure 20.0 shows Home page of our Groupon Malaysia and we decided to design the
interface as sample as useful to get more attention from Groupon customers to increase the
visitors of Groupon Malaysia as well increase the selling for all the products and deals on
Groupon Malaysia. The Home Page contains a slideshow that shows customers the hottest
deals on Groupon Malaysia. Moreover, the purpose of sort of Popularity, Sort by Price, Latest
Deals and Recent Promotions is to send customers easy to each page as required.

38

Dining

Figure 21.0: Dining
Figure 21.0 Shows Dining page is a page has all products and deals about food and restaurant
to provide a wide choice for Groupon Malaysia customers. Besides that, Dining Page
contains many promotions and deals.





39

Shopping

Figure 23.0: Shopping
Figure 23.0 shows the Shopping Page of Groupon Malaysia to show customers all products
and shops around the selected area in Malaysia to give customers much option about
shopping specially Clothing.
40

Getaway

Figure 24.0: Getaway
Figure 24.0 shows the Getaway Page which contains much option on the interface such as
Buy Now to sell the chosen product to customer choice. Also it has wide screen slideshow to
show all the hot deals in market around Malaysia.





41

All Deals

Figure 25.0: All Deals
Figure 25.0 shows All Deals Page which contains different deals and promotions around
Malaysia to give customer wide opportunity to see different deals on Groupon.









42

Login
Figure 26.0: Login Page (Self-made).
Figure 26.0 shows the login Page that contain all the information that not member needs to
input to be a member on Group on Malaysia.

43

Individual Part
User Requirements
Introduction
Founded by Bias and Mayhew (2005), Usability Engineering Life Cycle (UEL) has been
established as an essence to construct the usability test plan. In a simple word, if the analyst
can associate the UEL with the product development cycle in the earlier, it will give the
analyst a huge beneficial in terms of their analysis and testing regimen that will be able to
assist them to attain the data required and present the project with the proper usability design,
analysis, as well as testing of the project.
As it is shown in Figure 1, they have created Usability Engineering Life Cycle that consists
of following stages including requirement analysis, design, testing and development, and
many more. As a first stage, Requirement analysis is created in order to build the user
uniqueness,capable to verify what the user necessitate, create the aims and objectives that
used for usability study that includes user profiling, stakeholder analysis, hierarchical task
analysis, data gathering, human factors and many more.

Figure 1, Usability Engineering Life Cycle (Bias and Mayhew, 2005)


44

User Profiling
User profile is well known in corporations as a technique that delivering data or information
based on the analysis regarding the user uniqueness. In order to build a system, system user
needs to be pinpointed in the beginning. Once, system user has been classified, users
uniqueness data needs to be attained as it will be used in designing the phase system. Based
on Kuniavsky (2003) philosophy, he stated that user profile is nearly equivalent with a
persona, which is a type of a fictitious person as a collection of attributes such as goals,
attitudes, work, age, and skills.
In a simple terms, user profiling of group segmentation consists of important data regarding
their uniqueness such as mental, physical characteristic and demographic area in association
to the system. Recently, World Wide Web Consortium (W3C, 2004) has focused on physical
characteristic user that refers to handicap by providing instruction as their direction in order
to assessing accessibility. For instance, perceivable content, and also voice enabled
application are same samples of the accessibility that capable the blind people at a particular
in order to understand regarding the content of the website.
Moreover, user profilings aim and objectives have been set to assist system designers to gain
the necessary data that they attained in order to understand their real user through creating a
report regarding the real users attributes such as their age, gender, mind-set, educational
background, and utilize it within the development process. Moreover, one of the examples
regarding the real users attribute is shown in Figure 2.
Age
Older people made more mistakes and having low capability to interact with the system
Gender
The distinction of the gender could lead to some specific design features within the website,
such as colour pick used in the system
Cultural
Focused on how to integrate and adapt the cultural diversity within the GUI design

Figure 2, Real users attribute example (self-made)
45

User Requirement Analysis
Within user-centred system design, user requirement analysis is designed to evaluate the
potential user towards the system by the user attributes. As a result of this analysis, the
system developer will be having verification towards the system whether it is categorized as a
user-friendly system that can be able to increase user satisfaction. Nevertheless, the software
developer is necessitated to chose the proper technique in order to make sure the process are
on the right path. For example, there are several components that can be utilized in order to
describe the phase of the analysis structure that comprises of:
Information gathering: One of the following methods that are created to collect the data that
has been gathered from the user towards the current system that is being operated.
User needs identification: Once the issues within current system are identified, the proposed
solution will be created that describe the user desired and expectations towards the new
enhancement.
Envisioning and evaluation: is a method that involves with constructing a prototype for the
proposed system main functionality and performance based on the suggestion that has been
received from the user. Moreover, this process will remains as long as the user who provides
the suggestion regarding the issue that has been encountered is increased.
Requirements specification: Placed in the final phase, this phase has entailed with
maintaining the changes that are needed before the proposed system is developed completely.








46

Human Factors
Human factors refer as the scientific discipline focused on the interpretations towards the
interaction among humans and the computerized system in terms of the application of
theories, rules and principles, and any other techniques of design that suits with the system
necessity and human benefits (Rice.edu, 2008). The fundamental considerations of human
factors within HCI are physiology, cognition, and perception that able to affect the
communication between computers and the user.
Firstly, the system user is contained either individual or group of users from an organization
assigning to accomplish the task given within the input of the system. In here, the
programmer of the project is required to identify the skill and the lacks of the user during the
designing the system interface phase.
Moreover, within the cognition phase, the programmers will be required to adjust the content
of the interface into the simplest interface in order for the system user to easy to remember,
and have a high attention towards the interface of the system. In a simple word, the
programmer is required to design the interface that system user can easily understand by
using the methods of interface that can capture system user memory to operate the
functionality of the system.
Data Gathering
Data gathering is aimed to be a method that utilized in order to enhance the clear objectives
and gather the general view of certain research area. In a simple word, data gathering is used
in order to gather the necessary, proper, and relevant data that will be used to form a solution
of the problem that is being addressed. Data gathering has following types that consist of:
Interview
Questionnaires,
Workshop or focus group,
Naturalistic observation, and
Studying documentation.
Nevertheless, the proper data gathering types need to be chosen properly by the researcher in
order to attain data accurately. In addition, each of the data gathering types will be clearly
explained clearly below.
47


Questionnaire
As one of data gathering types, a questionnaire can be structured or even unstructured. Based
on Malcolm J. Conway (2006), Questionnaire is defined as an internal research tool and is
one means of eliciting the thoughts, feelings, beliefs, experiences, and attitudes of a sample
group of individuals. In depth, a questionnaire that will be presented in either written form is
used to gather the necessary data for further analysis of particular research that are consist of
preplanned set of questions intended to certain group of people. Once data has been gathered,
the final result of the data that has been gathered will determine the result through conducting
an analysis. Basically, a questionnaire has following characteristics that are shown in Figure
3.

Figure 3, Questionnaire characteristic ( James.P, 1997)
The length of time that respondents will be taken to understand and answer each of the
questions that contains in a questionnaire need to be considered, due to the respondents might
not be able to answer the questions or the respondents do not have much time to answer
resulting the questionnaire data might not be filled accurately.
As it mentioned earlier, the questionnaire is contained of the following preplanned questions
including multiple choice, and Likert scale. Basically, Likert scale is used within
questionnaire due to following reasons including the respondent that need to measure the
level of agreement or disagreement level towards the statements given. For instance, Figure
4 shows the example of a Likert scale questions within the questionnaire.
48


Figure 4, Example of Likert scale Questions (Cvent.com, 2013)
Interview
Interview is the primary method to collect the data during the conversation through face to
face meeting. In every interview session, there must be one primary interviewer and also one
primary interviewee (Martin E. Modell, 2007). There are several types of interview that
consists of:
Topical Interview : The main discussion of this interview is related to the facts and the event
that has been passed intended to the interviewee to share their opinions towards the
discussion. For instance, during the Football match, the supporters from both of the teams
will be asked regarding the performance of the match after the match has finished.
Conversational interview: Also known as flexible interview, this type of interview questions
is not organized. In a simple word, every interviewee will be having different questions given
by the interviewer. However, the first question will be given the same to all the interviewees
to make sure that questions flow is on the right path towards to the aim and objectives of the
research. This interview also allows the interviewer to ask the interviewee to provide
unscripted feedback in order to elucidate the meaning of questions as required. For instance,
Figure 5 shows the example of conversational interview.
Interviewer: What marketing books do you like the most to read?
Interviewee: I dont read marketing books.
Interviewer: Is there any other book from another genre that you like the most to read?
49


Figure 5, the Example of conversational interview(self-made)
Telephone interview: is conducting an interview through the phone by the interviewer to the
particular interviewee to ask and record the answer from the interviewee.
Naturalistic observation
There are two types of observation that consists of naturalistic observation and laboratory
observation. Also known as field observation, naturalistic observation is one of the methods
to do a research in order to attain the data required that entails with observing the subjects in
their own habitat. (Saumag.edu,2007).The aimed of naturalistic observation is to identify the
behaviours in a certain habitat and tend to ignore the lab research that might change the real
subjects behaviour. In addition, one of the main benefits by having naturalistic observation is
enabled to construct the external validity of the research finding. In a simple word, by having
this observation the analyst will be able to refer the result from their observation which is
derived from general population that provides the accuracy and prevent ay data manipulation.
Workshop or focus group
Focus group is a form of qualitative data collection that refers as a group discussion that
contains six to twelve persons who discuss he similar characteristic or main interests.In every
focus group, there will be one facilitator that leads the group based on a predetermined set of
topics. The facilitator also manages the discussion atmosphere that encourages the
participants to discuss regarding their opinion and perceptions. One of the main by
conducting a focus group is receiving the information for a certain topic that may be hard to
collect by other data gathering methods.
Studying documentation
Also one of the data gathering methods that is beneficial for getting the back-end information
towards the step that need to be taken and rules for a certain topic.




50


Stakeholder Analysis
According to Kammi Schmeer (2013) is process of systematically gathering and examining
qualitative data to decide on whose interest that will be selected into account when enhancing
or constructing a policy or system. In a simple word, stakeholder analysis examine each level
of interest of the stakeholder that are entailed with the project in order to measure certain
limit of each stakeholder intervention within the object. Thus, stakeholder main role is to help
in terms of decision-making that make sure each of stakeholder are doing their own rule in
the right path. In addition, Figure 6 shows the phase that will be taken in stakeholder
analysis.

Figure 6, Eight major steps in stakeholder analysis (Eestum.eu, 2013)
To summarize the steps taken within stakeholder analysis, there will be examining the certain
stakeholder groups that are entailed with the decision-making of the project and also the sub-
groups by defining the influence that stakeholder. For instance, examine the stakeholder
through the rank that has the biggest influence towards the project will be one of the
following methods to group the stakeholders.
After the previous phase has been done, the next phase will conclude the importance of the
most influential stakeholder such as the highest position that need to be considered before
the analyst separate them into several groups. Moreover, the next step will be creating
strategies towards their participation within the project. In this step, if some of the exist
51

stakeholders that are unwilling to be entails within the new stakeholder analysis is having the
high chance to be dismissed.
Stakeholder categories
There are several types of stakeholder that will be involved within every project in an
organization that consists of:
Primary stakeholder: is referring to those people that assigned by using the system. The
primary stakeholder role is receiving the direct impact of the operations and business
activities. For instance, employee or staff within an organization.
Secondary stakeholders: Distinct from primary stakeholder, secondary stakeholder is a group
of people who are not getting direct impact either positively or negatively of the business
activities and decisions. For instance, customer can be classified in this stakeholder due to
their involvement is not required to the entire aspects of the project.
Tertiary stakeholder: refers to the stakeholder that do not have any contribution to the project
but capable to present huge impacts towards the result of the organization within an adverse
reaction, that are also known as competitors.
Facilitating stakeholder: acts as the facilitator whereby a group of person who are
maintaining the system within an organization. IT department staff can be one of the
examples of this stakeholder since they are the person in charge of maintaining the system
within the organizations.
Stakeholder analysis matrix
Stakeholder analysis matrices is one of the main techniques that are designed to map the
stakeholder in order to describe each of the stakeholders rank of their position, main
involvement and, impact within the project. Moreover, Figure 7 shows the example of
stakeholder analysis matrix.
52


Figure 7, Stakeholder analysis matrices (Monkibo.com, 2009)
As it shown in Figure 7, the boxes A,B,C,D are the stakeholder within a project. The
implications of each box is concludes below:
Box A: is the stakeholder that has high level of priority of the project as well as huge impact
towards the succeeding project. The organization needs to maintain the good relationship
with this stakeholder in order to make sure the supports given by this stakeholder able to
encourage the project to be succeeded. Senior officials can be one of the following examples
of this box.
Box B: Also categorized s high importance towards the progress of the project to be
succeeded but with low influence. This means that they might necessitate particular
initiatives if their interest are to be secured. One of the example of this stakeholder can be
youth, or even seniors who might be beneficial of the proposed project, but have the least
participation within development level.
Box C: is the stakeholder who has power of the huge influence within the project, who can
easily affect the result of the project, but whose interest are not necessarily aligned with the
aims of the project.
Box D: is in the lowest priority within the project as well as having least impact compared to
others stakeholder towards the system.
Thus, stakeholder analysis matrix is able to present the well-defined explanation to the
analyst to understand each stakeholder contained in the project, resulting the solution on how
to maintain the good relationship towards all of them.

53

Hierarchical task analysis
Based on David Embrey (2000) philosophy, Hierarchical Task Analysis (HTA) is a
systematic method that express on how task in organized in order to achieve the objective of
a job. HTA entails with examining a top down fashion the overall objectives towards the
task, and then break into several sub-tasks and condition under that they need to assign in
order to accomplish the aims as it shown in Figure 8.

Figure 8, the examples of HTA (Uu.edu, 2002)
To summarize the step towards constructing the HTA that shown in Figure 8, there will be
certain phases that need to follow including HTA starts their analysis by creating the overall
goals that the person must be accomplished. Once the overall goals have been identified, it
will expand into the sub-operations and continued with the plan specifying when they are
assigned. The plan roles as the fundamental elements of HTA because of it expresses the
information sources in which the employees are assigned to do, in order to signal the
necessity for several activities. Every sub-operation within HTA is allowed to be expanded
further depending on the tasks and plans that will be given to the analyst.
54

In concludes, one of the main advantages of HTA is enabling the analyst to concentrate on
the main points of the task in which can have an impact on plant safety. In depth, By the
method of expanding the task into more specific as well as plan for the operation, it resulting
the analyst able to easier in terms of maintaining the consistency of every operation.
Conclusion
In this report, the user requirement has been clearly discussed. Since user profiling requires
certain important information, data gathering methods have been assigned to collect the
essential information. Stakeholder analysis also required for every project in order to
understand the relations and also the impact that may affecting the project either directly or
indirectly. In addition, HTA steps also have been discussed in this assignment for the analyst
before doing the operations. Therefore, these elements are able to satisfy user requirements
by presenting higher quality of the project as well as fulfilling the user requirements.

55

Usability Goals and Competitive Analysis
Each and every designer wishes to design a premium interface that is to be respected by their
colleagues and impersonated by competitors. But in order to derive such attention, not only
does it require motivation but it also takes more than ostentatious advertising. It can also be
accomplished by making the use of quality features such as usability goals and design
principles. These can be achieved by attentive planning, compassion in users needs and
thorough testing.
Usability Goals
Before developing any kind of software or device that is to be evaluated in the market for its
launch, it must be evaluated in order to avoid technical failures and it also has to concentrate
on the usability principles. Usability evaluation allows the developer or designer to decide
whether the product is competent enough for the users satisfactory (Comp 2030, 2012). This
is to make sure that the project has reached the level of expectancy and also to reach the goal
of the system; such a goal is known to be Usability goals and sometimes usability criteria
when it comes to measurements. Basically, the goals are able to be sorted out but shall not
reduce to numerical measurements (Faulkner,2000). It is also said that the goals are
derivative from the users that have been using the product or even experimenting with it
(Kindborg,1999).






Figure: A short comic of Dilbert about Usability Goals. (Janahrend, 2012).

56

Components
Since the abstract terminology of Usability goals can be complicated, there are solutions in
making the process less complex. The solution to a trouble-free access is to make use of the
main components of Usability goals (Karlsson, 2002). These components may vary of
effectiveness, efficiency and safety, utility, learning ability and memorability.
1. Effectiveness: This is the most deliberate part since it refers to the objective itself. It is
that part of being concerned and aware of whether the system or application should be
doing what it is supposed to in order for users to accept the usage. Effectiveness is
keenly calculated by test metrics as well as architecture and semiotics (Affordable
Usability, 2011).
2. Efficiency: Aside from effectiveness, it should also be efficient since users tend to
manage their time. Efficiency is to confirm that the user has the ability to utilize and
be productive with the system. It is to measure how well the system works on what it
is supposed to do (Affordable Usability, 2011).
3. Safety: The reason for even considering safety is to shun all possible errors that can
occur while the system is in use. In order to solve these issues, the developer can
provide options for recovery in errors such as undo and etc.
4. Utility: Utility is to have adequate functionality to contain a range of users tasks in
order for them to perform on average. This is usually done by taking essential steps
that would determine the users anticipation while using the system (Affordable
Usability, 2011).
5. Learnability: learnability is to help the user have an easy access in using the system.
Also, the system should be user friendly to certify that the user does not have to
consume time in order to learn the functions of the system or software. This step is
highly important because some users are not able to find the information they wanted
which may lead to the effectiveness of the system. Therefore, it is necessary for
learnability to be covered up in order to ensure that users would be able to easily
outsource information needed and this would increase the chances of users visiting
(Affordable Usability, 2011). This component is calculated by user-research metrics.
6. Memorability: this goal is to confirm how easy it is for the user to remember the
functions once it has been learned. This can be done by assigning menus and other
navigation options. After the user has earned an experience with the system, the aim is
to make sure that users would be able to remember where to find information or how
57

it works (Affordable Usability, 2011). If users are able to identify the functions and
catch up with the system, it is most likely that users may use the system more
frequently. This component is calculated through the basic user-research methods.
Prioritization
Managers who concentrate on user-interface merit first selects skilled designers and then
organize schedules that comprises time for strategic preparation and attentive testing. The
designers commence by decisive user requirements, engendering multiple design options, and
carries out extensive assessments. Contemporary user-interface-building tools then allow
implementers to rapidly build systems for auxiliary testing.
A successful designer goes ahead of hazy ideas when it comes to user friendliness; more than
making checklists of subjective guideline. They have a systematic understanding of various
communities of users and the errands that must be accomplished (Mifsud, 2011). They revise
evidence-based guidelines and hunt the research journalism when needed. Professional
designers are intensely committed to allocate the user, which reinforces their resolution when
they go through thorny choices, time pressures and fixed budgets.
When managers and designers have completed their jobs successfully, their valuable
interfaces produce affirmative thoughts of achievement, capability, and mastery in the
community. The users have an obvious cerebral model of the interface that permits them to
predict what will happen in retort to their actions with poise. In preeminent cases, the
interface almost vanishes, allowing users to ponder on their work, discovery, or pleasure
(Miffurd, 2011). This kind of soothing environment gives users the mood that they are in the
flow of working at their peak, while achieving their goals.






Figure: A designer watching a video of usability testing. (Eatpaintstudio, 2012).
58

User Experience Goals
While usability goals are to enhance the usage of the device, user experience goals are to
enhance the users experience with the device or system. User Experience Goals are not
really necessary for a developer to employ but it is rather an opportunity to be employed. It
also helps the developer to decide whether the system or product has reached its effectiveness
and efficiency, whether it is prepared of not (Schrag, 2008). Once the goals has been checked
and achieved, there is a higher chance that the users experience would be pleasant. However,
it is not easy to be measured. Such may include:
1. Satisfying: In order for the system to be more productive for users.
2. Motivating: To avoid users from the feeling of giving up.
3. Enjoyable: In the process, no frustration should be encountered
4. Aesthetically pleasing: Interesting enough for the users to use.
5. Fun: For users to feel excited about using the system.
6. Supportive of creativity: Design and tools of the system.
7. Entertaining: Entertain the users by making the system look attractive.
8. Rewarding: There should be a sense of productivity.
9. Helpful: Have features in order for the user to not feel lost and insecure while in use.
10. Emotionally fulfilling: In order for the user to experience several emotions by using
the applications available in the system.
Usability Design Principles
Since design is often overlooked or misunderstood by designers, some of them (designers or
developers) often believe as long as the interface is acceptable and fashionable towards the
viewers, it is going to be highly accepted and sufficient for the society. Without being aware,
graphical design and composition is what designers and developers usually concentrate on in
order to make the project severely attractive and eye-catching. But in fact, does not realize
the importance and significance of the visual layout of a project since it determines and
basically directs where a user can actually take information that is necessary and relevant.
This makes the visual layout much more pertinent compared to the graphical design
(Gutierrez, 2013). Overall, a move towards achieving usability goals is to have an easy-to-
learn design of the system or even concentrate of the visual layout itself. A well planned
interface is understandable and controllable which assist users in completing their tasks
without any interference or disapproval; resulting to the relevance of the Usability Design
Principles (MTU, 2013).
59

The principles of Usability Design shall be explained below:
1. Visibility: Visibility is considered to be a major point when it comes to designing a
website or a system. The main goal for a user to view projects is to get something
done, either it be a task or just to gather information regarding certain objectives to be
completed. In order to provide a superior level of visibility to the user, it is
recommended that the functions provided in the system should be based on the users
aspect where the users are able to find and recognize the functions where it is applied.
In other words, Visibility is successfully sited if the controls are placed in a highly
visible location (UCTI, Undated).

This would make it possible for users to easily gather and grasp the necessary
information needed in the system, or even to get their tasks done easily if needed;
since it is what they visited the website or system for. A triumphant visible interface is
to be aware of the international or common understanding of objects that is known to
several users (Norman, 1988).








Figure: EZ Toilet flushes (Optionsil, 2013 & Nigel, 2009).
The figure above is an EZ toilet flush where it indicates that the toilet flush should be
pushed on by the users foot. Since some of the users are aware of the fact that flushes
are always located on the top, most of them would not be aware that the tiny object on
the floor is a flush. Hence, visibility in this form has not been imposed well.




60

2. Feedback: Feedback is basically a design principle where it allows users to be updated
and aware of what the system or website is in process of. It is also known as a
stipulation that informs the user when an action has been demanded or called for. In
order to successfully apply a good feedback into the system, it is encouraged for the
function to create an action such as a push down effect in order for the user to be
aware when an action is in the process or not. Aside from effects, it can also be done
by sending a result to the user, informing what certain action and results has been
accomplished (Norman, 1988).









Figure: A switch on/off button (Chowdhury, 2013).
The figure above is a switch on/ off button without an indication where it is in process
or not, whenever the user clicks on the button. This is a sample of a very bad feedback
since it doesnt tell the user if the button has been clicked on or not. The solution will
be imposed on the figure below, with proper feedback.









Figure: A switch on/off button with proper feedback imposed (Chowdhury, 2013).

61

3. Constraints: This design principle basically describes and determines the restrictions
of interactions within the user and the system or even a website. This principle is
applied and often useful in terms of misusing the functions available within the
system. The design principle of constraints is divided into three parts known to be
Physical, Logical and Cultural (UCTI, Undated) making it possible for all types of
functions to have certain types of constraints that are suitable for each. Details aside,
the main objective of applying constraints is to avoid users in making errors while
using the system.

a) Physical Constraints: Physical constraints are basically concentrated on the
term how? In this case, the constraints are suitable with objects which can
easily be used in a way that is not suitable as the proper usage such as using
the backside instead of the front side. Overall, Physical constraints concentrate
on how the function should be applied.
b) Logical Constraints: Logical constraints are usually imposed on the term
what? In this case, the constraints are applied with objects that can be
misplaced into other parts where it isnt supposed to be such as the use of
plugging an HDMI and an HADI cable. The slots of these cables can easily be
undertaken for and might even be placed in the opposite slots.
c) Cultural Constraints: Cultural constraints are typically rigorous with the usage
in terms of what? and also learned conventions since it refers to several
other countries of even places with different cultures. One might be mistaken
for the other since cultures and traditions are not precisely similar when it
comes to comparison between the worlds.





Figure: A sample of constraints in entering an e-mail address (Salicetti, 2013).
62

4. Mapping: This design principle is based on the relationship between two or more
functions, which are known to be controls and movements in this case (Norman,
1988). Mapping allows the user to identify the relationship between items and also
enables the user to predict the results and usage of the function. In order to
successfully place a defined mapping area, it is recommended that the designer
arrange such functions in relation to how the results are going to be, making the user
accustomed to the location of the functions. Without the use of mapping, users may
have a possibility growing into frustration while using the system making it
impossible for the user to enjoy and use for the second time, or even restricted to due
to the unsatisfactory level.









Figure: A sample of improper mapping in terms of keyboard (ally0528, 2013).
The figure above is a sample of improper mapping in terms of keyboard navigation.
The upper and lower case are beside each other but the left and right case seems to be
found nowhere near. This proves the fact that the navigation of the keyboard is in
poor application of mapping. The figure below would show the proper mapping of
keyboard navigation.








Figure: Proper implementation of keyboard navigation (Wi-tribe, 2013).
63

5. Consistency: In terms of this design principle, the aim is to allow users to have
shortcuts by having icons which are familiar to almost all users of technology. Aside
from icons, it is also available by having double clicks of even two keys being pushes
after one another. In terms of avoiding an unsuccessful application of consistency,
shun all icons or shortcuts that are not familiar by users. There are two basic types of
consistency; both are known to be in terms of Internal and External Consistency.
a) Internal Consistency: This type of consistency refers to the designing
operations to act the same way as it is involved within the application only.
b) External Consistency: This type of consistency refers to the designing
operations to act the same way not only when it is involved within the
application but also among other applications as well.


Figure: a sample of internal consistency in the application of MS Word. (Self-made).
6. Affordances: Affordances is the last in design principles but it does not make it the
least important. This design principle talks about the properties that functions have
and based on the properties, how it can be used in such proper way as it has been
designed for. This specific type of principle is aimed to enable users to clearly
understand what are the functions for and why are they designed in such a way. It is
highly recommended to design the system in a way that it is able to provide users
hints of how it is to be used.






Figure: A sample of a sign with no consideration of any affordances. (Belarus, 2012).
64

Competitive Analysis
Competitive analysis is a procedure where companies go through in order to inherit
information about the performance status and marketing strategy of the products or brands
that are in competition with, within the marketplace. In terms of implementing an effective
plan in the strategic way of marketing, companies should be aware of the competitive
environment around the marketplace and also, information about the selected companies that
they are competing with such as the prices, products, quality, service and several more in
order to be able to accurately determine the strengths and weaknesses of the competitors. The
use of determining the strengths and weakness is to be able to gain advantage of their barriers
held within the competitors market. There are several steps to be considered in order to
generate a competitive analysis. These steps are to be provided below.
1. I dentify Competition: The first step is to identify the companies that are in
competition with your product. This is done by gathering the customers viewpoint
and to group the results (companies considered to be competitors) according to the
price.
2. Grouping Competitors: The second step is to group the competitors according to the
strategies that they are using, this is done in order to identify what is it that actually
motivates the customers to purchase their products.
3. Examination of Competitors: This step allows the process of analyzing the marketing
strategies of the competitors and also to identify the advantages and disadvantages of
the companies. This step gives an opportunity to take down the competitors as its
vulnerable state.
4. Comparison of Competitors: this step supports the comparison of every competitor
that is faced as a threat to the current company. This is done by listing down the
features of every product or service that is available from each competitor.
These steps are to be taken while analyzing the competitors in order to help determine where
would the product fit and be a success in the overall marketplace.

65

Stage 3 - Prototype and Walkthrough
Introduction
As a definition of Prototype is a not finished or simple working model of a product or a
system to provide a review how the product or system will look and behave. On the other
hand, producer will have feedback from customer to fix bug and take advantage of what
customers need to build a successful and useful product. Prototype contains four elements
such as type of prototyping, participatory prototyping, parallel design and peer to peer
evaluation. Each one of these element consists definition, example and how we implemented
to our topic GroupOn Malaysia (www.groupon.com.my).
1. Type of Prototyping
Type of prototype conducts several types that helps designer to build a great Prototype
because of some characteristics such as support creativity to help developer to capture and
generate ideas. Also it encourages communication to help designers and users to discuss
options and interact with each other. Therefore, there are four main types of Prototyping.
Representation
Prototype as Representation is a term defined as drawing the website before design it on the
PC by sketching it on paper or sketching it on computer using specific programs. Both ways
are useful because they help the designer in different ways. Firstly, Off-line prototype (Paper
prototypes) this type is used by several ways such as Paper sketches, illustrated story-boards,
Cardboard mock-ups and videos. Story-board required using in our HCI assignment. We had
been using this method to build a new prototype website for Groupon Malaysia. The main
advantage of using Offline prototype is that they created quickly and usually it done in the
early stages of designing the Website. Second type of prototyping is on-line Prototype
(Software prototypes) these prototypes done by computer. They include some types such as
computer animations, programs written with scripting language, interactive video
presentations and applications developed with interface builders. The disadvantages of using
are higher cost than Off-line prototypes and also might require skilled to implement advanced
interaction because it does with programs. This is why we had been used story board which is
off-line prototype to our GroupOn Website.

66

There are some advantages and disadvantages of storyboarding:
Advantages:
Does not require programming skills
Provides a quick way to sketch design ideas
Complements verbal scenarios
easy to meet early stage design feedback from users
Disadvantages:
Not practical for detailed design
Interaction between the storyboard and a user is limited.
Some of the project team members are difficult to draw the sketch by
hands.

In conclusion, Representation has two different types of prototypes Off-line and On-line to
help designer sketch website before starting with development stage to understand and see in
reality how the website will look like.
Precision
Precision is a type of Prototyping that help designers to show users about the system or
website being built. This type of Prototyping provides description such as the user opens the
file or the system displays the results. However, it does not give information about what the
users of the system will do. Besides that, Precision forces designers to show the interaction of
the Website or system to show users how does the user open the file and what are the specific
results that will appear on the screen. Among the developing period, the level of Precision
usually increases to build a successful Website and more details are set during the
development time. Moreover, Precision is harder to be use in On-line Prototype than Off-line
Prototype because on off-line prototype needs less skilled and less experience than On-line.
An example of Precision is to create a detailed animation that shows feedback from specific
action by users. This is how we implemented to our prototype Groupon Malaysia by
presented our website to our lecturer an classes mate and shown them the facilities and new
interface to Groupon Malaysia.

67

Interactivity
Interactivity is a type of Prototyping and it is an important characteristic of HCI systems
because of interactive. However, is it too difficult to design an effective interaction? This is
why there are many interactive Websites have a good Look but a poor Feel. Moreover,
interaction has very tight quality linked to the end users and understanding of their work
practices. Besides that, there is a critical role for an interactive website is to illustrate how the
users will be interacting with the website. This role may seem more natural with On-line
Prototypes. In fact, it is usually easier to explore different interaction strategy with Off-line
Prototypes. An example of Interactive prototyping is to make a series of paper screen images
in which one person acts as the user and the other plays the system.
Evolution
Prototypes have different life distances depended on purpose of the work. Firstly, Rapid
Prototypes are usually created for specific purpose with short period of time and then thrown
away. Besides that, Rapid Prototypes are important in the early stages of designing a website
and they must be cheap and easy to produce since the goal is to quickly to discover and then
thrown away. For Rapid Prototypes it may be off-line or On-line as long as it gives the
purpose of creating Rapid Prototype.
Secondly, Iterative Prototypes are usually designed later on during development time to give
a reflection of a design in progress, it helps designer to reach the goal of designing website
through several design iterations however, it is difficult for Iterative to support evolution
because usually there is tension between evolving toward the final solution and exploring an
unexpected design direction because it may be thrown away completely. There are some
advantages of using Iterative Prototypes such as informing some aspect of the design, some
Iterative explore different variation of the same theme of the website, and increasing the
precision by working out the finer details of the interaction.
Finally, Evolutionary Prototypes they are thee stage of Prototyping and they are a special
type of Iterative Prototypes because it evolves into part or all of the final system or website.
According to Extreme Programming (Beck, 2000), advocates this approach, tightly coupling
design and implementation and building the system through constant evolution of its
components. Besides that, Evolutionary Prototypes needs more practice and planning than the
other Evolution types because it is a representation of the final Website. We had been using
68

this method among our friends to see their feedback about Groupon.com.my and it helped us
to developed friendly use website fit among the adult generation to be more useful website.
2. Participatory Prototyping
Participatory Prototyping or Cooperative is a design that involves user in all stages of
developing this Prototype to call the user at the end to evaluate the website. in this Prototype
users are treated as a partner for the Website to help developer avoiding unnecessary paths or
bottoms on website and develop a website that solves problems and provides the most
friendly interface according to users satisfied. Allowing users feedback on every process of
the development will build successful website. A common difficulty of Participatory
Prototype is the huge responsibility of satisfied the users because some problems are
impossible to solve that required from users. There are some stage should be follow by
developer to avoid any difficulties by using this type of Prototype:
Cooperating: Participatory design stresses the issue of cooperation within system
development projects. Cooperation stresses two fundamental principles, principle
which assumes that all stake-holders within a design process are just positioned more
like beginners in others and the co-working principle which assumes that a design
process is learning process for both computer systems developers and users.
Experimenting: The importance of experimentation is an effort to take seriously the idea
for design process whether in new possibilities condition or current conditions.
Experimentations purpose is to ensure the current work practice is desirable or
realizable. In order to facilitate the creation of qualitative new uses and applications,
participatory design makes use of exploration in general based on various possible
technologies.
Contextualizing: Participants have a variety of backgrounds with partly overlapping and
partly conflicting interests and concerns. Participatory design need to deal with this
variety of interests for the example is the various groups may have different ideas of
how the future work might be supported. Participatory design is particularly concerned
with the way how the designers consider the outcome of creating something new.
Iterating: The future product draws from the point of view and the future instrument of
work. Designers co-operate with each other by using objects as a basis for allocating
work. There is a focus on throughout the process like early prototype of system.
69

In this stage, the end-users (stakeholders) are asked to participate in the development of the
prototype. Usability goals, user requirements, design principles and human factors are the
part of this task.
3. Parallel Design
Parallel design is a project model for usability engineering where multiple designers
independently of each other design suggested user interface. These interfaces are then merged
to unified design that can be further refined through additional iterative design (Nielsen,
1993). In sample words is a design for human uses and it conducts multiple designers to
provide a very useful interface by group team work. There are some advantages and
disadvantages of using Parallel design to develop a website. Firstly, by using parallel the final
design would be very professional and great because it has multiple designers with different
skilled and experience. On the other hand, Parallel design is the most expensive type of
Prototypes; this is why it cannot be implementing to all projects.



Figure1: Sign in form
(Adapted from: Nielsen, 1993)
70

According to Figure 1 it shows how Parallel design and iterative are based on a version 0
concept, which describes how the interface look and what it is supposed to do for the system.
On Figure 1 it also shows how each merged design element can be the best of Parallel
versions because the merging designer can also introduce new elements to the design.
Moreover, a weakness of Parallel design is waste of resource when many designers do the
same project. This is because of the huge information will be Spread on the table of work
which will lead to have different opinion and much argument between the designers. This is
why its not advice to publish the parallel design versions. However it is the fastest way as I
mentioned before for very large and complicated systems, because it less the time spending
for developing a website or system.
2. Peer to Peer Evaluation
Peer to peer is the evaluation of creative work of performance by other people in the same
field in order to maintain or enhance the quality of the work or performance in that field
(linfo, 2005). In sample words, Peer to Peer Evaluation is a several questions written on a
piece of sheet or typed by computer to a track it a group of people usually the users of the
system to see and have returned answer and find out the weaknesses and errors in the
performance and this will enable developer to develop excellent system or website. a simple
Peer to Peer Evaluation is in Software department, peer review is sometimes used in code
development where a team of members will have a meeting and check through code line by
line to look for errors. The main goal of Peer to Peer evaluation is to provide suggestions for
improvements.
Peer to Peer Evaluation mad a big movement when it applied on internet and people started to
publish soft copy online format. This is because of several reasons such as it will be widely
available for larger number of different groups of people and also its a cheaper way than
write it on paper and publish it hard copy.

Brainstorming is an example of peer to peer evaluation. With this method, group members
generate alternative ideas or solution for a specific topic. Compare to quality of ideas,
quantity and creativity ideas is the important part of brainstorming. After the group members
71

generate the ideas, they grouped into categories. A list of ideas or solutions that related to a
particular problem is the outcomes of brainstorming
This following picture is an example of peer to peer evaluation



72

References
Affairs, A. 2013. Develop a Project Plan | Usability.gov. [online] Available at:
http://www.usability.gov/how-to-and-tools/methods/develop-plan.html [Accessed: 29 Aug
2013].
Affordableusability.com. 2011. Usability Goals: Learnability. [online] Available at:
http://www.affordableusability.com/usability/learnability.html [Accessed: 29 Aug 2013].
Blackandgold.com.pk. 2012. wi-tribe AVenger. [online] Available at:
http://blackandgold.com.pk/drop/vXi9-p1/ [Accessed: 29 Aug 2013].
Chowdhury, R. 2012. 40 CSS3 Button Tutorials For Designers. [online] Available at:
http://www.hongkiat.com/blog/css3-button-tutorials/ [Accessed: 29 Aug 2013].
Christensen, M. 2010. Usability Goals 101. [e-book] Sweden: Kaeru. Available through:
Kaeru http://www.kaeru.se/entry_13.php [Accessed: 29 Aug 2013].
Csl.mtu.edu. 2013. HCI Lecture 7 - Usability and Suite Consistency. [online] Available at:
http://www.csl.mtu.edu/cs5760/www/Lectures/CurrentLectures/Usability%20and%20Suite%
20Consistency.htm [Accessed: 29 Aug 2013].
Davidgoodwin.net. 2005. Dave's Gallery :: BELARUS :: DSCF1565. [online] Available at:
http://www.davidgoodwin.net/myphotos/album30/DSCF1565 [Accessed: 29 Aug 2013].
Emily. 1981. Conversion Optimization is just a click away - Eat Paint Studio. [online]
Available at: http://eatpaintstudio.com/2012/06/conversion-optimization-just-clicks-away/
[Accessed: 29 Aug 2013].
Globalonlinemarketingconsulting.com. 2013. Peek Over The Shoulder Of Competitors With
Our Competitive Analysis. [online] Available at:
http://www.globalonlinemarketingconsulting.com/consulting-services/competitive-analysis/
[Accessed: 29 Aug 2013].
Golder, B. and Gawle, M. 2005. Stakeholder Analysis. [online] Available at:
www.panda.org/standards/1_1_stakeholder_analysis/ [Accessed: 25 July 2013].
It.asciicasts.com. 2013. ASCIIcasts - Episode 193 - Modelli non persistenti. [online]
Available at: http://it.asciicasts.com/episodes/193-modelli-non-persistenti [Accessed: 29 Aug
2013].
73

Janahrend.com. 1999. People Use Products to be Productive | Jan Ahrend. [online] Available
at: http://janahrend.com/blog/people-use-products-to-be-productive/ [Accessed: 29 Aug
2013].
Karlsson, M. 2002. Turning Usability Goals into Measurable Objectives. [e-book] Sweden:
Linkopings University. pp. 1 - 20. Available through: Kaeru http://www.kaeru.se/LiTH-IDA-
Ex-Ing-02-25.pdf [Accessed: 29 Aug 2013].
Lin, I. n.d. Human Computer Interaction. [e-book] Taiwan: National Chiao Tung University.
pp. 1 - 19. Available through: Chiao Tung University
http://caig.cs.nctu.edu.tw/course/HCI08/HCI_2_Usability_F07_C.pdf [Accessed: 29 Aug
2013].
Nigel. 2009. E Z Toilet Flusher hands free, step on flush thingy. [online] Available at:
http://www.redferret.net/?p=15062 [Accessed: 29 Aug 2013].
Optionsil.com. 1967. Tour: Bathrooms Options For Independent Living. [online] Available
at: http://www.optionsil.com/model-home/bathrooms/3 [Accessed: 29 Aug 2013].
Schrag, J. 2008. The power of user experience goals. Taking Aim, 7 (1), pp. 1 - 3. Available
at: http://dux.typepad.com/files/ux2008_takingaim-uxgoals.pdf [Accessed: 3rd August 2013].
Tumblr.com. 2013. up arrow on Tumblr. [online] Available at:
http://www.tumblr.com/tagged/up-arrow [Accessed: 29 Aug 2013].
Usability Goals. n.d. [e-book] pp. 1 - 6. Available through: Soberit
http://www.soberit.hut.fi/t-121/t-121.110/english/laskarit_05/4-kaytettavyystavoitteet_en.pdf
[Accessed: 29 Aug 2013].
Usability Goals and Design Principles. 2012. [e-book] Comp 2030. pp. 1 - 60.
http://www.cs.umanitoba.ca/~comp3020/04_Goals.pdf [Accessed: 29 Aug 2013].
Usabilitybok.org. 2010. Principles for Usable Design | Usability Body of Knowledge.
[online] Available at: http://www.usabilitybok.org/principles-for-usable-design [Accessed: 29
Aug 2013].
Usabilitygeek.com. 2011. Why Web Site Usability is Important for a Company | Usability
Geek. [online] Available at: http://usabilitygeek.com/why-web-site-usability-is-important-
for-a-compan/ [Accessed: 29 Aug 2013].
74

UX Centered Blog. 2009. Usability Guidelines for Heuristic Evaluation. [online] Available
at: http://uxcentered.wordpress.com/2009/12/27/hello-world/ [Accessed: 29 Aug 2013].
Ux.stackexchange.com. 2013. What is the best time to create Usability Goals (or Criteria) for
your application/website and on what basis? - User Experience Stack Exchange. [online]
Available at: http://ux.stackexchange.com/questions/39332/what-is-the-best-time-to-create-
usability-goals-or-criteria-for-your-applicati [Accessed: 29 Aug 2013].
E. Modell, M. 2007. The Interview And Other Data Gathering Methods. [online] Available
at: http://www.martymodell.com/pgsa2/pgsa07.html [Accessed: 10 July 2013].
Embrey, D. 2000. Task Analysis Techniques. [online] Available at:
http://www.cwsvt.com/Conference/Functional%20Assessment/Task%20Analysis%20Techni
ques.pdf [Accessed: 23 July 2013].
J. Conway, M. 2006. How to collect data. 8th ed. United States of America: ASTD press, pp.
2-3.
Liu, Y., Karissom, M. and Osvalder, A. 2005. Considering the Importance of User Profiles in
Interface Design. [online] Available at: http://cdn.intechopen.com/pdfs/10803/InTech-
Considering_the_importance_of_user_profiles_in_interface_design.pdf [Accessed: 28 June
2013].
Matrai, R. 2010. User interfaces. [online] Available at:
http://www.zums.ac.ir/files/research/site/ebooks/Web%20Engineering/User_InterfacesNEW.
pdf [Accessed: 01 July 2013].
P, J. 1997. Questionnaire and interview as data-gathering tools. [image online] Available at:
http://www.okstate.edu/ag/agedcm4h/academic/aged5980a/5980/newpage16.htm [Accessed:
08 July 2013].
Rice.edu. 2008. Human Factors - -Human Computer-Interaction. [online] Available at:
http://psychology.rice.edu/Content.aspx?id=94 [Accessed: 15 July 2013].
Safaribooksonline.com. 2005. The Usability Engineering Life Cycle. [online] Available at:
http://my.safaribooksonline.com/book/web-development/usability/9780321447739/making-
the-business-case/ch03lev1sec6 [Accessed: 26 June 2013].
75

Safaribooksonline.com. 2005. The Usability Engineering Life Cycle. [image online]
Available at: http://my.safaribooksonline.com/book/web-
development/usability/9780321447739/making-the-business-case/ch03lev1sec6 [Accessed:
26 July 2013].
Schmeer, K. 2013. Stakeholder Analysis at a Glance. [online] Available at:
http://www.eestum.eu/voorbeelden/Stakeholders_analysis_guidelines.pdf [Accessed: 15 July
2013].
Timpany, G. 2013. Web Survey. [image online] Available at:
http://survey.cvent.com/blog/customer-insights-2/measuring-agreement-would-you-agree
[Accessed: 06 July 2013].
Uupsala Universitet. 2002. Examples of HTA. [image online] Available at:
http://www.it.uu.se/edu/course/homepage/hcinet/ht08/lectures/lecture10/part3 [Accessed: 25
July 2013].
Victoria.gov. 2013. Stakeholder Analysis (Stakeholder Matrix). [image online] Available at:
http://www.dse.vic.gov.au/effective-engagement/toolkit/tool-stakeholder-analysis-
stakeholder-matrix [Accessed: 23 July 2013].
Nngroup.com. 1996. Parallel Design and Testing by Jakob Nielsen and Jan Maurits Faber.
[online] Available at: http://www.nngroup.com/articles/parallel-design/ [Accessed: 30 Aug
2013].
Butler, C. 2011. How to Think About Website Prototypes (for Designers) - Print Magazine.
[online] Available at: http://www.printmag.com/imprint/how-to-think-about-website-
prototypes-for-designers/ [Accessed: 30 Aug 2013].
W-edge.com. 1999. Developing a Web Site Prototype by Theresa Wilkinson. [online]
Available at: http://www.w-edge.com/articles/prototype.htm [Accessed: 30 Aug 2013].
Searchcio-midmarket.techtarget.com. 2013. What is prototype? - Definition from
WhatIs.com. [online] Available at: http://searchcio-
midmarket.techtarget.com/definition/prototype [Accessed: 30 Aug 2013].
Webbizideas.com. 2013. Web Prototyping | What is Website Prototyping?. [online] Available
at: http://www.webbizideas.com/prototyping [Accessed: 30 Aug 2013].
76

Soil, F. 2009. Defining and Developing a Web Prototype Design: Part 1. [online] Available
at: http://www.freshtilledsoil.com/web-prototype-design-part-1/ [Accessed: 30 Aug 2013].
Referenceforbusiness.com. 2010. Prototype - advantage, type, cost, Types of prototypes.
[online] Available at: http://www.referenceforbusiness.com/small/Op-Qu/Prototype.html#b
[Accessed: 30 Aug 2013].
Website-tutorials-review.toptenreviews.com. 1997.Website Design and Prototypes -
TopTenREVIEWS. [online] Available at: http://website-tutorials-
review.toptenreviews.com/website-design-and-prototypes.html [Accessed: 30 Aug 2013].
Website-tutorials-review.toptenreviews.com. 1997.Website Design and Prototypes -
TopTenREVIEWS. [online] Available at: http://website-tutorials-
review.toptenreviews.com/website-design-and-prototypes.html [Accessed: 30 Aug 2013].