E-commerce Website
Development
4 Lecture Topics
o E-commerce website development is a critical area of
study that focuses on building and deploying an online
platform that facilitates the buying and selling of goods
and services.1- SaaS platform
o SaaS stands for "software as a service" and with this option, company rent software. o The software remains the exclusive property of the company that develops it (the
SaaS provider) and company can make use of it for a certain price, usually paid
monthly. Shopify
o Shopify powers over 2,921,565 websites around the globe. o Shopify has 21% of the ecommerce market share. A popular choice among many SMBs, Shopify allows clients to build
effective online stores and scale their business. Created with a user-
friendly and intuitive interface, as well as tons of templates, this
platform offers flexible shipping rates, automatic taxes, and over 100
payment gateways. Shopify enables social media integrations, is
packed with built-in SEO features, and is fully hosted. Best for: Small businesses looking for an all-in-one
ecommerce solution
E-commerce Website Development
What is ecommerce software ? 1- SaaS platform
Magento
o To date, Magento has powered over 772,000 websites around the world. o There are over 5,900 extensions that integrate with Magento. Magento is a highly flexible ecommerce solution used by medium sized businesses ready to scale. This platform offers robust features
which allow retailers to customize all aspects of their online store including custom templates, extensions, and modules. If clients
need to further extend the functionality of their Magento store, they can always use add-ons to turn the vision of their online store into
a reality. Considered by many a complex ecommerce platform, Magento supports clients by maintaining an operative community of developers
and experts on the Magento ecosystem who are ready to help newbies with the maintenance of their online store. Best for: Brands looking for a highly customizable ecommerce solution
E-commerce Website Development
What is ecommerce software ? 2- Open source software
o These platforms let you design unique and beautiful websites with all core eCommerce functionalities
already pre-set in them. Uses a source code that is freely available to everyone. o Some well-known open source platforms are WordPress, osCommerce, WooCommerce. WooCommerce
o WooCommerce powers over 3,876,748 live websites. o WooCommerce is one of the biggest open-source ecommerce platforms. Specifically designed to integrate with
WordPress, WooCommerce has plenty of templates that can help you build a unique online store. You'll get all
essential features including unlimited products, unrestricted customization, order management, and free shipping. Best for: Small businesses that have a website powered by WordPress. E-commerce Website Development
What is ecommerce software ? 3- Custom Solutions
o With a custom solution, an online store is specifically developed by a web design
company, freelancers, or your own developers. You fully control the features and
the appearance of the online store, at the front-end and the admin panel (where
you manage your online store). Consequently, there are few limitations with custom
solutions. o The disadvantage to custom solutions is the price tag: they are very expensive. o Development can cost tens of thousands of $ and an hourly rate is charged for
future developments and extensions. Usually clients that choose custom-made
solutions are large online stores like Zalando and Amazon. E-commerce Website Development
o The process of creating an e-commerce presence, by developing an idea, understanding
how the idea can potentially make money, defining the target audience and the
marketplace and determining what the content looks like. o An important part of this effort involves performing a SWOT analysis, developing a
presence map, and creating a timeline. Understanding the Development Process for E-commerce Websites
Five major steps:
o Systems analysis/planning
o Systems design
o Building the system
o Testing
o Implementation
E-commerce Website Development
The Systems Development Life Cycle
1-System Analysis/Planning
Planning and Requirement Analysis:
o Identifying the target audience, products/services offered, and business
objectives. o Defining key website features (e.g., product catalog, shopping cart, user
accounts, payment gateway). o Competitor analysis and understanding market trends. Business objectives:
o List of capabilities you want your site to have
System functionalities:
o List of information system capabilities needed to achieve business objectives
Information requirements:
o Information elements that system must produce in order to achieve business objectives
E-commerce Website Development
The Systems Development Life Cycle
1-System Analysis/Planning
E-commerce Website Development
The Systems Development Life Cycle 2- Systems Design
Hardware and Software Platforms
System design specification:
o Description of main components of a system and
their relationship to one another
Two components of system design:
Logical design
o Data flow diagrams, processing functions, databases
Physical design
o Specifies actual physical, software components,
models, and so on
o Design:
o Creating wireframes and mockups for the website. o Focusing on user experience (UX) and user interface (UI) design. o Deciding on branding elements such as logos, color schemes, and
typography. E-commerce Website Development
The Systems Development Life Cycle 2- Systems Design
Build/Host Your Own vs. Outsourcing
o Outsourcing: Hiring vendors to provide services involved in building site
o Build own vs. outsourcing:
o Build your own requires team with diverse skill set; choice of software tools; both
risks and possible benefits
o Host own vs. outsourcing
o Hosting: Hosting company responsible for ensuring site is accessible 24/7, for
monthly fee
o Co-location: Firm purchases or leases Web server (with control over its
operation), but server is located at vendor's facility
3- Building the System
E-commerce Website Development
The Systems Development Life Cycle o Development:
o Building the website using front-end and back-end technologies. o Implementing core features like product display, user accounts, and checkout process. Front-End Development for E-commerce Websites
The front-end (or client-side) is what users interact with directly. A good front-end is essential for creating a positive user experience, which
ultimately drives conversions and sales. a. HTML (HyperText Markup Language):
o Role of HTML:
o HTML forms the skeleton of the e-commerce website. It structures the content, such as product categories, product pages,
shopping carts, and checkouts. o Understanding how to create clean, semantic HTML helps search engines (SEO) and accessibility tools understand the content. b. CSS (Cascading Style Sheets):
o Role of CSS:
o CSS styles the content and is responsible for the website's appearance, layout, and design. This ensures that the website is visually
appealing and consistent with the brand. o Responsive Design:
o E-commerce websites must be responsive, meaning they should work on devices of all screen sizes (desktops, tablets, and
smartphones). CSS frameworks like Bootstrap can be used to speed up the development of responsive layouts. C. JavaScript:
o Role of JavaScript:
o JavaScript brings interactivity to the e-commerce website. It allows for dynamic features like product filtering, sorting, and real-time
price updates in the cart. 3- Building the System
E-commerce Website Development
The Systems Development Life Cycle o Front end
The portion of an e-seller's business
processes through which customers
interact, including the seller's portal,
electronic catalogs, a shopping cart, a
search engine, and a payment
gateway
o Back end
The activities that support online order
fulfillment, inventory management,
purchasing from suppliers, payment
processing, packaging, and delivery
3- Building the System
E-commerce Website Development
The Systems Development Life Cycle Back-End Development for E-commerce Websites
The back-end (or server-side) handles data processing, business logic, database management,
and server interactions. A well-designed back-end is crucial for maintaining the core
functionality of an e-commerce platform. a. Server-side Programming Languages:
The back-end is where the logic for processing orders, managing products, handling user sessions,
and processing payments happens. o Popular Back-end Languages:
o PHP: Commonly used in e-commerce platforms like Magento and WooCommerce. o Node.js: A JavaScript runtime that enables server-side scripting, often used for building real-
time, scalable e-commerce applications. o Python: Popular for back-end frameworks like Django and Flask, often used in custom e-
commerce projects. o Ruby on Rails: A robust web application framework often used for building dynamic and
scalable web applications. 3- Building the System
E-commerce Website Development
The Systems Development Life Cycle b. Database Management:
The back-end communicates with the database to store and retrieve data related to products, users, orders, and
transactions. o Relational Databases:
o MySQL, PostgreSQL, and SQL Server are commonly used relational databases for storing structured data in e-
commerce platforms. o E-commerce websites rely on efficient querying to manage product inventories, customer information, and order
processing. o NoSQL Databases:
o MongoDB, CouchDB, or Firebase are useful for handling large volumes of unstructured data, especially for
dynamic and flexible e-commerce systems. c. Product Management System:
o Managing products is the core of any e-commerce platform. The back-end handles the creation, updating,
and deletion of products in the database, along with product attributes (e.g., size, color, price). o Features of Product Management:
o Adding new products, setting stock levels, and organizing products into categories. Managing product images, descriptions, pricing, and availability
4- Testing
E-commerce Website Development
The Systems Development Life Cycle Testing for functionality, usability, performance, security, and cross-browser compatibility
Testing types
o Unit testing: involves testing the site's program modules one at a time. o System testing: involves testing the site as a whole, in the same way a typical user
would when using the site
o Acceptance testing: requires that the firm's key personal and managers in marketing,
production, sales, and general management actually use the system as installed on a
test internet. o A/B testing (split testing): this form of testing involves showing two versions (A and B)
of a web page to different users to see which one performs better. o Multivariate testing: involves identifying specific elements, or variables, on a web
page, such as a headline, image, button, and text. E-commerce Website Development
5- Deployment and Maintenance
The Systems Development Life Cycle Launching the website and continuously monitoring and updating
the system to ensure smooth operations
E-commerce Website Development
Core Features of an E-commerce Website
A functional e-commerce website must have certain features in place to enable online transactions. a. Product Catalog:
o Dynamic and searchable catalog of products with filtering options (by category, price, brand,
etc.). o Each product page should have a detailed description, multiple images, pricing, customer
reviews, and availability. b. Shopping Cart:
o Allows users to add and review products before proceeding to checkout. o Includes features such as quantity adjustment, applying discount codes, and calculating
shipping costs. c. User Accounts and Profiles:
o User registration and login systems allow customers to save addresses, view order history, and
manage personal information. o Features like wishlists and personalized recommendations based on previous purchases can
enhance user experience. E-commerce Website Development
Core Features of an E-commerce Website
A functional e-commerce website must have certain features in place to
enable online transactions. d. Payment Gateway Integration:
o Integrating payment processors like Stripe, PayPal, or Square is crucial
for securely handling transactions. o E-commerce websites must follow security standards like PCI-DSS
(Payment Card Industry Data Security Standard) to ensure secure
processing of payment information. e. Checkout Process:
o The checkout process should be streamlined, with minimal steps
and options like guest checkout. o Implement features like auto-fill forms, support for multiple payment
methods, and order confirmation emails. E-commerce Website
Development
4 Lecture Topics
o E-commerce design and user experience (UX) are
fundamental components that determine the success of
online retail platforms. o A well-designed e-commerce website enhances user
satisfaction, builds trust, and ultimately drives conversions
and sales. o By focusing on principles of effective design, intuitive
navigation, user-friendly product pages, streamlined checkout
processes, and continuous improvement through testing
and feedback, businesses can create engaging online
shopping experiences that meet the needs of diverse users
E-commerce Design and User Experience (UX)
2. Principles of Effective E-commerce Design
To create an effective e-commerce website, designers should follow several key principles
that enhance usability and overall user satisfaction:
a. Simplicity and Clarity:
o Minimalist Design: Use a clean and simple layout that avoids clutter. A minimalist
design helps users focus on the products and important calls to action (CTAs). o Clear Navigation: Implement a logical and straightforward navigation structure that
allows users to easily find what they're looking for. Use clear labels for categories and
subcategories. b. Visual Hierarchy:
o Emphasize Key Elements: Use size, color, contrast, and spacing to draw attention
to important elements like product images, prices, and CTAs (e.g., "Add to Cart" buttons).software agent can be used in e-commerce to support
tasks such as comparing prices, monitoring activities and working as an
assistant .(consist of a product database, directory & search
capabilities & a presentation function). the backbone
of most e-selling sites. E-Marketspace
Merchant Solutions: Electronic Catalogs, Search Engines,
and Shopping Carts
Classification of electronic catalogs
1- The dynamics of the information presentation:
o Static catalogs; information is presented in text & static picture
o dynamic catalogs; information is presented in motion pictures. 2- The degree of customization
o standard catalog; merchants offer the same catalog to any
customer. o customized catalog; content, pricing, & display are tailored to
the characteristics of specific customers. 3- Integration with business processes
E-Marketspace
Merchant Solutions: Electronic Catalogs, Search Engines,
and Shopping Carts
2. Search engine
A computer program that can access a database of Internet
resources, search for specific information or keywords, and
report the results (e.g., requests for product information or
pricing).Principles of Effective E-commerce Design
To create an effective e-commerce website, designers should follow several key principles that
enhance usability and overall user satisfaction:
c. Responsive Design:
o Mobile Optimization: Ensure the website is fully responsive and optimized for various
devices and screen sizes, including smartphones, tablets, and desktops.(amazon.com, choicemall.com, shop4.vcomshop.com,
spree.com) Public portals (yahoo.com, msn.com)
- Specialized e-stores/e-malls: These sell only one or a few
types of products.(1800flowers.com, fashionmall.com)
- Regional versus global e-stores: some stores , such as e-
grocers or sellers of heavy furniture, serve customers that
live nearby.Lo-fi Wireframe
E-commerce Design and User Experience (UX)
E-commerce Design and User Experience (UX)
E-commerce Design and User Experience (UX)
E-commerce Website
Development
E-Marketspace: DIGITAL MARKETS
E-Marketplaces: is a virtual marketplace in
which sellers and buyers meet and conduct
different types of transactions.A single point of access through a Web
browser to critical business information
located inside and/or outside an
organization
E-Marketspace
Customer Interaction Mechanisms: Storefronts, Malls, &Portals
Major types of portals
o Commercial (public) portals:
(ex: yahoo.com, AOL.com)
o Corporate portals:
provide organized access to rich content within
relatively narrow corporate & partner's
communities)
o Publishing portal:
these portals are intended for communities with
specific interests.It is usually divided into three system types:
1- SaaS platform
2- Open source software
3- Custom solutions
Magento: 20%
WooCommerce: 17%
Shopify: 10%
PrestaShop: 7%
BigCommerce: 2%
E-commerce Website Development
What is ecommerce software ?o Online marketplaces are platforms that
facilitate e-commerce transactions
between buyers and sellers, enabling
buyers to showcase their products and
reach a larger audience.E-Marketspace
Customer Interaction Mechanisms: Storefronts, Malls, &Portals
Web (Information)portal:
A portal is a mechanism that is used in e-
marketplaces, & other types of EC. With the
growing use of intranets, & internet, many org.o Typical headers include most essential web pages, which may vary depending on the
type of website it is creating
E-commerce Design and User Experience (UX)
2.1 Navigation
An intuitive navigation is the first step to a pleasant shopping experience.E-commerce Design and User Experience (UX)
Hamburger menu
o While this is primarily seen on mobile navigation,
this simple three line icon is now being seen on
many desktop versions of websites, too.Low-Fidelity Wireframe
Low-fidelity wireframes are created digitally and display elements
in simple content blocks, taking basic concept sketch and turning it
into something more refined.E-commerce Design and User Experience (UX)
Great websites are composed of multiple amazing parts that
seamlessly fit together to create a holistic representation of
any brand. o The hamburger menu offers a minimal icon that
doesn't interfere with the website's design and is
especially useful when real estate is limited (like
on mobile devices).o Developing an e-commerce website requires a solid
understanding of both front-end and back-end
technologies, user experience (UX) design, security,
payment integration, and more.o E-commerce software is a system that makes it possible for selling products /services
online via website/mobile app.E-commerce Design and User Experience (UX)
Wireframe Examples
Below are some of the best examples of wireframe types to light up creative zones and help
solidify the wireframing process that works.Basic parts of a website
There are some components of websites that are so essential to
web design that all sites must contain them in order to function
properly (all included in website templates).Blog
o Blogs are essentially groupings of articles or posts
on a variety of topics that are all related to
business.E-Marketspace
E-Marketplaces: Mechanisms, Tools, and Impacts of E-commerce
o Electronic storefronts
A single company's Web site where products and services are sold.The software program of an electronic shopping cart
o allows customers to select items,
o review what has been selected,
o make changes and then finalize the liso Usually e-commerce software includes all the important features such as product listing, order
management, setting up payment methods, design, etc.o Consistent Layout: Maintain a consistent layout across product pages, categories,
and other sections to create familiarity and reduce cognitive load.o Layouts and features such as menus and
buttons are mapped out to assess the overall
experience of the end user.High-Fidelity Wireframe
Using digital tools, can create a high-fidelity wireframe that
illustrates in more detail without the creation of too many
graphical elements.Together these parts
form the backbone of the website:
01- Header & Menu
02- Image
03- Website
04- Footer
E-commerce Design and User Experience (UX)
01.Sidebar
o Often websites will use a sidebar, or a horizontal
bar typically on the right side of screens that
contain more links or information.o Typically, sidebars contain links to other content on
site, a way to sign up to newsletter, and
advertisements.While blogs
can stand on their own, they also can be added
as an additional part of an existing website,
functioning as a marketing asset for company.E-Marketspace
Merchant Solutions: Electronic Catalogs, Search Engines,
and Shopping Carts
3.Website content
o All sites contain content.Logo
2.1.2.3.3.