Website Design for PetCare Ltd

This case study explores the design concepts, interactive website creation, implementation, testing, and maintenance for PetCare Ltd. It covers usability, user interface, security, feedback evaluation, and onscreen help.

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

Figure 6: Product page
12

A.C.2.2 Evaluate website design with other users
To evaluate the website, I am providing rating table according to feedback from different users
and rating is based on poor, average, good, very good, and excellent. The table is related to
different attribute and they are following:
Performance of website:
Table 1- Performance of website
Users Rating
Customer Very good
Staff Excellent
Admin Very good
Manager Very good
Service of the website:
Table 2- Service of the website
Users Rating
Customer Very good
Staff Very good
Admin good
Manager Very good
Cost for services:
Table 3- Cost for services
Users Rating
Customer poor
Staff good
Admin Good
Manager Very good
13

Availability:
Table 4- Availability
Users Rating
Customer Very good
Staff Very good
Admin Excellent
Manager Excellent
14

LO 3 Be able to implement interactive websites
A.C.3.1 Implement a fully-functional interactive website using a design specification
The implementation of the fully-functional interactive website using the specification contains
the long life protection of the website. The main aim of designing the website with the
specification is to reduce the devotion and make the most of the attraction of the website towards
the users.
Website design: website design is possible from the different method of the designing. To
develop the website for the PetCare Pvt. I have used Wix to create the basic web pages like home
page, pet page, pet food page and information related pages. This software is used to create the
attractive website. In the Wix software any designer able to create a website from the freedom. It
has scenario or class which have to obey the users during the website designing. This software
provides possible right information and has criteria or security for the user to update its
information safe and secure at this place. It will allow users to get online help regarding creating
any website. This is providing a professional way to create or represent the website which was
created by the user. This website provides an attractive designing method for the user so that all
user gets attract from the Wix technology. The Wix software provides an opportunity to the user
would be able to modify its website with the help of this software.
The screenshots of the webpage which is developed by taking the help of Wix is shown below:
15

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

LO4 Be able to test interactive websites
A.C4.1 critically reviews and tests the website.
Web testing is a normal form for checking the website which will be designed in the particular
software. Web testing consists the ability and potential of the website which will be created. In
web testing, procedure of web testing contains probably possible testing. All testing will be done
in order to check the security, effort, and the availability of the website. There are several types
of web testing they are such as Usability testing, Database testing, Functionality testing, Interface
testing, Performance testing, Compatibility testing, Crowd testing, Security testing,
Compatibility testing.
Functionality testing: This testing includes the testing which are required by the users are met
in the software or not. It indicates the specification and the role of the function on the website.
These website tests all the cookies which will be added to the website, the advantage of the
cookies are user don’t need to check the specification of the website again and again.
Usability testing: Usability testing of the website contains the main option for the website like a
list of options, links or key.
Interface testing: The interface testing tests the applicable function in the testing. The applicable
function which will be tested there is such as function, web and the attendant of the website. This
testing will be established when the mutual bonding of those function will be not working.
Database testing: The database testing of the website is one of the critical component or the
procedure. Through this, the testing of errors, update of the data, and the necessary part of the
testing will be done appropriately.
Compatibility testing: The compatibility testing of the website collect the entire information on
the website that is it working properly on the devices or not. In the compatibility testing, the
testing of all browser related to the window has been tested. Or this process of testing tests this
website in mobile site also, that it will be open correctly in the particular browser or not.
24

Performance testing: The performance testing makes sure the working capacity of the website.
Security testing: the security is the major part of the website. Their all the information regarding
client will be mentioned in this so that the security testing is one of the major parts of the testing.
Crowd testing: the crowd testing of the application will be explained as a number of the client
who enters on this website at the one time. And at that time the capability of the website.
25

A.C 4.2 Analyse the actual test results against expected results to identify and report any
discrepancies
Table 5- Actual test results against expected results
S.No. Test Case Expected results Actual test
results
Outcome
1. User click on home menu Website
homepage has
to be opened.
Opened the
home page
Successfully
perform
2. User click on image The image with
the full screen
has to be
opened.
Opened the
image in full
screen
Successfully
perform
3. User does not fill the email
filed in contact page
Should create a
message: please
enter the valid
email.
Created a
message: please
enter the usable
email.
Successfully
perform
4. User click on + or – sing on
sitemap
Sitemap should
change the size
(+ (increase the
size sitemap)
and – (decrease
the size of
sitemap) )
Increased the
size of the
sitemap.
Successfully
perform
User click on special offer
menu
Website special
offer page has to
be opened.
Opened the
special offer
page
Successfully
perform
5. User click on buy now
button
User can
redirect to
PayPal page for
Direct the
PayPal page
Successfully
perform
26

