Higher Nationals – Summative Assignment Feedback Form

Student Name/ID H.M Thanoj (E127966)

Unit Title Unit 13: Web Design and Development

Assignment Number 1 Assessor

Date Received 1st
Submission Date submission
Date Received 2nd
Re-submission Date submission
Assessor Feedback:

LO1 Explain server technologies and management services associated with hosting and managing websites

Pass, Merit &

Distinction Descripts P1 P2 M1 M2 D1

LO2 Categorise website technologies, tools and software used to develop websites
Pass, Merit &
P3 P4 M3
Distinction Descripts

LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage
website
P5 P6 M4 D2
Pass, Merit &
Distinction Descripts
st Plan to review the performance and design of a multipage website
LO4 Create and use a Te
P7 M5 D3
Pass, Merit &
Distinction Descripts

* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken
place and grades decisions have been agreed at the assessment board.

1
Assessor Feedback:

Grade: Assessor Signature: Date:

Resubmission Feedback:

• Please note resubmission feedback is focussed only on the resubmitted work

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

Important Points:

1. It is strictly prohibited to use textboxes to add texts in the assignments, except

for the compulsory information. eg: Figures, tables of comparison etc. Adding
text boxes in the body except for the before mentioned compulsory information
will result in rejection of your work.
2. Avoid using page borders in your assignment body.
3. Carefully check the hand in date and the instructions given in the assignment.
Late submissions will not be accepted.
4. Ensure that you give yourself enough time to complete the assignment by the due
date.
5. Excuses of any nature will not be accepted for failure to hand in the work on
time.

2
 6. You must take responsibility for managing your own time effectively.
7. If you are unable to hand in your assignment on time and have valid reasons such
as illness, you may apply (in writing) for an extension.
8. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
9. Non-submission of work without valid reasons will lead to an automatic RE
FERRAL. You will then be asked to complete an alternative assignment.
10. If you use other people’s work or ideas in your assignment, reference them
properly using HARVARD referencing system to avoid plagiarism. You have to
provide both in-text citation and a reference list.
11. If you are proven to be guilty of plagiarism or any academic misconduct, your
grade could be reduced to A REFERRAL or at worst you could be expelled from
the course
12. Use word processing application spell check and grammar check function to help
editing your assignment.
13. Use footer function in the word processor to insert Your Name,
Subject, Assignment No, and Page Number on each page. This is useful if
individual sheets become detached for any reason

STUDENT ASSESSMENT SUBMISSION AND DECLARATION

Student name: H.M Thanoj (E127966) Assessor name:

Issue date: Submission date: Submitted on:

Programme:
HND in Computing

Unit 13: Web Design and Development

Assignment number and title:

1 | Web application for Velvet Vogue clothing store

When submitting evidence for assessment, each student must sign a declaration
confirming that the work is their own.
Plagiarism

Student Name/ID
Number

Unit Number and Title Unit 13: Web Design and Development

3
Academic Year 2024/2025

Unit Tutor

Web application for Velvet Vogue clothing store

Assignment Title

Issue Date

Submission Date

Submission Format

A written portfolio that explores and highlights key information on the technologies that
could be utilised to develop, host and manage the website for Velvet Vogue.

The portfolio should consist of the following components. (Activity 2)

• Solution design documents produced to meet the requirements of a given problem,

including requirements specifications, visual and technical design documentation
details of additional considerations

• Development documentation, including records of test plan and review processes,

and refinements made to the website throughout development.

The recommended word limit is 2000–2,500 words, although you will not be penalised for
exceeding the total word limit.

An Evaluative report to evaluate the design and development process of the website.
(Activity 1 and 3)

The recommended word limit is 1,500–2,000 words, although you will not be penalised for
exceeding the total word limit.

You are required to make use of headings, paragraphs and subsections as appropriate, and
all work must be supported with research and referenced using the Harvard referencing
system.
Plagiarism is a particular form of cheating. Plagiarism must be avoided at all costs and
students who break the rules, however innocently, may be penalised. It is your
responsibility to ensure that you understand correct referencing practices. As a
university level student, you are expected to use appropriate references throughout and
keep carefully detailed notes of all your sources of materials for material you have used
in your work, including any material downloaded from the Internet. Please consult the
relevant unit lecturer or your course tutor if you need any further advice.

4
Student Declaration

Student declaration
I certify that the assignment submission is entirely my own work and I fully
understand the consequences of plagiarism. I understand that making a false
declaration is a form of malpractice.

Student signature: Date:

Assignment Brief

Unit Learning Outcomes

LO1 Explain server technologies and management services associated with hosting and
managing websites

LO2 Categorise website technologies, tools and software used to develop websites

LO3 Utilise website technologies, tools and techniques with good design principles to
create a multipage website

LO4 Create and use a Test Plan to review the performance and design of a multipage
website.

Transferable skills and competencies developed

5
Computing-related cognitive skills :

• Demonstrate knowledge and understanding of essential facts, concepts, principles and

theories relating to computing and computer applications
• Recognise and analyse criteria and specifications appropriate to specific problems,
and plan strategies for their solutions
• Critical evaluation and testing: analyse the extent to which a computer-based system
meets the criteria defined for its current use and future development
• Methods and tools: deploy appropriate theory, practices and tools for the design,
implementation and evaluation of computer-based systems.

Computing-related practical skills :

• The ability to specify, design and construct reliable, secure and usable computer-
based systems
• The ability to evaluate systems in terms of quality attributes and possible trade-offs
presented within the given problem
• The ability to deploy effectively the tools used for the construction and documentation
of computer applications, with particular emphasis on understanding the whole
process involved in the effective deployment of computers to solve practical
problems.

Generic skills for employability :

• Intellectual skills: critical thinking; making a case; numeracy and literacy

• Contextual awareness, e.g. the ability to understand and meet the needs of
individuals, business and the community, and to understand how workplaces and
organisations are governed).

6
Vocational scenario.

John Finlo is an ambitious entrepreneur who has recently started a clothing store called "Velvet Vogue".
Specializing in trendy casualwear and formal wear, that offers a vast selection of clothing and
accessories for young adults who want to express their identity through their style.

Assignment activity and guidance:

7
Activity 1 – Evaluative report

Write an evaluative report that explores the technologies that could be utilized to develop, host and
manage the website for Velvet Vogue. The report should include the following.
• Identification of the purpose and different types of DNS
• An explanation of how domain names are organized and managed
• An explanation of the relationships between hardware and software used to design, publish and
access the Velvet Vogue website, with consideration of:
o communication protocols (e.g. HTTPS, FTP) o server
hardware o operating systems o Web server software (e.g.
Apache, TomCat, IIS, Nginx).

• An analysis of how web development technologies and frameworks (e.g. HTML5, JSON, JQuery,
REACT, Angular, Node.js) have had an impact on web design, functionality and management
• A review of the influence of search engines on website performance
• A review, supported by clear, well-documented evidence, of how to improve the index value of a
website through SEO
• A discussion of the capabilities and relationships of front-end and back-end website technologies
and how they relate to the presentation and application layers
• An analysis of the impact of different tools and techniques available on custom-built website
design and development
• A discussion of the differences between online website creation tools and custom-built sites with
consideration of:
o design flexibility o
performance o
functionality o User
Experience (UX) o
User Interface (UI).

John is looking for new ways to promote his business by enhancing the online presence of his brand. So
he has approached you to develop a multi-page (initially between four and six pages) website that will
act as a showcase of his products categories, allow customers to make transactions, inquiries and provide
a seamless shopping experience. The website will need to provide the following features:

8
 • A visually appealing home page that showcases the products, promotions, and new arrivals. The
home page should include clear navigation to different sections of the website. (Product
categories, the shopping cart, customer support/inquiry page etc.)
• Product pages that display detailed information about each item, including high-quality images,
descriptions, available sizes, colors, and pricing.
• A shopping cart that includes add, review, adjust quantities and proceed payments of the products
they select.
• Product categories and filters that allow users to search items based on criteria such as gender,
clothing type, size, price range and etc.
• User accounts and profiles that allow customers to create personal accounts, admin accounts to
add new products to the web site.
• Responsive design that ensures the website accessibility across different devices
Your task is to design and develop an e-commerce website that reflects his brand identity and satisfy the
preferences and needs of its target audience. Develop a web-based solution for the above scenario and
produce a report covering the following tasks.

9
X Thanoj (E127966)
 Activity 2 -portfolio

Design, Develop and Test the Website

You are to design a multi-page website solution that will meet the needs of the Velvet Vogue website.

Your design documents should include:

• a full set of client and user requirements, e.g. functional and non-functional requirements, user
acceptance criteria
• wireframes
• interface designs
• details of: o networking and hosting considerations o security features o how accessibility and
inclusivity guidelines will be implemented.

You should then use your design documents to implement a multi-page website that will meet the needs
of Velvet Vogue.

Your implementation should include the following.

• A branded, multi-page website for Velvet Vogue, supported with realistic content from your
additional research
• The creation of a suitable test plan for the site. The test plan should identify key areas that cover
both the functionality and performance of the developed website
• An explanation of the web design principles, standards and guidelines used
• A justification of the implementation of the multi-page website decisions against the planned
design decisions, noting any similarities or differences
• An implementation of the test plan against the final developed multi-page website
• Analysis of the QA process, including a review of how it was implemented during the design
and development stages of the multi-page website for Velvet Vogue.

XI Thanoj (E127966)
 Activity 3 – Evaluative repot contd.

Evaluation

Produce an evaluative report that explores the design and development of the website, and how well the
final website meets the needs of Velvet Vogue. The report should include the following.

• Justification of the chosen management services, tools and software from the range of options
presented in Activity 1 that were used ultimately in the development of the Velvet Vogue website
• An evaluation of the design and development process of making the Velvet Vogue website,
compared to the original design document
• An evaluation of any specific technical challenges faced creating the Velvet Vogue website
• An evaluation of the results of the Test Plan and the overall success of the website
• A list of recommended improvements for the Velvet Vogue website; this could be based on client
feedback and the results of testing.

Recommended resources.

XII Thanoj (E127966)

 Weblinks:
https://developer.chrome.com/ (n.d.) Chrome DevTools [online] Available
at: https://developer.chrome.com/docs/devtools/ [Accessed 1 August 2022]
https://developers.google.com/ (2022) Search Engine Optimization (SEO) Starter Guide [online]
Available at: https://developers.google.com/search/docs/beginner/seo-starter-guide [Accessed 1
August
2022] https://getbootstrap.com/ (n.d.) Build fast, responsive sites with Bootstrap [online] Available at:
https://getbootstrap.com/ [Accessed 1 August 2022]
https://ibrandstudio.com/ (n.d.) Design Theory Principles That Work When Building A Website [online]
Available at: https://ibrandstudio.com/articles/building-website-design-theory-principles [Accessed 1
August 2022]
https://wishdesk.com/ (2020) QUALITY ASSURANCE FOR YOUR WEB PROJECT: STAGES,
METHODS, & PRACTICES [online] Available at: https://wishdesk.com/blog/quality-assurance-
stagessteps-tools [Accessed 1 August 2022] https://www.comentum.com/ (2022) Guide to Web
Application Development [online] Available at: https://www.comentum.com/guide-to-web-application-
development.html [Accessed 1 August 2022] https://www.monocubed.com/ (2022) List of 10 Best Web
Frameworks for Web App Development in 2022 [online] Available at:
https://www.monocubed.com/blog/most-popular-web-frameworks/ [Accessed 1 August 2022]

Reading:
Duckett, J (2011) HTML and CSS: Design and Build Websites. 1st edn, Wiley
Duckett, J (2014) JavaScript and jQuery: Interactive Front End Development. 1st edn, Wiley
Duckett, J (2022) PHP & MySQL: Server-Side Web Development. 1st edn, Wiley
Plekhanova, J. (2009) Evaluating web development frameworks: Django, Ruby on Rails and CakePHP,
Available at: https://ibit.temple.edu/wpcontent/uploads/2011/03/IBITWebframeworks.pdf

Journals:
Divyam. G. Pulkit J. and Bharat, B. (2020) Enhancement of Security using Various Web Development
Frameworks. Proceedings of the International Conference on Innovative Computing & Communications
(ICICC) 2020, SSRN: https://ssrn.com/abstract=3600740 or http://dx.doi.org/10.2139/ssrn.3600740
K. Lei, Y. Ma and Z. Tan, (2014) Performance Comparison and Evaluation of Web Development
Technologies in PHP, Python, and Node.js. 2014 IEEE 17th International Conference on Computational
Science and Engineering, 2014, pp. 661-668, doi: 10.1109/CSE.2014.142.
Salas-Zárate, M. et al. (2015) Analyzing best practices on Web development frameworks: The lift
approach. Science of Computer Programming, Volume 102, pp.1-19. doi:
https://doi.org/10.1016/j.scico.2014.12.004
Visser, E.B. & Weideman, M. (2011) An empirical study on website usability elements and how they
affect search engine optimisation. SA Journal of Information Management 13(1), Art. #428, 9 pages. doi:
10.4102/sajim.v13i1.42

XIII Thanoj (E127966)

Wilson, R. et al. (2006) Search engine optimisation: A primer on keyword strategies. Journal of Direct,
Data and Digital Marketing Practice. doi:10.1057/PALGRAVE.DDDMP.4340563

XIV Thanoj (E127966)

Learning Outcomes and Assessment Criteria

Pass Merit Distinction

LO1 Explain server technologies and management services associated

with hosting and managing websites LO1 & LO2

P1 Identify the purpose M1 Analyse the impact of common web D1 Justify the
and types of DNS, development technologies and frameworks technologies,
including explanations with regard to website design, functionality management
on how domain names and management. services, tools and
are organised and software chosen
managed. M2 Review the influence of search engines on to realise a
website performance and provide custom-built
P2 Explain the purpose evidencebased support for improving a site’s website.
and relationships index value and rank through search engine
between optimisation.
communication
protocols, server
hardware, operating
systems and web
server software with
regard to designing,
publishing and
accessing a website.

LO2 Categorise website technologies, tools and software used to

develop websites

P3 Discuss the M3 Analyse a range of tools and techniques

capabilities and available to design and develop a custom-built
relationships between website.
front-end and backend
website technologies
and explain how they
relate to presentation
and application layers.

15 Thanoj (E127966)
P4 Discuss the
differences between
online website
creation tools and
custom-built sites with
regard to design
flexibility,
performance,
functionality, User
Experience (UX) and
User Interface (UI).

LO3 Utilise website technologies, tools and techniques with good D2 Evaluate the
design principles to create a multipage website design and
development
P5 Create a design M4 Justify the multipage website process of the
document for a implementation decisions against the design multipage website
branded, multipage document. against
website, supported the design
with medium fidelity document
wireframes and a full including any
set of client and user technical
requirements. challenges faced.

P6 Use the design

document with
appropriate principles,
standards and
guidelines to produce a
branded, multipage
website supported with
realistic content.

LO4 Create and use a Test Plan to review the performance and design of D3 Evaluate the
a multipage website. results of the Test
Plan and the
P7 Create a suitable M5 Analyse the Quality Assurance (QA) overall success of
test plan, identifying process and review how it was implemented the multipage

16 Thanoj (E127966)
key performance areas during the multipage website design and website with
to review the development stages. recommendations
functionality and for improvement.
performance of the
multipage website
developed.

17 Thanoj (E127966)
Table of Contents
Activity 01 ............................................................................................................................................ 21
1.1 DNS (Domain name System).......................................................................................................... 21
1.2 Hardware and software used to design, publish and access the Velvet Vogue website ................... 34
1.3 Web Development Technologies and Frameworks, ........................................................................ 54
1.4 How search engine effect on a website’s performance? ................................................................. 74
1.5 How SEO improves website’s index value? ................................................................................... 81
1.6 Online website creation Tools VS Custom built Websites .............................................................. 88
Activity 02 ............................................................................................................................................ 99
2.1 Design Documentation,................................................................................................................. 100
2.2 User acceptance criterias, .............................................................................................................. 105
2.3 Wireframes, ................................................................................................................................... 107
2.4 Network considerations, ............................................................................................................... 115
2.5 Method of Hosting, ....................................................................................................................... 116
2.6 DNS management, ........................................................................................................................ 117
2.7 Security features,........................................................................................................................... 117
2.8 POST Method, .............................................................................................................................. 118
2.9 How will the rules pertaining to inclusion and accessibility be applied? ..................................... 120
2.10 Implementation document,.......................................................................................................... 121
2.11 Test plan ...................................................................................................................................... 158
2.12 Design principals used ................................................................................................................ 174
2.13 Design standards ......................................................................................................................... 177
2.14 Web design guidelines used ........................................................................................................ 180
2.15 A comparison between the intended design choices and the implementation of the multi-page
website options, highlighting any parallels or discrepancies, ............................................................. 182
2.16 what is QA?................................................................................................................................. 183
2.17 Analysis of QA process, Including an examination of its use throughout the Velvet Vogue multi
page website’s concept and production phases, .................................................................................. 184
Activity 3 ............................................................................................................................................ 185
3.1 A comparison between the original concept document and the design and development process of
the Velvet Vogue website. ................................................................................................................... 186
3.2 An examination of any unique technical challenges that arose during the creation of the Velvet
Vogue website, .................................................................................................................................... 187
3.3 An evaluation of the Test Plan’s results and the overall efficacy of the website,.......................... 188
3.4 Evaluation of overall success of the website,................................................................................ 191
3.5 List of Suggested enhancements, .................................................................................................. 193

18 Thanoj (E127966)
3.6 Improvements found on test results, ............................................................................................. 195
References........................................................................................................................................... 197

Table of figures
Figure 1.Parts of a domain name .......................................................................................................... 23
Figure 2.How DNS works ....................................................................................................................... 26
Figure 3.DNS recursive resolver ............................................................................................................ 27
Figure 4.DNS Root nameserver ............................................................................................................. 28
Figure 5.TLD nameserver....................................................................................................................... 29
Figure 6.Authoritative nameserver ....................................................................................................... 30
Figure 7.Key elements of a Protocol ..................................................................................................... 31
Figure 8.Types of Communication protocols ......................................................................................... 35
Figure 9.Tower Server............................................................................................................................ 36
Figure 10.Rack Server............................................................................................................................ 37
Figure 11.Blade Server .......................................................................................................................... 38
Figure 12.Types of Server hardware...................................................................................................... 39
Figure 13.Server hardware components ............................................................................................... 40
Figure 14.How servers relate to the websites....................................................................................... 41
Figure 15.Windows................................................................................................................................ 42
Figure 16.MacOS ................................................................................................................................... 43
Figure 17.Android OS ............................................................................................................................ 44
Figure 18.Linux OS................................................................................................................................. 45
Figure 19.Server Operating Systems ..................................................................................................... 46
Figure 20.Types of web servers ............................................................................................................. 47
Figure 21.Apache HTTP Server .............................................................................................................. 47
Figure 22.Apache Tomcat ...................................................................................................................... 49
Figure 23.Microsoft IIS .......................................................................................................................... 50
Figure 24.Nginx(Engine-X) ..................................................................................................................... 51
Figure 25.Web development ................................................................................................................. 54
Figure 26.Frontend technologies .......................................................................................................... 57
Figure 27.Backend technologies ........................................................................................................... 62
Figure 28.Key technologies in Web development................................................................................. 69
Figure 29.How does search engine works? ........................................................................................... 75
Figure 30.Google Search Engine ........................................................................................................... 77
Figure 31.Microsoft Bing ....................................................................................................................... 78
Figure 32.Popular Search Engines ......................................................................................................... 78
Figure 33.Search engine process........................................................................................................... 80
Figure 34.Mozlow's hierarchy of SEO needs. ........................................................................................ 81
Figure 35.How sponsored pages shows in search results. .................................................................... 82
Figure 36.SEO ........................................................................................................................................ 84
Figure 37.SEO improving site performance .......................................................................................... 87
Figure 38.Template and Custom built ................................................................................................... 88
Figure 39.Website Flexibility ................................................................................................................. 94
Figure 40.Website's Performance tracking............................................................................................ 95
Figure 41.Website's Functionality ......................................................................................................... 96

19 Thanoj (E127966)
Figure 42.Website's UX, UI .................................................................................................................... 97
Figure 43.Hero section ........................................................................................................................ 108
Figure 44.Featured items .................................................................................................................... 108
Figure 45.Rich text and footer section ................................................................................................ 109
Figure 46.Men's clothing section ........................................................................................................ 109
Figure 47.Footer .................................................................................................................................. 109
Figure 48.Women’s clothing section ................................................................................................... 110
Figure 49.About us section ................................................................................................................. 111
Figure 50.Contact information section. .............................................................................................. 112
Figure 51.Product page section .......................................................................................................... 113
Figure 52.Cart dashboard .................................................................................................................... 113
Figure 53.Checkout section ................................................................................................................. 114

Table of Tables
Table 1.Advantages and Disadvantages of Tower Server ...................................................................... 36
Table 2.Advantages and Disadvantages of Rack Server ........................................................................ 37
Table 3.Advantages and Disadvantages of Blade Server ....................................................................... 38
Table 4.How that technologies work in designing, publishing and accessing websites. ...................... 53

20 Thanoj (E127966)
Activity 01

1.1 DNS (Domain name System)

Define what is DNS ?

The domain system (DNS) is a naming database in which internet domain names are located
and translated into Internet Protocol (IP) addresses. The domain name system maps the name
people use to locate a website to the IP address that a computer that a computer user to locate
that website.
For instance, a server in the background maps the name “example.com” to the matching IP
address when a user types it into a web browser. The structure of an IP address is comparable
to that of 203.1.113.72.
The majority of the internet activities, including web browsing, depend on DNS to swiftly
provide the data required to link users to distant hosts. A hierarchy of authority governs DNS
mapping across the internet. Access providers, businesses, governments, academic institutions
and other entities usually have their own allotted domain names and IP address ranges. In order
to control the mapping of those addresses, they usually also operate DNS servers. The domain
name of the web server that receives client requests is the foundation of the majority of Uniform
Resource Locaters (URLs). (Anon., 2024)

What is a domain name?

A domain name is a string of characters that represents an alphanumeric IP address when
accessed through client software. A domain name is the text that a user types into a browser
window to access a certain website. Google, for instance, has the domain name “google.com”.
While the actual address of a website is a complex numerical IP address (e.g. 192.0.2.2), DNS
allows users to input human-friendly domain names and be redirected to the websites they wish
to visit. This process is known as a DNS lookup.
Who manages the domain names?
Domain registries are in charge of all domain names and entrust the task of reserving domain
names to registrants. Anyone who wants to create a website can choose a register a domain
name from the more than 300 million already registered.
What is the difference between a domain name and a URL?
A universal resource location (URL), sometimes referred to as a web address, comprises the
protocol and path in addition to the domain name of a website. For example, the URL
https://www.Esoft.lk/elms/ contains the domain name “Esoft.lk”, the protocol “https”, and the
path to a specific page on the website.

21 Thanoj (E127966)
How domain names are organized and managed?
Domain names serve essential roles in the operation of the internet and are arranged in a
hierarchical structure. Every domain name is made up of multiple components: The top-level
domain (TLD), domain name, subdomain, and protocol are the layers that make up a domain
name. All of these factors work together to help users find websites and/or resources with ease.
Without having to memorize the numerical IP addresses, a domain name provides an easily
accessible address and specifies where solutions can be obtained. The Domain Name System
(DNS) provides an IP an address for domain name by managing the domain names and their
underlying structure.
Protocol,
It specifies the means of communication between the client-the browser-and the server that
houses the website. For example, HTTP secure encrypts the data used in secure exchanges, but
HTTP (Hyper Text Transfer Protocol) is utilized in everyday situations. The protocol is a prefix
added to the URL that tells the browser how to obtain the resource, even if it is not a part of
the domain name. Its function is to make it easier to develop a safe and standardized transfer
protocol that will promote web transaction compatibility.
Subdomain,
When organizing the content of a website, the subdomain – the initial portion of a domain name
is utilized. Although WWW, or the World Wide Web, is the default subdomain, additional
subdomains, such blog.example.com or shop.example.com, might focus on certain sections or
services inside a website. Subdomains can be useful in administration since they make it
possible to properly divide services or organize the content of a website. The same principal
web address, or domain name, can be used to run one or more platforms or applications on
websites.
Domain name,
Any website’s distinctive identification is its domain, often known as in www.example.com.
The owner of the website decides this and bears full responsibility for the website’s online
address. This area facilitates user identification and is a crucial component of the branding
process. Accredited domain registrars authorized by the Internet Corporation for Assigned
Names and Numbers (ICANN) are the best place to get a domain name. Since its goal is to
provide a domain name a unique and easily identifiable identity on the internet, no two domain
names within the same TLD can be the same.
Top-Level domain,
Finally, there is the top-level domain, or TLD, which includes.com, .org, .edu, and so on. There
are two primary groups into which TLDs fall: These are the two sorts of TLDs that are now in
use: country code top-level domains (ccTLDs), like .uk for the United Kingdom or .au for
Australia, and generic top-level domains (gTLDs), which include .com and .net among others.
Domain extensions are frequently used to specify the purpose lr location of a website. For
example, only educational institutions are permitted to use the .edu domain extension. TLD is
responsible for providing additional domain information and classifying domain names

22 Thanoj (E127966)
globally. These elements work together to form the fundamental architecture of internet
navigation, which is managed by DNS to enable service users to swiftly locate the resources
they need.
What are the parts of a domain name?
Domain names typically have a dot in between each of the two or three components. When
reading domain names from right to left, the identifiers are organized from most generic to
most specific. The part of a domain name that appears to the right of the final dot is known as
the top-level domain (TLD). These include “generic” TLDs like “.com”, “.net”, and “.org” as
well as country specific TLDs like “.uk” and “.jp”.Everything to left of the 2LD is referred to
as the third-level domain (3LD), while the second-level domain (2LD) is situated to the left of
the TLD.Let’s look at some of examples,
For Google’s US domain name, “google.com”;
• “com” is the TLD (most general)

