Interactive Website Design and Implementation for PetCare Ltd

This project details the design and implementation of an interactive website for PetCare Ltd. It begins by discussing essential website design concepts, including usability, user interface, accessibility, functionality, web navigation, and security. The project outlines the design process, presenting wireframes for key pages such as the homepage, special offers, contact, and product pages, accompanied by storyboards illustrating user interactions. It includes an evaluation of the website design based on user feedback, covering aspects like website performance, service quality, and cost. The implementation phase describes the development of a fully functional website, highlighting various pages and their features. The project further covers comprehensive testing of the website, analyzing test results, addressing discrepancies, and incorporating independent feedback for improvements. On-screen help and detailed documentation for support and maintenance are also provided, ensuring user assistance and long-term website viability. The report concludes with a summary of the project's achievements and recommendations for future enhancements.

Website design

Contents
Introduction......................................................................................................................................3
LO1: Understand website design concepts......................................................................................4
A.C.1.1 Discuss the design concepts that have to be considered when designing a website......4
LO2: Be able to design interactive websites....................................................................................8
A.C.2.1 Design an interactive website to meet given requirements............................................8
A.C.2.2 Evaluate website design with other users.....................................................................13
LO 3 Be able to implement interactive websites...........................................................................15
A.C.3.1 Implement a fully-functional interactive website using a design specification...........15
LO4 Be able to test interactive websites........................................................................................24
A.C4.1 critically reviews and tests the website.........................................................................24
A.C 4.2 Analyse the actual test results against expected results to identify and report any
discrepancies..............................................................................................................................26
A.C4.3 Evaluate independent feedback on the website and make recommendations in your
report, for improvements............................................................................................................28
A.C 4.4 Create onscreen help to assist the users of PetCare Ltd...............................................31
A.C 4.5 Create documentation for the support and maintenance of the website.......................33
Conclusion.....................................................................................................................................37
References......................................................................................................................................38
Appendix........................................................................................................................................39
1

List of Figures
Figure 1: Storyboard to buy a dog...................................................................................................8
Figure 2: Storyboard to buy dog food..............................................................................................8
Figure 3: Home Page.......................................................................................................................9
Figure 4: Special offer page...........................................................................................................10
Figure 5: Contact page...................................................................................................................11
Figure 6: Product page...................................................................................................................12
Figure 7: Homepage......................................................................................................................16
Figure 8: Service page..................................................................................................................17
Figure 9: Product page...................................................................................................................18
Figure 10: Product cat page..........................................................................................................19
Figure 11: Product dog page.........................................................................................................20
Figure 12: Product pharmacy page................................................................................................21
Figure 13: Special offer page.........................................................................................................22
Figure 14: Contact page.................................................................................................................23
Figure 15: when user is not entered the email id...........................................................................31
Figure 16: Before the click on send button when email is not format...........................................31
Figure 17: After the click on send button when email is not format.............................................32
List of Tables
Table 1- Performance of website...................................................................................................13
Table 2- Service of the website.....................................................................................................13
Table 3- Cost for services..............................................................................................................13
Table 4- Availability......................................................................................................................14
Table 5- Actual test results against expected results.....................................................................26
Table 6- Feedback table 1..............................................................................................................28
Table 7- Feedback table 2..............................................................................................................29
Table 8- User Documentation........................................................................................................34
Table 9- Technical Documentation...............................................................................................35
2

Introduction
The internet is a very important thing to share lots of information. Different users can receive
information and data by using the internet. The internet is playing the very important role in
different company and information industries. The websites and web applications are the
important application of the internet. This section will describe the websites and how they are
important in the business, uses of the websites, and advantages of the websites. The websites are
very medium for advertisement and the websites increase the business continuity. I am designing
the interactive website for the PetCare company. This website will be useful to handle different
customer and by using this website the company can provide lots of information to their users.
Different types of the component are used in the websites and they are following in this section.
3

LO1: Understand website design concepts
A.C.1.1 Discuss the design concepts that have to be considered when designing a website
Website: The website is an application of the internet. The website contains different types of
webpage. The website is used to revive different information and used to share information and
data over the internet. The website is mainly used to create the user integration with the different
organization, company, institutes (Definitions, W., 2017).
The design concept of the website: The design concepts are used to understand the working
and functionally of the website. The design concept contains the basic structure of the website.
The functionally of the website is fully dependent on the PetCare organization
(Arawebsitedesign, 2017).
Usability: This website provides the facility to receive different information about different pets
and users can buy the pets, pet food by using internet from the different place (LoginRadius,
2017).
Users: The Company contains different types of users and the user is the main important factor
of the organization so different types of users are describing in this part:
 Company staff: The staff is a group of the members of the company. Without the company
staff, the company is incomplete. The company staff is used by the company to maintain the
whole company processes.
 Customer: The customer is a user who interacts with the company and customer uses the
