\

GROUP ASSINMNET

TECHNOLOGY PARK MALAYSIA

CT026-3-2
HUMAN COMPUTER INTERACTION
NP2F1901IT

HAND OUT DATE: 21st July 2019

HAND IN DATE: 29th November 2019
WEIGHTAGE: 50%
___________________________________________________________________________
INSTRUCTIONS TO CANDIDATES:
1. Submit your assignment at the administrative counter.

2. Students are advised to underpin their answers with the use of references (Cited
using the Harvard Name System of referencing).

3. Late submissions will be awarded zero (0) unless extenuating Circumstances (EC)
are upheld.

4. Cases of plagiarism will be penalized.

5. The assignment should be bound in an appropriate style (comb bound or stapled)

6. Where the assignment should be submitted in both hard copy and softcopy, the
softcopy of the written assignment and source code (where appropriate) should be
on a CD in an envelope/ CD cover and attached to the hardcopy.

7. You must obtain 50% overall to pass this module.

 GROUP ASSIGNMENT
CT026-3-2
HUMAN COMPUTER INTERACTION
NP2F1901IT
Gerald Salven Volkswagen Web Portal

Approved by:

Mr. Prem Kumar Vaskar

 Acknowledgement
Before moving forwards, we would like to show the gratitude towards few people, who really
were inspiring for us and as much as we are part of this project, they are also the member of
the team. A large number of teachers, students and outsiders who made valuable suggestions
which have been incorporated in this work. Though it is not responsible to express the
gratitude individually, we take this opportunity to express our profound gratitude and
ineptness to them.

We are much great full towards Mr. Prem Kumar Vaskar who was our Human Computer
Interaction teacher who taught and provided us all the necessary materials that assist on
finishing this project. Also, thanks to Lord Buddha Education Foundation and Asia
Pacific University of Technology and Innovation for providing us opportunity to extend
our knowledge base on web technology and computing and IT field.

We are immensely thankful to each other of the team members because of the intimacy we
shown to each other, and the co-operation we maintained was remarkable.
Table of Contents
1. Introduction.........................................................................................................................1
1.1 Objective......................................................................................................................1
2. Problem Statement.................................................................................................................2
3. User requirement....................................................................................................................3
3.1 User Profiling/ Stakeholder Analysis...............................................................................3
3.2 Data gathering..................................................................................................................3
3.2.1 Data collection methods.............................................................................................3
3.2.2 Choosing Data Gathering method..............................................................................5
3.2.3 Impacts of user profiling results................................................................................8
3.3 Task Analysis.................................................................................................................23
4. Usability Goals and Competitive Analysis..........................................................................25
4.1. Design principles...........................................................................................................26
4.2. Competitive Analysis....................................................................................................28
5. Prototype and Walkthrough.................................................................................................30
5.1. Storyboarding................................................................................................................30
5.2. Screen purpose and Strategy.........................................................................................35
5.2.1 Screen of website.....................................................................................................36
5.3. Parallel Design...............................................................................................................41
5.4. Participatory Design......................................................................................................43
5.4.1 Impact of Design......................................................................................................43
6. Testing of Design.................................................................................................................44
6.1 Card Sorting....................................................................................................................45
6.1.1 Benefits of card sorting:...........................................................................................45
6.2 Usability Testing............................................................................................................45
6.2.1 Why is usability testing important?.........................................................................46
6.3 Formative Testing...........................................................................................................46
6.3.1 Rapid Feedback........................................................................................................46
6.3.2 Documentation.........................................................................................................47
6.3.3 Planning...................................................................................................................47
6.4 Formative Evaluation.....................................................................................................47
7. Conclusion...........................................................................................................................48
8. References............................................................................................................................51
List of Table
Table 1........................................................................................................................................8
Table 2........................................................................................................................................9
Table 3......................................................................................................................................10
Table 4......................................................................................................................................11
Table 5......................................................................................................................................12
Table 6......................................................................................................................................13
Table 7......................................................................................................................................14

List of Figures
Figure 1 Pie chart for question 1................................................................................................8
Figure 2 Pie chart for question 2................................................................................................9
Figure 3 Pie chart for question 3..............................................................................................10
Figure 4 Pie chart for question 4..............................................................................................11
Figure 5 Pie chart for question 5..............................................................................................12
Figure 6 Pie chart for question 6..............................................................................................13
Figure 7 Pie chart for question 7..............................................................................................14
Figure 8 Hierarchical task analysis – graphical view...............................................................24
Figure 9 Audi Lighting.............................................................................................................28
Figure 10 BUICK.....................................................................................................................28
Figure 11 Competitive Analysis...............................................................................................29
Figure 12 Sign in page.............................................................................................................31
Figure 13 Sign Up page............................................................................................................32
Figure 14 Home Page...............................................................................................................33
Figure 15 About Us..................................................................................................................34
Figure 16 Navigation................................................................................................................35
Figure 17 Main Page................................................................................................................36
Figure 18 Welcome page.........................................................................................................37
Figure 19 Home Page...............................................................................................................38
Figure 20 About Us..................................................................................................................38
Figure 21 Our services.............................................................................................................39
Figure 22 Our stock..................................................................................................................39
Figure 23 Contact Details.........................................................................................................40
Figure 24 Footer.......................................................................................................................40
Figure 25 Design 1Bhumika Design........................................................................................42
Figure 26 Design 2 Nisha Design............................................................................................42
Figure 27 Design 3 Rinku Design............................................................................................43
Figure 28 Testing Design.........................................................................................................44
Figure 29 Gantt Chart of Tasks................................................................................................49
Figure 30 Gantt Chart of Timeline...........................................................................................50
1. Introduction
“Human Computer Interaction (HCI) is a multidisciplinary practice that focuses on both the
interaction between the user (humans) and the computer as well as the design of the computer
interface. Originally, HCI focused primarily on computers, but since then has expanded to
include almost all variations of information technology design after the emergence of
personal computers in the late 1970s”[ CITATION Kim19 \l 1033 ].

