E-commerce Website Project: Design and Development of Webpages

This project focuses on the development of an e-commerce website for Sports Pro, a company selling sports equipment. The project starts with an introduction to e-commerce and the business need for an online presence. It covers the case study of Sports Pro and the objectives of the website, including increasing sales and customer retention. The project outlines the planning and design of the website, including a flowchart for the shopping cart and the roles of HTML, CSS, JavaScript, and Bootstrap. It discusses the importance of planning, goal setting, layout design, content creation, coding, and testing. The report further explores the role of database systems like MySQL and the use of multimedia components such as videos, audio, and images to enhance the user experience. The project emphasizes the need for dynamic website development and the application of agile methodologies like DSDM. The aim is to create a functional and user-friendly e-commerce platform that meets the needs of both the company and its customers.

E- COMMERCE
(COMPUTING)

Table of Contents
INTRODUCTION ..........................................................................................................................1
TASK 1 ...........................................................................................................................................1
Case study ...................................................................................................................................1
TASK 2 ...........................................................................................................................................2
Plan of working of website .........................................................................................................2
Flowchart of shopping cart .........................................................................................................4
Role of HTML, CSS, JavaScript and bootstrap ..........................................................................4
TASK 3............................................................................................................................................9
........................................................................................................................................................13
........................................................................................................................................................14
........................................................................................................................................................15
........................................................................................................................................................16
........................................................................................................................................................16
........................................................................................................................................................17
TASK 4 .........................................................................................................................................17
TASK 5 .........................................................................................................................................19
CONCLUSION .............................................................................................................................20
REFERENCES..............................................................................................................................21

INTRODUCTION
E-commerce can be defined as electronic commerce and internet commerce and it mainly
uses to buying and selling the goods and services with help of internet. Thus, it has covered the
range of different kind of businesses from consumer based retail sites to exchange good and
services between corporations (Stefani, 2018).. Furthermore, it refers as to have business
transaction that occurs wither as business to business, business to customer and customer to
customer or consumer to business. It is website that aids to offer wide range of opportunities in
order to enhance product ranges and to generate more sales with optimised and well developed
website in order to achieve these goals. The one of the main beneficial aspect about this is that it
does not require any physical space and no geographical limitation in order to reach customers.
The present report is based on business activities of sports pro company, it is firm that
offers variety of sports related tools and equipments. It is established at varied places in UK, in
order to enhance the sales and sustain the customer the quoted firm thinks to develop their own
website.
Furthermore, report will cover the various topic as to define the objective of case study
that needs design and development, to take initiatives for plan and design four to seven webpages
to manage the process of shopping cart, to define the executions of four to seven web pages for
shopping cart and to explain that how implementation aids to meet the requirements of e-
commerce company and its users.
TASK 1
Case study
Sportspro is a company that provides a variety of sports related tools and equipments to
people. It offers The Company is having many physical stores in different streets of UK. Also, it
is having a moderate customer base and wants to increase it. But in recent time, technology has
transformed the way of doing business. Now, products and services are been provided through
website. The online presence of companies has diverted minds of people. So, it has resulted in
decrease in sales of Sportspro. Thus, it is necessary that company should also develop their own
website in order to sustain for long term. Website will support in retaining customers and
providing ease in process of delivering sports items. Furthermore, it will be easy to maintain and
store data of orders and customers as well.
1

Dynamic development refers to developing software through which products and services
are delivered. The DSDM agile project is iterative framework which involves continuous user
involvement. This method is basically applied by companies to develop e commerce website.
There are various roles of website in e commerce which are as follows :-
Generating leads- Website helps in creating brand awareness in the market. It provides access
to customers 24/7. So, it becomes easy to find out info or details of product or services.
Facilitate transaction- website helps in taking orders from customers and selling goods. It
clearly state which customer have ordered what products. This ease in delivering it directly to
specified address.
Support – Website is a gateway for communicating with customers. It helps in maintaining
CRM and building relationship with them by providing customer support services.
Saving cost – It is the most significant role of website. By selling goods online company saves a
lot of money. Moreover, by marketing it online on various social media platforms it helps in
attracting large number of people.
Sportspro should develop website that will help them to generate sales easily and
compete in the market. Also, wit rise in sales customer base will increase. By developing
shopping cart, company will get a framework through which orders are delivered properly.
However, shopping cart will also provide details of customer. Thus, with this Sportspro can
develop long time relation with customers and retain them.
TASK 2
Plan of working of website
2

3