the payment
6. User search the service in
search menu
The searching
details have to
be opened.
Displayed
searching result
Successfully
perform
7. User click on product as cat
menu
Should be
Directed to the
cat details page
Open the cat
product page
Successfully
perform
8. User single click on like
image
It should be
increased by 1
number in the
like
One like is
increased.
Successfully
perform
9. User double click on like
image
It should
perform like and
dislike both and
does not change
in the like
Does effect like
a link.
Successfully
perform
10. User click on image
download button
Should
download the
image
Image is
downloaded in
computer
system
Successfully
perform
11. User click on share button Should share
image on a
different type of
social media
like as
Facebook, what
up, twitter,
Instagram etc.
Image shared on
social media.
Successfully
perform
27

28

A.C4.3 Evaluate independent feedback on the website and make recommendations in your
report, for improvements
Feedback
The independent feedback on the website is this is helping to the clients, that what type of help
they need from the website. Whether they need help in searching for a pet in the nearby area or
in the all over the area. This website will help the customer from the search engine and the filter
process of the website.
There the client will be able to get the sufficient information about the pet and about the dog with
the help of this website. In this website, the option for the client will also mention that finding
the pet as per client match or having a speciality in the way of the client.
Feedback table 1:
Table 6- Feedback table 1
Poor Average Good
User interface 
Login page 
Security 
services 
Recommendation (If any):
 Use white space.
29

 Use attractive cells to action.
 Use hyperlink differentiation.
Feedback table 2:
Table 7- Feedback table 2
Poor Average Good
User interface 
Login page 
Security 
services 
Recommendation (If any):
 Use images.
 Include well designed and written
heading.
 Be responsive and mobile friendly.
Recommendation for website improvement: Here some recommendation for the established
website, they are such as
30

Use white space: The most of the complaint about the white space in the website is as the
designer has to use the whole spec of the home page in order to the advertisement of the website
or in order to provide a more attractive thing for the client in the website.
Use attractive cells to action: The use of attractive cells in the website is providing an
appropriate section for the use of the client. Means this section indicates to the client for the
particular action which will be taken by the clients.
Use hyperlink differentiation: The hyperlink differentiation is well described as the process
through this client able to see the highlighted information on the website. From this client give
attention directly to the highlighted portion of the website.
Use images: Client of the internet well aware of all images of the website. They recognize the
website image from the first look at the image. For this purpose, website designer has to create a
website along with the proper images of the work.
Include well designed and written heading: About the heading, designers have to use the
proper font of the heading according to need in a website.
Be responsive and mobile friendly: In order to be responsive and be friendly, the operator has
been being attentive all time towards the client of the website. Sometimes a client may be asking
for any further assistance in that case operator have attended the client on the available time.
That is the great impact of the website towards the client.
31

A.C 4.4 Create onscreen help to assist the users of PetCare Ltd
On-screen help is a guideline of any product which gives details of working and features of the
product to the user. Here, I have explained the onscreen help for PetCare website. On-screen help
guides the user to how website in working. I have implemented this feature on PetCare website
contact page.
If the user does not enter the email id in the contact form and send the form, then there is display
an error message like as please enter the valid email id.
Figure 15: when user is not entered the email id
If user does not enter the email id in proper format in the contact form and send the form, then
there is display an error message like as please enter the valid email id.
Figure 16: Before the click on send button when email is not format
32

Figure 17: After the click on send button when email is not format
By taking the help of onscreen help, the consistency of the data can be maintained easily.
33

A.C 4.5 Create documentation for the support and maintenance of the website
Maintenance for the website: The maintenance is required for the website time to time because
the maintenance improves the performance. The website will run smoothly without any problem
with the maintenance of the website. Sometimes different links can create a problem and some
also can create a big problem so to overcome this problem the website maintenance is required.
The developer can maintain the website by following these points and points are given below:
By updating the website elements:
The website contains a different element for different tasks so to improve the performance and
the quality of the website update is required. Some elements of the website that need update are
as follows:
 Content: The website contains different valuable information and contents. The update is
required for the different content according to requirement. By using the content user can
gain the knowledge. The content update is required to provide the correct information to
the user time to time.
 Image: The websites also contain different images so images should be updated
according to changes in the websites. The images are the way to provide the information
for a specific thing on the website.
 Company news: The company news should be updated time to time which is used to
provide the news related information.
 Links: Sometimes different links create problem to redirect the website so to overcome
developer needs to update the correct link on the website.
By adding different features in the websites: The developer can improve the website by
adding an additional feature on the website.
34