At first, Gerald Salven Volkswagen began as a battling plane motor organization, in the long
run progressing into one of the most notable extravagance vehicle makers on the planet.
Since its commencement, Gerald Salven Volkswagen has endured wars that pushed different
producers to the brink of collapse. In 1916 the organization was recognized as a producer of
airplane motors that it delivered since 1917 until 1918 and then again from 1933 to 1945.
Under the brands Gerald Salven Volkswagen autos are encouraged, Mini and Rolls-Royce,
and bikes are showcased under the brand Gerald Salven Volkswagen Motored. In 2015,
Gerald Salven Volkswagen was the world's twelfth-biggest maker of engine vehicles, with
2,279,503 vehicles produced. The headquarter of Gerald Salven Volkswagen is in Mumbai
and produces engine vehicles in China, India, Germany, Brazil, UK, and US. Gerald Salven
Volkswagen is having a huge motorsport history in sports autos, visiting vehicles.

1.1Objective
The main objectives of the project are:
- To create an interactive web portal of Motor vehicle information system.
- To categorize and summarize information of vehicles as per user requirements.
2. Problem Statement
As per the design and human interaction to the older web portals there are lots of issues
related to human health, compatibility, color combination and usability. No small business
should be expected to manage, oversee and keep up their site without progressing support.
Any company site that is normally refreshed stands a lot more possibility of positioning
profoundly in list items and arriving at potential clients than a private venture site that isn't.
And also due to poor designs websites don’t get that much popularity.
 Problems related to interaction with users of web portal.
 Problem with designs of web portal.
 Issues with color combination.
 And also, issues with ergonomics and human compatibility.

3. User requirement
3.1 User Profiling/ Stakeholder Analysis
“A user profile is a visual display of personal data associated with a specific user, or a
customized desktop environment. A profile refers therefore to the explicit digital
representation of a person's identity. A user profile can also be considered as the computer
representation of a user model. A user model is a (data) structure that is used to capture
certain characteristics about an individual user, and the process of obtaining the user profile is
called user modeling or profiling.
Stakeholder Analysis is an important technique for stakeholder identification & analyzing
their needs. It is used to identify all key (primary and secondary) stakeholders who have a
vested interest in the issues with which the project is concerned”[ CITATION Jun18 \l
1033 ].

3.2 Data gathering

Associations and businesses are associated with their customers, once in a while even their
rivals, clients, workers, and merchants. Information can recount to a tale about any of these
connections, and with this data, associations can improve practically any part of their
activities.

3.2.1 Methods of Data Collection

Qualitative data
“Data analysis can take various formats. The method you choose depends on the subject
matter of your research. Qualitative data collection looks at several factors to provide a depth
of understanding to raw data. While qualitative methods involve the collection, analysis, and
management of data, instead of counting responses or recording numeric data, this method
aims to assess factors like the thoughts and feelings of research participants. Qualitative data
collection methods go beyond recording events to create context”[ CITATION Ain19 \l
1033 ].
Interviews
“If you asked someone completely unaware of data analysis how to best collect information
from people, the most common answer would likely be interviews. Almost anyone can come
up with a list of questions, but the key to efficient interviews is knowing what to ask.
Efficiency in interviewing is crucial because, of all the primary data collection methods, in-
person interviewing can be the most expensive. Interviews also allow for open-ended
questions”[ CITATION Ain19 \l 1033 ].
Questionnaire
“Questionnaires and surveys can be used to ask questions that have closed-ended answers.
Data gathered from questionnaires and surveys can be analyzed in many different ways. You
can assign numerical values to the data to speed up the analysis. This can be useful if you’re
collecting a large amount of data from a large population. To be meaningful, surveys and
questionnaires need to be carefully planned. While surveys are often less expensive than
interviews, they won’t be valuable if they aren’t handled correctly. Surveys can be conducted
as interviews, but in most cases, it makes sense to conduct surveys using forms”[ CITATION
Ain19 \l 1033 ].
Observation
“Observation involves collecting information without asking questions. This method is more
subjective, as it requires the researcher, or observer, to add their judgment to the data. But in
some circumstances, the risk of bias is minimal. Variables that require the observer to make
distinctions, such as how many millennials visit a restaurant in a given period, can introduce
potential problems. Observation also can be combined with additional information, such as
video”[ CITATION Ain19 \l 1033 ].
Documents and records
“Marketers, scientists, academics, and others may start a study with a predetermined
hypothesis, but their research often begins with the collection of data. Quantitative surveys
enable researchers to ask closed-ended questions with a provided list of possible answers.
This method is easier for respondents, as they just pick from a list of responses. It’s an ideal
solution for larger-scale studies that could become unwieldy with the type of open-ended
questions often associated with qualitative surveys”[ CITATION Ain19 \l 1033 ].
Focus groups
“A combination of interviewing, surveying, and observing, a focus group is a data collection
method that involves several individuals who have something in common. The purpose of a
focus group is to add a collective element to individual data collection. A focus group study
can ask participants to watch a presentation, for example, then discuss the content before
answering survey or interview-style questions. Open-ended questions ground the research in
a particular state of mind, eliminating external interference”[ CITATION Ain19 \l 1033 ].
Quantitative data
“Sometimes you can collect a considerable amount of data without asking anyone anything.
Document- and records-based research uses existing data for a study. Attendance records,
meeting minutes, and financial records are just a few examples of this type of research.
However, since the researcher has less control over the results, documents and records can be
an incomplete data source”[ CITATION lot19 \l 1033 ].

Surveys
“Surveys are one way in which you can directly ask customers for information. You can use
them to collect either quantitative or qualitative data or both. A survey consists of a list of
queries respondents can answer in just one or two words and often gives participants a list of
responses to choose from. You can conduct surveys online, over email, over the phone or in
person. One of the easiest methods is to create an online survey you host on your website or
with a third party. You can then share a link to that survey on social media, over email and in
pop-ups on your site”[ CITATION lot19 \l 1033 ].
3.2.2 Choosing Data Gathering method