Flowchart of shopping cart
Role of HTML, CSS, JavaScript and bootstrap
A website can be created by using different types of programming languages. It depends
on developer willingness that which language is used by him or her. Also, each language has its
own role in development of website. Basically, there are some common types of programming
language that are CSS, java, etc. there role is defined below :-
 HTML
 CSS Bootstrap
Plan and design of webpages for the process of managing shopping carts
Planning is important concept in the process of design e-commerce website which
requires for understanding the need of people. Noonday's, it is impossible to do business without
website because it provides the brief idea about the company and its clients (Blazquez,
4

Domenech and Pont, 2018). There are lot of thing done by coding. There are many steps need to
follow the proper procedures and making plan create dynamic website.
 Research and goal setting- It is an essential to set up the specific goals and objective
before executions. It is really helped the e-commerce website to provide the direction. In
this way, it is beneficial for enterprise to achieve objectives. Planning and goal setting
process could take 1 week to complete the process.
 Planning- This process is involves of creating a sitemap and wireframe. It also
determines the resources to handle the operations and functions of site. It allows the
designer to get the outline the layout and web page designs. In this way, user should be
navigated a site in properly (Caia and et.al., 2018). The plan should be started with design
and their structure because interactive design help for increasing the popularity in global
world.
 Designing the layout- The layout design is based on the programming language and
style that must use for setting the characters, image or colours. It is a process that can
take about 3 weeks from start to finish. It depends on the experience and spent time on
the project. It considered as a logo, colours and anything that encourage the audience to
interact with the website. It should help the people to access the details of product at any
place by using electronic devices.
 Writing the content- The interactive content of website is important for the success of
enterprise. This step may happening during 6-8 weeks. The website content is going to
help a visitor to easily determine the information through site (Cyr and et.al., 2018). It is
the most useful for consumer to access the information regarding the product price,
quality, quantity etc. It must be needed to use interactive content so that many people
attract towards the services.
 Coding- It is the core component of web page design because it should help to maintain
their design in effective manner. The online business set up framework that suitable for
design patterns. PHP is hypertext preprocessor scripting language which mainly use in
the website design because it is easy to simple and secure to control the unauthorised
access. During coding, it is considered some factors such as CMS plug-in, additional
tools and SEO that might be using to analyse the overall functionality of website. Coding
5

is a part to control the display forms and ensure that they are working in properly. Before
launching website, it is needed to check once but check it over in multiple times.
 Testing- It is a crucial part of website development to test the entire functionality of site
through testing. There are different type of testing tools available in marketplace. It easily
identifies the bug, error in the task executions. It is needed to test the website in proper
manner. It makes sure to check all the content, forms and their working. It might be
essential ways the user can get touch by choose sign up options. At any time, it provides
the messages and alerts. Maintaining- This is last steps when the e-commerce website successfully launched on
the internet. It should be required to maintain up to date details of product. Sometimes,
Maintaining an e-commerce website is hard but more efforts to put maintenance.
Developers are continuously check the errors and bugs because this cause the business
process.
Discuss the role of website development and programming language such as HTML, Java Script,
Bootstrap and CSS
Website designer has responsibilities to create an effective site and target the potential
audience those who are interacted towards the online platform. Website development service
always help for business to increase the product knowledge and maintain the communication
between the clients. They are selling their product to generate leads (Huang, 2018).
HTML is hypertext markup language which uses for website design because it is a type
of server side scripting language to maintain the functionality of web pages. It provides the
support whenever one is stuck with bugs, errors and problem. It is the best programming
language to develop a dynamic site.
CSS is independent of HTML that can be used with any type of XML based language. It
makes easier to maintain the site through style sheet across the multiple pages.
Java script is a programming language which used in the development of web pages. It is
mainly used along with the HTML to support the dynamic content and execute different
functions of web pages.
Boot strap is a free and open source front end frame work that contain both CSS and
HTML based design templates for design an interactive form, buttons and navigation etc. it gives
the support to the Java scripts plug-in.
6

Discuss the role of Database MYSQL
MYSQL is a powerful source data server which important for organization to manage the
relationship between the large data set (Koutrika, 2018). It is capability to handle the large
concurrent database connection when it combines together with other programming language.
Database is used the Structural query language that can create, update and delete the data in the
database table. It is an approach to store all type of information in it. At any time, user can access
the information of product and also solve the query of consumers.
Multimedia components-
Multimedia components is generally uses a combination of various content forms such
images, text, video, animations etc. In this way, e-commerce website is also contains different
type of component to design in attractive ways. A website design is important part of business to
sell their product through online medium (Oyibo and et.al., 2018). It needs to change the
approach according to market values. It makes sure that web pages load in quickly which can be
chosen the multimedia element and also modify if it necessary. Consumer demand has been
changed due to market trends and value. These type of multimedia element help to represent the
information in dynamic or interactive ways. There are different type of multimedia components
apply in the website development.
 Video-