Backup for the data: The website contains lots of sensitive and valuable information. This
information is very important for the user and company. So the backup of the data is always
required for the company. By using the backup company can recover the data without any
problem in critical condition.
By monitoring the website: The admin can monitor the website by using the analyzing tool. It
is very important to monitor the third party activity on the website and reduce the man in middle
attack.
User Documentation:
Table 8- User Documentation
S.no Website Page User Documentation
1 Homepage Homepage displays the PetCare details (like as history, aim, service
etc.) it also shows the image of adoptable cat and dog.
2 Service page It gives the PetCare service name and price which is offered to the
user in the table form.
3. Product page It is shown the image which is offered by the PetCare like dog, cat,
and their product.
4. Cat Product It displayed all cat details like name, price, cat nature etc. It also has
buying option which redirects user to PayPal payment page.
5. Dog product It displayed all dog details like name, price, dog nature etc. It also has
buying option which redirects user to PayPal payment page.
6. Pharmacy page It displayed all pharmacy details like name, price, pharmacy nature
etc.
7. Special offer
page
It displays all special offer which offered by PetCare. Like cat, dog,
pharmacy etc.
8. Contact page It displays a contact form. The contact form is held name, email and
feedback input field.
35

36

Technical Documentation
Table 9- Technical Documentation
S.no Website Page Technical Documentation
1 Homepage Homepage is designed on Wix theme. It also uses the navigation bar
to connect all page of the website. In this scrollbar and footer is
used. Footer is included with social media link and copyright
details.
2 Service page Service page is designed on Wix theme. In this table is used to
display service. Searching operation is also used with help of
matching process (array and loop).
3. Product page The product page is created on Wix theme. It is displayed only
image of the product that PetCare Ltd deals with.
4. Cat Product Cat Product is created on Wix theme. This page display cat image,
detail, price of the product. It is used a hyperlink on buy now button
that redirect user to PayPal payment page.
5. Dog product Dog Product is created with help of Wix theme. This page deals
with only dog image, detail and price of the product. It uses a
hyperlink on buy now button that is direct to PayPal payment page.
Dog product page holds navigation bar and scrollbar.
6. Pharmacy page Pharmacy Product page is designed with Wix theme. It is displayed
only pharmacy product image, detail, the price of product.
Pharmacy Product page has used a hyperlink on buy button that is
linked to PayPal payment page.
7. Special offer
page
Special offer page is designed on Wix theme. It also uses navigation
bar and scrollbar. It is used the image to display the product. Images
are arranged in Div.
8. Contact page The contact page is designed with Wix theme. It also uses the
navigation bar to connect all page of website. Contact form and
37

send button are also used on this page.
Conclusion
I have used the Wix to develop the website for the PetCare website. This website is very useful
for the user who wants to buy the pets or pet food or another thing which is related to the pets.
The main advantages of this website are that the user can receive different information about
different pets from a different place at any time and the user can order the pet from a different
place. This website provides a good user interface for the friendly environment where the user
can easily handle different option without a problem.
38

References
Arawebsitedesign, 2017. What is website design? [online] Arawebsitedesign. Available at:
http://www.arawebsitedesign.com/what_is_website_design_66.htm [Accessed 25 Jan. 2018].
Cronin, S., 2017. 6 Tips for Improving Website Accessibility. [online] Web Design. Available at:
https://webdesign.tutsplus.com/articles/6-tips-for-improving-website-accessibility--webdesign-
1660 [Accessed 25 Jan. 2018].
Definitions, W., 2017. What is a Website?. [online] Computerhope. Available at:
https://www.computerhope.com/jargon/w/website.htm [Accessed 25 Jan. 2018].
Dholakiya, P., 2017. 5 Simple Tips to Secure Your Website from Hackers. [online] Small
Business Trends. Available at: https://smallbiztrends.com/2014/12/secure-your-website-from-
hackers.html [Accessed 25 Jan. 2018].
Hussam, A., 2017. Concept and Inspiration: Design Theory for Web Designers. [online] Web
Design. Available at: https://webdesign.tutsplus.com/articles/concept-and-inspiration-design-
theory-for-web-designers--webdesign-2025 [Accessed 25 Jan. 2018].
LoginRadius, 2017. 10 Ways to Increase User Interaction on Your Website. [online]
LoginRadius. Available at: https://blog.loginradius.com/2015/04/user-interaction/ [Accessed 25
Jan. 2018].
Mooney, G., 2017. 6 Functional Website Designs That Will Inspire You Today. [online]
Successmeasured. Available at: http://successmeasured.com/6-functional-website-designs-that-
will-inspire-you-today/ [Accessed 25 Jan. 2018].
Orbit Media Studios, 2017. Website Navigation. [online] Orbit Media Studios. Available at:
https://www.orbitmedia.com/blog/website-navigation/ [Accessed 25 Jan. 2018].
Techterms, 2017. User Interface Definition. [online] Techterms. Available at:
https://techterms.com/definition/user_interface [Accessed 25 Jan. 2018].
39

Webcredible, 2017. Web usability: The basics. [online] Webcredible. Available at:
https://www.webcredible.com/blog/web-usability-basics/ [Accessed 25 Jan. 2018].
Appendix
https://petcareltd.wixsite.com/petcare
40