Questionnaire
For the Gerald Salven Volkswagen vehicle services, Questionnaire selected to gather data.
The questionnaire towards the web portal of Gerald Salven Volkswagen vehicle services has
been done with following questions.
Personal Information: Name: - Address: -
Age: - Gender: -Female Male
1. Do you like the concept of electric car?

Y Yes No
2. How do you feel about Electric car?
 Good
 Very Good
 Excellent
3. From how many years you are using fuel vehicles?
 1-5 years
 5- 10 years
 more than 10
4. What do you think about pricing of electric cars in comparison to fuel cars?
 Low
 High
 Too high
5. How much do you usually spend on Fuel payment monthly?
 Rs. 36000
 Rs. 30000
 Rs. 40000
6. How will you react about information given by us?
 Positive
 Negative
7. Will it help to decrease air pollution and environmental harms?
 Yes
 No
 May be
8. Reading characters on the screen
 Clear
 Not clear
9. Information of the web portal
 Confusing
 Very Clear
10. Position of messages on screen
 Consistent
 Inconsistent
11. Error messages
 Unhelpful
 Helpful
12. Idea about the color combination of web portal.
 Suitable and comfortable
 Unsuitable and uncomfortable
13. Appearance of the Web portal is appropriate.
 Good
 Very Good
 Bad
14. Which feature do you like the most in this web portal?
 Flexibility
 Usability
 Interaction
15. Designed for all levels of users
 Yes
 No
 Maybe Yes
3.2.3 Impacts of User Profiling results

Question 1 Do you like the concept of electric car?

Y Yes No

Result Most of the people like electric car.

Impact Car will be designed electrically so that people like it more than other.

Table 1

Question 1

No
30% Yes
No

Yes
70%

Figure 1 Pie chart for question 1

Question 2 How do you feel about Electric car?

 Good
 Very Good
 Excellent
Result Almost people feel too good about the electric car.

Impact Again, almost everyone feels way too good about electric car so we
will design automatic cars with durability and comfort in mind.

Table 2

Question 2

Good
20%
Good
Very Good
Excellent Excellent
50%

Very Good
30%

Figure 2 Pie chart for question 2

Question 3 From how many years you are using fuel vehicles?

 1-5 years
 5- 10 years
 more than 10
Result Most of the people have been using fuel from past 10 or more years.

Impact Majority of the respondents are using fuel from more than 10 years so
the design will be done in order to replace fuel.
Table 3

Question 3

1-5 years
5%
5-10 years
20% 1-5 years
5-10 years
more than 10

more than 10
75%

Figure 3 Pie chart for question 3

Question 4 What do you think about pricing of electric cars in comparison to fuel
cars?
  Low
 High
 Too High

Result Most of the people say that electric car may reduce their expenses.

Impact As almost people are thinking that electric cars may reduce their
expenses, we will make our cars electrical in price reasonable manner.

Table 4

Question 4

Too High
10%
Low
High
High Too High
30%
Low
60%

Figure 4 Pie chart for question 4

Question 5 How much do you usually spend on Fuel payment monthly?

 Rs. 36000
  Rs. 30000
 Rs. 40000
Result Most of them the people are spending around Rs.40000 every month
in fuels.

Impact Majority of the respondents have opinion that they are spending too
much money in fuels so our design will have minimum pricing.

Table 5

Question 5

Rs. 36000
11%
Rs. 36000
Rs. 30000
Rs. 30000 Rs. 40000
28%
Rs. 40000
61%

Figure 5 Pie chart for question 5

Question 6 How will you react about information given by us?

 Positive
 Negative
Result Answer of the user were all positive.

Impact As almost people have positive response, we won’t have much

problems in marketing.

Table 6

Question 6

Negative
15%
Positive
Negative

Positive
85%

Figure 6 Pie chart for question 6

Question 7 Will it help to decrease air pollution and environmental harms?

 Yes
 May be
 No
Result Most of the answers are maybe yes.

Impact As we already know that fuel is harming our environment so our

design will be made accordance to human comfort in mind.

Table 7

Question 7

No
30% May be Yes
Yes
May be Yes
45% No

Yes
25%

Figure 7 Pie chart for question 7

Question 8 Reading characters on the screen

 Clear
 Not clear
Result Most of the people said all the reading characters on screen.

Impact Car will be designed electrically so that people like it more than
other.

Table 8

Question 8

Not Clear
9%
Clear
Not Clear

Clear
91%

Figure 8 Pie chart for question 8

Question 9 Information of the web portal

  Confusing
 Very Clear

Result Almost people said very clear

Impact As all the information provided are clear there will be attraction
towards the web portal.

Table 9

Question 9

Confusing
15%

Confusing
Very Clear

Very Clear
85%

Figure 9 Pie chart for question 9

Question 10 Position of messages on screen

  Consistent
 Inconsistent

Result Most of the people have been using fuel from past 10 or more years.

Impact Majority of the respondents are using fuel from more than 10 years so
the design will be done in order to replace fuel.
Table 10

Question 10

Inconsistent
25%
Consistent
Inconsistent

Consistent
75%

Figure 10 Pie chart for question 10

Question 11 Error messages on Web Portal

  Unhelpful
 Helpful

Result Most of the people say that web provided by us is very useful

Impact As almost people are thinking that information is useful so there will be
no change in all the information.

Table 11

Question 11

Unhelpful
20%
Unhelpful
Helpful

Helpful
80%

Figure 11 Pie chart for question 11

Question 12 Idea about the color combination of web portal.

O  Suitable and comfortable
 Unsuitable and uncomfortable
Result Most of them the people are saying idea of color combination is suitable
and comfortable to eyes.
Impact As there is no problem in color combination there will be no change in
web portal’s color combination.
Table 12

Question 12

Suitable and comfortable Suitable and comfortable

35% Unsuitable and uncomfortable

Unsuitable and
uncomfortable
65%

Figure 12 Pie chart for question 12

Question 13 Performance of the Web portal.

 Good
 Very Good
 Bad
Result Answer of the user were all positive.

Impact As almost people have positive response, we won’t have much

problems in marketing.
Table 13

Question 13

Bad Good
8% 12%

Good
Very Good
Bad