website to buy the pets and pet foods from the company and they can access different
infraction from the website.
 Admin: The admin is a user which is used to provide the read, write power for different
users according to requirement. The Admin is responsible to handle the company website.
The admin update different component of the website time to time.
The website provides the graphical user interface. By using the graphical user interface the
different user can interact easily with the website. So the best interaction medium is required for
4

the user to access the information and details from the website. If the interaction of the website is
not good, then the user can't access the details easily and it will be hard to understand the website
for the user. So the interaction medium should be good and proper.
User interface: The user interface is used to interact with the organization, company, and
business for the user. The user cans easily interact with the company by good user integration.
The user interaction is used to create the friendly environment on the website so the user
interface is the major factor of the best website. If the user interface is good, then a user can
easily understand and they can use different functions without any problem.
Accessibility:
The web accessibility is used remove different barriers and limitation for the interaction by
providing different advance components. It is used to improve the accessibility of the world wide
web. The developer and company that want to develop the quality of the website provide the
accessibility. Accessibility increase the quality of the website by using this user can easily
interact with the websites and they can access the data and information. The company provides
the different types of features to the customers. The different feature of the websites is following
which is used to increase the user integration are as follow:
 Text for the image: The developer can add different text for the different image. The user
can use this by the HTML and CSS code. The HTML and CSS code provides the facility to
add the text in the image is used to provide additional information. By this user can easily
understand the image on the website.
 The integrative element at the top: Top part of the website contains the main important
element which is used to easily understand the content of the website. If the main starting of
the web pages is attractive, then the user can easily interact with the website and it can be
helpful for the user to find out the useful content from the webpage.
 Menu: The menu is used to define the elements of the webpage in the correct order and it is
very useful for the user-friendly website. The page menu contains different webpage
information. For example, the normal website contains home, contact information and other
information on the webpage. These options are related to different web pages.
5

 Function keys: The function keys are used for a shortcut by using the function key used can
skip large process on the website. Suppose the user wants to skip the webpage then a user can
skip the webpage by using ESC key. The developer can define different keys for different
tasks.
Functionality: The functionally of the website increase the website services and the
performance. The functionality of the website is dependent on different element some other
functionality of the website is following.
 The different version for different devices: the user can access the website on different
devices like tablet, mobile phones, and desktops etc. This feature used to reduce and expend
the resolution of the website for different devices.
 Fast loading: Sometime user want the information and data very quickly so the website
provides the fast loading functionality for web pages by using this user can easily access the
data without any problem.
 Social media: By this user can connect with the company through the social media like
Facebook, Twitter, Instagram etc. user can access different information about the company
from the social media pages.
 Contact: User can directly contact the company and they can contact the admin of the
company by using the contact us option. This option is used to provide the help regarding
different services or company (Mooney, 2017).
Web Navigation: The navigation is the major part of the website, which is used to provide the
virtual direction to the shop. It is very helpful for the customer by using this user can easily
navigate the location of a shop and they can visit the shop. A user can easily understand the road
direction of PetCare shop (Orbit Media Studios, 2017).
Security: The website contains different sensitive data and information and these data are very
important for the company and user. The third part can easily access them and they can misuse
the user information. To overcome this problem some security protocols are required on the
6

website. The website uses the authentication process which is used to authenticate different user
according to relative information like username and user password.
Integration of social media: By this user can connect with the company through the social
media like Facebook, Twitter, Instagram etc. user can access different information about the
company from the social media pages.
Ease of use: The user can easily access the data and information from the website by the best
user interface.
Use friendliness: The website provides the friendly interface to attract the user can understand
all elements and options of the website by the good interface. The website uses this graphical
user interface by using this developer can improve the graphical environment of the website and
it provides to understand the functionality of the website (Techterms, 2017).
Ethical and legal issues:
 Phishing pages: The phishing page is a page which is used by third party to access the
username and user password. By this phishing page, a hacker can hack the user account
easily.
 Copyright: The element, data, and information on the website should be legal. The copyright
indicates original work and it is used to provide the rights to content in the case of the
website. It is used to increase the privacy of the content on the website.
7

LO2: Be able to design interactive websites
A.C.2.1 Design an interactive website to meet given requirements.
According to the first case the user wants to buy a dog so for this user can buy visit the PetCare
website and he can select the dog from a menu option. To select the dog from the website he
needs to select the Dog option from the menu and then the user can choose the dog.
Figure 1: Storyboard to buy a dog
According to the second case now user want to buy the food for his dog so for this, the user can
buy Dog food from the same shop and he can select the pet food option from the menu. To buy
the dog food he needs to select pet food option and then he can select the dog food from option
and then he can choose the dog food.
Figure 2: Storyboard to buy dog food
8

Wireframe: Here, I have shown wireframe for PetCare website.
Figure 3: Home Page
9

Figure 4: Special offer page
10

Figure 5: Contact page
11