• “google” is the 2LD (most specific)

But for google UK’s domain name. “google.co.uk”

• “com” is the TLD (most general)

• “co” is the 2LD

• “google” is the 3LD (most specific)

Figure 1.Parts of a domain name

23 Thanoj (E127966)
How to keep a domain name secure?
The register is in charge od alerting the registrant when their domain about to expire and giving
them the chance to renew in order to keep them from losing their domain name. When a user’s
domain expires, registrars frequently prey on them by buying it and then reselling it to the
original registrant at a premium.
(Anon., 2024)
A system of management responsibility assignments based on the Domain Name System
(DNS) governs domain names. Similar to phone directories, DNS converts clearly recognizable
domain names, like example.com, into precise numbers that any computer can use to locate the
server in place of phone numbers. The process of managing a domain name involves the
collaboration of multiple systems and organizations to guarantee the domain name’s security,
uniqueness, and worldwide accessibility.
The Internet Corporation for Assigned Names and Numbers, or ICANN is in charge of
overseeing domain names generally. In order to guarantee that domains will be distinct and
resolves globally as needed, ICANN manages the DNS. It ensures DNS dependability,
establishes guidelines for the deployment of generic domain names, and authorized registries
and registrars. It is also in charge of running the global root zone, which combines all domains,
including country code second-level domains (ccTLDs) like .uk, and generic TLDs like .com
and .org. The business in charge of running specific TLDs are known as registries. Versing, for
instance, is in charge of .com and .net domains, whereas Nominet handles ccTLDs that are
country-specific, such as .uk. TO prevent the potential of duplication, registries maintain
records of every domain name registered to their respective TLD. In addition, they work with
registrars to make domain names public and set rules and costs for domain registration.
ICANN-approves firms that are required to sell domain names to users are known as registrars.
They act as a liaison between the registries and the public. Registrars provide ways for users to
look for available domain names, register them, and set up DNS server settings, among their
things. Among the accredited registrars are Google Domain, Namecheap, and GoDaddy.
Following registration, a domain name belongs to the user for the duration of the registration
period, which is typically one to ten years.
The primary purpose of a domain name server, also known as a DNS server, is to convert
domain names into IP addresses. Because when the client enters the domain name in the
browser, it is sent to the DNS system, which then routes the query through the root zone, TLD
and autoreactive name server until the client receives a suitable IP address. By ensuring that
domain names are consistently and efficiently accessed worldwide, this system makes internet
browsing easier. In order to make the domain name system reliable and simple for users in the
global community, ICANN, registries, registrars, and DNS have partnered specifically on this
project.

24 Thanoj (E127966)
How DNS works?
You would launch your web browser and enter the domain name of the website you wished to
visit. Use Google.com, Although technically you don’t need to type Google.com to access a
Goole webpage, if you already know what Google’s IP address is, you can enter it instead.
However, since we aren’t used to remembering and interacting with numbers, especially when
there are millions of websites on the internet, we can simply enter the domain name and let
DNS translate it to an IP address.
In other words, DNS functions similarly to a phone book, instead of searching for a number
first, and it will provide you with the number. Let’s look at the actions that DNS does in order
to further deconstruct this. Therefore, when you put Google.com in to your browser, if your
operating system or web browser is unable to locate the IP address in its internal cache memory,
it will send a query to a server known as the resolver server. The resolver server which is
essentially your internet service provider, will look through its own cache memory to identify
the IP address for google.com when it receives this question. If it is unable to do so.it will
forward the query to the root server, which is the next level. The rot servers are at the top of
the DNS hierarchy.
Specialized databases are used to arrange domain names. These databases are a component of
the global domain register system. DNS (Domain name system) is used to map Ip names to
hostnames that are readable by humans. A mix of top-level and second-level domain names
make up the domain names. The domain’s human readable hostname is its second second level
domain. The alternative kind gTLD, ccTLD, and nTLD are the three categories into which top-
level domains fall.
The internet Corporation for Assigned names and Numbers, or ICANN, is the organization that
handles domain name registration. Therefore, the ICANN is I charge of managing these names.
It has to do with IP address assignment.
(Denis, 2021)

25 Thanoj (E127966)
 Figure 2.How DNS works

Why DNS important?

Many of us only need to press a few characters on our smartphones or hit a few keys on our
keyboards to access the internet. In just a few seconds, we can connect to an apparently limitless
number of online services is alone responsible for that.
DNS makes sure the internet is not only easy to use but also runs properly, loading any content
we request fast and effectively. It is a fundamental aspect fast of the functioning of the internet.
without it, we would have to commit lengthy lists of IP addresses to memory in order to access
the material we desire. You won’t be able to reach the website you’re looking for if a DNS is
unable to translate the domain name with the correct IP address.
Furthermore, suppose you have committed the IP address of the websites or services you use
most often to memory. What would happen if those Ip addresses’ owners changed their minds>
all of a sudden, the IP address you have committed to memory will no longer direct you to the
desired information.

26 Thanoj (E127966)
Types of DNS servers
There are four types of DNS servers; Root nameservers, TLD nameservers, Authoritative
nameservers and recursive resolvers. These four DNS servers cooperate to send the IP address
for a particular domain to the client (often a stub resolver, a basic resolver integrated into an
operating system) in a standard DNS lookup (when caching is not in effect).
1. DNS recursive resolver

Figure 3.DNS recursive resolver

A DNS query’s initial stop is a recursive resolver, sometimes referred to as a DNS

recursor.Between a client and a DNS nameserver, the recursive resolver server as an
intermediary. A recursive resolver will either reply with cached information or issue a request
to a root nameserver, then to a TLD nameserver after receiving a DNS query from a web client.
The recursive resolver then relies to the client with the requested IP address that it received
from the authoritative nameserver.
The recursive resolver will cache data from authority nameservers during this procedure. The
resolver can bypass interacting with the nameservers and just provide the client with the
requested record from its cache when a client asks for the IP address of a domain name that
was recently requested by another client.

27 Thanoj (E127966)
 2. DNS root nameserver

Figure 4.DNS Root nameserver

Every recursive resolver is aware of the 13 DNS root nameservers, which are the first place a
recursive resolver looks for DNS entries. When a recursive resolver queries a root server with
a domain name, the root nameserver replies by pointing the recursive resolver to a TLD
nameserver according to the domain’s extension (.com, .net,.org.etc).the internet Corporation
for Assigned Names and Numbers(ICANN), a nonprofit organization, is in charge of managing
the root nameservers.
It should be noted even though there are 13 root nameservers, the root nameserver system does
not consist of just 13 workstations.Althoyugh there are thirteen different kinds of root
nameservers, each one has several copies worldwide and uses Anycast routing deliver quick
responses. There would be more than 600 distinct servers if you counted all the instanced of
root nameservers.

28 Thanoj (E127966)
 3. TLD nameserver

Figure 5.TLD nameserver

All domain names that have the same domain extension - .com, .net, or whatever comes after
the last dot in a URL are kept up to date by a TLD nameserver. A .com TLD nameserver, for
instance has data for any website that ends in “.com” When a root nameserver responded to a
user’s search for google.com, the recursive resolver would then submit a query to a.com TLD
nameserver, which would reply by referring to the domain’s authoritative nameserver (see
below).
The internet Assigned Numbers Authority (IANA), a division of ICANN, is in charge of
managing TLD nameservers. The TLD servers are divided into two primary groups by the
IANA.
• .com, .org, .edu and .gov are some of the most well-known generic top-level domains
(TLDs) that are not country-specific.

• Domains that are unique to a nation or state are referred to as country code top-level
domains. A few examples are .lk, .uk, .us, .ru and .jp.

Although there is a third category for infrastructure domains, it is hardly ever utilized. The
.arpa domain, a transitional domain used in the development of the present DNS, provided the
basis for this category; its relevance now is primarily historical.

29 Thanoj (E127966)
 4. Authoritative nameserver

Figure 6.Authoritative nameserver

The answer from a TLD nameserver will point a recursive in the direction of an authoritative
nameserver. The resolver’s final stop on the path to an IP address is often the authoritative
nameserver. If the domain has a CNAME record (alias), the authoritative nameserver will give
the recursive resolver an alias domain, otherwise, the recursive resolver will need to perform a
complete DNS lookup to obtain a record from an authoritative nameserver (typically an A
record containing an IP address). The authoritative nameserver contains information specific
information to the domain name it server (e.g google.com). The authoritative nameserver that
are distributed by Cloudflare DNS have Anycast routing installed to increase their
dependability.

Set of Guidelines for Governing Data Communication,

In order to guarantee that devices may exchange information, data communication must be
enabled by guidelines that make communication effective, dependable, and unambiguous. The
main elements of these guidelines are as follows,

30 Thanoj (E127966)
 Figure 7.Key elements of a Protocol

Syntax (Structures and format);

The “grammar” of data transmission is the subject of syntax. Similar to how words are encoded
into languages, organized frameworks are necessary for data exchanges to function. Syntax
specifies how headers should be created, how data should be organized within packets, and
how data should be separated into packets, which are little pieces of data.
If the devices must accurately translate the data being relayed to them, this is crucial. Devices
that don’t use standard syntax may misunderstand the message or remove them completely. A
file is transported over the internet, for example, in the form of packets. The syntax not only
specifies how those packets are numbered, but it also shows how the receiving device may put
them back together correctly.
For instance, a packet has a head with informers like source and destination to help with proper
data routing just like in TCP/IP.

Semantics (Meaning of the data);

The “meaning” of the data and how a particular piece of information should or shouldn’t be
interpreted are determined by semantics. The commands, codes, and flow control signals
needed to manage data transfer include knowing when to start or stop communication, how to
deal with mistakes, and how to return a lost or corrupted packet to its original sender.

31 Thanoj (E127966)
As an illustration, consider the actions during a TCP communication session in which “the
acknowledgement signal, or ACK, is one of the Semantics rules.” Every time data is sent, the
other devices will inevitably reply with feedback indicating whether or not the data was
successfully received by the other devices. To prevent message loss, the sender will send the
data again if it does not get the ACK within a predeterminate amount of time.
For instance, the semantics rule in HTTP communication tells the server to return “200 OK” if
the request was successful or “404 not found” if it was for an unavailable resource.

Timing (Synchronization and speed);

Timing guarantees that the sender and the recipient are on time and operating at the same pace.
When it comes to determining if data was transmitted and received accurately within a given
time range and without interfering with other data that was also sent within that same time
frame, cancerization is essential. Timing is the speed at which information is sent such that one
side is not overloaded by the other.
It also describes how devices should react to latency or variations in the speed at which data is
transferred. Precise timing restrictions are set in applications such as online gaming and video
calls to prevent disconnections or delays. For instance, timing allows video data to be streamed
in real-time at a speed that the received device can manage on platforms like YouTube.

IEEE’s Function in Protocol Standardization,

One significant organization that is primarily active in creating protocols for data transfer s the
institution of Electrical and Electronics Engineers (IEEE). Many people use tha ones it sets,
and its application ensures that the systems and gadgets are compatible. Several distinct
manufacturers and technologies work together harmoniously and flow across pulsing waves by
adhering to a shared set of protocols.
IEEE 802.3 (Ethernet),
IEEE 802.3 specifies Ethernet as the wired transmission medium for LANs. This standard
specifies the format that devices must utilize in order to transmit data across physical lines. It
includes information on data packet format, electrical signalling, and how to detect and handle
simultaneous transmissions from two devices. Device commination across cables is ensured by
Ethernet standards, which make Ethernet the predominant technology for wired networks.
For instance, when a computer is connected to a network via an Ethernet connection, IEEE
802.3 protocols are used to enable data flow and achieve the highest level of string and provided
data dependability.
IEEE 802.11 (Wi-Fi),
The bulk of wireless networking, or Wi-Fi , is carried out using IEEE 802.11 as the standard.
Wi-Fi routers, laptops with Wi-Fi, cell phones, wireless printing devices, and other wireless
devices may all connect with one another thanks to this standard. The primary topics covered

32 Thanoj (E127966)
in it range from the Wi-Fi Alliance standard to the particular frequencies and transmission
speeds to the security features.
For instance, IEEE 802.11 establishes a relationship between your laptop and the router when
ou sync it with a wireless connection. This relationship allows the two devices to communicate
with each other when it comes to data transmission.
IEEE 802.15 (Bluetooth),
The IEEE 802.15, which created Bluetooth, is a short-range wireless communication standard.
Certain devices, such as laptops, phones, and headphones, may communicate data across small
distance-up to 100 meters in space, for instance thanks to this protocol. Bluetooth must ensure
that devices are able to connect to one another over a wireless link that is free from interference
from other wireless devices.
For instance, IEEE 802.15 standards that govern data flow between the two devices are
advantageous to the Bluetooth connection that is established between your headphones and the
phone that supports this system.
Other IEEE standards,
IEEE developers several more standards for other communication and technology kinds in
addition to wireless transmission, wires transmission, via Ethernet, and devices lie Bluetooth.
In manufacturing settings, they include specific domains such as mobile networks for IEEE
802.16 for WiMAX, or broadband wireless access networks, and Ethernet for IEEE 802.3at for
power over a single cable.
For instance, Devices like wireless access points and security cameras may also get electricity
from cables that also transport data thanks to the IEEE 802.3af and 802.3at standards.

33 Thanoj (E127966)
1.2 Hardware and software used to design, publish and access the
Velvet Vogue website

1. Communication protocols
The rules and formats od digital messages are formally described by communication protocols.
They are necessary for message exchanges within and across computer systems. Because they
establish uniformity and universality for message transmission and reception, communication
protocols are crucial to telecommunication protocols are crucial to telecommunications
network and other systems.
Signalling, error detection and correction, and authentication are all covered by
communications protocols. Additionally, they are able to explain the synchronization, syntax
and semantics of digital and analog communication.
Both software and hardware implement communications protocols. In both analog and digital
communications, thousands of different protocols are utilized worldwide. Without them,
computer networks would not be possible.
(Rouse, 2023)
▪ HTTPS (Hyper Text Transfer Protocol Secure): Used to safely browse websites via
the internet. HTTPS ensures confidentiality and integrity by encrypting data sent
between the user’s browser and the webserver via SSL/TLS. HTTPS, for instance,
safeguards online purchases and login forms.

▪ FTP (File Transfer Protocol): Used to transfer files between a web server and a client.
Web designers frequently upload HTML, CSS and picture files to the hosting server
using FTP applications like FileZilla.

▪ TCP (Transmission control protocol): TCP uses sequenced acknowledgement to put

out a dependable stream delivery. It is a connection-oriented protocol, meaning that
before any data is sent, a link is made between applications. It is employed for network
communication. It has a wide range of users, including streaming media, FTP, and
emails.

▪ UDP (User Datagram Protocol): A simple but unreliable message service is laid forth
by this connectionless protocol. Error-recovery, dependability, and flow control are not
added. In situations where reliability is not necessary, UDP works. It is utilized for
broadcasting connections, multitasking and other situations when faster transmission is
desired.

34 Thanoj (E127966)
Why ? – By transferring analog and digital signals, files, and data from one device to another,
communication protocols help a variety of network devices communicate with one another.
These protocols can be used in computer and telecommunication networks when appropriate
rules are followed to transfer data from one location to another.

Figure 8.Types of Communication protocols

2. Server hardware
A computer program or equipment that offers a service to another computer program and its
user, also referred as the client, is called a Server. The term “Server” is also commonly used to
refer to the actual machine in a data canter that executes a server program. That device could
be a dedicated server or it could be put to different uses. A server program listens for and
responds to requests from client programs, which may be operating on the same computer or
on different machine, according to the client/server programming paradigm. A particular
computer program may serve as both a server requests from other programs and a client for
requests for service from other programs.

Types of web server hardware,

1. Tower Server
A computer designed to operate as a server and housed in an upright cabinet that can stand
alone is called a tower server. The tower-shaped cabinet and the tower-style personal computer
cabinet are comparable in terms of size and shape.

35 Thanoj (E127966)
Although most associations don’t need to deal with a whole metal enclosure od servers, rack
servers and blade servers are a more practical solution in terms of space and versatility because
they may be installed. Because tower servers employ minimal hardware and software,
organizations can more easily adapt particular activities, reduces costs, and keep an overhaul
methodology.
When small and medium-sized enterprises lack the resources, such as time, money, IT know-
how, or space to deploy a more scalable data center solution, they can use tower servers to meet
their unique needs.

Figure 9.Tower Server

Advantage and Disadvantage of Tower Server,

Table 1.Advantages and Disadvantages of Tower Server

36 Thanoj (E127966)
 2. Rack Server

A Rack Server, also called a rack-mounted server, is a computer designed to be used as a server
and contracted to be deployed in a rack-like framework. Each bay, or a mounting slot, on the
rack is designed to hold a physical component that is bolted into place.The rack server is
equipped with a low-profile container, unlike a tower server ,which is housed in an
independent, tall cabinet.
By stacking servers one on top of the other in a single rack, network resources can be combined
and less floor space is required. The rack server configuration also simplifies the cabling of
network components. In an equipment rack full of servers, a special cooling. It is necessary to
prevent the excessive buildup of heat that would occur from packing a large number of power-
dissipating components into a small space.

Figure 10.Rack Server

Advantages and Disadvantage of Rack Server,

Table 2.Advantages and Disadvantages of Rack Server

37 Thanoj (E127966)
 3. Blade Server
The Blade Server is a small, computer-based device that is used to distribute and manage data
over a network, which is a group of computer and systems.Itss function is to serve as a link
between systems, programs, applications and computers.
A Blade Server is typically composed of a chassis, a box-like structure that holds multiple thin,
modular server blades. They are referred to as blades due to their incredibly thin shape. Each
blade has a single server, sometimes dedicated to a single application. The information is stored
within blade servers on a memory card or other memory device. Each individual blade
additionally contains processors, memory, integrated network controllers, an optional Fibre
Channel host bus adaptor (HBA), and extra input/output (IO) ports. These are used to connect
individual server blades to other server blade units within the system or to power sources.

Figure 11.Blade Server

Advantages and Disadvantages of Blade Server,

Table 3.Advantages and Disadvantages of Blade Server

38 Thanoj (E127966)
 Figure 12.Types of Server hardware