Very Good
80%

Figure 13 Pie chart for question 13

Question 14 Which feature do you like the most in this web portal?

 Flexibility
 Usability
 Interaction
Result Most of the answers are maybe yes.

Impact As we already know that fuel is harming our environment so our design
will be made accordance to human comfort in mind.

Table 14

Question 14

Interaction
30% Flexibity
Usability
Flexibity
45% Interaction

Usability
25%

Figure 14 Pie chart for question 14

Question 15 Designed for all levels of users

  Yes
 No
 May be Yes
Result Most of the answers are yes.

Impact As we already know that all user is satisfied there will be no change.

Table 15

Question 15

No
30% May be Yes
May be Yes Yes
45% No

Yes
25%

Figure 15 Pie chart for question 15

3.3 Task Analysis
“Task analysis is the key to developing the specifications for performance and instructions in
instructional systems design. Task analysis, when considered from a process perspective,
involves three steps, each of which can be approached with various analysis techniques.
These steps and techniques can be summarized as follows”[ CITATION Car83 \l 1033 ].
Hierarchical task analysis
“Hierarchical task analysis (HTA) is an underused approach in user experience, but one you
can easily apply when either modifying an existing design or creating a new design. This
technique has applications across a range of different problem domains, including time-and-
motion studies, personnel selection, or training, and provides a broad and deep understanding
of task performance”[ CITATION Hor10 \l 1033 ].
“Hierarchical task analysis (HTA) is an underused approach in user experience, but one you
can easily apply when either modifying an existing design or creating a new design. This
technique has applications across a range of different problem domains, including time-and-
motion studies, personnel selection, or training, and provides a broad and deep understanding
of task performance”[ CITATION Hor10 \l 1033 ].
Hierarchical task analysis – textual representation
0. Create car manufacturing portal
1.Creating a Prototype
2. Design the website
3. Customize Portal
3.1 Create compelling website content
3.2 Create responsive website
3.3 Test website
4. Host domain
5. Publish Portal
Plan 0: Complete 1 and then do 2 to 5 in sequence.
Plan 2: 3.1 -3.2-3.3 Complete 1 and then do 2 to 5 in sequence.
Hierarchical task analysis – graphical view

0. Create car Plan 0: Complete 1 and then do 2 to 5 in

manufacturing portal sequence.

1.Create a 2. Design the 3. Customize 4. Host domain 5. Publish Portal

Prototype website Portal

Plan1: 3.1 -3.2-3.3 Create responsive,

compelling website content and test

3.1 Create compelling 3.2 Create responsive 3.3 Test website

website content website

Figure 8 Hierarchical task analysis – graphical view

4. Usability Goals and Competitive Analysis
Usability is the level of simplicity with which items, for example, Web applications and
programming can be utilized to achieve required objectives viably and productively. The
phase of issue associated with the utilization of a customer interface is also evaluated by
Usability evaluates. Despite the fact that usability must be in this way a nonfunctional
necessity and evaluated through diagonal measures which is eagerly related to an item's
usefulness. Followings are some High-level usability goals things.

1. Effectiveness: “Effectiveness is about whether users can complete their goals with a
high degree of accuracy. Much of the effectiveness of a product comes from the
support provided to users when they work with the product; for example, fixing a
credit card field so that it only accepts a valid credit card number entry can
reduce data entry errors and help users perform their tasks correctly. There are many
different ways to provide support the key is to be as informative as possible in
a meaningful way to the user”[ CITATION Aya18 \l 1033 ]
2. Efficiency: “Efficiency must not be mistaken for effectiveness as they are quite
different and our goal is aiming to have both of them. Effectiveness, as we covered
above, is about the accuracy of the user to complete a task, while efficiency is how
fast can the user finish the task. It’s all about speed”[ CITATION Aya18 \l 1033 ].
3. Satisfaction: “Satisfaction with a system means basically how pleasing it is to use. It
affects the user’s motivation and thus the effectiveness of use. This element has
similarities with the emotional aspects of the UX, and it can be related to things like
visual design, trends, brand image and feelings. Subjective satisfaction can be
evaluated, for example, through UX questionnaires”[ CITATION Aya18 \l 1033 ].
4. Engagement: “Engagement refers to the level of engagement a system offers. Indeed,
engagement has become something of a buzzword, but if you cut through the fluff,
you’ll find that engagement occurs when the user finds the product pleasant and
gratifying to use. Aesthetics matter here, and it’s why many companies invest a small
fortune in graphic design elements—but they’re not the only factors involved in how
engaging a design is”[ CITATION Aya18 \l 1033 ].
5. Learnability: “Learnability is a quality of merchandise and interfaces that permits
users to shortly come to be acquainted with them and able to make properly use of all
their features and capabilities. Learnability is one thing of usability and is regularly
 heard in the context of person interface or person trip (UX) design, as well as usability
and person acceptance testing”[ CITATION Aya18 \l 1033 ].
6. Memorability: “Memorability applies to users who have already become familiar
with a system, but some breaks occur in using it or they use it very seldom.
Memorability measures how well users can remember different functions after they
have learned the functions. This kind of use is typical e.g. with programs that are used
to run monthly reports”[ CITATION Aya18 \l 1033 ].

4.1. Design principles

1. Visibility:
“Visibility performs a necessary role in Human-Computer Interaction as the idea is amazing
at noticing and decoding clues in the world, rationalizing, explaining cause and effect. Much
every day knowledge is in the world, not in the head, so visibility is one of the most
important aspects in design. Ideally, natural clues are made visible, requiring no aware notion
(natural design) however excess has verified to be as horrific as lack of seen clues, so just the
proper matters have to be visible. Otherwise, coincidence and lack of visibility can purpose
false causalities (thinking your action had a bad or no effect) may lead to superstition and loss
of control. Think for occasion on a couple of clicks you did due to the fact system doesn’t
respond. and then on the chaos when it did respond”[ CITATION fou18 \l 1033 ].
2. Affordance:
“Affordance is a property or feature of an object which presents a prompt on what can be
done with this object. In short, affordances are cues which give a hint how users may interact
with something, no matter physical or digital. Affordances are an object’s houses that exhibit
the viable movements users can take with it, thereby suggesting how they may interact with
that object. For instance, a button can look as if it desires to be became or pushed. The traits
of the button which make it seem turnable or pushable collectively structure its
affordances”[ CITATION fou18 \l 1033 ].

