Web Design Report: Designing an Interactive Website for Pet Care Ltd

This report details the design and development of an interactive website for Pet Care Ltd. It begins with an introduction to web design concepts, including visualization, relevant content, user-friendliness, and device compatibility. The report then outlines the design of the Pet Care Ltd website, including the use of HTML and CSS, and describes the website's features such as the 'About Us' section, a map, services offered, and contact and pricing information. The evaluation of the website design considers layout, usability, and user experience, comparing the Pet Care Ltd website to competitors. The report also discusses the implementation of a fully-functional website, detailing the structure, development, accessibility, code validation, and maintenance phases. The website is based on JAVA using HTML5 and CSS for styling. The report concludes with a discussion on the relevance of content, use of images, and the overall user experience. The report provides a comprehensive analysis of the design, development, and evaluation of a website for a pet care business.

WEB DESIGN

TABLE OF CONTENTS
INTODUCTION..............................................................................................................................3
TASK 1............................................................................................................................................3
1.1 Discuss the design concepts that have to be considered when designing a website..............3
TASK 2............................................................................................................................................4
2.1 Design an interactive website to meet given requirements ...................................................4
2.2 Evaluate website design with other users..............................................................................5
TASK 3............................................................................................................................................7
3.1 Implement a fully-functional interactive website using a design specification ....................7
TASK 4............................................................................................................................................8
4.1 Critical review and testing of the website..............................................................................8
4.2 Actual test result against expected test result .......................................................................9
4.3 Evaluate independent feedback and make recommendations for improvements ...............10
4.4 Onscreen help to assist the users..........................................................................................11
4.5 Create documentation for support And maintenance of the website ..................................12
CONCLUSION..............................................................................................................................13
REFERENCES..............................................................................................................................14
2