The computer chassis, power supply, motherboard, CPU, memory, storage devices, and
network interface cards are all parts of the server hardware.it is intended to serve vital corporate
applications, services, and procedures by offering high level of processing power,
dependability and security.
Web server software is executed on server hardware, which also responds to browser queries.
A server can be shared (used by several websites) or dedicated (high performance).
Webserver Software in executed server hardware, which also responds to browser queries. A
server can be shared (used by several websites) or dedicated (high performance.

Key components of servers,

• CPU – Manages data-intensive operations and responds to queries.

• RAM – Guarantees seamless multitasking and quick access to active data.

• Storage (SSD/HDD) – Keeps logs, databases and files for websites.

• Network Interface Card (NIC) – Enables intranet or internet connectivity.

39 Thanoj (E127966)
 Figure 13.Server hardware components

How servers relate to websites?

Performance and reliability,
Websites must have server resources that can handle heavy traffic loads, ensure content
delivery, and act as useful hosts in order to be successful. Business use Web servers for security
and speed to ensure that the websites they want to host are safe and load quickly. Webmasters
use cloud servers because they provide high connection while also establishing redundancy to
guarantee that technical issues seldom cause a website to go down for an extended period of
time. How ever, dedicated resources are provided by rack and blade servers, which are crucial
for daily operations, particularly for online applications that require continuous uptime and
data protection. Knowing whether to use on-site servers or cloud solutions is essential when
building and constructing a website like Velvet Vogue since the type of servers used affects the
website’s speed, accessibility, and scalability.
Server type and Website Hosting,
The size and purpose of a website determine the type of server that is used to host it. Large data
centre environments, which are characteristics of website with heavy traffic, are where rack
servers and blade servers are often put. These servers provide the performance and capacity
required to handle high user loads and ensure site dependability. A tower server or even a cloud
server is better if the website is small or does not require a lot of resources. The ability to adjust
resource levels in response to traffic that is anticipated to sometimes strike a site makes cloud
servers the more advantageous of the two.

40 Thanoj (E127966)
Web Server functions,
By requesting the related web pages, web servers are responsible for carrying out the tasks
involved in hosting websites. The browser sends an HTTP request to the servers hosting the
website if a user wishes to view a certain website, for example, by encapsulating the web URL
in the browser. The web server process this request and returns the requested data, which is
often an HTML page, pictures, and other site-building elements. Assigning precise processing
power, storage location, and bandwidth to servers that can handle numerous requests and
distribute the material to its global audiences is always crucial.

Figure 14.How servers relate to the websites

3. Operating Systems
An Operating System (OS) is a software that controls all other application programs on a
computer once it has been first loaded by a boot program. Through a specified application
program interface (API), the application programs make sure use of the OS by requesting
services. Furthermore, a user interface (UI), such as a graphical User Interface (GUI) or
command-line interface (CLI), allows users to communicate directly with the operating system.
What operating systems do?
An Operating System has many benefits for computer software and software development. In
addition to the operating system, which is system software designed specifically to run the
computer, each program would need to have its own user interface (UI). Code needed to control
all of the underlying computer’s low-level system software functions, such as disk storage and

41 Thanoj (E127966)
network ports. Given the vast range of underlying hardware that is accessible and the multiple
software routines that must be carried out at the system software level to enable computer
operations, this would make software development impractical and cause every application to
grow unnecessarily. Instead, the OS is in charge of many system-level software tasks, such as
sending network packets and putting text on a display or other common place. The system
software serves as a bridge between the applications and the underlying hardware and computer
functions. The operating system (OS) provides a consistent and repeatable way for the apps to
interact with hardware and other system-level functions without requiring them to understand
every detail.
If all of the apps use the same resources and services, the operating system and the underlying
systems software with which it communications can support almost unlimited number of apps.
This greatly reduces the amount of time and coding required to build and debug an application,
while ensuring that users can control, configure, and manage system software and hardware
through a single, simply understood OS interface.
Examples for Operating Systems,
• Microsoft Windows,
Since the 1980s, the Windows operating system has received various updates and revision,
including Windows 95, Windows Vista, Windows 7/8/10, and so on. Microsoft Windows is one
well-known operating system that comes pre-installed with most current PCs. Each Windows
update or release improves hardware, software, and user experience, making Windows more
accessible and user-friendly. A control panel, disk cleanup, an event viewer, and a desktop and
desktop assistant are some of Microsoft Windows’ features. Many people like Microsoft
Windows due to its purported compatibility with several other software. Microsoft produces a
vast number of computer programs that are designed for window.

Figure 15.Windows

42 Thanoj (E127966)
 • Apple macOS
Apple’s macOS competes head to head with Microsft Windows. Both macOS and Windows
are instances of proprietly operating systems, which signal that the corporation created,
developed, and is currently marketing its own OS. They are created and marketed by the
businesses: consumers are not meant to meddle with or modify them. The exclusive macOS
and OS X operating systems, the first of which was released 20 years ago, power Apple and
Macintosh computers. There are several older incarnations or revisions, such as:

1. Kodiak (OS X 10 Beta)

2. Lion (OS x 10.7)

▪ Mountain Lion (OS X 10.8)

▪ Mavericks (OS X 10.9)

▪ Yosemite (OS X 10.10)

▪ El Capitan (OS X 10.11)

▪ Sierra (macOS 10.12)

▪ High Sierra (macOS 10.13)

▪ Mojave (macOS 10.14)

▪ Catalina (macOS 10.15)

Figure 16.MacOS

43 Thanoj (E127966)
 • Google’s Android OS
Based on the Linux operating system and other free and open-source software, Google and
other firms utilize this OS to power their Android devices and tablets. The main operating
system for Google’s mobile devices, including tablets and smartphones, is Android. Since it’s
inception as a competitor to Apple’s iOS for smartphones users, Android has increased in
popularity and is always expanding because to new upgrades and fascinating features.

Figure 17.Android OS

• Linux Operating System

The fact that Linux is an open-source family od systems as opposed to a proprietary one sets it
apart from Windows and Apple. Put differently, it is unrestricted in terms of distribution and
change. Even while it might not be the most popular choice on our list, Linux comes in a variety
of open-source variants and is free. Linux is popular because it’s easy to modify and gives users
a wide range of options if they know how to use it. If you know how to work with and modify
operating systems, Linux is a good option. Additionally, it could be a good idea to purchase a
Linux computer and begin experimenting with it if you are interested in programming and
back-end work.

44 Thanoj (E127966)
 Figure 18.Linux OS

Common Operating systems for servers,

▪ Linux (Ubuntu, CentOS) – These are well liked to use due to its cost-effectiveness,
adaptability and stability. Almost all web servers are Linux -based.

▪ Windows server – Supports Microsoft products such as IIS (Internet Information

Services) and offers a graphical user interface.

Function in web hosting: The OS controls the functionality and compatibility of web server
software. For example, IIS is only compatible with windows, but Apache and Nginx are geared
for Linux.

45 Thanoj (E127966)
 Figure 19.Server Operating Systems

4. Web Server Software

Various types of server software are used by file servers, database servers, mail servers, and
web servers. These programs can all access and utilize files that are physically stored on a
server. Serving webpages on the internet is the responsibility of a web server. It serves as a go-
between for the client and server computers in order to accomplish that. With every user
request, it retrieves content from the server and posts it to the web.
Serving numerous web users simultaneously, each of whom is requesting a distinct page, Is a
web server’s greatest problem. Files produced in many PHP, python, Java, and others, are
processed by web server. They transform them into static HTML files, which are then shown
to web surfers in their browser. Think of the term ‘web server’ as the instrument that facilitates
effective communication between the server and the client.
Web server software the software that manages incoming network requests via the internet and
provides users with web pages is known as web server software.
In simple way, Incoming HTTP/HTTPS requests are processed by web server software, which
then provides users with web pages or other resources.

46 Thanoj (E127966)
 Figure 20.Types of web servers

Apache HTTP Server,

The Apache HTTP server (often just called ‘Apache’) is a free and open-source program that
makes it easier for websites to function on the internet. It acts as a bridge between the website’s
server-stored files and a user’s browser (like chrome). Apache ensures that people will be able
to access the website they are trying to access.

Figure 21.Apache HTTP Server

47 Thanoj (E127966)
How Does Apache operate?
• Request handling – When you type a website’s address (for example, Esoft.lk) into your
browser, it sends a request to the server that hosts the website.

• Processing – Apache finds and process the relevant website files (such as HTML, CSS
or PHP) after receiving this request.

• Response – The browser displays the webpage after Apache sends the files it has
processed back to it.

Benefits of Apache,
• Free and Open source - Apache may be tailored to meet your needs and is entirely free
to use.

• Cross platform support – It is compatible with a variety of operating systems, including

Linux, macOS and Windows.

• Module based customization – Modules allow you to add features like programming
language support or security.

• Widely used and Dependable – Apache is safe and dependable due to its robust
community and frequent updates.

Tomcat
Apache Tomcat is a free and open source web server and servlet container that may be used to
run Java-based web application. In order to handle requests for dynamic content, like websites
made with Java, it uses Java Servlets and Java Server Pages (JSP).

48 Thanoj (E127966)
 Figure 22.Apache Tomcat

How Does Tomacat operate?

• Request Handling – Tomcat gets user’s request for a webpage from a java based
website.

• Processing – Tomcat uses Java Servlets or JSP code to process the request.

• Reaction – Following processing, Tomcat returns the produced content, such as

HTML to the user’s browser.

Benefits of Tomcat,
• Java support – Tomcat is ideal for Java developers because it is made to run web
applications that are based on Java.

• Lightweight and quick – Compared to fully functional application servers, it uses

fewer resources and is simple to set up.

• Open source and free – Tomcat has a sizable community that contributes to it’s
development and it is free to use.

• Scalable – Provides good performance as traffic increases, making it appropriate for

both small projects and large-scale applications.

Microsoft IIS (Internet information Services)

Microsoft created the web server known as Microsoft IIS (Internet Information Services).On
Windows servers, it facilitates the saving of webpages and web applications receives, processes
and returns the relevant web content in response to user browser requests.

49 Thanoj (E127966)
 Figure 23.Microsoft IIS

How Does IIS operate?

• Request Handling – Your browser makes a request to the IIS server that is hosting a
website when you type its address into the browser.

• Processing – After reviewing the request, IIS decides which files or wen apps should
be visited.

• Response – Your browser receives the requested web content from IIS, such as HTML,
CSS or dynamic data.

Benefits of IIS,
• Integrated with Windows – IIS and Windows operate together harmoniously,
simplifying the setup and administration of web service for windows based enterprises.

• Security Features – To safeguard web apps and data, IIS comes with built-in security
features including SSL/TLS encryption and authentication.

• User-friendly interface – Even individuals with less technical expertise may easily set
up and administer IIS because to its graphical user interface (GUI).

Nginx (Engine-X)

50 Thanoj (E127966)
A free and Open sources web server and reverse proxy is called Nginx (pronounced ‘Engine-
x’).In addition to serving static web material, such as HTML files and photos, it also functions
as a reverse proxy, distributing incoming traffic to other servers, such as application servers

Figure 24.Nginx(Engine-X)

How Does Nginx operate?

• Request Handling – Nginx get a request when a user inputs the address of a website.

• Processing – After processing the request, static assets (such as HTML, CSS, or
pictures) are frequently served straight away. Nginx routes the request to the relevant
server if it has to be handled by another server (such as in the case of dynamic content)

• Response – The user’s browser receives the response from Nginx, which may be static
content data from another server.

Benefits of Nginx,
• High performance and Speed – Nginx is well known for its lightning-fast performance
and capacity to manage numerous requests at once, which makes it perfect for websites
with a lot of traffic.

• Effective Resource Usage – It is more scalable and appropriate for managing big user
bases because it consumes fewer resources than other web servers.

• Load balancing and reverse proxy – Nginx may divide traffic among several servers,
which helps to balance the load and enhance dependability and performance.

• Flexible Configuration – Whether you’re managing intricate web applications,

providing static content or operating as a reverse proxy, Nginx can be readily set up for
a variety of purposes.

51 Thanoj (E127966)
Aspect How it works in designing websites How it works in publishing websites How it works in accessing websites

Protocols HTTP/HTTPS: Used to test how data FTP: Uploads website files (HTML, CSS, HTTP/HTTPS: Displays the website in
will be displayed on browser during Images) from the designer’s computer to the browser (secure with HTTPS).
design, web server.
DNS: Translates domain names.
FTP: Transfer files between the SMTP: Sends emails. Such as for user (e.g., www.Esoft.com) into IP addresses
designer’s computer and the web server verification or updates. to locate servers.
during design.

Servers Stores draft versions of the website for Hosts the website and ensures it is available Processes user requests, retrieves website
internal review or collaborative editing. for users 24/7. May include Apache, Nginx, data, and sends it to the browser. Servers
or IIS servers. handle large volumes of user traffic.

Operating Provides tools for designing websites Runs server environments like Linux Power the user’s device (e.g. Android,
Systems (e.g., Windows runs design software like (popular for Apache/Nginx) or windows (for iOS, macOS or Windows) to open
(OS) Adobe Dreamweaver). IIS). Maintains stability and security for websites using browsers
published sites.

Web Ensures the website design aligns with Publishes and manages the website on the Delivers files (HTML, CSS, JavaScript)
Server the server’s capabilities and limitations internet. Examples: Apache, IIS, Nginx. to the user’s browser by processing and
Software (e.g. supports PHP, Python, or other web Ensures smooth operation and handles user responding to requests quickly and
technologies.) requests. securely.

52 Thanoj (E127966)
 Table 4.How that technologies work in designing, publishing and accessing websites.

53 Thanoj (E127966)
1.3 Web Development Technologies and Frameworks,

What is Web Development?

The process of building websites on the internet is referred to as web development.
The word “web development” can be used in a variety od contexts. Technically, web
development would include both the laborious creation of a large website with thousands of
unique pages and the creation of a single page using wix template
(Anon., 2024)

Figure 25.Web development

Key aspects of web development include;

1. Frontend Development

2. Backend Development

3. Full Stack Development

Frontend Development
Focuses on figuring out what people see and interact with on a website because it addresses the
user side of web development. To guarantee a highly functional UI/UX design, web developers
combine HTML, CSS, and JavaScript. Every element of frontend web development has a
distinct function in the creation of a website. The following are the specifics of each.

54 Thanoj (E127966)
 • HTML is what gives a website its structure.

• CSS produces a visually pleasing webpage with appropriate styling.

• JavaScript makes guarantee that every piece of a website is sufficiently interactive for
users.

These three categories of web programming languages allow frontend developers to design the
whole user experience that we see when we visit a website.

Backend Development
The server side of the process is where backend development takes place. From databases and
servers to programming languages, web developers manage all backend operations.
Languages used in programming
These programming languages are used by backend developers to create the code that powers
websites.Node.js, PHP, Java and Python are a few well-liked choices.
Databases
it’s critical to maintain appropriate databases because websites rely on backend data to display
information to users.
Databases are used to store and manage pertinent data, including blog entries, product details,
and user account information. MongoDB and MySQL are popular databases.
Servers
The software is operated by the backend development managers, who also store the files for
the website. They guarantee that the website’s application and the user’s browser can
communicate. Cloud servers and Apache HTTP servers are two well-known server
technologies.
These backend web development elements cooperate to give users a seamless, functional
website.

Full Stack Development

Frontend and backend web development are combined in full stack development. It includes
every step of the web development process. A full stack web developer may handle many facets
of web development because of their extensive skill set.
Because they have a deeper awareness of the complete website, their knowledge of both aspects
of web creation guarantees a seamless user experience. As a result, they may work more
productively and make wiser choices to ensure a seamless web development process.

55 Thanoj (E127966)
All things considered , full stack development provides a comprehensive method for creating
web applications, allowing one developer to manage a sizable amount of the process.
Key Technologies in Web Development
The term “Web Technology” describes the range of instruments and methods used in the
process of communication between various kinds of devices over the internet. Web pages are
accessed with a web browser. Programs that display text, data, images, motion and video on
the internet are known as web browsers. Web browsers offer software interfaces for accessing
hyperlinked material on the World Wide Web.
(Anon., 2023)
What are Web Development Technologies?
The tools and methods used in online development are known as website or web app
development technologies, including emerging web technologies. They contribute to the design
of a website’s appearance and feel, ensuring that it is both aesthetically pleasing and user
friendly. Their task is to provide a beautiful and seamless user experience.Futhurmore, these
solutions ensure that websites run smoothly on a variety of devices, such as PCs and
smartphones.
Web development is in charge of the backend, which manages the website’s internal operations
and data storage. It handles every procedure that keeps the website functioning properly. They
take care of tasks including data storage, user request processing and security assurance.
To put it briefly, these technologies aid in the creation, upkeep, and enhancement of websites
to provide a smooth user experience.

Advantages of Web development technologies,

• Accessibility

• Cost-effective

• Scalability

• Data security

• Cross platform compatibility

56 Thanoj (E127966)
Most in-demand Development technologies,
The newest web development technologies that are causing a stir in the market are listed below,

Latest Frontend web development Technologies,

Figure 26.Frontend technologies

1. React
An interface-building JavaScript library. By decomposing the user interface into reusable
components, Reat enables developers to construct dynamic and interactive online applications.
How react effect on,
Web design,
• Reusable Pieces – React enables developers to simplify and standardize design by
producing reusable components for websites.

• Fast and smooth Updates – React keep things snappy and smooth by updating only the
necessary portions of the webpage using its Virtual DOM.

• Dynamic and Responsive – React facilitates the development of web sites that improve
user experience by instantly adapting to user activities.

57 Thanoj (E127966)
Functionality,
• Real-time Changes – When users engage or data changes, React instantaneously adjust
the screen.

• Better Web Apps – It works well for creating Single-page Applications (SPAs), which
feel speedier and don’t require complete page reloads.

• Easy add-Ons – When using other tools to create charts, animations, or sophisticated
features, React performs admirably.

Web Management,
• Handles Complex Data – Redux is one of Redact’s tools for managing data in large
applications.

• Easy to Scale – its modular design facilitates the addition of new functionalities.

• Large Support Network – Finding assistance or pre-made solutions is simple because

so many developers use React.

Examples,
▪ Facebook – React is used because of its quick and dynamic feed.

▪ Netflix – React enhanced performance and user experience.

▪ Airbnb – The dynamic features such as Search could be implemented through the help
of React.

2. Vue.js
Progressive JavaScript framework used to develop UIsVue.js is preferred by developers
because it is easy and versatile.
How Vue.js effect on,
Web Design,
• Flexible components – In Vue.js developers have the ability to create reoccurring
components so that designing can be uniform and alterable.

• Reactive Updates – By automatically updating the user interface when the data changes,
it ensures fluid and dynamic designs.

58 Thanoj (E127966)
 • Light weight and fast – the lightweight nature of Vue.js allows for seamless loading and
operation of web pages.
Functionality,
• Dynamic apps – Vue.js makes it simple to create dynamic, real-time apps with features
like user interactions and real time updates.

• Two-way data binding – Data is automatically updates as the user interface changes,
and vice versa, making activities like form handling simpler.

• Integration-friendly – In most of the cases, it is not required to redesigning existing

projects to integrate Vue.
Web management,
• Simple Learning Curve - Vue.js is easy to learn and accessible to learners even if they
are working in small development teams.

• Scalable – It’s modular design enables developers to integrate new fatures or expand
application without necessarily affecting those already in the system.

• Ecosystem – App management is made simpler using Vue’s features, such as Vuex for
data management and Vue Router for routing.

Example,
▪ Alibaba – Vue.js is used to create quick and responsive interfaces.

▪ Xiaomi – Used Vue to create dynamic features for their web site.

▪ GitLab – Vue.js was selected due to its lightweight and effective functionality.

3. Angular
It is a strong Google frame work making the development of dynamic and interactive web
applications easy. Angular is quite popular for the remarkable number of features and
instruments intended for application development of high complexity.
How Angular effect on,
Web Design,
• Structured Components – Angular’s component-based architecture makes it simple o
design logical and consistent user experiences.

59 Thanoj (E127966)
 • Dynamic Content – It facilitates the development of interactive design that adapt
automatically to changes in the data.
• Responsive Designs – Anguar’s utilities provide flexible and mobile-friendly layouts.

Functionality,
• Two way data binding – Dynamic app working is made simpler by instantaneous data
updating in response to UI changes.

• Single-page Applications (SPAs) – Angular makes it possible to create fluid, quick

SPAs without requiring page reloads.

• Built in Features – Fewer additional libraries are needed because Angular has
functionality for form validation, HTTP queries and animations.

Web Management,
• Powerful Tools – For task management and automation, Angular offers capabilities like
Angular CLI (Command Line Interface).

• Scalability – Applications may grow with ease because to Angular’s adaptable design.

• Strong Community Support – Angular has a large developer community and extensive
thanks to Google’s backing.

Examples,
▪ Google – Uses Angular to create dependable and quick web apps like Gmail.

▪ Forbes – The website was built with Angular to handle high traffic.

▪ Upwork - Angular is used for real-time updates and dynamic features.

4. Svelte
A relatively new framework that complies components into incredibly efficiently vanilla
JavaScript at built time, making it speedy and lightweight.
How Svelte effect on,
Web design,
• No Virtual DOM – In contrast to other frameworks, Svelte reduces file sizes and speeds
up load time by compiling components into effective JavaScript code at built time.

60 Thanoj (E127966)
 • Simplified Syntax – Developers may swiftly create and change designs with Svelte’s
straightforward syntax , which eliminated the need for complex boilerplate code.

• Reactive Updates – Without requiring additional code or libraries, Svelte automatically

refreshes the user interface in response to changes in the underlying data.

Functionality,
• Reactivity – Svelte’ s reactive architecture makes it simple to link data to the user
interface and ensures real-time updates whenever data changes.

• Optimized for performance – Svelte produces straightforward, effective code that

executes more quickly and consumes less memory because it does not rely on a virtual
DOM.

• Built in Features – Svelte contains everything you need, including animations and state
management, so you don’t need third party libraries.

Web Management,
• Easy to Learn – Svelte is perfect for small teams or lone programmers because it is easy
to use and has a minimal learning curve when compared to other frameworks.

• Smaller bundle Size – By reducing components to pure JavaScript, Svelte creates

smaller bundle sizes, which reduces bandwidth use and speeds up load times.

• Developer Experience – Project management is greatly added by the integrated tools,

such as the Svelte programming environment and documentation.

Examples,
▪ The New York Times – Utilize the interactive elements of Svelte.

▪ Spotify – Svelte was used to create a number of online features that increases speed.

▪ Apple – Makes use of Svelte’ s dynamic content and animated product pages.

61 Thanoj (E127966)
Latest Backend Web Development technologies,

Figure 27.Backend technologies

1. Node.js
With this platform, you can use JavaScript to run code on the server rather that only in the
browser.Node.js is well-known for its scalability and speed when it comes to creating web apps.
How node.js effect on,
Web Design,
• Faster Loading – Page loads are accelerated by Node.js assistance on rendering
dynamic material on the server

62 Thanoj (E127966)
 • Real-time Features – It adds validity to websites by enabling real-time interactions like
live chats and notifications.

• Handles high Traffic – Scalable systems that can accommodate numerous users at once
are supported node.js.

Functionality,
• Fast and Efficient – Node.js speeds up webpages by processing numerous requests at
once.

• Real-time Updates – Its event-driven technology reacts to human input rapidly.

• Non-blocking – When the application is executing tasks like file uploads or database
queries, it doesn’t slow.

Web Management,
• Easy to Scale – As your app expands, Node.js can readily handle more users and data.

• JavaScript for both sides – Because it makes it possible to write both client-side and the
server-side code, JavaScript makes development easier.

• Big Ecosystem – Express.js is one of the many tools and modules that Node.js provides
to make web application development and management easier.

Examples,
▪ Netflix – Uses Node.js to manage large user bases and quickly distribute information.

▪ LinkedIn – Shifted to Node. JavaScript in an attempt to increase productivity.

▪ Uber – Scales services and manages real-time updates using Node.js.

2. Deno
A safe JavaScript and TypeScript runtime. Deno, developed by the same person who created
Node.js has enhances security and contemporary functionality.
Hoe Deno effect on,
Web design,

63 Thanoj (E127966)
 • Easy setup – Deno is easier to get started with because it doesn’t require other package
managers like npm.

• TypeScript built in – Due to Deno’s default support for TypeScript, early mistake
detection and design improvement are made easier.

• Secure – Deno runs code in a secure environment to keep your app safer.

Functionality,
• Modern features – Deno does not require additional tools to support the most recent
TypeScript and JavaScript features.

• Asynchronous – Like Node.js, it responds to queries rapidly and offer real-time updates.

• Built in tools – Development is facilitated by Deno’s integrated code formatting and

testing tools.

Web Management,
• Security – By default, Deno is secure, preventing unauthorized access to personal
information.

• TypeScript-Friendly – TypeScript’s stringent typing makes it easier to manage

enormous volumes of code.

• Lightweight – Deno’s effectiveness and small size allow for faster deployment and
operation.

Examples,
▪ Deno Deploy – A platform that facilitates the delivery of apps created by Deno.

▪ Fresh framework – Deno was used to create a quick web framework.

3. Expresss.js
It is straightforward and adaptable Node.js framework that offers a plethora of practical
capabilities for creating online and mobile applications with ease.
Hoe Express.js effect on,
Web Design,

64 Thanoj (E127966)
 • Easy routing – Express makes it simple to set up several routes (pages or API endpoints)
for your application.

• Middleware – It enables you to include login and data processing services in the request
flow.

• Dynamic pages – Express facilitates the creation of dynamic web pages by supporting
template engines.

Functionality,
• Fast – Because Express is lightweight, applications may operate quickly.

• Request handling - It manages several request types, including GET, POST, PUT, and
DELETE with ease.

• Real-time – It can be connected to applications such as Socket.IO to offer real-time

functions like conversations or notifications.

Web management,
• Scalable – It grows with your app and can handle tasks that get harder and harder.

• Simple structure – Express handles application logic in a clean manner by utilizing

middleware approaches.

• Big community – Many libraries and other resources are available for use.

Examples,
▪ Uber – For reliable and effective services, use Express.

▪ LinkedIn – Backend services are provided by Express.

(Anon., 2024)

65 Thanoj (E127966)
Database Servers,
MySQL,
The MySQL Relational Database Management System is among the most extensively used
because it enables businesses and developers to store essential information, such as file datat,
user data, product catalogs, blogs, and many others in list form. MySQL is well renowned for
its efficiency and speed as well as its reliability. As a result, it has emerged as one of the highly
employed RDBMS solutions.
MySQL’s easeness of management is augmented with the implementation of Structured Query
Language, which streamlines the process of issuing requests and utilizing sets of data in a single
database. The system also guarantees fast and efficient database handling. MySQL is often
implemented alongside PHP scripting language in order to create complex frequently changing
web applications. In short, MySQL constitutes a significant part of a large number of developed
sites today.
Because of the scalability and versatility features, MySQL can be used for personal websites
or even for large scale enterprise sites. Among others, MySQL supports indexing, complex
joins, and transactions, which makes the retrieval of information faster and easier. Furthermore,
because MySQL is an open source system, it can be downloaded at no charge and can easily
be integrated with other programming languages.
Moreover, MySQL offers advanced features for database security, backup, and optimization,
which guarantee the preservation and proper management of the data stored. Its MySQL
flexibility, reliability, and compatibility make it a preferred database solution for business,
developers, and other organization’s that want to build efficient data driven applications.
Web design,
• The sense of structure in the web application is provided by MySQL, having a well
organized relational database system capable of safely managing data. It allows us to
build the scalable databases with normalized tables, the tables that are organized
properly to have minimal redundancy, optimal data, and improve the query
performance. MySQL supports indexing, relationship, and constraint, and helps
maintain data integrity and consistency, so it is a good option of structuring back end
databases in web development.
Functionality,

66 Thanoj (E127966)
 • MySQL optimizes the data retrieval, storage and management of the data in the web
applications. Using its SQL based querying system developer can find complex things
to do such as filter, sort, aggregate and joins with multiple tables. Furthermore MySQL
supports transactions, stored procedures as well as triggers to improve database
performance and security. MySQL ensures a smooth data operation to make a web
application dynamic and responsive for all purposes, whether it is for user
authentication or for e-commerce transactions or for content management.

Web management,
• MySQL provides robust mechanisms to perform backup, recovery, memory
optimization and security operations within the database management. Web application
data is protected by features such as user access control, encryption as well as
automated backups. MySQL is well compatible with a variety of CMS and framework,
thus integrating is effortless and saves on development and maintenance efforts. But for
large database size, Database size has to have sufficient indexing and query
optimization to keep the performance efficiency.

Web development technologies’ Impact on Web designing,

Design Impact,
Web design means the visual structure, layout and appearance of a website, in such a way that
the use experiences of the users are enhanced. Web development technologies are very
important in defining the website design, as they offer tools and frameworks to improve the
usability and responsiveness of the website.
• Frontend Technologies - You have simple html structures, more complex css and help
for all this with javascript for rendering all this nicely. Supports the designing processes
of a Framework done with design proceduTe by providing reusable components,
localized layout and dynamic elements (i.e. Bootstrap, React and Vue.js).

• User experience (UX) and User Interface – Uses of such technologies as CSS
framework (e.g. Tailwind CSS), UI libraries can be to have web apps with good look
and feel and one that’s not very hard to navigate. Using animations and micro
interactions on the user experience make it more attractive.

Functionality Impact,
Website functionality includes the behaviour of a website and how the users can use it without
any problem. Also, the choice of the web technologies greatly affects how good a website
works, its speed, interactivity, and so on.

67 Thanoj (E127966)
 • Web applications that are dynamic - Angular, React and Vue.js are all such javascript
frameworks as Angular that help you build highly interactive websites with real time
updates.

• Backend support - Web servers are powered by such technologies as Node.js, PHP and
Python, that help make the processing of user requests fast and data management more
efficient.

• Database management - Efficient data storage and retrieval is available on relational

databases like MySQL and PostgreSQL as well as NoSQL databases like MongoDB.

Management impact,
Web management consists in going forward and backward the website for all possible updates,
maintenance, and security purposes to ensure its proper and long-term performance and
reliability. To achieve performance, security and scalability, efficient web management is
needed.
• Platforms like WordPress, Joomla, and Drupal offer such platforms that help in easy
content updates and website maintenance without having to write much of code.

• The tools like Git, GitHub makes the collaboration of developers easy and it helps to
keep track on the changes efficiently.

• Cloud based solution (AWS, MS Azure or Google cloud) provides Scaling & Uptime
reliability.

• Such Sites are protected by Securing Protocols such as https, authentication

mechanisms, and firewalls to prevent them from the cyber threats.

68 Thanoj (E127966)
 Figure 28.Key technologies in Web development

69 Thanoj (E127966)
Three-Tier Architecture.
The three-tier client/server architecture, which separates a web application’s operations into
three distinct layers, the display layer, the application layer, and the data layer is a widely used
method for building and organizing online applications. Because of this structure, the
application is simpler, more modular, and much easier to grow.
1. Presentation layer,
The presentation layer, often known as the front end or user interface layer, is the area of the
online application where users interact. Its particular duties include sending requests to the
application layer for processing, gathering user input, and displaying the content. This layer is
located on the client side and id run in a web browser if it is web based or in a custom
application that connects to PCs, laptops, and smartphones.
In this case, buttons, form inputs, and other navigational elements like menus are all directly
interacted with by web application users. Because it describes the desired application’s look,
feel and flow, the presentation layer is crucial. The presentation layer is used, for example,
when a user logs into a website or uses a search engine. For instance, the search term users
enter is sent to the application layer for processing, and the results are shown on the screen.
The presentation layer’ technology,
• HTML – Provides the website’s information and design.

• CSS – Is in charge of the content’s organization, presentation and user response

capabilities.

• JavaScript – Gives the specific dynamic behaviour and interactivity.

• Front-end-Frameworks – Frameworks such as React, Angular, or Vue.js are

technologies that give components and frameworks in an effort to simplify front-end
design.

• Mobile Development Technologies – Mobile-friendly interfaces are created in mobile

apps using languages like Kotlin for Android and swift for iOS.

2. Application layer,
The web application’s control center is the application layer. Often known as the middle layer
of the business logic layer. This layer handles the actual calculations, data manipulation,
business logic implementation, input data preparation, and post-processing of the result data
sending it to the application’s upper level. It operates between the display layer and the data
layer of an application’s functional architecture.
For instance, the application layer may call on the data layer to retrieve or alter information
pertaining to the input provided when a user fills out a form. The application layer may also
take a specific action on the data (such as verifying the data or reviewing business rules). After
that, the presentation layer displayed these to the user. The appropriate logic that controls every

70 Thanoj (E127966)
aspect of the program in question is located in the application layer. It outlines the data
exchange patters between the database and the user interface.
The application layer’s technologies,
• Programming languages – The most popular web technologies for implementing
business logic include PHP, ASP .NET, Java, Python <JavaScript, C#, Ruby, and others.

• Web Frameworks – Among the major frameworks used in the development of the
application are Ruby on Rails, Django for python, Laravel for PHP, and Spring for java.

• Web servers and App servers – Application servers that run the application files and
deliver pages to the front end include Apache, NGINX, and IIS.

3. Data layer (Database layer)

The component of the architecture that handles data storage and retrival is called the data layer.
It must provide data correctness, coherence, and protection while storing and delivering data
that the application requires. Usually referred to as the application database layer, this layer
houses all of the DBMS as well as all of the data needed for an application, including users,
working orders, goods, and any other crucial information for the company.
When a user utilizes the front end/presentation layer in a typical flow use scenario, they send
request to the “application” layer. In order to read or put data into the database or just to remove
any information from it, the application layer may then interact with the data layer. For instance,
the application layer configures its settings to search the database for products if a user is
seeking for a specific product, and the front end receives the results.
The database layer’s technologies,
• Relational Databases (RDBMS) – Systems that store structured data in tables and use
SQL doe data manipulation include MYSQL, PostgreSQL, Oracle, and SQL Server.

• NoSQL Databases – Rendering NoSQL, such as MongoDB, Cassandra, and

CouchDB, is used to store unstructured or semi-structured data, which is typically
required in more open-source or highly accessible applications.

The relationship between the display and application layers between front-end and back-
end.
The user’s actions on a web application are directly linked to the front end, sometimes referred
to as the presentation layer, interface. Participation from the user, input and output receipt, and
result presentation are all included. The front-end may function as the user interface (UI) that
displays data from the backend and interprets user commands.
When a user enters a search term in a web form field, for example, the information entered in
the presentation layer is forwarded to the application layer for additional examination.
Algorithms for validating input and processing it in accordance with computation and business
rules (such as the syntax of a search) are stored in the application layer. The data layer, which

71 Thanoj (E127966)
stores the real data, such as product data, may then be used by the system’s application layer to
query the processed data.
The relationship between the presentation layer and the front-end,
HTML, CSS, and JavaScript are used to create the presentation layer, which is the front end of
the web application and operates client-side. For mobile apps, Swift and Kotlin are used.
The user interface (UI) presents the user with the information they want and accepts their input,
which is subsequently sent to the application layer (back-end) for processing.

How the back-end is made up of the application and data layers.

A web application system’s back-end options are the data layer and the application layer. The
application layer houses all of the algorithms that decide how various data are processed and
how they are conveyed to the presentation layer, whereas the data layer is in charge of storing
and granting access to the many kinds of data in an application.
For instance, the application layer’s necessary business rules determine if a person qualifies for
a discount when they purchase a product, while the data layer provides the user’s past
purchases.
When combined, these layers offer a loose coupling in which the presentation layer only cares
about the user’s view and can interact with them, the application layer constates on business
logic and the only cares about the location if data storage and retrieval. Improved web
application development efficiency, scalability, and maintainability are among the related
advantages.

72 Thanoj (E127966)
What are Web Development Framework?
A development framework is a collection of resources, rules libraries that help programmers
produce applications more rapidly and effectively.in addition to standard capabilities like
databases administration, user input validation, user session management, and security,
development framework offer structures and templates for arranging application code and files.
Development frameworks, like Laravel for PHP, Django for Python, or Ruby on Rails for Ruby,
are often made for a particular programming language. They can greatly speed up application
development and maintenance by allowing developers to concentrate on developing the
application’s business logic rather than the intricate details of the underlying infrastructure.
(Anon., 2023)

How does a web development framework Work?

An MVC (Model-view-controller) architecture model is typically used by web development
frameworks to arrange the application’s files and code. The application is separated into three
primary sections by the MVC model.
• The Model is in charge of the application’s data and business logic.

• The view oversees the user interface of the application

• The controller controls the application logic and creates and preserves communication
between the model and the view.

Determining the data models for your application and the routes or URLs that users can use to
interact with it are usually the first steps in using a web development framework. The
controllers that manage user actions, like submitting forms or changing data, can then be
created.
Additionally, the framework offers standard functionality like database management, error
handling, user session management and user input validation. Typically, the framework’s built-
in libraries and modules offer these functionality.

Advantages of frameworks for IT development,

• Speed of development

• Error reduction

• Scalability

• Documentation

73 Thanoj (E127966)
 (Anon., 2023)
Most in demand Web development Frameworks
1. Angular
(**discussed in above with technologies)
2. Node.js

1.4 How search engine effect on a website’s performance?

What are Search Engines?

A search Engine is a coordinated group of programs that looks through databases to find objects
that meet predetermined criteria. Information on the World Wide Web is accessed though search
engines.
Our everyday lives would not be the same without search engines. The majority of us have
heard of “Google”. How is a cake made? Where is the home of my favourite actor? This book
was written by whom? Which fashion trends are the newest? Additionally, our helpful
“Google” provides answers to additional queries. One of the various search engines that are
currently available is Google, which “digs” through the internet to provide us with the most
useful and pertinent information.
(Ben Lutkevich, 2023)
Hoe do Search Engines work?
Basically, all search engine go through these three stages,
1. Stage 1 – Crawling
2. Stage 2 – Indexing
3. Stage 3 – Ranking and Retrieval

74 Thanoj (E127966)
 Figure 29.How does search engine works?

Crawling,
At this stage, the websites are scanned to gather information about everything that is on them,
including the page title, keywords, layout, and at the very least, the pages that link to them.
Special software robots knows as “Spiders” or “Crawlers” carry out this task. Usually, these
robots begin with the most popular websites and servers. The path taken by these “crawlers” is
largely determined by the connection structure.
Many related materials can be found by following the new connections, and by returning to the
old websites to see if there have been any updates. An endless procedure. If the real content is
concealed several clicks away from the site, the “crawlers” may eventually give up.

Indexing,
Selected portions of the data are kept in massive storage facilitates once it has all been
absorbed. This is how we may relate to each other; we have a large collection of books. The
crawling involves going through everything, and the indexing involves compiling a list of them,
their authors, and other pertinent details. This illustration offers a small-scale perspective. This
assumption can be extended to include books found in every library on the planet, which
essentially defines the scope of search engine.

Ranking and Retrieval,

Answer machines are search engines. The search engines search their databases for the most
patient results whenever we conduct an internet search. Additionally, it ranks these results
according to how well-known the websites are The most crucial element that these search
engines take into account in order to deliver appropriate results are relevance and
poularity.Different search engines use different ranking algorithms. Each entry may be given a
weight by an engine based on how often it appears in the title, meta tags, or subheadings. The

75 Thanoj (E127966)
simplest approach makes advantage of the keyword’s frequency od search. However, this
resulted in “keyword stuffing” where pages are primarily filled with meaningless content as
long as the term appears.
This gave rise to the linked-based idea that more well-known websites would have more links.
Search engines are currently working to adpt to natural language searches. The ability to freely
comprehend our speech will genuinely transforms this technology.Askjeeves.com is a well-
known natural language question website nowadays, albeit it favors straightforward queries.
Better search engines that can handle complex queries will emerge over time.

Popular search engines around the world,

▪ Google

▪ Bing

▪ Yahoo
Google,
Google is a obvious place to start when it comes to marketing, paid advertising, and developing
strategies for organic traffic because it process around 60% of all search queries. Google’s
algorithm aims to satisfy user’s demands instantly rather than needing them to click any
relationships. Because of features like these and the popularity of Google, you can find it
challenging to attract as much internet traffic as would like.
Goole launched AI overviews, which uses Gemini, its in house AI, to compile your search
results. It’s still a good idea to verify that the findings are accurate, even if Google began
updating AI overviews as soon as it became accessible.

76 Thanoj (E127966)
 Figure 30.Google Search Engine

Bing,
Microsoft Bing lags much behind with an average global market share of 2.33% and a meager
0.55% on mobile. Yahoo! Is also driven by this engine, and Bing’s search results are similar to
Google’s in that they have a white backdrop, blue links, and the same categories and green
URLs. Microsoft reward is another service offered by Bing that gives you points for utilizing
the search engine or making purchases. Those points can be used to buy gift cards, donate to
charities, and buy other things.
Furthermore, copilot, an AI feature that gives consumers a summery of search results, was just
added to Bing.

77 Thanoj (E127966)
 Figure 31.Microsoft Bing

Figure 32.Popular Search Engines

78 Thanoj (E127966)
How Search engines effect on a website’s performance?
A website’s performance is mostly determined by search engines,whch have the following
major effects on website performance.

• Visibility and Traffic

For the majority of websites, search engines are the main source of organic traffic. A website
gets greater exposure and draws more visitors when it ranks higher in search engine results
pages (SERPs). Revenue and conversion rates may rise as a result if this increased traffic.

• User Experience (UX)

When ranking a website, search engines take into account a number of factors, such as user
experience, mobile friendliness, and page load speed. Websites that offer a smooth and intuitive
user experience typically have higher search engine ranks. As a result, improving a website’s
performance can raise its search engine ranking and improve user satisfaction.

• Crawlability and Indexability

Web crawlers are used by search engines to find and index web pages. A website’s crawling
and indexing process may be hampered by technical problems or delayed page loads. Lower
visibility and less organic traffic may follow from this. Search engine crawlers can more readily
access and index the content of a website when its performance is optimized.
• Bounce rate and Dwell time
Search engines keep an aye on measures related to user behaviour, such as dwell time (the
amount of time spent on a website) and bounce rate (the percentage of users who depart after
reading only one page).Poor user experience or a slow -loading website can decrease dwell
time and increase bounce rate, telling search engine that the a site might not be offering useful
content. Search engine rankings may suffer as a result of this.

• Mobile Optimization
Search engines give preference to mobile-friendly websites in their rankings due to the growing
usage of mobile devices for internet browsing. Websites with poor mobile optimization may
see a decline in traffic and visibility. A website’s chances of ranking higher in mobile search
results are increased when its performance is optimized for mobile devices.

79 Thanoj (E127966)
Take into account the following actions to enhance website performance and search engine
impact,
1. Use browser caching, minify CSS and JavaScript files, and compress images to improve
website load time.

2. Employing responsive design strategies and testing the website across a range of
devices will guarantee mobile responsiveness.

3. Reduce clutter, streamline navigation, and organize material to enhance user

experience.

4. To find and fix any problems, regularly check the performance of your website with
tools like Google analytics and Google Search Console.

You may increase visibility, draw in more visitors, and optimize your website’s performance
by giving performance top priority and making sure it complies with search engine standards.

Figure 33.Search engine process

80 Thanoj (E127966)
1.5 How SEO improves website’s index value?

What is SEO (Search Engine Optimization) and how it works?

The appearance of your website in search engine results on platform like Google is the main
emphasis of SEO. It entails employing a variety of strategies to enhance your website so that
search engines and users alike may better comprehend it.
You optimize your website to appear in Search engine results pages (SERPs) for business-
related keywords and phrases when you use an SEO plan. In order for your website URLs to
appear in the SERPs, you will also submit them to Google and other search engines.
In order to make sure that your website provides your audience with the answers to their
questions, you will apply SEO strategies that enhance the user experience. These enhancements
will let search engines know that consumers are finding value on your website.
Search engines will consequently place your website higher in the SERPs, increasing your
chances of obtaining leads, purchases, and traffic.

Figure 34.Mozlow's hierarchy of SEO needs.

81 Thanoj (E127966)
The anatomy of a search result,
First, let’s examine the appearance of a search engine page (SERP).Both sponsored and organic
results are included in a SERP.
Websites that have paid Google to rank highly in the search results are referred to as
“Sponsored” results. The “Sponsored” tag that shows up above the title will help you recognize
them.

Figure 35.How sponsored pages shows in search results.

The complete list of organic results that comprise the remainder of the page will be displayed
after the three sponsored results. Websites that have not paid to be listed in the results are
included in these results. These websites were chosen by Google based on a variety of ranking
criteria, including user experience, keyword targeting, and relevancy.
Organic and Paid results,

82 Thanoj (E127966)
Additionally, there are two kinds of results: sponsored and organic. Organic and paid searches
differ in that the former are free, while the latter are compensated.
Sponsored and organic listings are displayed in search engine results when you submit a query;
the word “Ad” will be associated with sponsored listings. If you click on a sponsored advertiser
will be compensated. The owner of the website will not be charged if you click on an organic
listing.
The main goal of SEO is to raise your position in natural search results.

What is web indexing?

The act of gathering and preserving data from online sites in order to produce a searchable
index that search engines may se to deliver pertinent results to user’s queries is known as web
indexing.
Web indexing is essential to the development of websites, particularly because it facilitates,
• By making it simpler for search engines to locate and index web pages, you may
enhance search engine optimization (SEO).

• Making it simpler for consumers to locate pertinent content on a website will increase
website traffic.

• Improve a website’s user experience by making content accessible and facilitating

simple navigation.

Knowing web indexing is a crucial first step if you want to create a website.

Important elements of web designing,

1. Crawling
This is the procedure by which search engine spiders or bots scan or retrieve web pages.

2. Indexing
The procedure of classifying or arranging online pages according to popularity, content
relevancy, and keywords in a database or index.

3. Ranking

83 Thanoj (E127966)
Arranging or ranking indexed webpages according to authority and relevancy.

Advantages of web indexing,

Fast web indexing while building a website can benefit your business and your website in the
following ways,
1. Better visibility – Increased website visibility and online traffic might result from quick
indexing and ranking.

2. Improved SEO – Search engine rankings and website SEO can both be enhanced by
proper indexing.
3. Increased user engagement – A site’s user satisfaction and engagement can be raised by
having easy access to content and good navigation.

(Anon., 2024)

How SEO improves index value of a website?

Figure 36.SEO

84 Thanoj (E127966)
 1. Technical Optimization

• Crawlability: SEO includes ensuring that all of the key pages on your website are
accessible to search engine bots. This is done by,

▪ XML sitemaps submitted by search engines.

▪ To prevent blocking important pages, the robots.txt file must be optimized.

▪ Fixing crawl problems discovered with Google Search Console and additional
tools.

• Site Speed: Because search engines prioritize user pleasure, faster websites are simpler
for them to index.

• Mobile Friendliness: SEO emphasizes making sure your website is mobile-friendly,

which improves indexing for search engines that give priority to mobile devices and
influences ranking.

• Structured Data (Schema Markup): Schema markup improves the like hood that your
material will be indexed and show up in rich results by helping search engines
understand it.

2. Content Optimization

• Keyword Targeting: SEO makes it easier for search engines to index your material for
specific queries by assisting you in strategically including pertinent keywords in
headers, titles, URLs and body text.

• Metadata: Well-written meta titles and descriptions increase a page’s exposure and
relevancy while also improving indexing.

• Fresh Content: Creating and posting fresh, high-quality content on a regular basis lets
search engines know that your site is active, which increases how often they crawl and
index it.

• Internal Linking: Your website’s pages are connected by thoughtfully designed internal
links, which aid search engines in finding and indexing more recent or in-depth content.

3. Backlink Budling

• Authority Signals: One aspect of SEO is creating high-quality backlinks from reputable
websites. These hyperlinks serve as votes of confidence, increasing your website’s
authority and encouraging search engines to index your content more frequently.

85 Thanoj (E127966)
 • Referral Traffic: Backlinks also increase traffic to your website by telling search
engines that it is worth indexing.

4. User Experience (UX) improvements

• Low Bounce Rate: By improving content quality, cutting down on load times, and
optimizing navigation, SEO aims to increase user engagement. Search engines evaluate
longer user stays favourably and give your website a higher indexing priority.

• Search Intent Matching: To make sure that websites are pertinent and deserving of being
prominently indexed, SEO aligns content with user goals (navigational, transactional,
or informational).

5. Addressing Duplicate Content

• In order to guarantee that search engines index the proper version of pages and prevent
dividing ranking potential, SEO tactics assist in identifying and resolving duplicate
content concerns.

6. Leveraging Local SEO

• Analytics and Continuous Monitors: Local companies may raise the possibility that
their listings will show up in local search results by making sure their accounts on
platforms like Google My Business are optimized.

7. Analytics and Continuous Monitoring

• You can use SEO tools (like Ahrefs, SEMrush, or Google Search Console) to identify
underperforming or unindexed pages. SEO techniques including content enhancement,
error correction, and backlink creation can be used to address these issues.

The Effect of this on index Value.

By using these SEO strategies,
• Search engines bots can visit your website more easily.

• Pages are prioritized for indexing due to their technological setup and optimized content

• The website’s visibility and visitors are increased by its greater search engine rating.

86 Thanoj (E127966)
 Figure 37.SEO performance in Google search console

Figure 38.SEO improving site performance

87 Thanoj (E127966)
1.6 Online website creation Tools VS Custom built Websites

Difference between online website creation tools and custom-built sites with regards to
different factors,

Figure 39.Template and Custom built

Online web development Tools,

Website builders are web based application software tools which are basically used to create
websites without the need of any advanced programming skills. Using drag and drop feature
these tools allow users to simply drag text, images and video and other elements on to their
web pages and designed for beginners. Website builders automate the coding process and
thereby make simple to have web development to newbies, companies, and Also really lower
capable professionals who need to accomplish the work quick and reliable.
Almost all website builders come with templates that suit particular industries to produce a
polished and visually engaging website that isn’t too much effort. Layuts, fonts, colors, and
any other design element can be customized by users to serve their company’s brand. More
importantly, modern website builders have integrated important features among which include
e-commerce support, SEO optimization, responsiveness on mobile devices, and analytics,
which actually make it easy for users to create top performing and user friendly websites.

88 Thanoj (E127966)
In addition, hosting, security and updates are also taken care of by these platforms, thus limiting
technical maintenance. Website builders have flexible pricing and scalability, and works for
your different needs from personal blog to whole business website. There are popular options
like Wix, Squarespace, Shopify, Weebly, and WordPress that offer a nice intuitive and pricing
friendly way to start ‘getting online’, thereby making web development easier than ever.
Tools,
Wix,
Wix is a cloud-based website builder that creates professional looking website with no
knowledge of coding. There is an easy to use drag and drop editor, hundreds of customizable,
great SEO tools, and app integrations. For personal portfolios, small business, e-commerce
stores, and other types of websites, Wix offers all-in-one (hosting and design) solution.
Squarespace,
Squarespace is a website builder known for its sleek, modern designs and great at catering to
people who are designing them for creatives, experts, and businesses with good looking and
visually appealing sites. It comes with a time and great professional templates, an easy-to-use
content management system (CMS), built in e commerce functionality, and marketing tools.
As it has an easy-to-use interface it serves well for people who aim to generate an astounding
website at this point without technology.
Shopify,
The Shopify is a high e-commerce platform that will allow you to sell products online. The e-
commerce platform can provide storefronts which are customizable, payment gateways,
inventory management and marketing options that allow entrepreneurs to set up and grow their
online stores. As the third-party app integrations with Shopify are supported, this is a powerful
tool for all the businesses that need scalability and want a powerful sales management.
Wordpress.com,
WordPress is a great CMS that makes it easy for any user to set up blogs, business website,
and even e-commerce stores. Then it is highly customizable: it has thousands of themes and
plugins. WordPress.com is a digital version of WordPress that does not require users to deal
with their own web servers. As it is highly flexible, scalable and SEO friendly, bloggers,
businesses and professionals use it widely.
Weebly,
Weebly is a simple and basic website builder that allows you to use drag and drop functionality
and has built in templates and e-commerce (if needed). Small businesses and personal websites
will have a convenient way of building and managing websites without any technical
knowledge. Apart from this, Weebly comes with SEO tools, mobile responsive designs, and
such.
Google Sites,
Google Sites is a free and simple website building tool that facilitates fast website creation so
you can build internal business pages, portfolio, or small informational websites. However, it

89 Thanoj (E127966)
is integrated with other Google products such as Google Drive, Docs, and Sheets so users can
have an easy way to create basic websites. It has no advanced personal customization however
it is an excellent option for people looking for a simple website without any hassle of hosting
or code.
Impacts of online website development tools,
Today, there are many available online website development tools and they’ve changed the
paradigm around how websites are developed and as a result, managed. Furthermore, people
with little technical skills can now create a website which has certainly been an enormous
turning point in the digital environment.
A huge advantage of these tools is that they are easy and cheap to access. WordPress, Wix and
Shopify are platforms that allow people and businesses to have a professional look of a website
without the need of coding. With the democratization of web development, little businesses,
freelancers and lone individuals now have potential to do a fantastic job of getting an internet
presence, breaking down conventional obstacles to entry that as soon as looked for professional
programmers as well as massive expenditure.
Moreover, website development tools on online mcan save time. They offer pre designed
templates, drag & drop feature and built-in functionalities to make composing and launching a
site a less complicated undertaking. It offers users the ability to create a website much faster,
which is perfect for businesses who have to quickly make their presence known in the online
world. These tools also takes away the technical requirements for you to have enough technical
knowhow to create a website without much knowledge.
Another impact is that these tools have high efficiency. However, many websites online go the
same route – they offer features like e-commerce and SEO features and analytics embedded in
the same platform. This covenant further works to bring a simpler website management since
users are simplified to deal with the needs of product sales to performance tracking. In addition
to that, most of these platforms allow customizations according to the need of the user; they
can customize their website by changing the custom code or design.
Mobile responsiveness is another key advantage, which could differ in its distinction according
to the characteristics of the target audience. Online website development tools automatically
optimizes websites for mobile systems and makes sure that a businesses reach their audiences
no matter where it is (desktop or mobile). In a world where mobile internet usage is still on the
rise, this is crucial for the businesses to ensure that the websites they are present on are in a
position to offer a smooth and accessible experience across all devices.
Also, these platforms convey important SEO and marketing tools. This means that the business
can get its search engine rankings better without the help of an SEO expert. Social media
integration further enables websites to share links seamlessly with social media, increasing the
website’s visibility as well as socializing with audiences.
These are some of the most useful tools when it comes to security and maintenance, where
most of them take care of routine updates and backups themselves. It makes sure that the
websites stay secure and accurate enough even when the user who is not technically sound to
maintain the websites. The backup is also automatic, so they minimizes the risk of loss of data
and allows users to restore quickly the site if it’s necessary.

90 Thanoj (E127966)
They offer the collaboration and scaling features for the team or business needed for
collaboration. For professionals who work on so many different departments and working on
a site adjoining with so many users can save so much of time and help to avoid mistakes.
Further, these platforms are scalable, meaning rapid upgradability of the plan’s functionality
based on the scale of the traffic and scale of the feature.
The last but not least, online site development tools make it possible for businesses to access
the global audience. Most of these tools support multilingual, which enables you to market to
global markets. Also, there are features like live chat, comment sections, giving businesses easy
access to user interaction and even better customer support.
It can be said generally that online website development tools are easier, convenient and most
importantly cheap compared to creating a website as offline. Irrespective of building a personal
blog, e commerce site, or portfolio, these platforms have changed how sites are being created
and managed.

Custom built web development tools,

Custom website development encompasses the development of a totally new website—where
the website’s design and look, as well as its features and functionality are all by an inventor’s
design, seen only in a finished product that is now available for usage. Where as using pre built
templates or website builders, Custom development means that every thing is Built for your
specific needs and goals other than pre built templates & website builders that you have used.
It includes customising a one time user user interface, support other unique features and make
everything look so smooth and flawless for the user to navigate through.
Custom development process involves a heavy amount of coding since the website is build
from start without using any framework or platform. With such functionality and such design
flexibility, this was a good approach. Meanwhile, although custom development takes more
time and specialist expertise but acts as a great way to run your business with the usage of
modern frameworks and development tools so that the time and effort can be put in boosting
productivity. React, Angular, or Laravel is such a tool that includes pre built components and
structures for developers which saves time and helps them to focus on customizing the website
according to requirement.
Thereby design and coding is a custom development that also ensures the optimization of a
website for performance, scalability and security. The custom database, user authentication
system, and integrations with third party applications that the site requires can all be
implemented by developers as required. It is very easy to navigate around the site and the
developers care that users can find their way around the site quickly and easily so that there is
a better degree of overall user satisfaction.
By the end, a custom web development will offer to deliver the final product that a business or
individual has full control over, so he can customize the website with its own unique look and
functionality, while ensuring high levels of its security.

91 Thanoj (E127966)
Tools,
HTML (Hyper Text Markup Language),
Any website is founded on HTML (HyperText Markup Language), as it defines how a website
will be laid out and what its content will be. Usability, specific layout as well as optimized
semantic code are all goals that SEO professionals seek to make a site more visible and to this
end, the best custom built websites are built. Nevertheless, in order to effectively index a site a
website’s HTML must be structured correctly. However, this is a sophisticated process to
perform in large sites and take time to do so, because the search engines need to be able to
'crawl' and understand the content for better search rankings.
CSS (Cascading Style Sheets),
On the other hand CSS is observing how the website and its items need to appear. It is a custom
built site which enables developers to have higher level of control over things like typography,
colors and animations etc. For the essential use of making the site responsive in various devices
or systems, it specifically serves in the implementation and maintenance of the site. However,
working with a large sized CSS file in its original form for a particular design is no easy task,
should you not make use of pre-processor like Sass or Less.
PHP,
PHP is the most used language for a dynamic web site. PHP also works well in an input, session
management and in handling of the databases in specifically created websites. It will help to
build Content Management System (CMS) and ‘eBusiness’ applications. But PHP development
leads to code complexity or in more practical terms the code become messy and difficult to
handle without right frameworks and methodology to follow.
JavaScript,
Simple mechanisms for turning executing Web process on Internet can be achieved through
JavaScript. It can be used for form validation, image slider, and running maps, among others.
Web developers are able to gain entire control over user’s experience over the custom built
websites, which utilize JavaScript. It is still however, that when utilized in an Alright sum (in
the correct amount) or utilizing acceptable means to optimize the page efficiency that
JavaScript somehow gives the performance and page loading a few difficulties, therefore it’s
required to be optimized.
Impact of Custom-built web development tools in Web development,
Web development tools have a major impact on the whole process of web development and has
some benefits and capabilities, which the standard pre-built tools cannot provide. Let’s see how
the aspects of custom built web development tools affect the industry:
1. Customizes features,
Developers can use custom built tools because they are able to build websites that are very
specific in features and functionality that are just what a business or project needs. This
flexibility makes a website fit every user’s requirement no matter which custom workflow and
integrations they need to make it work.

92 Thanoj (E127966)
 2. Increased Flexibility and
Using model view controller a developer has complete control features structure and design of
the website with custom built tools. With this freedom to being more creative and precise in
creating a website that presents a distinct user experience than what is restricted to pre ready
templates and platforms.
3. Scalability,
A growth accommodating custom tools are built in place. However, as a business or project
grows, the website is always easy to switch or update as the traffic volume increases, the
website’s functionality is getting more complex, or extra features started to be implemented,
and such limitations in performance cannot arise.
4. Enhanced security,
The functionality of custom built website can be designed with powerful security measures in
place which protect against potential risks. When compared to general (used by the masses)
platforms, generic platforms offer security gaps which result in security threats. This however
is not the case with developers implementation of advanced security protocols, encrypting the
data for security purposes and ensuring the site is secure.
5. Improved Search Engine Optimization (SEO),
There is a series of custom built web development tools that promote exact SEO optimization.
This enables the developers to structure the HTML of the website and the content in a manner
that is better searchable for search engines, making the website more potential for ranking. The
ability to achieve greater flexibility is helpful as it gives you a higher visibility and much better
organic search results.
6. Quicker Results,
Optimization of site performance can be done with custom built tools which help site load time
much faster as well as improve site reactivity. Removing code that is usually present in
templates or pre built solutions helps both improving the user experience as well as the SEO.

93 Thanoj (E127966)
Online website creation tools Vs Custom-built sites
Flexibility,
When it comes to website flexibility, the online tool for creating websites offers pre-made
templates that allow users to view their sites at the time of purchase. However, the functions
offered by these templates are restricted, so users must be happy with whatever they receive
from the internet.
Template, and there aren’t many options for customization. Web hosting companies also offer
hosting and domain names that assist users without coding experience in creating well-
designed websites with limited features and services. Additionally, some websites are not
entirely compatible with SEO and marketing tools, and users are unable to make any changes
to the site.
Custom built websites, on the other hand, are more flexible that online ones since they are
created to the client’s specifications, which fosters greater adaptability between the client and
the web designer.Futhurmore, features, colours, fonts, style, and attitude are created in
accordance with the FTP server also offers greater versatility, allowing web folders to be
accessed from the directly hosted website, and the client and site are already tested before being
deployed to the server. Finally, customers can purchase the domain name hosting pakage of
their choice

Figure 40.Website Flexibility

94 Thanoj (E127966)
Performance,
Online website creation tools outperform custom build sites because they are made by skilled
designers who are less likely to make mistakes than custom builds sites, which are made via
coding where the designer can make mistakes.
Performance of websites in contrast to those that are custom-build, but some websites perform
poorly because of bad coding, Furthermore, because it also depends on the coding style, we
cannot fully rely on an online website to deliver fast performance.Futhermore, websites with
more animations and plugins typically operate more slowly. Additionally, side speed is also
influenced by the server being used; some servers are not up to par, which leads to poor site
performance and poor server response. However, the code used by the designer, the availability
of plugins. And the server that the website is hosted on can all affect how well a custom build
website performs. In a similar vein, a talented designer can improve a website’s performance
when compared to online tools for website creation. If the designer has a high-end server and
hosting site, the site will also perform better. When designing a website, the client must choose
a designer who can produce the site more rapidly and according to their requirements because
very few websites outperform online sites.
Additionally, using less plugins and animations speeds up site loading, ang using dynamic
content enhances site performance.

Figure 41.Website's Performance tracking

95 Thanoj (E127966)
Functionality,
Users cannot change the design of online templates, which have pre-selected and restricted
features. Rather, they have to make use of the tools that the website provides. Moreover, none
of the accessible features and services can be changed or eliminated by the user.
Both online and in-site templates have limited capabilities. Users who want to start an e
commerce site can’t use an online template since they need extra capabilities. To accommodate
user needs, a custom-built website’s designer can change the quantity of features. Most of these
sites use custom-built websites to enhance their operation since Facebook, Twitter, and
YouTube need more and more Features that can be added or withdrawn based on user demand.

Figure 42.Website's Functionality

User experience (UX) and User Interface (UI),

User experience (UX) is crucial for consumer enjoyment; however, website templates often
fail to give a great design and user-friendly layout. Similarly, user Experience strives to create
a nice experience. Can entice users, however most sites offer good UX. Users cannot alter the
user experience to attract visitors, but must be content with the design supplied for the user
experience. Custom websites might offer customized User Interfaces designed by designers to
entice visitors and promote interaction. This can be done over several pages of the same website

96 Thanoj (E127966)
to keep people coming back for more information. Tools can be customized to enhance user
experience based on consumer requests. Additionally, individual website designers, ay
construct user experiences, unlike internet templates

Figure 43.Website's UX, UI

The justification for the tools, software administration services, and technology used to create
a custom-built web site,
Certain technologies management services, tools and software should be carefully selected
while building a custom-built website for Velvet Vogue in order to make this site useful,
expandable, and goal-appropriate. Because they provide the finest foundation for creating a
versatile user interface, HTML5, CSS3, and JavaScript were chosen for more complex style
and sophisticated animations for a better site’s appearance, HTML5 offers semantic capabilities
that improve organization and make websites more accessible. JavaScript facilitates
interaction, enables the implementation of features like filters, enables content to appear in the
browser, and facilitates the easy process of making purchases.
PHP and the Laravel framework were chosen for the backend requirements because of its
flexibility, scalability, and speed. It is a popular open-source server-side scripting language that
complements other databases and is ideal for situations like data administration, payment
processing, and user password management. As Velvet Vogue expands, the PHP framework
Laravel’s robust and well-designed features, such as routes, templates, and ORM, make the
website’s back-end as secure, easily expandable, and simple to manage as possible.

97 Thanoj (E127966)
MySQL was selected for database administration because of its quick accessibility, stability,
and compactivity with various PHP versions. MySQL is ideal for storing and indexing such
product data, customer information, orders, and related data because it is an RDBMS.
Regarding this, e-commerce websites that handle substantial volumes of data and where
security is crucial are considered to benefit from durable MySQL.
Git was used for the management services because it makes version control easier and clarifies
cooperation throughout the development process. Git makes it simple to accomplish a lot of
tasks such keeping track of website modifications and allowing individual site sections to be
worked on independently thanks to version control. This facilitates code management and
reduces instances of competition over the coding method that will be utilized to create the entire
project. Additionally, the deployment process would be managed and the version-controlled
code would be maintained using GitHub or Bitbucket.
Because they are dependable, efficient, and reasonably priced, Amazon WEB SERVICES-
AWS Digital Ocean were selected to run and host the website. It’s critical to realize that these
platforms offer a range of tools for managing the infrastructure associated with a certain
website, including load balancing and hosting. Cloud services enable the website to expand
functionality, handle traffic fluctuations, and adjust to Velvet Vogue’s expanding clientele.
Additionally, the website ids always in top shape thanks to integrated utilities like speed
control, backup, and security and SSL certificate, which guarantee that website’s safety at all
times.

In conclusion,
Overall, the lunch of Velvet Vogue’s e-commerce website is a fantastic opportunity to advance
the brand and provide customers with the ideal online shopping experience. Customer will be
able to browse through categories, make safe purchases, and get closer to Velvet Vogue through
the website, which will also showcase products from the brand’s formal casual wear
collections. Customer will be able to quickly find what they need and desire with the aid of a
well-designed, professional, and user-friendly homepage, well-structured products descriptions
that are packed with information, a shopping cart that is easy to use and administer, and robust
search features. In order to improve the cost of transport services and provide consumers with
personalized services, user accounts and profiles will also be added.
Velvet Vogue’s website will always function effectively on a variety of devices thanks to
responsive design, which makes sure that customers have a positive browsing experience
regardless of the device they are using to purchase. Velvet Vogue will be shown on the website
in order to reach the target demographic and preserve a consistent brand image. By offering
these services, Velvet Vogue may establish itself as leading online fashion shop, increasing
customer happiness, sales and the number of young people who turn them for fashion-related
solutions. Additionally, this effort will assist Velvet Vogue develop from a startup into a rival
online fashion business.

98 Thanoj (E127966)
Activity 02

The Velvet Vogue apparel boutique was founded by john Finlo. It is a business that specializes
in fashionable formal and casual attire for young people who like utilizing fashion to represent
who they are. In order to expand and attract more clients, Velvel Vogue intends to introduce an
easy-to-use website. Customers will be able to peruse merchandise, make purchases, and learn
more about the brand on this website. By going online, Velvet Vogue can reach a wider
audience and facilitate easier and more pleasurable buying for its customers.
The brand’s modern, chic and fashionable image will be present on its Velvet Vogue’s website,
which will create clean and premium shopping experience. Our homepage will have an elegant
design and will display current sales, new arrivals, and best selling products enabling a
customer to spot a trending product right away. The links will be clear and intuitive and will
lead users to other important sections like product categories, shopping cart, customer support.
With this streamlined layout, visitors can easily navigate the website, find what they are looking
for or make comfort shopping possible by conveniently navigating the website, without getting
bogged down or lost.
On each of the product pages on Velvet Vogue’s website, essential information will be displayed
that includes high quality images, descriptions, sizes available, colours available, and prices.
Users can browse through the stuff offered and select the ones to their cart, as well as view the
stuff currently in cart, alter the amount and make safe payments. After the transacted, the
customer is being send an email confirmation, which makes the purchase experience clear and
secure. Product categories and filtering options will be available on the website for users to
quickly search products according to gender, size, clothes type, proper range, and so on. Such
filtering tools will not only cut our time-consuming days but also bring in convenience in
shopping.
Customers will also be able to create an account on site to give them the ability to save their
favourite items, view order history, and change log in details. Only admin users will have the
ability for uploading new products, managing stock, and website permissions. It will make the
site fully responsive and optimized to allow customers to shop from anywhere at any point of
time.
This website is a very big step on the road to creating Velvet Vogue brand beyond the borders
and to being able to offer our customers arguably the best shopping experience. Velvet Vogue
will also be showing the stylish clothing that they offer up on the site and it’s going to include
a lot more than just a page to shop, it’s going to include improvements for customers to make
it a more enjoyable and far easier shopping experience.

User and Client requirements of the system,

99 Thanoj (E127966)
User requirements,
The website must be easy to use, attractive it must also be easily accessible on desktops, tablets,
and mobile devices. Users should be able to easily discover information, browse products or
services and get in touch with the business through forms or chat support. In case the website
provides e-commerce function, you should experience a sleek shopping process and secure
chekout optionality and wide range of payment methods. These make for a fast-loading times
and responsive to user’s on the go. Additionally, all users should be catered to with accessibility
features like alt text for images, readable fonts, and so on to make sure everyone can support
it.
Client requirements,
The goal of the website is to fulfil the client requirements — it will consist of a fully
functioning, visually stunning, and user-friendly platform based on the needs of the company’s
industry. Essential pages of the website must include Home, About, Services/Products and
Contact, with extra ones according to business type. Everything is responsive and should be
responsive across all devices. Input from the client such as needing a content management
system (CMS) to provide easy updating of content and e-commerce functionality for sale online
will be required. Data protection, user authentication, as well as security features such as SSL
encryption are also important. Further, the website should feature basic digital marketing
integrations to improve its online visibility, as well as to be SEO optimized.

2.1 Design Documentation,

Functional requirements,
Homepage and Navigation,
It is the website’s main point of entry and hence it’s the entry point of choice to give the site a
good impression. The process is designed to support easy navigational experience for the users
while making it visually engaging. New arrivals, promotions and best sellers are prominently
showcased on the homepage as it serves intended purpose to help users browse new arrivals
and best sellers. You will have a layout which means that your product categories, where
shopping cart is located, as well as contact information are easy to find, so the browsing will
be much better. The images and banners that have been carefully placed are of high quality,
clean and modern aesthetic without overwhelming the user. The homepage is also fully
responsive, so users have no problem browsing the site in desktop, tablet and mobile device
sizes and the design and functionality aren’t compromised.

Product pages and Detailed information,

Users not only get all the details regarding the products, but how to purchase the product.
Product title is clear, high-resolution images, description, sizes, pricing, an easy to find “Add
to Cart” button. Integration of zoom in feature has made sure, customers can look at finest
details of the images of the product images before purchasing. A second is added on by the fact
that the product pages also get dynamic updates, such that any price, stock level, or availability
changes are displayed as they happen. The structure is so that valuable information is readily

100 Thanoj (E127966)

available and does not lose site of an appealing and aesthetically beautiful look that aligns with
the brand’s identity.

Shopping cart and order Processing,

The shopping cart is a very important component of a site as this permits users to actually retain
the chosen items before they actually do finish checkout. Customers can add as many products
into the cart and can also change their products quantity or can remove any product from the
cart. It updates dynamically on the cart, the total cost, no matter what product, shipping fees
and taxes that you add up to being perfectly transparent before the purchase. Furthermore, the
cart is made so that users will not accidentally lose their selected items by navigating away the
page. The shopping cart is directly linked to the inventory system, to prevent the users from
buying out of stock products. Realtime stock update and price changes bring you not only with
a hassle-free shopping experience, but also in time.

Checkout process and Payment integration,

It is necessary to have a streamline checkout process to have a pleasant purchasing experience
with the least number of cart abandonment. The checkout flow is simple and also efficient, all
what required to complete an order is a few steps. Users are allowed to make transactions safely
by making use of a secure payment gateway integrated into the website. Each step is guiding
customers: from selecting the desired items to confirm them and then proceeding to enter the
shipping details and finalize the payment. In order to make the checkout easier for the user,
various payment methods are being supported, making it a flexible and easy to use checkout.
The checkout system finally reduces unnecessary steps, which improves an overall conversion
rate of a website.

Search and Filtering System,

The website helps improve product discoverability through the use of a powerful search as well
as filtering. Users can quickly find a product by entering some keywords in a search bar and
can filter the products by categories, pricing, and etc. For customers with a particular product
in mind, this feature is especially useful as all product pages are not required to browse. The
product filtering system is designed to be easy to the user which means that people can have
the hassle-free navigation through the product catalog. This feature helps improve the users’
experience with help of the fact that customers will surely find what they’re looking for quite
easily.

Performance Optimization and Speed Enhancements,

Website performance directly affects a user’s experience on a website and success of the
business. I made this site because the site contains high resolution product images and details
descriptions and thus loading speed had to be considered. Performance optimization

101 Thanoj (E127966)

techniques, e.g., image compression and lazy loading, are implemented in order to achieve this.
Lazy loading helps in loading images and media only when these come into view to reduce the
page load load time. Frequently used data is also cached to increase the speed of retrieval and
decrease the number of the requests made to the server. By optimizing these areas, it contributes
to the smooth and responsive browsing experience, so that they do not experience slow load
times and may ultimately not go through with their purchase.

Security Measures and Data Protection,

Security is the main concern when developing the website to make sure that such data of user
and the transaction remains to be safe from the cyber attack. Communication between the site
and the servers is secured with HTTPS encryption so that user’s payment details and other
personal tope data will be encrypted and protected. To prevent access and data breaches, the
use of firewalls and security protocols are implemented as well. Continuous security updates
and vulnerability assessment keep the environment secure, hence, maintain the website secure
from the threats emerging on time. Moreover, following data protection regulations ensures
their customer’s information is treated with respect and confidentiality. The website has
security as its priority, meeting trust and reliability with the users to buiness the enrolment with
confidence.

Customer Support System,

However, these need to be complemented with excellent customer support so that customers
had a good experience, even if there were any issues that may occur. In the website there is a
customer support area where the users can find questions most frequently asked, how to contact
us and supporting request form. The customers can reach out to them through email or via a
contact form for any order related assistance, product queries or technical issues. To provide
instant support, a live chat feature has also been added which makes it possible for the users to
get real time help while on the site. Return and refund policies are displayed including clear
policies to build trust between a customer and the store. By providing with multiple support
channels the website makes it a point that users have a real outlet to get prompt and effective
help whenever is required.

Non-functional requirements,

Performance and Speed Optimization,

Website should be optimized so as to provide a fast loading time and high responsiveness to
guarantee the smooth and efficient shopping experience. Why? Because its got the high quality
product images and this kind of dynamic elements, there’s got to be some performance

102 Thanoj (E127966)

optimization technique to be implemented which are image compression, caching and lazy
loading. They are just helpful in reducing server load and loaded pages in three seconds even
during the peak time. In fact, every part of the website, from the scripts to the media content,
must be thoroughly optimized in order to avoid making the site slow to load, which often results
in a high bounce rate and (especially if there are sales) lost sales. Also, server side optimizations
like indexing the database or query optimization are also required to improve the performance.
It is then continuously monitored and tested with speed as any possible bottleneck is being
found and fixed before affecting users experience.

Scalability and Future Growth,

Since the business is growing, the website will also be expected to handle more of users,
product and transaction without issues of performance. Scalability ensures that the platform
will remain efficient as more features and product categories are added, new promotional
campaigns are launched, and even during scaling. The growth should be anticipated from the
beginning, so the backend infrastructure should be designed out of the cloud based hosting
solutions and load balancing techniques to use as the traffic increases. The other is a flexible
database structure to accommodate new listings of products and new customer interactions
without affecting the speed or functionality. Drawing the future scalability plan from the very
beginning avoids all the redesign of the project’s architecture later on and makes the task flow
easier once the business starts growing.

Security and Data protection,

Security of the website is a top priority in order to keep the website secure from potential cyber
threats, and in turn protect customer information and transactions. Data transmission must be
enforced with HTTPS encryption, so that personal and payment information are secure. Since
it can be difficult to control internal access for people who work or sit on a home network,
firewalls, secure authentication mechanisms, and regular security updates should be installed
to stop unauthorized access and data breaches. Also, it complies with the framework of data
protection laws such as the GDPR in order not to collect and store client information in a wrong
way. Periodic security audits and penetration testing should be done where vulnerabilities are
identified and eliminated before they can be exploited. Securely prioritized site ensures not
only its customers protection but also rises credibility that is the key for sustainable business.

Usability and User Experience (UX),

A customer satisfaction and engagement requires a successful and intuiting experience for
customers. It is important that the website is designed with the clarity and ease that will make
product, detailed information available to the users, and will finish purchase without any hassle.
The layout is well structured, the call-to-action buttons are clear and there is a responsive design
to make for a hassle free shopping experience. Streamlining the checkout process is crucial so
there are no unnecessary steps and also multiple payment options to cut down cart
abandonments. Along with the accessibility, the standards should also be followed so that the

103 Thanoj (E127966)

site users with disabilities can interact with the site smoothly. Usability is further increased by
such features as proper contrast ratios, screen reader compatibility and well clickable buttons
so the site becomes inclusive to all of its visitors.

Reliability and uptime,

To receive utter trust from customers and continue to have access to the website, a high level
of reliability must be maintained. The platform must be made to a minimum uptime that’s
99.9%, so that necessary losses if there’s downtime or technical issue can occur. Redundancy
and failover mechanisms must be assigned to achieve this, so that when a server fails service
is not disrupted. Such problems need to be regularly monitored and maintained before they
affect customers. In addition, it must be scheduled to put in automatic backups so that there is
no data loss upon the failure of a system. By focusing on reliability, the site would ensure a
steady and uninterrupted shopping experience and hence will give the confidence to the
customer in a brand.

Cross browser and cross device capability,

As the customers can visit the site using a diverse set of platforms and browsers, it is paramount
to maintain compatibility across different platforms. It should be fully responsive making sure
there is no need for any custom adjustments and it should automatically adjust its layout for
desktops, tablets and smartphones. Such a layout is based on grids to ensure that the user gets
a consistent experience irrespective of size of a screen and remains readable and functional on
all the devices. Moreover, the site has to be tested on all major web browsers – Chrome, Firefox,
Safari, and Edge – to avoid rendering issues. Buttons and navigation menus are to take into
account of touchscreen or traditional mouse inputs. With such a vast range in device usage, the
website improves its reach by making certain it is compatible across all platforms and also
presents a single experience to all users.

Maintainability and Ease of Updates,

The website must be easy to maintain and update in future without requiring a lot of technical
knowledge for the success for a long time. A codebase structured and documented well is what
helps developers deliver changes quickly: the addition of new products, renewal of promotions,
introducing new features, etc. To facilitate easier non technical staff handling of inventory,
processing of orders and updating a content management system (CMS) or a custom backend
should be designed. The site should be secured and functional with regular software update and
bug fixes. By thinking about maintainability of the website, future alterations and tweaks will
be able to be made effortlessly, keeping the platform alive and up to date.

Customer support efficiency,

104 Thanoj (E127966)

It is essential to provide efficient customer support to the users so as to increase customer
satisfaction and brand loyalty. It should have multiple supports such as Live Chat, email
assistance, and FAQ section to solve customer’s problem all together. Having properly
integrated ticketing system ensures that no customer enquiries suffer without an answer.
Response time should be minimized as much as possible, and most queries should be available
as self-service with the use of direct assistance. Furthermore, a support section should be
dedicated with online order tracking, return policies, and contact information for the consumer.
The website allows them to add and enhance customer trust, leveraging prompt and effective
customer support in ensuring repeat business.

2.2 User acceptance criterias,

Homepage Design and Navigation,

First impression of the website is the home page, therefore; it should be visually appeasing and
also easy to navigate. It has to represent featured products; new arrivals; running promotions;
keeping the look clean and modern. The product catalog, shopping cart and customer support
should be accessible to users easily without any problems. The displayed images should be
high quality, without obscuring the page and the balance between beauty and the functionality
should be kept. Alone you can provide a structured menu and Search bar that will help the user
find their wanted products in a quick time leading to better shopping experience.

Product Display and Shopping cart functionality,

Customers should also be able to find full information about product including hiqh quality
images, product descritption, price and availability on the product’s page. Users should be able
to browse based on categories, prices, attributes and other parameter that will help them in
browsing the product easily. Customers must add, remove and modify how many they could

105 Thanoj (E127966)

purchase of which product without it becoming a chore to update the total product price
inclusive of taxes and shipping fees in real time. The cart should also be able to persist even if
the user navigates away from the page and add to your shopping journey without any hassle.

Checkout process and Payment Integration,

It should be fast, simple, and secure checkout process with minimum number of steps in
completing a purchase. The best thing is that customers should have multiple payment options;
credit cards and other digital wallets can be available to suit their preferences. To prevent
transaction error, a secure payment gateway is integrated. After the purchase, the user should
get a clear amount of how much did it cost for his order, and what’s the estimated time of
delivery, and tracking information. All works in favor of optimizing the entire process in order
to avoid abandoned carts caused by experiences with complicated and slow checkouts.

Performance Optimization and Security Measures,

Therefore loading of the page is very important as it matters irrespective of the number of items
displayed on it. All optimization techniques, such as image compression, caching and lazy
loading should be made to be used to guarantee smooth browsing. As is security, which protects
the data and transactions of the users with HTTPS encryption. To protect the system against
cyber threats, any information including payment info, personal details, login credentials
should be stored securely on the server using proper encryption methods. And the website will
remain safe for users thanks to regular security updates and meeting of the data protection
regulations.

Mobile Responsive and cross Device Capability,

The website needs to be fully responsive and work well on different screen sizes since as many
users as possible will shop on their mobile devices. They should be able to navigate, buttons,
and images adjust accordingly to desktops, tablets and smartphones for a similar yet excellent
experience. On smaller screens, interactive elements should be implemented to make it more
usable like touch friendly buttons and dropdown menus. All the devices and browsers should
be tested on the website to find out any compatibility issue and rectify the same to access the
website to all the users.

Customer Support and User assistance,

An effective customer support system essential for responding to user’s queries and complaints
in quick resolution. Additional support features on the website should be a website live chat
feature, email contact form, and an FAQ section. This will lead to higher service things and
trust by increasing response time and good communication. Return policies, shipping
information and also your troubleshooting commonly used issues should be mentioned in the

106 Thanoj (E127966)

support page. This will enable the website to ensure easy accessibility in customer assistance
and will develop a good relationship with customers and their overall shopping experience.

2.3 Wireframes,
Home page,

107 Thanoj (E127966)

 Figure 44.Hero section

Figure 45.Featured items

108 Thanoj (E127966)

 Figure 46.Rich text and footer section

Men’s clothing page,

Figure 47.Men's clothing section

Figure 48.Footer

109 Thanoj (E127966)

Women’s clothing page,

Figure 49.Women’s clothing section

110 Thanoj (E127966)

About us page,

Figure 50.About us section

111 Thanoj (E127966)

Contact us page,

Figure 51.Contact information section.

112 Thanoj (E127966)

Product page (Men’s shirt)

Figure 52.Product page section

Cart,

Figure 53.Cart dashboard

113 Thanoj (E127966)

Checkout page,

Figure 54.Checkout section

114 Thanoj (E127966)

2.4 Network considerations,
Registration of Domain names,
The first thing for Velvet Vogue to do is get a domain name as close as possible to its identity.
The domain name has to be memorable, easy to type and, concisely represents the brand’s
modern and cool appeal. Short and descriptive domain name makes it easy for customers to
locate and remember the site. In this situation, VelvetVogue.com would be the perfect one to
choose as it is an actual image of the brand and it mission. After choosing the perfect domain
name, that domain name must be registered with a trustworthy domain registrar to lay claim to
it for the future. You would be able to set up the server with a simple registration process and
strong customer support: GoDaddy, Namecheap, .Store doamins or Google Domains for
example.
In the case of Velvet Vogue when one registers the domain, this first needs to be verified to see
if that particular domain is available. Whenever it’s confirmed, it can be locked for a period of
generally one year, not renewable. In addition, the domain must be linked to the hosting server
of the website so that one may access the site smoothly by entering the domain name in the
given browser. DNS (Domain Name System) settings responsible for directing users to the
right web server serving the site is how this is managed. In order to keep our privacy and protect
some business information most sensitive to purchase domain privacy protection and hide our
personal details from public eyes in the WHOIS database. It serves as another way to make the
brand feel more secure and official in the space of the internet.
In addition, the SEO (Search Engine Optimization) effect of Velvet Vogue’s domain name
should also be considered. If the keywords are related also search engine will allow the search,
and will rank your site relatively and in the order of professionalism best. In the context of
increasing brand recognition and traffic, a well-optimized domain name helps Velvet Vogue to
be easy to discover online. Through selection of appropriate domain and application of best
practices to secure it, Velvet Vogue will set a solid foundation to its online store that will permit
its customer to visit its online store anywhere in the world.

Server description,
To achieve the best performance and reliability of the Velvet Vogue website, the right server
has to be selected. There are several points to consider including: speed, reliability, storage
capacity, scalability, etc. Since Velvet Vogue is an e-commerce platform, a server is needed in
this case that will handle a lot of traffic on web and more critical functionalities like handling
transaction processing, managing user accounts and securing customer data. For the operation
without hindrances and disruptions, the website should be hosted on a dedicated server or cloud
based server as those will provide better performance, scalability, and increased security. If you

115 Thanoj (E127966)

have an e commerce website which receives high traffic it is best to move over to dedicated
server.
Velvet Vogue takes the security aspect very seriously when it comes to handling customer
payment details and personal information since there is a lot at stake due to data protection.
The security features incorporated on the server should include SSL encryption, firewall
protection and automated data backups in order to protect the customer data. What protects
information on these features is this is a way that would eliminate possibilities of data breaches
and access of data without authorization thus enabling the customer transaction be a private
and secured transaction. Giving Velvet Vogue the flexibility and scalability means that the
choice of a cloud-based server is an appealing one as the business grows as they can easily add
more server resources and the costs are manageable. There are leading companies like Amazon
Web Services (AWS), Google Cloud and Microsoft Azure that provide cloud hosting services
with automatic scaling according to the traffic demand so that the website is always available
to customers around the world at 24 hours.
Velvet Vogue’s website is also allowed to grow without failures in the server, aside from
reliance and scalability, automatic data backups are important. Backups kept on a regular basis
can ensure that critical business data such as product listings, customer orders, transaction and
shopper history is preserved, to avoid data loss in the event of a problem. In addition, tools
should also be deployed to keep a record of server performance with alerts generated to
discover server downtime or be alerted of excessive resource use. The health of the server can
be continuously monitored so that any potential problems may be recognized before they are
damaging to the user's experience.

2.5 Method of Hosting,

Velvet Vogue′s e-commerce platform has chosen hosting method which is vital for the
performance of the page, its reliability, and security. There are various hosting options; shared
hosting, virtual private server (VPS) hosting, dedicated hosting, cloud hosting etc. varying by
resources and security. Being an e-commerce business that wishes for long run growth and
flawless shopping experience, Velvet Vogue has to choose a hosting option that can deal with
rising traffic and have robust security strategies. The unmet needs made me consider shared
hosting, although it is an affordable option but comes with a lot of limitations, including
resource sharing, less performance and sometimes even security risks, which is not suited for
growing an online store.
Cloud hosting, where those industry leaders Amazon Web Services (AWS), Microsoft Azure
and Google Cloud, offers the most scalable and reliable hosting for Velvet Vogue. This makes
Cloud hosting a perfect solution for times when traffic increases — as is the case with
promotional sales events. This method includes redundancy and failover capabilities – that is,
if one server has problems, the second gets in and the customer is not disrupted with
considerable downtime. Cloud hosting is a perfect solution given Velvet vogue’s need for fast
and responsive online store, giving scalability and flexibility for growing the website in sync
with the growing business while performance remains top notch.

116 Thanoj (E127966)

Dedicated hosting also provides another hosting option; the website will run on a physical
server alone. This is beneficial because full control over resources, configurations and security
settings is added, and it is an excellent option for high traffic business with advanced
customization requirements. It is, however, more expensive than cloud hosting and needs
dedicated server management. This method provides maximum performance and security but
Velvet Vogue should decide whether or not it is worth the costs in the long run.

2.6 DNS management,

Furthermore, there is a crucial thing about the domain name system (DNS) of Velvet Vogue
that helps its clients in easily browsing the website by the domain name of the company. DNS
performs translation from human-readable domain names (www.velvetvogue.com) to
machine-readable IP address and directs to correct hosting server. One of the most important
tasks of these DNS service providers is to collectively maintain an up and running website.
Cloudflare and AWS Route 53 are among the industry leading providers for advanced DNS
management for e-commerce businesses, as well as others, to ensure a seamless browsing
experience.
Other than speed and reliability, a good DNS provider can manage subdomains easily. For
instance, the store and customer support subdomain such as shop.velvetvogue.com and
support.velvetvogue.com can help velvet vogue to have better organization and scalability.
DNS is a robust system and makes implementing, growing and managing subdomains easy
without any difficulties regarding the brand. In addition, these features provide an addition to
the user experience in the sense of having the traffic directed to the nearest server or spreading
out incoming requests over several servers to prevent overloads and also slows down during
heavy load times.
That’s why efficient DNS management is even more critical as Velvet Vogue continues to grow.
With a flexible DNS provider, any migration to new server, e.g. or new domain will be easier
and won't affect customers a lot. Along with security, domain name system security extensions
(DNSSEC) protect against such threats as DNS spoofing as well as cyberattacks, which helps
to keep customer data secure and not compromised.

2.7 Security features,

Secure communication using HTTPS,
Velvet Vogue’s website uses the HTTPS protocol (HyperText Transfer Protocol Secure) to
make sure it secures a communication between the website, and thus its users. Using HTTPS
the site encodes the data of the customer (e.g. login credentials, payment details, personal
information) when the customers visit the site. It encrypts the data so cybercriminals cannot
intercept or steal sensitive data while it is transmitted. In HTTPS, where SSL/TLS certificates
are used, this secure channel is created to almost ensure that the unauthorized parties cannot
modify or get access to confidential information. As Velvet Vogue processes transactions and
customer data, HTTPS should be the first step in securing both the business and its customers.

117 Thanoj (E127966)

The next thing to note about this secure connection is that between the customer’s browser and
Velvet Vogue’s servers only the data’s integrity is protected via encryption, so content such as
server statistics or similar that could be promptly generated once the 360 page has been loaded
by the customer, will not be encrypted. This protection is an important factor in an e-commerce
environment where precise order details, payment information and addresses are critical. With
out HTTPS, data can be tampered with or it can be modified in transit leading to distorted
orders, miscalculation in billing, or insecure data. Consequently, Velvet Vogue ensures that no
transactions are compromised or any communication interacts with inaccurate or unreliable
information by securing its website with HTTPS.
Building customer trust is one of another important advantages of HTTPS. Immediately,
visitors know the website is protected when they see the padlock icon in the address bar. In
today’s internet, with customers becoming ever more skeptical about online security; simply
having HTTPS isn’t the best practice, it isn’t just a suggestion. A secure site instills confidence
with shoppers, increases likelihood of conversion and reduces cart abandonment and also keeps
customers loyal.

2.8 POST Method,

The POST method is a major handle in the secure sending of customer data on Velvet Vogue’s
e-commerce website. The POST method is different from the GET method in that it transmits
the data through body of the HTTP request (it is invisible for everyone who is monitoring the
network traffic) as opposed to using the URL, which makes it visible to anyone not allowed to
do so. POST is best for this as they transmit sensitive customer data for instances like
usernames, passwords, credit card details and personal data. In this case, POST data does not
appear in browser’s address bar, thus reducing the risk of data leaks or unauthorized access. In
the secure transactions, this ensures that all the critical actions of adding items to the cart,
checking out and even the payment processing remain secure and are not exposed to a third
party.
Velvet Vogue also needs to further enhance security by implementing HTTPS (SSL/TLS
encryption). This encrypts all of the user’s browser to website’s server communication so that
hackers cannot intercept or change records being sent. In particular, it is very useful in case of
dealing with critical information, such as payment details and Login credentials. With the
padlock symbol in the browser’s address bar, it reassures customers that his information is
pushed safely to the website, thus increasing its trust in it.
Apart from that, Velvet Vogue should validate and sanitize all the data received on POST
requests. It, however, prevents malicious users from leveraging security vulnerabilities e.g.
SQL injection attacks, which are being exploited by hackers to inject malicious SQL commands
in form fields, and cross-site scripting (XSS) attacks where attackers try to inject malicious
scripts to steal user data or manipulate the website. The website guarantees only valid and safe
data is processed, preventing an unauthorized access and cyber threats.

Frequents updates and audits of security,

118 Thanoj (E127966)

Velvet Vogue’s website has to get audited and updated on a regular basis in order to keep a safe
and reliable online presence. Because the world of the technology and the cybersecurity threat
is changing, never updated software or the configuration of the website may make the website
exposed to attack. It is very important to schedule security audits in order to find weakness in
the website’s infrastructure, might be outdated plugins, insecure code or improperly configured
server settings. An added advantage of carrying out business audits on the website is that it
helps find flaws in third-party services incorporated to the site, including some of the payment
processors and CDN (Content Delivery Network) providers, so that by the time they may be
exploited, those potential problems have already been fixed.

Besides audits, it is essential to have regular software updates. Upgrading the website’s
operating system, software frameworks, and plugins helps to combat newly discovered security
flaws from attackers. Security newsletters, vendor notifications and security bulletins should
be received by Velvet Vogue to be up to date with the new threats and security patches. First,
if possible, automatically security updates should be turned on to reduce the risk of getting
cyberattacks by applying the critical patches ASAP. Velvet Vogue can dramatically reduce the
risk of breaches and a safe shopping experience for its customers by auditing and updating its
security measures with consistency.
Regular penetration testing should also be conducted on top of audits and updates. Pen testing
is an imitation of cyber defences whereby the website is made to see what types of security
threats it can tolerate. Unlike only a standard audit, penetration test reveals the vulnerabilities
that an attacker may use to break or loot, so Velvet Vogue can strengthen its security prior this
actual attack. Velvet Vogue combines security audits, updates and penetration testing to ensure
the security of the website so that it remains safe and secure as well as built against cyber
threats.

Controlling access and authentication,

Velvet Vogue’s e-commerce website deals with two important issues, of which the first is
authentication and second is access control, which allows only the rightful information and
features to people. Authentication means it is verifying a user’s identity for example a username
and password. Protecting the sensitive customer data such as personal details, payment details
and order history, is this step. One can add to this further for more security and enable Multi
Factor Authentication (MFA). MFA takes the form of an additional verification step, for
instance, a one time code delivered to a user’s email or phone, thus helping to make it orders
of magnitude harder for unauthorized users to access. It makes sure of ensuring a secure and
reliable shopping experience for our customers.
It says how much the users can do the website; it is the access control. For instance, only
accounts of customers should be accessible; but administrators should have broader access to
manage products, process orders, handle customer data, etc. As an access control mechanism,
RBAC (Role Based Access Control) will be used by Velvet Vogue to provide an assigned role
with corresponding set of permissions. It blocks access by unauthorized people and reduces the

119 Thanoj (E127966)

likelihood of part of the website or records of customers being changed accidentally or
deliberately.
To enhance security, Velvet Vogue should also store all sensitive user credentials and
information in its database encrypted. Never store passwords in a plain text—instead, use an
algorithm to hash the passwords to make it difficult to compromise them. Furthermore, you
should have proper session management implemented with automatic session timeouts that will
log users out after so much time with no activity. It prevents access from unauthorized shared
or public devices.

2.9 How will the rules pertaining to inclusion and accessibility be

applied?

To maintain the best user experience without any issues, the Velvet Vogue e-commerce website
must ensure accessibility and inclusivity for every user, this includes persons with disabilities.
This will ensure that the website promotes Web Content Accessibility Guidelines (WCAG) so
as to make it usable by people with visual, auditory, motor and cognitive impairments. For
instance, the site must be image disabled with alt text for images, so that visually impaired
users can utilize audio description to understand what product images look like. Furthermore,
well contrasted with proper fonts that can be scaled according to user needs make for a better
reading for users with low vision and colour blindness.
Velvet Vogue needs to make sure that all website function can be used without a mouse to
provide better keyboard accessibility. This means allowing use of most products combined with
keyboard navigation of menus, selection of products and purchase. The features such as focus
indicators will make the site more user friendly for people with mobility impairments as they
will have an idea about which element they are interacting with. Likewise, a voice command
compatibility needs to be considered for users that use speech to text technology to browse and
interact with the site.
Velvet Vogue should provide captions and transcripts for any video that is posted, including
video of the products being demonstrated and video that is used for advertisement. Moreover,
it should have a text based customer support too, for example live chat or email support if
people are unable to use voice calls. This way all the users can access customer service in equal
terms regardless of the chosen means of communication by the user.
It also includes matters of language and culture. Velvet Vogue can provide support for multiple
languages which would allow international customers to see the content in their preferred
language. Furthermore, the website does not only stay away from culturally exclusive imagery
or references making the brand open to a more diverse pool of audience.
In following accessibility and inclusivity guidelines and creating a shopping platform that is
functional and usable for all customers, Velvet Vogue can enable no user that is disability and

120 Thanoj (E127966)

language barrier affected. Not just for the user viewing the brand, but also showcases it as a
brand who holds equal access and customer satisfaction.

2.10 Implementation document,

Home page,

121 Thanoj (E127966)

Men’s clothing page,

122 Thanoj (E127966)

Women’s Clothing page,

About us page,

123 Thanoj (E127966)

Contact us page,

124 Thanoj (E127966)

Men’s clothing’s product page,

125 Thanoj (E127966)

Cart feature,

Checkout page,

126 Thanoj (E127966)

Code parts of the website
Home page HTML codes (Index.html),

127 Thanoj (E127966)

128 Thanoj (E127966)
Home page CSS codes (Style.css),

129 Thanoj (E127966)

130 Thanoj (E127966)
131 Thanoj (E127966)
132 Thanoj (E127966)
Men’s page’s HTML codes,

133 Thanoj (E127966)

134 Thanoj (E127966)
Men’s page CSS codes,

135 Thanoj (E127966)

136 Thanoj (E127966)
137 Thanoj (E127966)
138 Thanoj (E127966)
Women’s page HTML codes,

139 Thanoj (E127966)

140 Thanoj (E127966)
About us page HTML codes,

141 Thanoj (E127966)

142 Thanoj (E127966)
About us CSS codes,

143 Thanoj (E127966)

144 Thanoj (E127966)
145 Thanoj (E127966)
Contact us page HTML codes,

146 Thanoj (E127966)

147 Thanoj (E127966)
Contact us page CSS codes,

148 Thanoj (E127966)

149 Thanoj (E127966)
150 Thanoj (E127966)
151 Thanoj (E127966)
152 Thanoj (E127966)
153 Thanoj (E127966)
Men’s Product page HTML codes,

154 Thanoj (E127966)

155 Thanoj (E127966)
Colour, Size selection, Cart functionality and checkout button maintained by JavaScript,

156 Thanoj (E127966)

157 Thanoj (E127966)
2.11 Test plan
The Velvet Vogue Website’s test plan,
Methods of testing to be employed,

Black box testing,

Without running the internal code of Velvet Vogue’s website, black box testing is used to check
its functionality. Just like a customer would interact with the site and place products in a cart,
apply discount code, enter payment details and complete the order the tester will interact with
the site to confirm that everything is working as expected.
Verification that product pages appear properly, search filters return correct results, the
shopping cart is updated as expected, and the checkout process is smoothy is a vast type of
testing without which the product would not be ready to hit the market. Black Box testing,
however, only focuses on result of actions by a user, rather than the code, and this is why it is
so quick and easy to check user facing features to make sure Velvet Vogue’s shopping process
is as smooth as possible.
Velvet Vogue’s e commerce platform will utilize Black Box Testing as the most suitable testing
technique since it enables quick confirmation of entire functional elements affirming that they
are within what a user would anticipate. The method of testing this will help determine whether
the site is capable of handling browsing products, placing them in the cart, applying the
different discount codes, and proceeding through the purchase, in order to check that there are
no issues or glitches in the buying process.

158 Thanoj (E127966)

Black Box Testing is especially helpful when you’re looking to find problems that may affect
the shopper experience as it focuses on user interaction instead of internal code. For this reason,
it is a must have technique if you want to keep an e-commerce website that is user friendly, full
functional and has a high quality.

Whitebox testing,
Velvet Vogue is a repository of internal system structure, code logic and security features for
White Box Testing purpose. In contrast to Black Box Testing which uses a user point of view
during its investigation to determine functionality, White Box Testing necessitates the
knowledge of the exact website source code, logic flows and knowledge of the respective
algorithms to identify issues such as broken authentication schemes, weak encryption and
unsafe payment procedures etc.
White Box Testing will be notably crucial for Velvet Vogue to protect user authentication,
payment transaction encryption, as well as preventing exposure of their customer data without
approval. This kind of testing is time consuming as well as resource consuming but it is
important to verify that the security, robustness, and reliability of the website’s internal
structure to provide the safest and most reliable shopping experience to customers.

Areas to include,
1. Reliability Testing,
The Velvet Vogue website must be reliable, meaning its stuck, functional and continues to
function without unexpected failures. Testing the website’s uptime, and its availability and the
performance with prolonged use to confirm that it can run for long without crashing or error.
During peak traffic events like sales events the site will be stress tested to determine how well
it stands up seeing heavy user demand. If the website serves the traffic across multiple servers,
then it will be tested to see the load balancing mechanisms to provide the traffic in equal ratio,
so that none of the server may become overloaded. In addition, product browsing, cart
management and checkout process will be simulated in multiple user interactions
simultaneously, which do not interfere with each other.
Therefore, the ultimate goal of reliability testing is to assure that Velvet Vogue would run
market perfectly if it’s being subjected to any further condition, be it normal or peak, to ensure
that customers have an uninterrupted and one hundred percent smooth shopping experience at
all times.
2. Functional testing,
That means that functional testing will confirm that the Velvet Vogue site functions as it should
with all of its core features like browsing, searching and purchasing. In order to get this, we
will create test cases that will check that users can move freely of product categories, search
for products and buy without problems.

159 Thanoj (E127966)

Both valid and invalid queries will be used to test how the website’s search functionality
performs and ensures that on all queries search information is delivered accurately and
appropriately. Full testing of the entire shop, all the way from adding an item to the cart, editing
the quantity and completing checkout with secure payment processing.
There will also be testing on other critical functions such as user account creation, login/login
processes, admin tasks like product management, etc. It aims at giving all your website’s
features a smooth and efficient experience to the users who enjoy shopping on the website.

3. Stress Testing
The Velvet Vogue website will undergo stress testing to determine its capacity when handling
high volume loads during extreme usage scenarios such as heavy traffic and transactions. The
website needs to handle exceptional loads since many possibly thousands of users
simultaneously browse items while putting products into their carts before finishing their
purchases.
Intensive stress tests will empower system performance evaluation through overwhelming the
website with massive request quantities. The process enables identification of structural
weaknesses in the web infrastructure which might experience difficulties during periods of
maximum usage. The goal behind this testing is to confirm that the site operates properly when
handling high demand traffic while maintaining stable efficiency without substantial
operational breakdowns.

4. Security testing,
The test plan of Velvet Vogue needs security testing to verify that user data stays secure. The
assessment checks the core security elements between user authentication and payment systems
alongside login methods. Tests confirm that all login credentials get proper encryption methods
and that the platform supports a safe data transfer protocol based on HTTPS. The login process
will undergo verification with correct as well as false authentication credentials to verify secure
access restrictions and suitable error messages emerge properly.
Security testing shall verify that the checkout process achieves secure processing of customer
payment details. The website will undergo advanced security testing to detect vulnerabilities
which includes Cross-Site Scripting (XSS), SQL Injection as well as additional cyber threats.
The testing examines security hazards to find and fix possible vulnerabilities which ensure data
safety from unauthorized users accessing customer information.

5. Recovery Testing,
Tests for recovery assess Velvet Vogue’s process of recovering from system failures to
guarantee normal operation following unexpected interruptions. Checks will be performed on
the website by creating simulations that replicate server crashes as well as database failures
and network disruptions. The examination of backup procedures and recovery protocols during

160 Thanoj (E127966)

testing confirms that system failure will not affect user data or product listings or transaction
records.
If a failure occurs the testing procedure will allow users to continue their purchase without
initiating another start. Data recovery tests from backup processes will be executed to verify
rapid website recovery following a system crash. The key purpose of recovery testing aims to
decrease business interruption and expedite Velvet Vogue's operational restoration during
unexpected failures while maintaining smooth online shopping for customers.

6. Performance Testing,
Performance testing will evaluate how efficiently the Velvet Vogue website responds to user
actions, such as logging in, browsing products, searching, and completing transactions. The
website’s loading speed, response time, and transaction processing speed will be analyzed
under different conditions.
Test cases will be created to measure the time taken to load product pages, execute search
queries, and process checkouts. Additionally, the site’s performance will be tested under normal
traffic and peak load conditions to determine how well it handles a high volume of users.
The goal of performance testing is to identify slow-loading areas and optimize them for faster
response times, ensuring that customers have a smooth and efficient shopping experience on
Velvet Vogue.

7. Usability Testing,
The evaluation through performance testing focuses on determining the speed at which Velvet
Vogue website functions during user interactions involving authentication and product
exploration and shopping. The website loading speed alongside response time and transaction
processing speed will receive assessment based on different operating scenarios.
User interface testing will employ test cases to determine product pages load times as well as
the duration needed for query execution and checkout processing. The testing environment will
analyse site performance during both typical traffic situations and scenarios with maximum
load capacity to assess its user capacity.
The performance testing process focuses on detecting load delays to streamline response times
thus delivering Velvet Vogue customers an optimized shopping experience.

8. Accessibility and Inclusivity,

Accessibility testing will ensure that the website of Velvet Vogue is ‘accessible’ and inclusive
for the users with disabilities. Everybody with sight difficulties can shop and navigate around
easily in order to ensure the site is consistent with assistive technologies, for example screen
readers. Other accessibility features including high contrast themes and adjustable text sizes
will also be tested to accommodate users whose cognitive barriers or who need their eyesight

161 Thanoj (E127966)

OR have a barrier. Also, this website can be evaluated based on its ability to be of help to the
physically disabled in terms of voice input, virtual assistants, and to confirm some critical
activities like making payments vocally. Accessibility testing is conducted to make the users of
all the senses (visual, auditory or physical) unable to find any discomfort when shopping
online.

9. Platform Testing,
This will conduct the platform testing of Velvet Vogue’s website to make sure it is accessible
and can do pretty well on devices and web browsers. Web-site will be tested on desktop
browsers like Google Chrome, Microsoft Edge, Mozilla Firefox, Safari, etc and on mobile
devices such as smartphones and tablets. There will be test cases to check if the site is
responsive or not, meaning that the layout of the site automatically changes depending on the
screen size and orientation without changing functionality. In addition, the testing will ensure
that interactive elements like buttons, forms and menus on all platforms work.
Platform testing is aimed at ensuring that the customer’s experience of shopping in a store is
invariably consistent, smooth, and apparently free of any baggage.

Test cases
Test No Input Expected Result

1 Type the URL in a browser The home page of the Velvet

(e.g., www.velvetvogue.lk) Vogue website appears,
displaying signature pieces.

2 Click on the "Men's The Men's Clothing page

Clothing" page opens, displaying available
men's clothing items.

3 Click on the "Women's The Women's Clothing page

Clothing" page opens, displaying available
women's clothing items.

4 Select a product from the The product details page

home page, Men's or opens, showing product
Women's Clothing page image, available sizes,
colours, and price.

5 Choose a size and colour, The selected item appears in

then click "Add to Cart" the shopping cart with
chosen size, colour, quantity,
and price.

6 Open the shopping cart page The shopping cart page

displays all added items with

162 Thanoj (E127966)

 total price and options to
remove/edit items.
7 Click " Checkout" The checkout page opens,
displaying fields for entering
delivery and payment
details.

8 Fill the payment details and The order is processed, and

click "Place Order" an order confirmation
message appears.

9 Try to add an item to the cart An error message appears

without selecting a size or prompting the user to select
colour size and colour before
adding to the cart.

10 Access the website on a The website layout adjusts

mobile device responsively for optimal
viewing on the mobile
screen.

163 Thanoj (E127966)

Test No: 1
Actual Output: The home page appears

Test Outcome: Pass

164 Thanoj (E127966)

Test No: 2
Actual output: Arrived to men’s clothing page

Test Outcome: Pass

165 Thanoj (E127966)

Test No: 3
Actual output: Arrived to Women’s clothing page

Test Outcome: Pass

166 Thanoj (E127966)

Test No: 4
Actual output: The product details page opens, showing product image, available sizes, colours,
and price

Test Outcome: Pass

167 Thanoj (E127966)

Test No: 5
Actual output: The selected item appears in the shopping cart with chosen size, colour, quantity,
and price.

Test Outcome: Pass

168 Thanoj (E127966)

Test No: 6
Actual output: The shopping cart page displays all added items with total price and options to
remove/edit items

Test Outcome: Pass

169 Thanoj (E127966)

Test No: 7
Actual output: The checkout page opens, displaying fields for entering delivery and payment
details.

170 Thanoj (E127966)

Test Outcome: Pass

Test No: 8
Actual output: The order is processed, after filling required details and click on checkout.

171 Thanoj (E127966)

Test Outcome: Pass

Test No: 9
Actual output: An error message appears prompting the user to select size and colour before
adding to the cart

172 Thanoj (E127966)

Test Outcome: Pass

Test No: 10

173 Thanoj (E127966)

 Actual output: The website layout adjusts responsively for optimal viewing on the mobile
screen.

Test Outcome: Pass

2.12 Design principals used

1. Responsive design,
The design of the Velvet Vogue website has been done using the principles of responsive design
so that the experience of browsing can be optimum in tablets, laptops and smartphones. This
layout will also fit to different screen sizes automatically so that the users have same, if not
better, experience on different devices. For example, on mobile devices, we use a collapsible
'hamburger' icon as the navigation menu for the sake of reducing the space but at the same time

174 Thanoj (E127966)

keeping it functional. The product grids are also adjusted to show fewer items per row at
smaller screens so they see a cleaner and visually pleasing one.
Additionally the mobile has been optimized to work with touch screens using touch friendly
buttons and swipe enabled image carousels. Users can browse through a variety of product
images or a button can be tapped to quick add items to cart.

2. User centered Design,

Velvet Vogue is a target for young adults that are coming to trendy, expressive fashion and uses
user centered design to get the website to interact with the needs and wants of this specific
audience. We’ve used other features such as the convenient navigation menus, the search filters
and product categories that are clearly defined to simplify the shopping process. For example,
filters are used so that users can filter out their search by criteria like size, cost, and colour and
hence saving time and also giving a better experience. To make the user shopping experience
more convenient, a simplified shopping cart was implemented to facilitate the users to review,
edit, and complete purchases.
Some other things that you have done, also, in your layout, focus on such important product
information that users can read and choose an informed product. High quality images of the
product pages have been presented along with important descriptive text, and some contributed
user reviews to give an accurate and valuable information. For example, available in size guides
and fabric descriptions, customers are aided to select the right item. Velvet Vogue’s website
was built to pile up user centered design principles to deliver the most streamlined, personalized
and fun shopping experience.

3. Simplicity and Consistency,

Since the generation interested is so young and is ‘coming to trendy, expressive fashion,’ the
target is Velvet Vogue, and they use user centered design to get the website to work with the
needs and wants of this particular group of people. It has easy to use navigation menus, search
filtersfree and properly defined product categories to simplify the shopping experience. To this
effect, examples are filters used so that users can filter out their search by some criteria such as
size, cost, and color, an exercise that saves time and also because the experience is better. A
simplified shopping cart was implemented to reduce the effort required by the users for a
review, editing and checking out of the purchases. On such important product information, you,
also, have done some other things in your layout, focus on the same product information that
users could read and choose a product in an informed way. Here, the important descriptive text
with high quality images of the product pages along with some contributed user reviews have
been presented that provide an accurate and valuable information. Let me give you an example
— size guides or fabric descriptions are useful to help the customers to choose the right item.
The velvet vogue website was created to stack user centered design principles to bring the
hardest, most personalized and most fun shopping experience.

4. Visual Hierarchy,

175 Thanoj (E127966)

Velvet Vogue has implemented the principle of visual hierarchy with great care to lead users of
its website on the path to the most vital parts. Headlines are being bolder, CTA buttons are
getting bright, and banners are growing bigger and branching out to carry vital information like
sales, promotions and product suggestion. For example, an announcements banner at the top
of the page gets the user to immediately notice a seasonal discount offer. The call to action
buttons, such as “Add to Cart” and “Shop Now,” stand out using contrasting colors which give
the direction to act upon these pins.
Furthermore, whitespace is a vital factor in becoming a clean and effortless interface. The way
to achieve this is by creating enough space between image of the products and its description
and other related contents so that users can concentrate on important information and not be
confused by too much. To give one example, on a product page, the main image, the pricing
details, and the key product specifications are all put in a nice, useful order for the user to make
them take in easily.

5. Accessibility,
Accessibility has been the top priority for Velvet Vogue since we have integrated different
features to make it easy for the users with disabilities. All of the images on the site have alt text
that gives a full description to each visual in case the user is using a screen reader. In fact, the
alt text for such an image could look like this: This is an image of a formal dress, which is grey,
made of nylon, and has thick seams around the arms. Also, keyboard navigation is made so that
the users who have poor mobility can use the site without a mouse to browse it, making
browsing easier and more inclusive.
Both WCAG and SEO are important to this site because the text comes in high contrast and the
font size is scalable so that users with visual impairments can read it. For instance, in the
product description dark text has been used on a light background to make it more visible.
Velvet Vogue follows accessibility standards to provide a store full of people with disabilities
who can enjoy the shopping experience without any problem. The website is designed to
accommodate users who do not have the same vision or hearing or physical abilities that the
rest of the people are spiritually endowed with, ensuring that everyone has access to a fully
functional and user friendly platform.

6. Fast Loading Time,

Velvet Vogue has optimized its website for fast loading times to ensure users experience no
delays when accessing content. Various techniques, including image compression and lazy
loading, have been implemented to improve page load speed. For example, product images are
stored in WebP format, which maintains high quality while reducing file size for faster loading.
To further improve initial page load times, lazy loading is used, ensuring that images and videos
are only loaded when the user scrolls down the page, reducing unnecessary load times.

176 Thanoj (E127966)

Additionally, caching strategies and Content Delivery Networks (CDNs) are employed to
optimize performance. Static assets like CSS files and scripts are cached, making them load
faster for returning users. For global users, CDNs deliver resources from servers located as
close as possible to the user’s location, providing a quicker, more efficient experience.
With these speed improvements, Velvet Vogue ensures a seamless, fast-loading website that
enhances user experience and keeps customers engaged, which is essential for retaining them
and fostering positive shopping experiences.

7. Engaging Visual Design,

An effective way to characterize Velvet Vogue’s website is its use of compelling visual designs
that match the brand identity and attract its intended audience. Images that have good models
in stylish attires further create an aspirational and stylish environment. That is for example a
full screen slider on the home page that shows the latest arrivals and all kind of promotional
campaigns, thus grabbing visitors’ attention already from the first glance. The modern colour
palette on the site also reinforces the way the brand sounds, young and trendy. A number of
interactive features were also added to increase the dynamic experience.
Hover effects buttons enhance the product detail and 'Add to Cart' functionality, while the user
moves their cursor over them. Also, small animations like fade in, and smooth transitions of
pages make it visually appealing but without being too intrusive. With this combination of
beautiful styling and practical approach, Velvet Vogue’s website allows users to remember
beautifully and to interact with your systems.

2.13 Design standards

1. Responsive Web Designing,
The key standard applied to Velvet Vogue’s website to assure a great user experience across all
devices and screen sizes is Responsive Web Design (RWD). Flexible grid layouts and fluid
images on the website are used that automatically size depend on the screen size. Whether users
are browsing the site from their mobile phone, tablet or desktop computer, they will see the site
displayed exactly like everyone else instead of using either horizontal scrolling or zooming to
see the content.
Apart from the layout flexibility it provides, Velvet Vogue also makes use of media queries to
style the website based on the screen size of the user. An example is how the navigation menu,
displayed usually in a horizontal bar at the top on larger screens, collapses into the commonly
known ‘hamburger’ menu on smaller screens to allow for better use of space. Therefore, the
website must always appear visually pleasing and functioning well, whichever device is used.
Velvet Vogue follows the responsive design standards to ensure that its website is navigable
and easy for use of any device, while delivering a pleasant browsing experience to all visitors.

2. Follow the WCAG (Web Content Accessibility Guidelines),

177 Thanoj (E127966)

Velvet Vogue follows the Web Content Accessibility Guidelines (WCAG) to ensure that the
website’s content is accessible to all users – from physically and sensory disabled users. This
encourages online content to be more inclusive in general and more easily navigable for people
with various impairments.
It is often for example that all images are screened with alt text, particularly screen readers are
used by those with visual impairments. Users would understand the context of images like
product photos descriptions or promotional banners and this will help them to know whether
or not to trust the images being provided. Additionally, since the site is designed to be fully
keyboard navigable, it is conformant to WCAG’s guidelines related to keyboard accessibility,
widening its accessibility to those who aren’t able to utilize a mouse.
The WCAG guidelines also pay close attention to ensuring that the sufficient contrast between
the text and the background is provided for the users having visual impairments. For product
descriptions Velvet Vogue gives high contrast version of text which are easy to read. In addition,
user’s scalable font can also be set to maintain the user comfort in terms of the size of the text,
which is tremendous advantage for users considering low vision.

3. Mobile first Design,

However, lately the mobile first web design is a key web design standard to Velvet Vogue as
the emphasis is put on mobile device users first. Keeping in consideration of the smaller screen
sizes, the site was designed to be a website that people could have on smartphones or tablets
and easily navigate the site. This is because Velvet Vogue has the mobile first strategy set, so
their layout works just fine for smaller devices, which are the craze out there when you are
doing any online shopping. For mobile device compatibility, the website is completely usable
and easy to use on a regular basis. More and more people are shopping from their phone.
Furthermore, by adapting to it a mobile first approach was also adopted to make the users have
a delightful experience irrespective of which device they are using, i.e. whether it is desktops
or tablets. In the design, further adjustments occur at scale for larger screens using methods
such as media queries and flexible grid layouts on the site. Let’s consider for example using a
collapsible navigation menu (also known as hamburger menu), as it allows saving space and
making for easier browsing on mobile devices.

4. Standards for Semantic HTML and CSS,

Semantic HTML is the process of using the html tags which explain precisely what we are
describing in our content. To make the website more accessible, SEO friendly and
maintainable, Velvet Vogue has adopted the semantic HTML. Velvet Vogue can be considered
semantically organized by using tags like <header>, <footer>, <nav>, and <article> for its
content rather than the generic tags like <div> Not only would this make search engines more

178 Thanoj (E127966)

comprehensible of the structure of the site, but also screen readers can read and interpret the
content accurately for visually impaired users.
In addition to it being semantic HTML, Velvet Vogue adheres to the best practices with CSS to
decide the layout and the disposition of the site. With Velvet Vogue the visual elements from
the content is separated out in external CSS stylesheets that control the typography, colors and
spacing throughout the app. The fancy, things like modern CSS Grid and Flexbox are in spin
on the website to enable a responsive, flexible design that works across an enormous number
of screen sizes.

5. Standards for Performance Optimization,

Performance optimization is also a necessary web design standard to provide fast loading and
smooth interaction with the user and thus the reduction of bounce rate. To ensure that velvet
vogue has high website performance, a number of strategies are implemented to improve speed
and functionality. One way that Velvet Vogue also uses is image compression, especially with
the use of WebP – a new image format with high quality images at a much smaller file size. It
makes the image load time less while not compromising on their quality.
Additionally, Velvet Vogue employs lazy loading for images and other media elements. It
means resources are only loaded as they are needed (that is when the user scrolls down to see
them) and therefore the initial page load times are as fast as they can be. In order to further
improve performance, Velvet Vogue takes advantage of caching strategies and Content
Delivery Networks (CDNs). Coupled with the use of popular JavaScript framework, caching
stores frequently accessed resources such as images, CSS files, and scripts in a user’s browsers
and results in lesser load times, next time. However, in contrast, CDNs serve the resources from
the servers nearest to the user to minimize latency and accelerate the entire page speed.

6. Security Standards,
It is, therefore, essential that e-commerce websites put a lot of emphasis on security, especially
if they have been designed to enable the business to sell goods or services over the internet.
Security is of utmost importance to Velvet Vogue and as such, data of its users is protected
during their entire shopping experience. Velvet Vogue also uses HTTPS for secure
communication between the user and the website, thus encrypting all traffic between the server
and a user’s browser. It allows the users to do their purchases safely in a safe environment
without intercepting sensitive information such as payment and personal information during
transmission.
Creating a secure shopping experience is a trust card that can be used by using HTTPS
throughout the entire website. Apart from secure communication, Velvet Vogue also has strict
data protection measures to protect data of users. Secure payment gateways are used to process
payment and we guarantee secure transactions. Addition to it, the website also adheres to data
protection laws like the General Data Protection Regulation (GDPR) where website should be
transparent about the practice of collecting data, and consent of the users is acquired before

179 Thanoj (E127966)

they share any data with the website. The data collecting is clearly stated in their privacy
policies; there is no doubt on how they use user data.

2.14 Web design guidelines used

Accessible Design,
The accessibility of Velvet Vogue was taken in consideration, so that the users with a disability
may find their way around and interact with the website very nicely. All images have
descriptive alt text which will be presented to screen readers to help those who are visually
impaired understand the content of that image. In fact, the alt text of the product image of the
red evening gown would have something like this: "Elegant red evening gown with lace
detailing" so that the user can understand to what image refers without looking at it. Apart from
visual accessibility, Velvet Vogue ensures the entire website is keyboard navigable to allow
users with mobility impediments to interact with content only using a keyboard.
For example, users of the site can move between categories, make selections and make a
purchase by tabbing through the navigation menu and pressing enter, without having a mouse.
Velvet Vogue integrates these accessibility features to make it affordable for all users regardless
of their abilities and offers them a comfortable environment.

Mobile friendly design,

In view of the growing trend on mobile shopping, Velvet Vogue makes sure it will render the
site mobile optimally fit on smartphones, tablets and other platforms. All content is kept
accessible and visually appealing on the website layout, this layout is mobile friendly and will
adapt automatically for smaller screens. In fact on mobile devices, the navigation menu is a
hamburger icon that consumes less space on the screen while keeping navigation within
product categories and pages easily accessible. To improve upon the mobile experience even
more, touch friendly buttons and controls are in place.
The large “Add to Cart” and “Buy Now” buttons also makes it so that tapping on one, is not as
easy as accidentally tapping the other. Additionally, product images are optimized to easily
swipe in sequences in mobile devices without screen lags.

Readable Typography,
Velvet Vogue places clean and readable typography in its web, so as to improve the usability
and its user’s reading experience. The product titles and prices are displayed in key elements
in bold easy to read fonts and can be seen in a flash. More supporting text like product
description and promotional message is presented in a smaller, yet very readable font to keep

180 Thanoj (E127966)

a right balance between clarity and nice visual effect. For instance, a customer looking at
listings can easily scan the name, price and size of a particular item without bothering their
eyes.
The website also ensures that text and background contrast is high enough for readability. It is
most of the content presented in black text on white background, promotional banners use white
text on darker background so the content stays visible. This is helpful in ways such as visually
impaired and colour-blind users can browse the site easily.

Intuitive Layout,
Velvet Vogue’s website is clutter free and has a great intuitive layout which helps in shopping
very easily. A popular banner at the top of the homepage depicts ongoing promotions and
seasonal offers that attract the attention of the visitor. Below the banner there are the product
categories like “New Arrivals” and “Best Sellers” with nice quality of the image to pull users
to further explore. For example, a shopper looking trendy casual wear can find the related
category quickly and browse products quickly without the tedious process of looking for
products manually.
The clear structure makes it easy for the users to find what they want without too much effort.
Also, product pages are well structured around product name, price and available sizes at the
top and more information such as materials and care information below. For instance, if a
customer wishes to buy a formal dress, he can check size availability instantly and read the
fabric and design. This logical organisation of the information makes it so users don’t feel
overloaded yet they are able to make great decisions very quickly.

Consistent Navigation,
Velvet Vogues’ flourishing jobs page has created friction for the users and made the navigation
of multiple pages a tough exercise; however, Velvet Vogue ensures a consistent experience
across all its pages of the website with a user-friendly interface to navigate to the unspecified
pages without any confusion. Wherever you go in the website, the navigation bar is placed at
the top and has the same structure throughout the website. The link is present to main product
categories–“Casualwear”, “Formalwear” and “Accessories” so that the user can switch
between the three with one click. On another example, consider a user browsing a product page
and they want to look at something else, they can without having to come back to the homepage
in order to make the usability better and reduce the frustration—the first time user. There is a
constant presence of the footer section on all the pages except for the navigation bar where the
footer presents links to vital section of the website like “About Us”, “Contact Us”, and “Privacy
Policy.” The way these links are placed means that users can always access important
information when needed.
For example, suppose a client would like to know Velvet Vogue’s return policy and can just
locate it at the bottom without having to look around several pages. Velvet Vogue enhances
user confidence and provides a smooth hassle free shopping experience by having a structured
and predictable navigation system.10 A justification of the implementation of the website

181 Thanoj (E127966)

Clear CTA (Call to Action),
Clear and concise CTA buttons are used by Velvet Vogue to take visitors to the right action on
the website. Bright equations are used for buttons such as “Shop Now”, “Add to Cart” and
“View Details” to grab users attention. For example, promotional banners usually incorporate
a ‘shop now’ button encouraging the visitor to explore the new arrivals or special offers. These
CTAs are strategically placed right on the site, so users are kept in looking at their buying as
they keep moving. Furthermore, Velvet Vogue’s CTAs make use of plain, action-based
language that dissolves any doubt as to what it is that would occur when clicking that button.
The “Checkout” button in the shopping cart is an example of the way in which the final stage
of the purchase is incredibly obvious. Velvet Vogue pulls together visually appealing design
coupled with clear and direct messages to make it sure that users can conveniently browse the
website and pay your dues without fear.

2.15 A comparison between the intended design choices and the

implementation of the multi-page website options, highlighting any
parallels or discrepancies,
Based on the original design plan, the Velvet Vogue multi-page website was created, however,
some modifications were made in order to serve as an easy and great browser experience and
site functionality. During the development sub process the core vision of building out a visually
appealing, user friendly and efficient shopping platform was never breached. Still, adjustments
were made in practice to conform to new needs and optimize the system. These additions had
been looked at to reflect these additions aligning with the purpose of Velvet Vogue to furnish
an uninterrupted online shopping encounter that's custom planned for young, fashion
cognoscente populace.
It was hugely significant that the homepage played a large role in the first impression of the
website. The original homepage design was aimed to create an engaging homepage that would
effectively showcase the brand identity, showing the products, displaying product categories
and give easy access to the essential sections like shopping cart as well as customer support.
We managed to achieve this objective with a clean and organised structure from which you can
gather high quality product images, promotional banners and a very simple navigation system.
An enhancement that was definitely noted was the addition of a ‘Featured Products’ section
that wasn’t initially on the plan. The introduction of this section allowed Velvet Vogue to
showcase seasonal collections, trending items, and exclusive offers, and made customers more
engaged and tempted to browse through the homepage more.
The product catalog is designed to allow intuitive browsing through options such as gender,
size, color & price range. Even though this feature was implemented according to plan, a latter
addition to mid development was the addition of an additional searching tool with auto
suggestions to make product discovery even quicker. This feature made the browsing
experience tremendous as it helped the users to quickly find a particular item without having
to navigate through multiple categories. A smart search function that was aligned with Velvet

182 Thanoj (E127966)

Vogue’s effort to refine usability and facilitate customers’ easy search of the products they are
interested in was included.
First, the essential details of the product description, pricing and high quality image on product
page were planned. Additionally, there were included further interactive elements to increase
engagement. In order to build customer trust in the brand, social proof, which was never part
of the original idea, was added to the customer reviews which do their work. Finally, a
personalized recommendation system including recommanded products according to users’
browsing history was also implemented. The improvements made in the interaction of user,
encouraged further exploration and increased the possibility of more purchases, thus made the
shopping environment dynamic and customer oriented.
Though the implementation of the shopping cart as per the initial plan, with the ability to add,
modify and review their selections before moving on to the checkout page, nevertheless some
further enhancements were made. The mini cart feature was introduced, which let a customer
see the contents of the mini cart without leaving their current page. Moreover, real time stock
update was integrated to inform the users of the products availability. While these were not
planned at the onset, these made the shopping process easier, removed friction, and fit right in
with Velvet Vogue’s goal of a smooth and hassle free checkout. In general, the multi page
website closely followed the design suggestion, with useful improvements in terms of usability,
security, service and customer satisfaction.

2.16 what is QA?

Quality Assurance (QA) is the process of making a quality product like a website, a software
product. These are the attributes of accuracy, reliability, usability, attractiveness, efficiency,
portability and security. QA’s purpose is to ensure that the product at hand as delivered is in
line with its design and functional requirements producing a seamless user experience. QA
allows the developers to identify and fix issues prior to the product launch thus making it meet
user’s expectations and industry’s standards.
Verification and Validation (V&V) procedures are performed to ensure quality in the design
and development of a website in the software development domain of QA. The way these
procedures help detect the problems when they arise early will result in technical errors and
usability problems. Verification means that the product is being built to the said specifications
whereas validation holds good to verify that the product delivered works as per the end user’s
needs. Both of the processes work together to ensure that the high quality standards are
maintained throughout the development.
Verification is to make sure that the website is made as required and based on the design
specifications. Therefore, it is all about comparing the website to a set of defined criteria, from
wireframes and prototypes to finally, the fully developed web pages. It is done to make sure
that all of the designed and intended design elements are implemented correctly. It is also
verification which includes software testing and the technical reviews which are done by the
developers and QA teams to check for disparities that may affect the performance or usability
of the system.

183 Thanoj (E127966)

Verification is a key component of software testing where a practical evaluation is performed
on data that is being executed on the website such as search functions, buying processes and
payment systems. Sometime the differences between the expected and actual outcomes are
compared. Furthermore, aspects such as security, performance, reliability, accessibility for
disabled users are covered by the non functional testing. If found, the problems that occur are
documented and fixed in order to enhance the overall quality of the website.
Technical reviews are another verification method conducted by industry experts. These
reviews help identify issues that developers may overlook, ensuring adherence to industry best
practices and standards. Expert feedback enhances the website’s quality and functionality by
providing insights on improving usability, security, and overall performance. Incorporating
these reviews into the development process helps maintain high standards and prevents
potential problems before the website goes live.
Validation, on the other hand, ensures that the completed website meets user expectations. User
acceptance testing (UAT) is a key part of validation, where real users interact with the website
to assess its functionality and ease of use. During this phase, users navigate pages, place orders,
and test features to confirm that everything operates as intended. Feedback collected through
questionnaires and interviews provides valuable insights for further improvements. This step
prioritizes user satisfaction, ensuring that the final product delivers a positive and efficient
experience for all users.

2.17 Analysis of QA process, Including an examination of its use

throughout the Velvet Vogue multi page website’s concept and
production phases,
However, the Quality Assurance (QA) process to achieve the high quality user experience in
the multi page website of Velvet Vogue was very well planned and executed. This was a QA
approach that ranged from design to development and continued until functionality, usability
and security, and performance. They tested and refined numerous times to make sure that the
website would be rightly representing the brand identity and customer’s expectation from
Velvet Vogue.
First, it went through a review of the design document and wire frames in depth. Special
attention was given to elements such as layout, colour scheme, branding and location of content
so as to align with Velvet Vogue’s goals. The design was then reviewed by industry standards
on user usability and accessibility to check if it is proper or not in the usage of components.
Form and design were developed with stakeholder feedback taken before finalizing to be sure
it went into the development stage.
There were many rounds of testing, across the entire development process. Testing website for
testing was done on users from the target audience and their feedback was taken on usability,
user flow and complete experience of the website anytime. It made the browsing easier, made
the search of product easier and thus made it accessible. As well as improving the website’s

184 Thanoj (E127966)

overall usability, its user interface was critical to be perfected through the iteration of the testing
process.
Responsive design is one of the components of the QA process. Honestly I’ve tested the website
in so many devices just to make the best device experience for users in any size of screen. Also,
performance testing was conducted for the purpose of tackling the problem of loading time
specifically when the image of product is of high quality. Lazy loading and image compression
were adopted to speed up as well as to make loading faster.
It was important to test the security aspect of protecting customer data during checkout.
Security of data was also verified with secure payment processing in order to stop tactics like
data breaches. All user authentication and account management were tested to ensure the
personal information is secure. These were indeed some of the things that helped boost
consumer trust and confidence in Velvet Vogue’s e-commerce platform.
Therefore, user acceptance testing (UAT) was performed to validate that the website was ready
for launch. The key tasks performed by real users browsing products, adding these to the cart,
and completing the checkout process. Any remaining issues were analyzed in their feedback.
Velvet Vogue’s site was also put through the QA process so that it worked technically and on
top of that, it was an intuitive and smooth shopping experience.

Activity 3

185 Thanoj (E127966)

3.1 A comparison between the original concept document and the
design and development process of the Velvet Vogue website.
The development of the Velvet Vogue website, including design, followed a good structured
process to match the business goals of John Finlo, an interest of the Velvet Vogue clients. To
achieve this, the main idea was to make a website that obviously mirrors the Velvet Vogue
brand and somehow gives voice to the things that highly qualified in love of fashion from
brilliant young adults. From the beginning's, the design plan envisioned a multi-page site with
an enthralling home page, product pages, the shopping cart will be seamless, product categories
that can be filtered through, user accounts that allow users to build a flowing shopping journey
and so forth. But the development based on this initial framework also helped us to reach the
business and customer requirements in the end. As with any project the development phase
went through refinements and and endless adjustments to interactions to make it as usable and
as good as possible. As with all good design, I stuck to the original design vision but made
enhancements to bring value to users and bring the result to a high quality polished e-commerce
platform.
The project included the homepage design, which was the first contact Velvet Vogue had with
its customers. The emphasis of the original design document included a visually appealing
homepage with easy navigation to the product categories, the shopping cart and the customer
support. With this plan, the development team created the homepage which featured featured
products, promotions and products which were new to the store. Now, additional dynamic
elements such as product sliders and promotional banners were introduced, even though they
were not included in the documentation for the design as development moved forward. To make
the homepage more entertaining, these prerequisites helped extract the user into the website,
drawn into the website. Bold, vibrant colors combined along with modern typography were
further used to add visual appeal to Velvet Vogue further making the interface inviting and
stylish in line with Velvet Vogue’s young, trendy brand identity.
After completing the initial design plan, the pages were further developed that would have
product pages showcasing each item with high quality images, details, available sizes, colours,
and pricing. These core features were successfully implemented by the team to deliver a good
shopping experience. As per user feedback, interactive color change on product update, was
another enhancement added for user experience. There was no original plan for this and it as
turned out to be good – customers can now see the product variations in real time. The cart was
also optimized so that users can see cart summary while adding items of selected sizes and
colors. Refining these increased the usability of the product pages to match the website’s
objective of delivering a slick and engaging shopping experience while keeping the purity and
effectiveness of the first design.
Shopping cart was crucial piece of the site, offering the ability to add products, modify adds,
change amount or amounts, review selection(s), and then check out itself. To achieve this, they
had the original design document focused on a simple cart system with obvious product details
and a quick checkout. For this reason, the development team successfully implemented this
plan which allows users to manage their cart easily and smoothly. Yet, during development
other improvements were made to enhance the shopping experience. For example real time cart
updates were added so users could never need to rerefresh the page for the changes to be
reflected. Aside from that, the checkout process was simplified to cut down on all the

186 Thanoj (E127966)

superfluous pop ups so users could simply click through and go straight to checkout. A faster,
more user friendly purchasing journey was ensured without sacrificing the original design goals
by means of these refinements which enhanced the effective and easy of use of the shopping
cart.
The website allowed users to add products into the shopping cart, add and remove products,
review amounts, checkout seamlessly and is an integral part of the website. The intent was for
the design document to concentrate on a basic but strong cart system with plainly composed
product description and direct checkout approach. The right approach was to allow users to
easily manage their cart page using the cart dashboard. Nevertheless, improvements were made
to improve the user experience. The user got real time cart updates so that the current selection
was instantaneously observed without refreshing the page. Also, the extra pop-ups were
removed which helped with the process of the checkout because users were automatically
guided to the checkout page upon clicking the 'Checkout' button and no interruptions. The
enhancements kept the simplicity in original design while improving efficiency, so the
purchasing process would be smoother and more user friendly.
Since the website’s development objectives centred on developing a responsive, user friendly
shopping experience. Products could be added, quantities adjusted and customer could proceed
to checkout in the cart system used. Features such as saving items for purchase later and even
product suggestions inside the cart were added to bring better shopping experience. The ‘grid
based’ design allowed for the site to adapt nicely on devices with screens of all shapes and
sizes, it was a consistent experience across desktops, tablets, and smartphones. To align with
Velvet Vogue’s brand identity the visual elements were used, such as bold and sleek fonts, high
quality images and the color. To make things more dynamic, I added such features as the hover
effects and the animated transitions to the page. Hybrid felt it is of high importance, especially
for a member of their family, that the finished result was a polished and modern e-commerce
site that truly depicts Velvet Vogue’s style, and streamlines the shopping experience for
customers alike.

3.2 An examination of any unique technical challenges that arose

during the creation of the Velvet Vogue website,
Although building the Velvet Vogue website did present several technical challenges, the
solutions were thoughtful and clever enough to make them surmountable. Designing a visually
appealing homepage which was trendy and youthful fashion brand was the most challenging
part. We wanted the homepage to be functional but slightly more beautiful than usual, making
it easy for users to view new arrivals, promotions, and product categories, at the same time
making the navigation simplified enough that the user is pointed quickly to the shopping cart
and the customer support. This high-quality load worked best, so to avoid overcrowding, the
images had to be organized carefully against each other to ensure the clarity and quick load
times remained. The website also had to be fully responsive because Velvet Vogue’s target
audience are young people who shop on mobile. The problem was to build a site that was
friendly with the various screen sizes from the desktop to tablets and smartphones without
sacrificing user experience. In order to accomplish this, a flexible grid layouts, media queries,
and touch-friendly elements were used. The site was also tested extensively on every device to

187 Thanoj (E127966)

ensure that it was easy and intuitive to use. Velvet Vogue’s website was able to present a
modern, fantastic, and effectively utilitarian purchasing experience for any gadget with this
methodology.
During the development of Velvet Vogue’s website, the shopping cart and checkout system
gave us many technical challenges. These products had to be easily added, easily changed and
removed with easy dynamic tax and shipping fees applied, thus the cart had to be able to
accommodate it. Another big challenge was that the cart needed to convey to the inventory
system so there was no possibility of customers buying out of stock items. However, when
going to the checkout process, customers needed to transition smoothly without errors from the
cart page and the process had to be simple with less steps and quicker and quicker purchase.
The team also had to test through phones and browsers, guaranteeing that the cart worked well
across all devices and browsers and that the user experience was consistent across all of them.
As the website does not have a user account system, there was also the challenge of updating
real time cart across multiple sessions without losing a user’s selection which would present
an exclusive and easy shopping experience.
During the development of Velvet Vogue’s website website performance and security proved
to be very important considerations. To achieve fast loading times despite the use of high-
caliber images and rich product information, performance optimization techniques like image
compression and lazy load were implemented by development team. When implemented with
lazy loading images and other media in the page load slower only load when then visible to the
user. The visited data, for example, product information, was also cached for frequently cached
data locally on user’s device to avoid fetching a same data from a server over and over again.
We also performed extensive tests so that the website wouldn’t feel the strain of high traffic
times. Another was security, since it was handling customer sensitive information and payment
details. HTTPS encryption was implemented to protect the site from cyber attacks and firewalls
were implemented to prevent unauthorized access into the site. Simple updates were carried
out on any new threats and vulnerabilities, and regular security testing were performed. It also
met the regulations on data protection like GDPR for safe and proper handling and moving
from one location to storage of customer data and thus meeting privacy of customer as well as
protection of business reputation.

3.3 An evaluation of the Test Plan’s results and the overall efficacy of
the website,
Analysis of the test plan outcomes,
The first test case was to verify that a user enters the URL to the browser and then sees the
home page of the Velvet Vogue website successfully. The test result was a success because we
could make it so that the users can easily go the the website by just typing the URL of the
website in their browser. That way there is a smooth and welcoming introduction to the site
which makes a very confident and good first impression. An e-commerce website’s home page
is an important part in how the entire browsing experience is set. Users at the time of landing
on the Velvet Vogue’s homepage are presented with a visually attractive and friendly layout
showing the identity of the brand. Browsing the homepage varies from one person to another

188 Thanoj (E127966)

depending on the skills of the user but it can also be loaded successfully enabling visitors to
effortlessly commence shopping for whatever they may be eager to purchase. In addition, the
loading speed of the homepage is efficient, reducing the waiting time and hence decreasing the
bounce rates. Frustrated users and nobody ahead of them waiting to load that page can cause a
large loss of sales and bring down engagement rates. A good customer retention and satisfaction
will require a fast and smooth homepage load time.
From a technical point of view, if the homepage is loaded successfully, it implies that the
website’s server can efficiently serve content to the users from different geographic locations.
The robustness of backend systems is also tested by this test, as well, making sure that the
backend servers are not only deemed beautiful but are also working properly. The homepage
plays a critical role as the centre hub of the site which directs visitors to the most critical
sections such as a product catalogues, customer accounts and checkout pages and accordingly,
that has to be reliable. This aspect carries any failure in this area could impact user experience,
traffic and also sales. It means the Velvet Vogue website not only looks great but excels with
regards to the technical performance, passing theses test means that we guarantee the users a
stable and ergonomic way of entering the store.

The second test case was booked to check whether product collection is displayed with images,
prices and other necessary details. The most successful test has thus far confirmed that there is
core functionality of the website as intended. For any e-commerce platform, the product section
is the embodiment of the essence of the literature that is crucial to the whole interface of the
system by which users browse and select products. Velvet Vogue’s provides users with the
opportunity to see a in detailed format the product information in an orderly layout. High
quality images, pricing, and stock availability of each product helps customers make well
informed purchasing decisions for the product. The product presentation is accurate and
visually impressive that enhances customer engagement and enable them visit and buy the
product. This also serves to confirm, through this test, that the product data retrieval and
display, which is carried out centrally by the backend system, is working as intended. Products
are correctly categorized and move inventory information in real time. This helps to ensure that
the users only see available products and also helps make shopping a better experience. The
role of the product collection also takes place on seamless operation of the product collection
that ensures user satisfaction.
Users hate a cluttered or disorganized display and will abandon the site. Velvet Vogue
addresses this risk by having a clean and easy to use layout that presents to you all the product
details found. This test was successful because customer can browse it easily without confusion
and can find wat they need. Additionally, the website possesses the product collection is clear,
therefore, giving a positive look to the credibility and trustworthiness of the website. High
quality visuals of well structured catalog helps develop customer confidence which encourages
similar kind of customer engagement in future and once they convert they will definitely place
more order. The confirmation of the passing this test indicates that the Velvet Vogue is
providing a seamless shopping experience with high usability standards.

189 Thanoj (E127966)

The third test case examined the add-to-cart functionality, specifically, that the user is able to
apply a product to the shopping cart and verify that it reflected correctly. The add to cart feature
all worked as expected in this test and we know it, proving that the add to cart feature works
the way it should. An add-to-cart system is essential for an e-commerce site and it’s directly
related to the customer’s success on completing their purchase. On Velvet Vogue product page,
if a user chooses to press on ‘add to cart’, the selected product is added to the cart automatically
with the correct product data such as name, price, and quantity. It also enables the user to see
what he or she is purchasing and decide on proceeding to the checkout. Additionally, the test
proves the cart updates in live, for example, it updates adding many products or change
quantities etc. If the feature was not functioning as expected, customers would get annoyed and
abandon carts and miss out on sales.
The add to cart function is one of the important components of the whole shopping process,
which creates more confidence in the customer to do shopping and manage the selected items.
This shows that this is a problem free website and a hassle-free shopping website as Velvet
Vogue’s add to cart feature passed this test. And this test proves successful, which basically
says that the website is able to carry out these transactions unnoticed to generate higher
conversion rate and customer satisfaction.

The fourth test case went in to ensure that the checkout button page works for the users and
made to click on the button and successfully submit their order for further processing.
Conclusion: The order was successfully processed and the test result is successful as expected.
Checkout process is very important in the e-commerce website because it allows the user to
have a look at his shopping cart, enter the payment information and confirm the purchase. After
a user clicks the checkout button, the user is helped through a secure and organized process to
complete the transaction. This feature is seamlessly executed meaning that Velvet Vogue is
capturing order data and processing customer payments securely, giving a good purchasing
experience for our users. Offering to the users the ability to complete their purchases by making
the implementation of the checkout button a success is one of the most necessary things in
business.
Velvet Vogue’s check out is made to a user-friendly process that will break down barriers in the
check out process, so users can checkout with bare minimum complexity so that they cannot
be intimidated into not doing a purchase. The success of this test proves that the website's
database management system is storing customer details in order, the data is secure in the
database and customer data is preserved throughout the transaction. Also, it is the
implementation of this feature and shows us that Velvet Vogue works to ensure the highest
refinements in process security during payment and check out. Overall, it was a successful test
which proves that Velvet Vogue’s checkout system is set up in a way to facilitate a user
experience that is for the best to convert visitors into lifelong customers.

190 Thanoj (E127966)

The fifth test case was to test whether users can use the menu to navigate between different
pages of the website. Now all the pages loaded ok, and the test result is successful. An e-
commerce website without a navigation pane allows the user to go directly to different parts of
the website by means of links on the page. When a user clicks on a navigation item, they should
then navigate to a different page without delays or errors. It is important for the users to be able
to browse through the contents of the pane with a smooth, and seamless navigation experience.
Velvet Vogue is designed to facilitate the finding of the needed products or the needed
information, making it an easy task. Thus, this test has succeeded in proving that the website
navigation system is running well and that users can easily move great distances on the pages
without a problem and that the user interface is in order and user friendly.
Additionally, the experience of successful navigation contributes to the increase in user
engagement as he has easy ways to access the vital sections which make users explore more
products and services. Additionally, this feature implies that Velvet Vogue is set on keeping
things as simple and as clean, whilst creating a solid platform to maintain high usability with
retention in mind. Overall, this is a nice test that proves that Velvet Vogue’s navigation system
was made to facilitate browsing for the customer so that they can quickly and effortlessly find
what they are looking for.

3.4 Evaluation of overall success of the website,

The well tested comprehensive test plan showed that this Velvet Vogue website had and
successfully performed all of the critical requirements of any modern e-commerce platform.
The core functionality of the site each test case confirms that it works properly from our point
of view importance, meaning provides a seamless customer journey from end to end. Velvet
Vogue excels in making a quick and easy homepage which is very important for a good first
impression and for user retention. This site provides without any delay to customers in
shopping experience immediately. The key to this is having a fast loading homepage that will
keep your prospective customer interested engaging in the site further and then making the
purchase. It is evident that the website caters to the needs of the customer as the key features
like product search, shopping cart management, and secure checkout have been implemented
successfully.
These features make it easy for people to use and find, select and purchase these products
efficiently. Besides that, one can access the order history as well as to have their personal
favorites products to save while shopping. But these factors are crucial to retain customers.
Ability to track previous purchases, ability to easily reorder the same items from previous
purchase as well as the ability to save rooms for current purchase for future reference
encourages repeat visits and customers returning to make more purchases. The factor that made
it another major success for Velvet Vogue was the website’s responsiveness to mobile. An
increasing variety of users techigar.com/ for all markets xshopia.com/ with handsets shopping
and going out shopping e-commerce websites have to be optimized for various sizes of the
mouse. Velvet Vogue’s mobile optimization also makes sure that customers can buy products
from smartphones and tablets without causing trouble with usability. For all these reasons, this
makes the website accessible to a wider audience, thereby tailoring it to serve a larger audience,
and so the website is able to have a market reach that expands more.

191 Thanoj (E127966)

The other key component within online retail security is something that Velvet Vogue has
addressed particularly well and this includes implementing secure registration, login and means
of payment. The focus here is on protecting data of customers and enhances trust. Velvet Vogue
protects customers by offering secure login methods as well as the encryption of sensitive
payment details. In addition, order confirmation mails sent timely create comfort for customers
in purchasing online since they are assured that their transactions are properly done. It
reinforces the brand’s confidence in data security and transparency and encourages customers
to have trust in the brand. Meanwhile, the reliability of the backend systems managing different
features simultaneously without slowing the website is shown by the overall effectiveness of
the website’s functionality. With the growing of the business, there will be an increase in
processing number of transaction and user activities so a scalable system must be available to
support this growth.
On demonstration that the website is built on a solid, stable foundation that can accommodate
future business growth if the results of high traffic volumes without slowing or failure are
indicative of Velvet Vogue’s ability to manage high traffic volumes without slowing down or
failing. All test cases are successfully executed, thus proving that Velvet Vogue’s website is fit
for both customer engagement and sales conversion. In fact, the website aims at reducing the
friction in the customer journey by making the browsing, selection, and purchase as easy as
possible. For enhanced interactivity and engagement, features like the customer reviews and
product recommendations, which offer the biting of social proof to affect buying determination,
to bring about case of potential customers. These elements also assist in keeping customers, as
it provides personalized shopping experience that encourages customers to visit the store again.
The visual appeal and also how the website is consistent with the company’s brand identity is
also another factor promoting the success of the website. In order to create a trustworthy and
reliable site where customers can purchase fashionable and trendy products, Velvet Vogue
focuses on providing a user friendly and secured design paired with mobile optimization.
Lastly, the Velvet Vogue website has indeed achieved its technical and customer goals. Being
featured with high functionality, the ease of navigation and customer friendly features in
competitive online retail, it’s destined to succeed in coming long. After continuous optimization
along with further introduction of future features, the website becomes even stronger in the
market field and keeps gaining support from both the customer who uses it and the provider of
it.

192 Thanoj (E127966)

3.5 List of Suggested enhancements,
Customer feedbacks,

Enhanced Product Detail ages,

Of the most common pieces of customer feedback, one of them is the desire for more detailed
and informative product pages. Velvet Vogue already gives some of the basic product
descriptions and images, but this could be improved to make it a more immersive experience
and an education shopping experience as well. Take a look for instance at what customers have
asked for such as high-resolution images so that they can zoom in and see the product from
different angles. This becomes crucial on items such as clothes or another accessory that the
client wants to confirm the product quality and texture before purchasing them. Finally, it can
be helpful to users see videos of products being used or even videos with styling tips on how
to use the product in their lifestyle. In addition to visuals, detailed product description is
extremely important for example for apparel where fabric types, sizing chart, and care
instructions are all important to make an informed purchase. To improve trust in the quality
and fit of the product, customer reviews could be incorporated with photos of the product in
real world scenario. Moreover, gaining the common pain point of sizing discrepancy, having a
size guide with measurements for each individual product instead of one generic size chart, can
help customers trust their purchase. These changes improve customer confidence in Velvet
Vogue’s purchases and decrease the possibility of returns and exchanges, and ultimately,
improve the shopper experience.

Faster checkout process,

For reducing cart abandonment rates, it is very important to have a seamless and quick checkout
process. The current checkout process provides some feedback from customers that the process
itself could be simplified. Like many other merchants, there are several complaints, namely the
multi-step nature of the checkout where there are multiple form fields and pages to navigate
through. To overcome this, Velvet Vogue can add a one-page checkout system, where our
customers are directing all their necessary details can be inputted in a single streamlined form.
This would remove any extra steps and shorten the process and give it an overall more
‘efficient’ feel to it. It is also a good idea to provide a guest checkout option for customers to
be able to make a purchase without having to create an account at first. Customers returning
make it easy by providing an auto fill feature, which will fill in shipping, and payment details
based on previous orders to reduce the time spent entering information. Making it possible to
integrate mobile wallet functionalities such as Apple Pay and Google Pay within the checkout
process could hasten the process for mobile users. Velvet Vogue could make the process even
more efficient by saving user payment information securely so that the user could use it in
future. Optimizing the checkout process will not only help Velvet Vogue increase its conversion
rates but also leads to improved overall customer satisfaction as the final step of the shopping
journey is reduced to friction.

193 Thanoj (E127966)

More payment options,
Based on the customer feedback, Velvet Vogue could do a lot to expending payment options.
While the site has credit and debit card payment capability at present, more and more users
have been interested in alternative and more flexible payment arrangement. If we had to rank
the most requested feature for our app, mobile wallet support, with Apple Pay and Google Pay
being highly popular amongst customers, would be in one of the top 3. Also, taking up services
of Buy Now, Pay Later (BNPL) like Afterpay or It could be a game changer specially for
customers who love to pay for things in instalments with no interest. This would enable high
ticket items to be more accessible to customers and have plenty of flexibility to purchase their
items in instalments. Aside from the traditional payment methods, PayPal is also integrated
which many users rely on for its security and comfort. Additionally, infections, like Bitcoin or
Ethereum, would deliver a wider spring of tech elegant and cryptocurrency maniacal person
customers. It would advertise the forward thinking side of the brand in a more diverse, broader
audience and this would appeal to Velvet Vogue. More payment options will be offered by
Velvet Vogue because it will facilitate more flexibility for their customers making it easy for
them to purchase what they need and then their conversion rates will rise and their customers
will be more loyal.

Improved mobile experience,

Based on the customer feedback, Velvet Vogue could do a lot to expending payment options.
While the site has credit and debit card payment capability at present, more and more users
have been interested in alternative and more flexible payment arrangement. If we had to rank
the most requested feature for our app, mobile wallet support, with Apple Pay and Google Pay
being highly popular amongst customers, would be in one of the top 3. Also, taking up services
of Buy Now, Pay Later (BNPL) like Afterpay or It could be a game changer specially for
customers who love to pay for things in instalments with no interest. This would enable high
ticket items to be more accessible to customers and have plenty of flexibility to purchase their
items in instalments. Aside from the traditional payment methods, PayPal is also integrated
which many users rely on for its security and comfort. It would further benefit by adding
cryptocurrency payment options like the Bitcoin or Ethereum since there is already an
emerging sector of tech savvy and cryptocurrency mad customers. It would advertise the
forward-thinking side of the brand in a more diverse, broader audience and this would appeal
to Velvet Vogue. More payment options will be offered by Velvet Vogue because it will
facilitate more flexibility for their customers making it easy for them to purchase what they
need and then their conversion rates will rise and their customers will be more loyal.

194 Thanoj (E127966)

3.6 Improvements found on test results,

Enhanced page load speed,

The test cases showed that some of the pages on Velvet Vogue are getting slower, especially
when the product pages have high resolution images and large product catalog on them. High
bounce rates signifies that folk are simply not purchasing due to a slow website. To resolve this
matter, Velvet Vogue should consider working on optimization images and convert them to
easier formats such as WebP or keep compression without losing quality. Also, considering the
size of JS and CSS files and lazy loading for images, would speed things up even further for
mobiles with the expectation of instant loading. Also, it would improve page load time through
caching the content nearer the user location by implementing a Content Delivery Network
(CDN). The improvement will directly improve the page load speed and thus the page load
speed is helped by the user retention and the probability of the potential customers to abandon
the site due to the frustration over the delays. A fast-loading site will give a much smoother
shopping experience allowing users to stay there longer and hence have higher conversion
rates.

Improved cart and checkout process,

For the test cases of the shopping cart and checkout system, some users experienced problems
such as items disappearing from the cart, or facing errors while trying to make purchase. It is
important that customers can order without any friction. Velvet Vogue must address these
problems by fine tuning the cart management system to take care of the fact that when the user
selects items they should stay in the cart until the user completes the checkout process. Session
based storage would be accomplished that way from cart contents even if users navigate away
from checkout page. Furthermore, checkout flow must be reviewed as well to understand the
points of friction for users. Situations can be included that include decreasing the number of
actions needed to complete an order, as well as passing a guest checkout option for users who
don’t want to create an account. Reducing cart abandonment, increasing sales and improving
the user experience by making the purchasing process as simple and as effective as possible
requires dealing with these cart and checkout issues.

Mobile responsiveness and interface optimization,

During the mobile testing phases, we reviewed results which were reported by some users on
the mobile version of Velvet Vogue because some of the elements were not responsive or they
were difficult to interact with especially with smaller devices. As a growing trend of mobile
shopping is taking place, it is critical that Velvet Vogue’s website is in tip top shape on all
devices. Velvet Vogue should be sure to make dialogue elements like buttons and form fields
small and spaced out well enough for easy touch screen navigation. In addition, the website’s

195 Thanoj (E127966)

design should adapt perfectly to all devices, as text, images and buttons are easy to read and to
click on whatever device is used. For instance, changing the size of product images to better fit
mobile viewing and optimize the visuals would bring better experience to the user. Running
thorough testing in different mobile devices and screen sizes will help identifying and resolving
layout inconsistencies. Velvet Vogue would not only have a chance to increase sales, and
increase customer satisfaction at the same time, by investing in mobile optimization, as
customers would be able to shop and buy easily on-the-go.

Enhanced search functionality,

Results from the test indicated that users had trouble finding products in the search feature, in
particular, when using particular keywords or filters. A powerful search function will assist
customers in quickly finding the products that they are looking for, bringing in value in terms
of delivering better shopping efficiency. Velvet Vogue can enhance its search functionality
through a more sophisticated search algorithm which takes into consideration regular
misspellings, synonyms and different variations in the name of a product to display the most
relevant results. Secondly, a better filtering option such as size, color, pricing, and material
would help the users to narrow down the search results to find what they exactly need. Another
enhancement we can add is to introduce an auto suggest or real time search suggestion that
automatically appears as the users are typing to make it to the appropriate product before they
finish typing their query. Not only would this save time, it would also help increase prospective
customers’ chance of coming across and buying the right products. Velvet Vogue can enhance
the search functionality to help customers find products easily and thus provide a better
customer experience and increase the conversion rates.

196 Thanoj (E127966)

References
Anon., 2023. bocasay. [Online]
Available at: https://www.bocasay.com/

Anon., 2023. Geekforgeeks. [Online]

Available at: https://www.geeksforgeeks.org/web-technology/

Anon., 2024. cloudflare. [Online]

Available at: https://www.cloudflare.com/en-gb/learning/dns/dns-server-types/

Anon., 2024. https://www.cloudflare.com/. [Online]

Available at: https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/

Anon., 2024. tsttechnology. [Online]

Available at: https://tsttechnology.io/blog/latest-web-development-technologies

Anon., 2024. Webfx. [Online]

Available at: https://www.webfx.com/web-development/glossary/what-is-web-development/

Anon., 2024. Wix. [Online]

Available at: https://chatgpt.com/c/677a939e-1584-8004-b2db-1924256a02e7

Ben Lutkevich, 2023. techtarget. [Online]

Available at: https://www.techtarget.com/whatis/definition/search-engine

Denis, 2021. blog.inetsystems. [Online]

Available at: https://blog.inetsystems.com/technology/how-are-domain-names-organized-and-
managed

Rouse, M., 2023. techopedia. [Online]

Available at: https://www.techopedia.com/definition/25705/communication-protocol

197 Thanoj (E127966)

198 Thanoj (E127966)