3. Feedback:
“The ways in which we relate to others and how we give each other information about our
experiences working together. It’s about offering up insights to celebrate strengths and
identify ways to learn and grow. Teams use many combinations of informal and formal
feedback systems to connect, align, and accomplish their goals. Teams that make feedback a
consistent habit, practice different forms of feedback, and use that feedback to set
development goals, see more positive results”[ CITATION Wol19 \l 1033 ].
4. Mapping:
“In the context of Human-Computer Interaction, mappings join factors of computing artefacts
to the actual world. They are the link between what you choose to do and what is perceived
possible. It is the relationship between moving a control, and the outcomes in the actual
world. Good mappings are herbal and use bodily analogies or cultural standards. As a result,
they are understood immediately, less difficult to remember, and enable higher ease-of-use.
An example of a poor mapping is presented in the picture below, the place at the start a left
swap controlled a lamp to the right, and the right switch managed a lamp to the left. To make
matters worse, the first two solutions was to put a red dot on one of the switches. The picture
indicates the correct answer to the problem”[ CITATION Wol19 \l 1033 ].

5. Constraints:
“Constraints are the opposite of affordances. They restriction the manner in which an item
can be utilized. Imperatives can be utilized to keep a strategic distance from utilization
blunders or restrict the records to be recalled. Consequently, requirements can likewise
increase affordances. Constraints can be physical, semantic, legitimate or social. For
example, consider a little hole versus a big gap. We may nearly without a doubt utilize simply
one finger in the little opening, while we might also most probably make use of quite a
number of fingers in a big gap”[ CITATION Wol19 \l 1033 ].
4.2. Competitive Analysis
“A competitive analysis is the process of categorizing and evaluating your competitors to
understand their strengths and weaknesses in comparison to your own”[ CITATION Kat18 \l
1033 ]. So, as per current market, we have done competitive analysis with two competitor
which are “Audi” and “Buick”.

Figure 9 Audi Lighting

Figure 10 BUICK
Above pictures are of the Gerald Salven Volkswagen and other two websites with which
comparison is done. And competitive analysis based on various factor are explained below:

Name of Consultancy Gerald Audi Buick

Salven
Volkswagen
Visibility   

Affordance   

Constraint   

Feedback   

Mapping   

Enough information   
flow

Learnability   

Figure 11 Competitive Analysis

5. Prototype and Walkthrough
The prototype is the pattern of format that is going to be proposed and to test whether it meet
the requirement of stakeholder. A prototype has lot of benefits, such as developer and the
implementer can get the remarks from their users even before their challenge is started. The
real system of creating prototypes includes following steps
• Identify simple requirement
• Initial prototype creation
• Review
• Revise and improve the prototype
Prototyping are of two kinds they are stated below:
• Low-Fidelity prototyping: It is definitely paper based totally that’s why it does not
exhibit full functionalities e.g. storyboarding and sketching.
• High-Fidelity prototyping: It is the full performance of the product i.e. pattern of final
product e.g. prototype of software program proposed.

5.1. Storyboarding
A web project of blue print is known to as a storyboard which can be used to display the
factors on a single internet page navigation, images, photos elements, banners, and texts due
to its bendy tool and simplicity.
What is a storyboarding in context of UX design?
“Storyboarding in UX is tool which help you visually predict and explore a user’s experience
with a product. It’s a very much as thinking about your product as if it was a movie in term of
how people would use it. It would help you to understand how people would flow through the
interaction with it over time, giving you a clear sense of how to create a strong
narrative”[ CITATION Nic17 \l 1033 ].
 Figure 12 Sign in page
This is login page where there is username/email and password field for users and also there
is sign in button for redirecting page to sign page.
 Figure 13 Sign Up page
The above picture is sign up page for new users, where there is username, email, password
and retype password.
 Figure 14 Home Page
This is the home page where there will be the information about our website and inside it
there is the link which will directs us to the respective pages.
 Figure 15 About Us
The above picture is all about the company’s information and its services, where navigation
bar, along with image and contents are express.
 Figure 16 Navigation
The above figure is a navigation bar channel where sub-navigation bar along with icons are
execution on the back over.

5.2. Screen purpose and Strategy

“A strategy screen can support comparisons of apples to oranges, advancing the discussion in
a structured format to remove some of the group dynamics that can complicate team
decisions. Like the Big Questions, the strategy screen is a tool from the La Piana Real-Time
Strategy Planning book. The purpose of the strategy screen is to make decision-making clear
and explicit across the organization by applying a consistent set of criteria. Most of the
criteria are unique to every organization (their strengths, identity, history, etc.), but often
share a few themes. Every screen should start with a question about fit to your commitment
statements (purpose, mission, vision, values)”[ CITATION sor17 \l 1033 ].
5.2.1 Screen of website

Figure 17 Main Page

The first page of the website carries most of the contents like it has obtained the Home, about
us, Contact Us and sooner or later the Faculties so it appears massive however the use of the
menu hyperlink scrolling technique it will help to scroll to the content material that you favor
to go with simply a click. The background of the website on the home menu is sliding itself,
the primary cause of this is now not solely to exhibit the distinctiveness and the attractiveness
of the website however also to share the information of your company’s work that what you
do and where are you related to. There is also a new trending effect which is known as
“Parallex Effect” using which the scrolling of the internet site is very smooth or you can say
that the consumer will experience to scroll the internet site when they use it and love it, whilst
other internet site does have the excellent matters but with this impact of scrolling the user
will be most at ease and experience the usage of this website. Above is Parallex effect we
used in our website.

Figure 18 Welcome page

This welcome page shows the greeting for customers if he/she visit this page. In this page if
client visit here it provide comfortable zone for providing its information in summarize form.
In above diagram there is picture of company in left side and thank you for visiting us on
right side.
 Figure 19 Home Page

