HCI Report: Website Development for House of Cards (COIS 12036)

This report details the development of a website for the House of Cards, a sole-proprietor shop. The project aims to create a website providing information about the shop's layout, items, and operating hours to boost sales. The report begins with user and task analysis, considering a diverse user base and their potential interactions with the website. It then outlines the design and system requirements, emphasizing a simple and minimalistic design with adaptive screen sizes and appropriate color schemes. A low-fidelity prototype was developed using HTML5 and CSS3. The report also describes the process of obtaining user feedback through questionnaires and Likert scales, followed by recommendations for improvement, such as adding graphics, organizational information, and a slideshow. The report concludes that a well-designed website can improve sales and provides a detailed analysis of the website development process, including user feedback and suggestions for refinement.

Running head: HUMAN COMPUTER INTERACTION
Human Computer Interaction
Name of the Student
Name of the University
Author Note

1HUMAN COMPUTER INTERACTION
Table of Contents
Introduction:................................................................................................................................2
User and Task Analysis:.............................................................................................................2
Design and System Requirements:.............................................................................................3
Developing the Low-Fidelity Prototype:....................................................................................4
Obtaining User Feedback:...........................................................................................................4
Recommendations:......................................................................................................................4
Conclusion:.................................................................................................................................5
Bibliography:..............................................................................................................................6

2HUMAN COMPUTER INTERACTION
Introduction:
The current discussion is regarding the organization House of Cards which is a sole-
proprietor. In this aspect they have own a proper physical shop, through which they operate
their businesses. Almost each of the organizations wants an online present so that they can
boost their sales. Different type of organization uses different online strategies for boosting
the sales. Following the same House of Cards is also interested to create an online present of
them. In this aspect, the House of Cards wants to develop an online website which will
important information regarding the physical shop of House of Cards. This website will
provide important information which includes overview of the shop, layout of the shop and
the operating hours of the shop. This website will aware more people regarding the shop and
in this way, it is expected that the overall sales of the organization will be boosted.
Regarding the actual website development of House of Cards, in this case, a low-
fidelity prototype will be developed for the actual website. This report will mainly reflect
about the important process and the steps that were followed throughout the project for the
development of the prototype. Also, some important recommendation will be also shared
regarding how the initial design of the project can be refined.
User and Task Analysis:
The main aim of the current website project is making more customers aware about
the House of Cards organization so that overall sales of them can be boosted. They will know
about the House of Cards organization more when the users will be spending enough time in
the website. User will likely to spend more time in the website if the website is user-friendly.
To make a website user-friendly, first of all, it is important it is important know the user and
the task they will perform in the website. For this reason, user and task analysis is important.
Depending on the business nature of the House of Cards it has been assessed that from very

3HUMAN COMPUTER INTERACTION
young peoples to the old peoples, all are the potential customer of them. Therefore, chances
are higher that a wide age groups peoples will use the website. Considering this factor, it is
decided that the design of the website should simplistic and minimalistic. While the users will
be opening the website, 90% of the peoples will click on postcards, greeting card or in the
playing cards to explore the website further. Therefore, all of these menus will be provided in
the index page of the website so that users directly get access to the main attraction of the
website without wasting any time further. While the users will be browsing through the main
attractions of the website, they can change their mind any time and may want to know the
details of the physical shop of House of Cards. For this reason, the develop prototype hold a
section for the shop related info so that the user can easily browse the information without any
type of further complexity. This is also same with the homepage of the website as the users
can feel to visit the staring page website at any moment of time. Due to this reason in every
page of the prototype a link for the website is provided, so that the users can easily go back to
the homepage. These are the main task identified which might be performed by different types
of users.
Design and System Requirements:
Considering the user age group, who will be using this website it is important make
the design of the website very much simple. To keep the design simple and minimal, a simple
font has been used and following HCI guidelines only a few numbers of font styles has been
used in the prototype and standard font style has been chosen for proper understandability of
the prototype. Also, in this case the number of items per page is restricted to 6-7 items so that
the prototype looks clean, which will be also reflected in the actual website. It is always better
to use an adaptive screen size approach to make the user comfortable with the website. In this
case, screen size of the webpage will be modified as per the screen size of the users. The
chosen colour plays important role for the website usability. In this case, light background has

4HUMAN COMPUTER INTERACTION
been used and upon on the light background dark items has been represented so that they can
be understood very easily and for each of the section different scenes are used to make the
website looks cleaner.
Developing the Low-Fidelity Prototype:
From the analysis of the website requirement, a prototype has been prepared in this
step. For preparing the prototype combination of CSS3 and HTML5 is user here.
Obtaining User Feedback:
Gathering the user feedback is important to realise, what the users think about the
website and whether any type of improvement is required or not. Four peoples of different age
groups were selected to gather the user feedback. One of them do have a high knowledge
about the computer system while others have the basic knowledge. In this case, the data were
collected from the users in from of quantitative data through the Likert scale. Some
questionaries were prepared and it was asked to the users after they spent 10 mins with the
prototype. Their feedbacks were collected through the Likert scale in a quantitative formant.
Recommendations:
 Background of the webpage is totally white. Some graphics can be added into this to
make it more attractive.
 Homepage does not have any brief about the organization. Some important
information can be added in the homepage regarding the organization.
 A slideshow can be implemented in the website for viewing the pictures which will
make the website more attractive.
 Proper addressing and contact information of the organization is missing which should
be added in the final build.

5HUMAN COMPUTER INTERACTION
Conclusion:
From the above discussion it can be concluded that implementing a proper website is
capable of improving the sales of the organization. In this aspect, a website will be created for
the House of Cards for their business purposes. Regarding the website, in this report, first the
user and task analysis has been carried out. Following that, design and system requirement for
the website has been proposed. In the following section a low fidelity prototype is prepared of
the actual website. Depending on this low fidelity prototype, important feedback is gathered
from the users. Lastly, in the further section of this report, recommendation has been shared
on the basis of provided user feedback.

6HUMAN COMPUTER INTERACTION
Bibliography:
Barakat, S., 2017. LAMP as a Website Development and Hosting Environment. Research
Journal of Applied Sciences, 12(5-6), pp.365-367.
Brown, N., 2017. Updating Assessment Styles: Website Development Rather than Report
Writing for Project Based Learning Courses. Advances in Engineering Education, 6(2), p.n2.
Card, S.K. ed., 2018. The psychology of human-computer interaction. Crc Press.
Hibbeln, M.T., Jenkins, J.L., Schneider, C., Valacich, J. and Weinmann, M., 2017. How is
your user feeling? Inferring emotion through human-computer interaction devices. Mis
Quarterly, 41(1), pp.1-21.
Joshi, K. and Siemieniak, M., 2019. Website development process improvement in SMEs
using TPS with the implementation of Lean and Agile methodologies-an empirical
study. Zeszyty Naukowe Politechniki Poznańskiej. Organizacja i Zarządzanie.
MacKenzie, I.S. and Castellucci, S.J., 2016, May. Empirical research methods for human-
computer interaction. In Proceedings of the 2016 CHI Conference Extended Abstracts on
Human Factors in Computing Systems (pp. 996-999).
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N. and Diakopoulos, N.,
2016. Designing the user interface: strategies for effective human-computer interaction.
Pearson.
Williams, K., 2019. IS 117-101: Introduction to Website Development.