INTODUCTION
Use of technology has enhanced and simplified everyday life of an individual. Designing
and development of website involves planning and creation by using appropriate technology to
construct the website. It includes Architecture of information, user interface, structure of website.
It also involves fonts, images,icons and color schemes. All these elements are integrated together
to form websites. An attractive design attracts numbers of users. Website with well designed
logo enhances its presentation. The aim of the report is to analyze different concept of website
designing which involves visualization, device friendly, user friendly, relevant content and many
more (O'Neil and et.al., 2013). The study will also focus on the behavior of website as compared
to other sites. Factors like color scheme, availability of relevant information, readability of
content, brand logo will be evaluated. Website will be tested and accordingly output generated
will be compared with the expected output. Recommendation of the website to other users is
feasible or not will also be discovered. Response and reaction of users after using website will be
recorded so that improvements needed to implemented can be analyzed.
TASK 1
1.1 Discuss the design concepts that have to be considered when designing a website
Web designing embrace technological skills for the development and maintenance of
website. Web designing is associated with several aspects. Web designing involves different
areas that are required to be considered while designing any website. These factors are interface
designing (Gustafson, 2015), Web graphic designing, search engine optimization etc. Pet Care
Ltd wants following designing concepts to be fulfilled in the website: Visualization:Website designing involves not only visual presentation of the
requirements, it is the process of complete experience of exploring website from entering
to once you leave the website. An attractive design attracts numbers of users. Website
with well designed logo enhances its presentation. Selection of color plays an important
role in the website designing. Too bright or too dark colors does not sooth eyes.
Therefore, colors are required to be selected in such a way that catches eyes of everyone. Relevant content: Another part associated with designing a website is the content written
on pages. Content is required to be clear and completely understandable to every user. Pet
3

Care Ltd requires option for emoticons on web page such as hope, beauty, health etc .
Websites with appropriate images gains attention. Websites are appreciated by the users
if it delivers relevant content. Well visible information to contact company solves various
customer related issues. Search engine friendly: Search engine friendly website eliminates barriers that blocks
the effectiveness of a website from collecting information and data and writing it back to
the database. User needs: Website is required to be designed in as such a way that fulfills all the
requirements of user. Information that user could search for should be made available at
the website. Device friendly: Any website should be platform independent. If a site is working on
mobile phone but is unable to execute on tablets than it is of no use. Developing website
for different types of devices is not feasible option.
 Business needs: Objective of the business should be fulfilled by the website. It should
cover all the essential aspects of business such as fetching and retrieval of information
from database, auditing records, proper access to the licensed parties etc.
TASK 2
2.1 Design an interactive website to meet given requirements
Website for Pet Care Ltd been designed successfully with all the requirements stated by
the company. HTML is used to design web pages. CSS has been used to incorporate colors to
HTML. For designing and building of website CSS is one of the most commonly used
technology. Website fulfills all the user requirements . Website consists of relevant data required
for its business. Website is developed and designed in a such a way that completely delivers
message of true love for pets. It consists of details and availability of well qualified and trained
vet doctors and medical staff (Stanfill, 2015). Website clearly describes high quality premises of
vet clinic meeting all the standards of safety and hygiene. It ensures Safety and protection of
animals. There are many situations in which one loses hope of survival of the pet. In order to
deal with the situation website delivers hope that everything will be alright. Patience and hop[e is
a key to success. Details and management of administration team has been clearly identified. The
website is user friendly that is it easy to use and understand all the linked options. Customer
4

support availability is also mentioned to help customers so that they can solve their queries
efficiently. Website is device friendly. It is not specific to any platform. It can e operated on
tablet as well as on mobile phones. Website has been developed in a such a way that it fulfills all
the requirements of the business. It contains buttons for several options as per the requirement
such as: About Us, A map, Services etc. Relevant content is considered if it meets all the
following requirements:
 Text: Websites should display valid details about the company. Web users trust only
those websites that have genuine information of the company. Mission statement of the
company has been kept on homepage.
 Logo: Logo is used to identify identity of the brand. Logo for Pet Care Ltd has been
designed in appropriate manner.
 A map: Map is incorporated to reach at company's location. Google map address has
been used for this purpose.
 Services: A page for services offered by the company has been included.
 Contact information: It displays all the necessary details and contact information of the
authorities of the company. It contains all the possible ways to contact the company.
 Pricing information:Pricing is the process of setting prices for the products and services
offered by the company. Therefore,Pricing information page has been included that
clearly describes all essential pricing information.
2.2 Evaluate website design with other users
For evaluation of any website two factors are considered: Layout and Design. Layout
represents the arrangement and compositions of all the objects in a website (Homburg and et.al.,
2015). Layout and design embrace potential on the following levels:
 Look and Feel: As according to the saying,' First impression is the last impression'. When
a user visits website and receives negative impression, you never have the same user
back. Look and feel has significance role to hold the user.
 Usability: Response of web user is decided by the visual structure of the web page.
Primary goals of Layout and design are:
 It is the responsibility of layout and design to direct the required query with the target
pages.
5

 It should be easy to find information for the user. It directly relates to the positive and
negative experience of the user on the website.
 Consistency in the message is required and should be compatible with the brand
personality.
Website designed for Pet Care Ltd can be evaluated by considering various aspects.
Website can be rate to 8 on a scale. The reason behind scaling 8 is due to missing of some
relevant information. The map address does not provide exact location making problem for users
to reach the company premises. The color scheme used in website designing were quite good.
Light colors on dark background and vice versa has been followed which is enhanci8ng
visualization of the website. The colors chosen are not so bright and vibrant thus making it
soothing for eyes. Important features have been highlighted which is catching everybody's eyes.
Thus, overall colors used are satisfactory. Information searched was not displaying on front
page. For that it was directing onto second or third page. Thus, it lacks efficiency in consistency
of information. One of the best part of website is it is user friendly. It was easy to use and
navigate on other pages. All the necessary information was displaying on front page. Font size
used for data was appropriate. Neither too small not too big font size was chosen. Headings were
marked in bold letters thus making difference with all the subtopics. Readability got enhanced.
Contact details were not visible on home page. Web user visiting website looking for contact
information looks at home page to get contact details. This feature was missing. If we compare
website of Pet Care Ltd with www.Worstpetshop.com, website of Pet Care was much attractive
and user friendly. It was easy to navigate and search content in the website as compared to the
worstpetshop.com . All the essential information was available. Content were relevant as
compared to other website. The website is quite good to recommend to others. One can get all
the necessary data from the site. Website was displaying message of love for dogs. Relevant
images were used in accordance with the context.
TASK 3
3.1 Implement a fully-functional interactive website using a design specification
Website is considered good if all the functionalities and requirements are fulfilled. In any
specification, the most important thing is to clearly identify the requirements of the user and
6

what the end product will be. Design specification describes various stages involved in
production of website. Stages involved in Pet Care Ltd website designing are described below: Structure: This is the initial stage of design specification. Structure of the website is
identified at the very first stage. Requirements for the website designing should be
freezed at initial level. Proper format and template to be used should be identified. Fonts
and color schemes should be properly chosen. Lighter backgrounds should be chosen
with darker fonts to enhance visibility (Staff, 2013). Thus, website is developed
according to design specification to make it user friendly. Development: Several technologies are available these days to design and develop
websites. HTML and CSS have been used for the development. There are various
Scripting languages available such as PHP , JavaScript etc to automate execution of
tasks. Accessibility: Accessibility defines the website should be accessible to everyone. There
should be efforts to provide access to the disabled people also. The site is required to
comply with Accessibility Guidelines. Code Validation: It ensures that the code written for programming of website maintains
high standards. Website should validate W3C that is World Wide Web specifications.
 Maintenance: Maintenance is the last stage in website development. In this phase,
website is developed and launched. After that if modifications are encountered it should
be able to incorporate changes and updations. Modifications could arise due to
technological changes or addition of new feature etc. It is required to be able to make
changes at low cost. Designing should be flexible enough so that modifications can be
easily made. There is another aspect associated with maintenance phase. Training is
provided to the staff to use the website.
 Relevant content: Content that we are writing on web pages about company and details of
contact company should be correct and appropriate. Relevant data makes user to
understand and reach company premises easily. Websites with appropriate images gains
attention.
The Website, PETCARE is a JAVA based website that has been created on HTML 5. AS
the whole screen has been divided into four specific parts, the home page of the website has also
7

been divided in an overall of four parts. CSS has been used for proper styling of the page as it is
an attractive page with colorful pictures also. Various applets have also been properly used. Out
of the four parts, one tab is specified for bullets, that means the headings of the pages included in
the whole website.
This is one of the four parts and it consists of all the headings of the included pages. This tab also
covers the contact, support in case of any query.
The picture behind the text as shown in the picture above, comes in the second part out of the
four. The text reflecting on the picture comes under the third part out of the four. The last part is
given as below :
8

This part and the help area is covered as the final part. The four parts can be chosen in any
direction, either vertically or horizontally. This way, the website PETCARE has been craeted
with the use of applets, CSS for proper styling of the pages.
TASK 4
4.1 Critical review and testing of the website
Testing and review is one of the crucial and important operations that need to be
conducted over the website so that nature of outcomes can be attested. There are possibilities that
acquired results or actual design of the website might be quite different from the design which
was developed by the designer as a blue print. When compared with other websites like
thepetexpress.co.uk or petshop.co.uk, etc.; following results were acquired:
1. Multiple Platform operations: There are situations when a website might be operating
smoothly over the windows browser but the same results are not obtained for
smartphones or tablets. The prepared design is device friendly and easily operable when
considering different platforms.
2. Layout: The alignment and scaling functions are applied to the website design so that an
organised look is acquired by the user. It is not only delightful for the eyes but also
supports accessibility and increases usability (Buede and et.al., 2016). The website
designed for PetCare Ltd. is very clearly outlined in terms of layout and specific
functions are clearly depicted.
3. Pages: There are different pages designed according to specific categories for PetCare
Ltd. Unlike other websites like that of petsathome or thepetexpress, the pages of
developed website design are more effectively managed by the application of CSS tools.
4. Browser compatibility: A website is said to be efficient when developers make it
compatible with other browsers. The website of PetCare Ltd. is functional on all browsers
whereas the other websites were also functional but not that efficiently.
9

5. HTML Errors: Source code many a times contains certain errors which leads to damage
of the website. HTML errors are those mistakes which might be present in the website.
On comparing the website of PetCare Ltd. it was found that there were certain common
errors present which need to be rectified.
6. Video Materials: There is no video material present on the website of PetCare Ltd.
However, the Petshop and Pets at Home also don't have any sort of video material. There
can be an inclusion of such attributes for enhancing the quality of website.
7. Promoted Products: Nowadays, majority websites have advertisement spaces which
allow promotion of products and services for other companies in the form of pay per
click or online banners. It is quite disadvantageous for Pet Care Ltd. to have such an
option. Hence, there is not inclusion of such attributes. However, other websites do
encourage promoted products on their website.
8. Online Chat: Often customers consider direct interaction with company representatives
so that necessary information can be catered and if required spontaneous purchases can
be made. This option of online chat is not present in the developed and comparative
websites. It is a great disadvantage which needs to be converted or transformed for the
advantage of organisation.
4.2 Actual test result against expected test result
Actual test result and expected test result are described as what Pet Care ltd. website is
required to do and what actually is happening .In expected result developer or tester excepct the
desired result he wants from the website (Al-Qeisi and et.al., 2014). In actual test, tester checks
the output of the lins given on th website. Here is the comparison of expected and actual test
result of the website:
Expected Result Actual Result
The home button of the website is to show
homepage of website and relevant information
about the Pet care.
Home button was working properly and it was
showing information what is has to show.
About us button of the site shows data about
the company and its history .
About us was displaying information
regarding the company.
The website has register link through which
one can register.
Register link was not working properly is was
redirecting to some other page.
10

Contact us button is to show contact info of the
Pet care ltd
It was not displaying relevant information.
By clicking on login it has to show the prompt
window on which individual can login.
Login click was successful but when entering
password in it it was showing the password
rather than hiding it.
Basket button which is to show all purchased
product from the site.
It was working well and was displaying all th
product purchased from pet care.
Search bar has to perform searching of product
available on the site.
After entering the desired product in the search
bar it was not showing the relevant
information and doesn't performed any action.
My account button is to show the account and
profile of individual person.
It was working appropriately and manifested
the expected result.
Menu bar function is to give links of various
info available on the site.
It was doing well and giving the relevant
direction .
Customer support toggle is to provide mail id
and number of the admin of the organization.
It was not working and after clicking on that it
was not redirected to the expected page.
OK button on sign-out is to navigate to the
original site
After clicking on it it was redirecting to the the
Pet Care ltd.
4.3 Evaluate independent feedback and make recommendations for improvements
Actual an expected result shows that some features of Pet care ltd website are working
properly. Some feature and buttons were not working appropriately. Individual feedback from
user was taken about Pet Care ltd website and it was evaluated that home page and about us link
on the website were performing the desired function of showing information regarding the
company. On the other hand the register button was causing problem to users. It was not
navigating to the some other page (Staff, 2013). Uses have faced difficulty while registering on
the website. Similarly the Contact Us button has caused problems to the consumer and user of
the company. After clicking on it users weer unable to see any information regarding contact
number and communication link to talk to admin of the website. There was a issue regarding
password in the prompt window as the text box to enter the password was not hiding the
characters user enters. This is the issue of security of user information. Any one can access their
account if password doesn't get hided. Search bar option on the site is not performing its desired
function as it was not providing relevant search result to the users. Customer support button was
11

not available on the website. It was redirecting to the same page of website and not performing
anything after click or touch. User faced issue of unavailability of chat button which is used to
talk the chat executive of company. User were unable to get the information of pets and animals
available in the company. Forgot password link was missing on the website. It is big problem for
the user who has forgot password .
Recommendations: From the above valuate feedback from users it is required that Pet Care ltd
should update its website. They need to solve the issues which are faced by users while
navigating through the website of Pet Care (Creswell, 2013.). The company should add chat
window on website for better communication with the customers. Contact US link and customer
support button need to be updated because it is causing problem to users. Outdated information
should be updated by website administrator. Website was not supporting on some browsers so it
should be upgraded to make sure that its support on all the browsers available.
4.4 Onscreen help to assist the users
Help button is required on any website because many time new users of website want
know about the company and products delivered by them. They have several question in their
mind regarding online navigation process. It is evaluated that Pet Care ltd does not
accommodate the help button. New users while navigating through website were unable to get
information of the product available on the website . Help button supports user to get statistics
of the company (Bors and et. al., 2015). If website have help button it will provide several
benefits to user which are as follows:
9. Some frequently asked question by user can be answer using help button.
10. Queries of user can be solved with the implementation n of help button.
11. Sometime new users are unable in operating website properly so help menu information
will assist user how to deal with website.
12. Information provided in help menu guide user regarding the functions available on the
site and how to operate them.
13. Help button will improve the website navigation experience of users.
14. Company can identify through help menu that how many user are facing problem while
operating website.
15. It assist user in making account and their profile on website.
12