Gerald Slaven Volkswagen is a foremost car dealership that used to sells quality new car. The
above home page shows the outlook of the website, car model along with price is allocated in
this diagram.

Figure 20 About Us
This about us page is one of the most important pages in our website.

Figure 21 Our services

Figure 22 Our stock

This page our stock records and maintain the different category level
 Figure 23 Contact Details

This is the contact us part where you can see the address, E mail, phone-no and additionally
the area alongside with the get direction map and view on map.

Figure 24 Footer

This is the Footer of the website where different types of categories, legal authority and the
social sites, icons are centered in this figure.
5.3. Parallel Design
In parallel graph technique, quite a few people or the members of the mission create an initial
layout from the identical set of requirements. Each member works independently, and when
finished, shares his principles with the group. These designs work due to the fact the clothier
is in a position to get range of options (ideas and concepts) of the problem. It also gives some
extent of assuredly that great design and thought is going to be built-in into our system. It
offers last views in a quick span of time.

“The technique of parallel downloading can be used to decrease file down load instances in a
peer-to-peer (P2P) network. There has been little investigation on parallel down load and
chunk allocation for supply friends with random provider capacities. The fundamental
contribution of this paper is to address the problem of efficient parallel file download in P2P
networks with random service capacities. A precise analysis of the anticipated down load
time is given when the carrier ability of a source peer is a random variable. An accepted
framework is developed for examining the anticipated down load time of a parallel down load
and chunk allocation algorithm, and is applied to the analysis of various algorithms. Two
chunk allocation algorithms for parallel download are proposed. It is located that the
performance of parallel down load can be notably expanded through using the method of
probing high-capacity peers. One such algorithm is proposed and its anticipated parallel
down load time is analyzed. The overall performance of these parallel file down load
algorithms in P2P networks with random service capacities are compared. The above parallel
download algorithms are extended to a couple of file download by using dividing source
friends into clusters. It is seen that there is an essential problem of most excellent parallelism
which minimizes the blended effect of intracluster and intercluster overhead of parallel down
load and load imbalance”[ CITATION LiK16 \l 1033 ].

Parallel format can be damaged down into extraordinary steps:

• Present all the designs

• Evaluate the designs

• Implementing the layout

Figure 25 Design 1Bhumika Design

Figure 26 Design 2 Nisha Design

 Figure 27 Design 3 Rinku Design

5.4. Participatory Design

“Participatory design is an approach to design strategy that brings customers into the heart of
the design process. Also known as co-creation, co-design, or cooperative design, it
encompasses techniques useful to both initial discovery and subsequent ideation phases of a
project, where the end-users of a product, service, or experience take an active role in co-
designing solutions for themselves. An approach to design that invites all stakeholders (e.g.
customers, employees, partners, citizens, consumers) into the design process as a means of
better understanding, meeting, and sometimes preempting their needs”[ CITATION uxm17 \l
1033 ].

5.4.1 Impact of Design

“We all face problems and challenges. Some of us seek them out. Some of us passionately
want to change the way things are and to invest ourselves in making the world a better place
and helping people flourish. We can respond to a challenge or problem from many different
approaches. Some responses are personality driven or psychologically conditioned by our
culture or upbringing. Taking on a challenge with awareness and intentionality moves us into
the realm of design. Design is making something with intentionality. That’s the simplest and
broadest definition I use, and some may take issue with that When the solution to a design
challenge requires a measure of impact to be considered a success, impact design is an
approach to consider. Impact design is an offshoot of human centered design, sometimes
called design thinking” [ CITATION Jas17 \l 1033 ]..
6. Testing of Design
“Test design is a process that describes how testing should be done. It includes processes for
the identifying test cases by enumerating steps of the defined test conditions. The testing
techniques defined in test strategy or plan is used for enumerating the steps. The test cases
may be linked to the test conditions and project objectives directly or indirectly depending
upon the methods used for test monitoring, control and traceability. The objectives consist of
test objectives, strategic objectives and stakeholder definition of success”[ CITATION
try19 \l 1033 ].

Figure 28 Testing Design

When to create test design?

“After the test conditions are defined and sufficient information is available to create the test
cases of high or low level, test design for a specified level can be created. For lower level
testing, test analysis and design are combined activity. For higher level testing, test analysis is
performed first, followed by test design”[ CITATION try19 \l 1033 ].

“There are some activities that routinely take place when the test is implemented. These
activities may also be incorporated into the design process when the tests are created in an
iterative manner. An example of such a case is creation of test data. Test data will definitely
be created during the test implementation. So, it is better to incorporate it in the test design
itself. This approach enables optimization of test condition scope by creating low- or high-
level test cases automatically”[ CITATION try191 \l 1033 ].

6.1 Card Sorting

“Card sorting involves placing concepts on virtual note cards and allowing participants to
manipulate the cards into groups and categories. After they sort the cards, they explain their
logic in a moderator-run debriefing session. Card sorting is a great method for both new and
existing websites to get feedback about layout and navigational structure. Its results show
designers and product managers how people and potential customers naturally organize
information, which can help make a site more intuitive to navigate”[ CITATION hot19 \l
1033 ].

“Card sorting is a method used to help design or evaluate information architecture. In a

typical card sorting session, participants organize topics into categories that make sense to
them and group them accordingly. To conduct a card sort, you can use actual cards, pieces of
paper, or one of several online card-sorting software tools”[ CITATION hot19 \l 1033 ].

6.1.1 Benefits of card sorting:

 “Easy & Cheap: Card sorting studies are simple and cheap to set up for all the
people involved.

 Quick to execute: Several sorts can be executed quickly yielding a significant

amount of valuable data.
 Established: The technique has been used extensively for over 10 years.

 Involves users: Studies provide insight into users’ psyche for website material and
intuitive content grouping.
 Provides a good foundation: Card sorting provides a robust foundation to the
structure of a site or product, and as a method when investigating label quality.
 Provides a good insight: Provides a good understanding of the users’ subconscious