This element is providing a powerful concept that impact on the multimedia program. It is
continuously breaks it up to the frames whereas animation video started on website related the
cloths (Stefani, 2018). It contains the structure of files where it stored in the pieces on website. It
is the best approach to gain the popularity in market because video clip can edited and deleted in
proper manner.
 Audio-
It is another different type of multimedia component that can apply on the website to provide the
information regarding item to the customers. Audio file is easily compressed and download. The
results in the good quality of audio files.
 Images-
It simply representing the graphical interchange format which is typically used the animations
(Stefani, 2018). Sometimes, it also represented the single image of products. Image is
7

compressed which makes it so that it does not lose the quality. It can store the colour's depth but
more space than GIFs.
Layout design of cart
8

TASK 3
9

10

11

12

13

14

15

16

TASK 4
In a website there are different types of webpage like product, shopping cart, home, contact,
etc. which user can access. The number of pages depends on type and nature of website. For a
company it is very necessary to improve the functionality of website so that it is easy for user to
access it. However, shopping cart plays a vital role in website. It is because at last company have
to deal with customers in shopping cart. It contains entire detail about product chosen by
customer, its price, details, etc. here, customer can see what items is selected, its quantity, etc.
thus, improvements must be made in shopping cart. Sportspro can follow several
recommendations to improve it. They are as follows –
Detailed product summary – the cart must show all details of product in simplified way. This
will allow visitors to fast look and check out. Furthermore, by including precise info about each
17

item and in segregated way. This method can be entirely modified which will improve layout of
entire shopping cart page.
Clear and user friendly- the shopping cart must be clear so that user easily understand all things
included in it. In this design of overall page can be modified. Also, the colour and theme of cart
should be elegantly designed. Only the brief info and buttons can be inserted.
Payment options- there should be various payment options which enables customer to choose
easily. Thus, it should not be complex and higher security pattern must be upgraded.
Clear information hierarchy – the hierarchy of info should be changed. It must be designed
according to user perception. Moreover, the call to action colour can be changed which helps in
distinguishing it.
Security- Cost saving is one of the crucial task that is very attractive aspect of business owners
to join the online market. In order to enhance the security, each customer must have given
specific password to log into their shopping cart. Furthermore, maintenance of high level
security system in one of the integral feature that keeps customer safe. Thus, complex password
must be created at time of signing up information of the customers.
Trust seals and reassuring elements- From the recent survey, it has encountered that it is very
crucial to gain the customer trust towards the website. In order to enhance it, the website must
have five feedback pages to customer so that they can rate and share their opinion towards
website.
Minimise the hassle in the check out process- It is very essential to keep the business
transaction simplified. Thus, uncomplicated online transaction aids to attract the customers. At
the time when customers shop around, it must be clearly and easily accessible in every page. The
webpage must be created in easier manner to fill out the shipping information and it not to be
reflected twice to fill out the shipping information (7 Ways to Improve the Online Shopping
Experience, 2019.).
Improve customer experience- To improve the services, it is essential to provide the good
customer support and to have better interaction. Thus, delivery date related services must be
improvised, the customer must have each information about the tracking of order so that they can
find product availability in ease manner. Thus, reviews about the product must be given because
potential customers usually goes for the view about the proper in order to be assure about the
18