and how they would expect the information to be organized”[ CITATION hot19 \l
1033 ].

6.2 Usability Testing

“Usability testing involves recording standard users’ overall performance on usual tasks in
managed settings. As the customers perform these duties they are watched & recorded
on video & their key presses are logged. This information is used to calculate
performance times, identify errors & assist give an explanation for why the users did
what they did. User delight questionnaires & interviews are used to elicit users’
opinions.

Usability testing is all about getting real people to interact with a website, app, or other
product you've built and observing their behavior and reactions to it. Whether you start small
by watching session recordings or go all out and rent a lab with eye-tracking equipment,
usability testing is a necessary step to make sure you build an effective, efficient, and
enjoyable experience for your users”[ CITATION hot19 \l 1033 ].
6.2.1 Why is usability testing important?
“Usability testing is done by real-life users, who are likely to reveal issues that people
familiar with a website can no longer identify—very often, in-depth knowledge can blind
designers, marketers, and product owners to a website's usability issues. Bringing in
new users to test your site and/or observing how real people are already using it are effective
ways” [ CITATION hot19 \l 1033 ] to determine whether your visitors:
 Not losing connection and understanding the working of the site.
 Can do the major actions.
 As much as possible not facing usability bugs or issues.
 Have efficient and functional experience.
 If possible, notice other usability issues.

6.3 Formative Testing

Formative assessment is finished in order to assist designers refine and reform their designs.
The focal point of formative evaluation/testing is to become aware of issues and plausible
solutions. In this type of evaluation/testing the desired result is simply now not a universal
(summary) usability score, however pointers to problems, maybe with warning signs as to the
problem's frequency of prevalence -- to help the designer conscious about which problems to
concentrate on. This method of evaluation and checking out covers a huge vicinity of graph
from the very opening of the development of a system which leads to get the ideal and last
working solution and to proceed keeping the product. So, some of the key roles of formative
checking out are:

6.3.1 Rapid Feedback

During the continuation of project, Rapid remarks entails the comments on development of
application. It provides non-stop remarks on structures efficiency, it’s working on fighting
management and on its resolution. Such that the structures usual working can be extended
resulting better efficiency.
6.3.2 Documentation
During the continuation of project, Rapid remarks includes the comments on development of
application. It offers non-stop comments on systems efficiency, it’s working on fighting
administration and on its resolution. Such that the systems typical working can be improved
ensuing better efficiency.
6.3.3 Planning
Formative evaluation/testing helps on planning and enable for revision of our recommitment
to plans. When a formative contrast procedure identifies that the application has been going
out of scope, the human beings who are in charge of work will be revising their plans in order
to continue with new addition. Such that better layout can be implemented for better result.
Types of Formative Evaluation There are many types of comparison techniques such as
observations, surveys, interviews, analysis etc. which are known as formative evaluation. So,
some classes of formative evaluation are proven.
6.4 Formative Evaluation
“A formative evaluation (sometimes referred to as internal) is a method for judging the worth
of a program while the program activities are forming (in progress). They can be conducted
during any phase of the ADDIE process. This part of the evaluation focuses on the process.
Thus, formative evaluations are basically done on the fly. They permit the designers, learners,
instructors, and managers to monitor how well the instructional goals and objectives are
being met. Its main purpose is to catch deficiencies ASAP so that the proper learning
interventions can take place that allows the learners to master the required skills and
knowledge. Formative evaluation is also useful in analyzing learning materials, student
learning and achievements, and teacher effectiveness. Formative evaluation is primarily a
building process which accumulates a series of components of new materials, skills, and
problems into an ultimate meaningful whole” [ CITATION KAY95 \l 1033 ].
7. Conclusion
As no small business should be expected to manage, oversee and keep up their site without
progressing support. We have created a web portal that provides information about cars
having so many feathers like automation and electric car. We have structure basic perfect and
utilitarian sites that will make clients simple and quick to get to the data in the site. It’s tied in
with making an online encounter that treats understudy as a guest and guest as an understudy.
Any company site that is normally refreshed stands a lot more possibility of positioning
profoundly in list items and arriving at potential clients than a private venture site that isn't.
And also due to poor designs websites don’t get that much popularity. We had done this task
according to the clients need and criteria with the end goal that the matter of website and its
standard will be expanded. It will serve internet making the organization of Gerald Salven
Volkswagen considerably more adaptable with the broad benefit with the better idea of UI
and Human Computer Interaction.
8. Gantt Chart

Figure 29 Gantt Chart of Tasks

Figure 30 Gantt Chart of Timeline
9. References
1. Ainsworth, Q., 2019. jotform. [Online]
Available at: https://www.jotform.com/data-collection-methods/
[Accessed 10 November 2019].
2. Anic, I., 2015. UX Passion. [Online]
Available at: https://www.uxpassion.com/blog/participatory-design-what-makes-it-
great/
[Accessed 09 09 2017].
3. Anic, I., 2015. UX Passion. [Online]
Available at: https://www.uxpassion.com/blog/participatory-design-what-makes-it-
great/
[Accessed 16 10 2017].
4. Anon., 2010. Evaluation Toolbox. [Online]
Available at: http://evaluationtoolbox.net.au/index.php?
option=com_content&view=article&id=24&Itemid=125
[Accessed 05 11 2017].
5. Anon., 2013. [Online]
Available at: https://www.usability.gov/get-involved/blog/2013/09/measurable-
usability-goals.html
[Accessed 09 09 2017].
6. Anon., 2017. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/parallel-
design.html
[Accessed 10 10 2017].
7. Anon., 2017. Competitor Analysis. [Online]
Available at:
http://wps.prenhall.com/bp_turban_introec_3/167/42819/10961833.cw/index.html
[Accessed 26 10 2017].
8. Anon., 2017. ISTQB exam certification. [Online]
Available at: http://istqbexamcertification.com/what-are-the-software-development-
life-cycle-sdlc-phases/
[Accessed 05 11 2017].
9. Anon., 2017. usability.gov. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/parallel-
design.html
[Accessed 15 10 2017].
10. Anon., n.d. arxiv. [Online]
Available at: https://arxiv.org/ftp/arxiv/papers/1503/1503.07474.pdf
11. Anon., n.d. arxiv.org. [Online]
Available at: https://arxiv.org/ftp/arxiv/papers/1503/1503.07474.pdf
12. Anon., n.d. cyfar.org. [Online]
Available at: https://cyfar.org/data-collection-techniques
13. Anon., n.d. di-srv.unisa.it. [Online]
Available at: http://www.di-
srv.unisa.it/~delmal/research/usability/VisualHarmony/UsabilityStudy/QUIS_CSQU.
pdf
14. Anon., n.d. di-srv.unista.it. [Online]
Available at: http://www.di-
srv.unisa.it/~delmal/research/usability/VisualHarmony/UsabilityStudy/QUIS_CSQU.
pdf
15. Anon., n.d. libweb.surrey. [Online]
Available at: http://libweb.surrey.ac.uk/library/skills/Introduction%20to%20Research
%20and%20Managing%20Information%20Leicester/page_51.htm
16. Anon., n.d. libweb.surrey. [Online]
Available at: http://libweb.surrey.ac.uk/library/skills/Introduction%20to%20Research
%20and%20Managing%20Information%20Leicester/page_51.htm
17. Anon., n.d. researchgate. [Online]
Available at: https://www.researchgate.net/figure/4372290_fig2_Fig-2-The-user-
profiling-process
18. Anon., n.d. sociocops.com. [Online]
Available at: https://blog.socialcops.com/academy/resources/4-data-collection-
techniques-ones-right/
19. Anon., n.d. usability.gov. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/task-analysis.html
20. Anon., n.d. uxmatters.com. [Online]
Available at: https://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-
analysis.php
21. Anon., n.d. wsu. [Online]
Available at: https://public.wsu.edu/~ericsson/story_bd.html
[Accessed 2017].
22. Babich, N., 2017. uxplanet. [Online]
Available at: https://uxplanet.org/storyboarding-in-ux-design-b9d2e18e5fab
[Accessed 10 November 2019].
23. Carlisle, K. E., 1983. The process of task analysis. Journal of instructional
development, June .
24. Ferenzi, K., 2018. bigcommerce. [Online]
Available at: https://www.bigcommerce.com/blog/how-perform-competitive-
analysis/#undefined
[Accessed 24 November 2019].
25. foundationsofhci, 2018. [Online]
Available at: https://foundationsofhci.wordpress.com/module-1/?cv=1
[Accessed 25 November 2019].
26. Hornsby, P., 2010. uxmatters. [Online]
Available at: https://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-
analysis.php
[Accessed 11 November 2019].
27. hotjar, 2019. hotjar. [Online]
Available at: https://www.hotjar.com/usability-testing
[Accessed 24 11 2019].
28. Jase, 2017. medium. [Online]
Available at: https://medium.com/@jasemiller/what-is-impact-design-14e605e5d60d
[Accessed 13 11 2019].
29. KAYAK, 1995. nwlink. [Online]
Available at: http://www.nwlink.com/~donclark/hrd/isd/types_of_evaluations.html
[Accessed 13 11 2019].
30. Kim, A., 2019. medium. [Online]
Available at: https://medium.com/@annkim_93227/what-is-human-computer-
interaction-hci-3020e5c29e5b
[Accessed 10 November 2019].
31. Li, K., 2016. Design and analysis of parallel file. pp. 716-734.
32. lotame, 2019. [Online]
Available at: https://www.lotame.com/what-are-the-methods-of-data-collection/
[Accessed 04 october 2019].
33. Max, J., 2018. project-management.com. [Online]
Available at: https://project-management.com/what-is-stakeholder-analysis/
[Accessed 10 November 2019].
34. Shukairy, A., 2018. invespcro. [Online]
Available at: https://www.invespcro.com/blog/usability-101-designing-for-a-better-
user-experience/
[Accessed 24 November 2019].
35. SIE, C. D., 2015. CHRIS DA SIE. [Online]
Available at: http://www.chrisdasie.com/myposts/5-components-of-usability
[Accessed 15 09 2017].
36. sortsolgroup, 2017. sortsolgroup. [Online]
Available at: https://sortsolgroup.org/strategy-screen/
[Accessed 13 11 2019].
37. tryqa, 2019. tryqa. [Online]
Available at: http://tryqa.com/what-is-test-design-when-to-create-it/
[Accessed 11 November 2019].
38. tryqa, 2019. tryqa. [Online]
Available at: http://tryqa.com/what-is-test-design-when-to-create-it/
[Accessed 13 11 2019].
39. uxmag, 2017. uxmag.. [Online]
Available at: https://uxmag.com/articles/participatory-design-in-practice
[Accessed 11 November 2019].
40. Wolf, M., 2019. Qualtrics. [Online]
Available at: https://www.qualtrics.com/blog/employee-feedback-examples/
[Accessed 24 November 2019].
10 Workload Matrix
Name Roll no Signature

Bhumika Shrestha NP000194

Nisha Bhandari NP000200

Rinku Yadav NP000203

Marking scheme for the team of three (3)
Group Marks (30%)
Testing of Design
Formative Testing
Overall achievement of the learning outcome:
Understanding of the overall HCI consideration for the project
.
User Profiling – NP000194 Marks (70%)
Research and References:
Use of research to support decision making (appropriate use of
citations and references)

Critical Discussion and Application of User Requirements:

To include
 the selection of data gathering methods
 the actual user profiling process performed
 the impact of user profiling results
 task analysis

Usability Goals and Competitive Analysis – NP000203 Marks (70%)

Research and References:
Use of research to support decision making (appropriate use of
citations and references)
Critical Discussion and Application:
To include
 the selection of design principles
 the selection of usability goals
 competitive analysis

Prototype and Walkthrough – NP000200 Marks (70%)

Research and References:
Use of research to support decision making (appropriate use of
citations and references)
Critical Discussion and Application:
To include
 storyboarding
 each screen purpose and strategy behind its design
 peer to peer evaluation (parallel design), participatory
design and their impact on the design