quality of commodities. This is effective way that can influence the customers to buy the product
and divers their attention.
Consider live chat- To enhance the sales and profitability of the enterprise, it is very crucial to
provide better customer experience. By addition of live chat feature with customers aids to
provide in-store experience to customers. Thus, live chat function can assure that, if customer is
having any issue and queries about the commodities then they can clear it at the time of
purchasing. This service will also help to have reduction in service of return of products from
customers due to concern about the quality, size and colour.
Turn social proof into trust- The website must allow online shopper to get engaged with the e-
commerce site and aids to visualise that how to take initiatives in order to incorporate the product
into their daily lives with the use of social proofs. There are number of the platforms that can
provide this kind of services that is Instagram, YouTube and Facebook facilities must have given
the brand the ability to have visual stories from the customer about their commodities. In
addition to it, visual marketing's software Such as Pixel must allow to marketers to display the
information on the brand sites. This is one of the effective term, that aids to build the customers
and also helps to have long-term sustainability of webpage in the world of e-commerce.
TASK 5
The interface design of main pages can be changed to attract more people and allowing user
to easily access it. For this there are many ways through which designed can be improved. Here,
different multimedia can be used which are described below :-
Social media – this is most common and popular multimedia tool which can be used to improve
design of web page. In this the website can be integrated with various social media platforms that
will help in promoting as well. Through this, the logo of sites such as Instagram, Facebook, etc.
can be inserted into webpage. This will help in making website attractive. Furthermore, by
inserting images of certain products it will change overall layout of page. In addition to it, by
displaying ads on website will keep interest of people on it.
Video – This is another thing that can be inserted in website. Here, videos of different products
can be played. It will help in maintaining interest of people. They will also get an insight about
overall product look from various angles. Alongside it, by playing video in 3- D and 2- D. In
addition to it, other promotional videos can also be played.
19

Animation – It is another creativity that can be added in website. In this 3- D animations can be
played which will attract people. By playing animated ads products image can be shown again
and again.
Images – the images of some athletes, actors, etc. can also be inserted in website. This gives an
overview about how each products looks. In this image of different products can be displayed or
shown again and again.
Apart from all these, many other options are available like adding feedback form or pages
in which reviews of other people are written. Thus, user can see what other people have
commented about product. In contact page a call button can be inserted through which customer
can call and inquire about anything. Besides this, phone number can also be provided which will
help company to maintain CRM of customers. Recently, a live chat option feature is popular
among website. So, it can be inserted as well in Sportspro website. This will allow user to chat
with a person or robot to enquire about anything. They can leave their message or number
regarding anything. So, it will also be a way of communication. Therefore, by adding different
types of multimedia components will be beneficial in improving the design and layout of
interface. This will make it easy for front end user to access website. It will attract more people
to visits website and buy goods and services.
CONCLUSION
Hereby, it can be concluded that E- commerce is the system that is organised to exchange
good and services with the use of online medium. Thus, the main purpose is to offer the right
goods to the right person at right time and at accurate place. It is mainly used by the consumers
and business in order to exchange good and services via facility as internet. Furthermore, E-
commerce business is inclusive of entire online process or developing, marketing, selling,
servicing, delivering and paying for product and services. With help of it, business can able to
reach at the tremendous growth. Hence, it can be stated that it provides the whole range of
opportunities from marketing to enhance product ranges to generate better and effective sales
with establishing the well developed and innovative website.
Furthermore, report has covered the various topics as to define the purpose of case study
that needs design and development in order to generate sales easily and compete in the market by
providing shopping card facility, the initiatives for plan and design four to seven webpages to
manage the process of shopping cart so it can attract the customer in ease manner. Lastly,
20

remedial action has been suggested after post implementation to provide better way to improve
the design of the system with some unique approaches.
REFERENCES
Books and Journals
Blazquez, D., Domenech, J. and Pont, A., 2018. Monitoring e-commerce adoption from online
data. Knowledge and Information Systems. pp.1-19.
Cai, Q. and et.al., 2018, April. Reinforcement mechanism design for fraudulent behaviour in e-
commerce. In Thirty-Second AAAI Conference on Artificial Intelligence.
Cyr, D. and et.al., 2018. Using the elaboration likelihood model to examine online persuasion
through website design. Information & Management. 55(7). pp.807-821.
Huang, A., 2018. A risk detection system of e-commerce: researches based on soft information
extracted by affective computing web texts. Electronic Commerce Research. 18(1).
pp.143-157.
Koutrika, G., 2018, May. Modern Recommender Systems: from Computing Matrices to
Thinking with Neurons. In Proceedings of the 2018 International Conference on
Management of Data (pp. 1651-1654). ACM.
Oyibo, K. and et.al., 2018, December. Influence of internet experience on the judgment of
mobile web design: a case study of West Africa. In Proceedings of the Second African
Conference for Human Computer Interaction: Thriving Communities (p. 15). ACM.
Stefani, A., 2018. On the Design of Effective E-Commerce Applications: An ISO-Based
Lifecycle Model. Journal of Computer and Communications. 6(05). p.15.
Online
Role of website. 2011. [Online] Available through :
<https://www.onlineinnovations.com/article/the-role-of-a-website-in-a-business>
7 Ways to Improve the Online Shopping Experience. 2019. [Online] Available through :
<https://www.pixlee.com/blog/7-ways-to-improve-the-online-shopping-experience/>.
21