E-commerce

Lecture 4
 LEARNING OBJECTIVES
qE-commerce Website Design

vUser experience (UX) design principles

vDesigning effective product pages and catalogs

vShopping cart functionality and checkout process

vMobile optimization and responsive design

 E-commerce website design
• E-commerce website design refers to the process of creating and
arranging the visual and functional elements of a website
specifically for conducting online business and selling products or
services.

• It involves designing an interface that allows users to browse

products, add them to a shopping cart, and complete
transactions securely.
Considerations in e-commerce website design:
1.User Interface (UI): Design an interface that is intuitive, easy to
navigate, and visually appealing. Use clear and consistent menus,
buttons, and links to guide users through the website.

2.Visual Design: Create a visually appealing design that reflects your

brand identity and appeals to your target audience. Use a consistent
colour scheme, typography, and imagery that aligns with your brand's
image and message.
 Considerations in e-commerce website design:
3. Product Display: Showcase your products in a visually engaging and
organized manner. Use high-quality product images, clear descriptions, and
pricing information to entice users to make a purchase.

4. Shopping Cart and Checkout: Design a seamless and straightforward

shopping cart and checkout process. Ensure that users can easily view and
modify their cart, proceed to checkout, and complete their purchase with
minimal friction.
Considerations in e-commerce website design: cont.’
5. Responsive Design: Optimize your website for various devices, including
desktops, laptops, tablets, and smartphones. Ensure that your website is
responsive and adapts to different screen sizes, providing a consistent and
user-friendly experience across devices.

6. Search Functionality: Implement a robust search feature that allows users

to search for products based on keywords, categories, and filters. Include
auto-suggestions and advanced search options to help users find what they're
looking for quickly.
Considerations in e-commerce website design: cont.’
7. Trust and Security: Display trust signals, such as secure payment icons, SSL
(Secure Sockets Layer) certificate, and customer reviews, to instill confidence in
your website's security and reliability. Assure users that their personal and
financial information is protected.

8. Payment Options: Offer multiple secure payment options to accommodate

user preferences. Integrate with reputable payment gateways and clearly
communicate the available payment methods.
 Considerations in e-commerce website design:
cont.’
9. Account Management: Provide users with the ability to create accounts,
manage their profiles, view order history, and track shipments. Simplify the
account creation process and offer features that enhance the user's overall
experience.

10. Analytics and Optimization: Implement tracking and analytics tools to

monitor website performance, user behaviour, and conversion rates. Use this
data to identify areas for improvement and optimize the website
continuously.
User Experience (UX) design principles
• User Experience (UX) design principles are guidelines and concepts
that focus on creating a positive and meaningful experience for users
when interacting with a product or service.

• E-commerce retailers and designers who pay close attention to user

experience and follow e-commerce UX design principles can capitalize
on this growth.
 Principles of UX design
qUser-Centered Design: Place the user at the center of the design
process. Understand their goals, needs, and preferences through
research and user testing. Design solutions that align with user
expectations and behaviours.

qClear and Consistent Design: Create a visually consistent and

coherent design throughout the product. Use consistent
typography, colors, icons, and layout to establish familiarity and
help users understand and navigate the interface.
 Principles of UX design, Cont’
q Minimalism and Simplicity: Keep the design simple and minimize
complexity. Remove unnecessary elements and features that may
confuse or overwhelm users. Strive for a clean and uncluttered
interface that focuses on essential elements.

q Information Hierarchy: Organize information in a logical and

hierarchical manner. Prioritize and present information based on its
importance and relevance to the user's goals. Use visual cues such
as size, colour, and placement to guide users' attention.
 Principles of UX design, Cont’
q Readability and Accessibility: Ensure that content is easy to read and

understand. Use appropriate font sizes, line spacing, and contrast ratios.
Consider accessibility guidelines to make the product usable by a wider
range of users, including those with disabilities.

q Consistent and Intuitive Navigation: Design clear and intuitive

navigation that helps users find information and complete tasks easily.
Use familiar navigation patterns and labels that accurately describe the
content or actions.
 Principles of UX design, Cont’
q Feedback and Response: Provide timely and appropriate feedback to user
actions. Inform users about the system's status, progress, and any errors or
success messages. Use visual, auditory, or haptic cues to indicate changes
and interactions.

qUser Control and Freedom: Allow users to navigate and interact with the
product without feeling trapped. Provide options to undo actions, go back, or
exit a process. Avoid forcing users into irreversible actions or complex
sequences.
 Principles of UX design, Cont’
q Consistency across Platforms and Devices: Strive for a consistent
experience across different platforms and devices, such as desktops, mobile
phones, and tablets. Maintain similar functionality, visual design, and
interactions to ensure a seamless transition between devices.

q Performance and Loading Time: Optimize the product's performance and

loading time. Minimize loading delays and provide feedback during loading
processes. Users should feel that the product is responsive and efficient.
 Principles of UX design, Cont’
q Emotional Appeal: Design for the emotional aspect of the user
experience. Consider aesthetics, branding, tone of voice, and interactions
that elicit positive emotions and build a connection with users.

q Continuous Iteration and Improvement: UX design is an iterative process.

Collect user feedback, conduct usability testing, and analyze user
behaviour to identify areas for improvement. Use data-driven insights to
refine and enhance the user experience over time.
 Designing effective product pages and catalogs

• Designing effective product pages and catalogs is crucial for attracting

customers, showcasing your products, and driving sales.
 Tips to help you create compelling and engaging
product pages and catalogs.
qClear and Consistent Layout: Maintain a clean and organized layout for your
product pages and catalogs. Use a grid-based design that presents product
information in a structured and intuitive manner. Ensure consistent spacing,
alignment, and typography throughout.

qHigh-Quality Product Images: Use high-resolution product images that accurately

represent the item. Include multiple views, zoom functionality, and the ability to
see the product in context, such as being used or worn. High-quality images build
trust and help customers visualize the product better.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qDescriptive Product Titles: Craft concise and descriptive titles for each product.
Include key information like brand, model, size, colour, and any unique features.
Clear and informative titles make it easier for customers to find what they're
looking for.

qCross-Selling and Related Products: Incorporate cross-selling opportunities and

display related products on each product page. This encourages customers to
explore additional options and can increase the average order value. However, be
mindful of not overwhelming the page with too many options.
 Tips to help you create compelling and engaging
product pages and catalogs. Cont.’
qCompelling Product Descriptions: Write detailed and persuasive product
descriptions that highlight the features, benefits, and unique selling points. Use
persuasive language, bullet points, and subheadings to make the text scannable.
Consider including information about dimensions, materials, care instructions, and
warranty details.

qUser-Friendly Navigation: Ensure that your product pages and catalogs have a user-
friendly navigation structure. Implement intuitive category menus, search
functionality, and filters to help customers find products quickly. Include
breadcrumbs to indicate the user's location within the catalog.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qCall-to-Action (CTA) Buttons: Include clear and prominent CTA buttons such as
"Add to Cart" or "Buy Now." Place them strategically near product images and
descriptions. Use contrasting colours and persuasive language to make them
stand out and encourage conversions.

qCustomer Reviews and Ratings: Incorporate customer reviews and ratings on

your product pages. Genuine user feedback builds trust and helps potential
buyers make informed decisions. Display average ratings prominently and allow
customers to sort and filter reviews based on relevance.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qMobile Responsiveness: Optimize your product pages and catalogs for mobile
devices. Ensure they are responsive and provide a seamless browsing and
shopping experience on smartphones and tablets. Test the design and
functionality across different screen sizes and devices.

qClear Pricing and Special Offers: Display pricing prominently and clearly
indicate any discounts or special offers. Use striking visuals or badges to
highlight deals and limited-time promotions. Transparency in pricing builds
trust and encourages customers to make a purchase.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qSocial Proof and Trust Signals: Include trust signals such as security badges,

payment icons, and SSL certificates to assure customers of a safe shopping

experience. Showcase social proof like testimonials, press mentions, or customer

photos to further establish credibility.

qEasy-to-Use Wishlist and Comparison Features: Enable customers to add

products to their Wishlist or create product comparisons. These features help

customers save and compare items for future reference, streamlining their

decision-making process.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qPerformance Optimization: Optimize your product pages and catalogs for fast
loading times. Compress images, minimize code, and leverage caching
techniques to ensure a smooth and speedy browsing experience. Slow-loading
pages can lead to customer frustration and abandonment.

qSEO-Friendly Elements: Optimize product pages for search engines by

incorporating relevant keywords in titles, descriptions, headings, and images.
Write unique meta descriptions for each product to improve click-through rates
from search engine results pages.
 Tips to help you create compelling and
engaging product pages and catalogs. Cont’
qA/B Testing and Analytics: Continuously monitor the performance of your
product pages and catalogs through analytics tools. Conduct A/B tests to
experiment with different design elements.

vA/B testing, also known as split testing, is a method commonly used in e-

commerce to compare two versions of a product, web page, app or concept
to determine which one performs better in terms of achieving a specific goal
or objective. The goal could be to increase conversion rates, improve click-
through rates, boost sales, or enhance user engagement.
 Tips to help you create compelling and engaging
product pages and catalogs. Cont’
A/B Testing and Analytics Cont.’
qTools for A/B testing:
ØGoogle Optimize

ØCrazy Egg

ØHubSpot’s A/B Testing Kit

ØAB Tasty

ØOminiconvert

ØAdobe Target etc….

 Breadcrumbs In Web Design
qA “breadcrumb” (or “breadcrumb trail”) is a type of secondary
navigation scheme that reveals the user’s location in a
website or Web application. The term comes from the Hansel
and fairy tale.

qIn their simplest form, breadcrumbs are horizontally arranged

text links separated by the “greater than” symbol (>); the
symbol indicates the level of that page relative to the page links
beside it.
 TYPES OF BREADCRUMBS
1. Location-based Location-based breadcrumbs show the user where they are in the
website’s hierarchy. They are typically used for navigation schemes that have multiple
levels (usually more than two levels).
 TYPES OF BREADCRUMBS
2. Attribute-based Attribute-based breadcrumb trails display the attributes of
a particular page. For example, in Newegg, breadcrumb trails show the
attributes of the items displayed on a particular page:
Location based and Attribute based
 TYPES OF BREADCRUMBS

• Path-based breadcrumbs, also known as breadcrumb navigation or

breadcrumb trails, are a user interface element commonly used in
websites and applications to provide users with a hierarchical trail of their
current location within a website's structure or navigation hierarchy.

• Home > Women's Clothing > Dresses > Summer Dresses

 Shopping cart functionality and the
checkout process
qShopping cart functionality and the checkout process are key components
of an e-commerce website that enable customers to select products, review
their selections, and complete their purchase.

qShopping cart functionality refers to the feature on an e-commerce website

that allows customers to select and store products they intend to purchase
before proceeding to the checkout process.
 Shopping cart functionality
vProduct Selection: Customers can browse your website, view product details,
and add items to their shopping cart. Each item is typically accompanied by an
image, title, price, and an "Add to Cart" button.

vQuantity and Variations: Customers can select the desired quantity of each
item and choose variations such as size, colour, or style, if applicable.

vCart Overview: A summary of the selected items is displayed, including the

quantity, unit price, and subtotal. Customers can view and edit the contents of
their cart, update quantities, remove items, or continue shopping.
 Shopping cart functionality
vPersistent Cart: The shopping cart may be persistent, meaning it retains the
selected items even if the customer navigates away from the website or
returns at a later time. This allows customers to resume shopping without
losing their selections.

vPricing and Discounts: The cart calculates the total cost, including taxes,
shipping fees, and any applicable discounts or promotional codes. Customers
can view the breakdown of charges and see the final amount they will be
charged.
What is Checkout Process?
qThe checkout process is the series of steps a customer goes through to
complete a purchase on an e-commerce website.
qYour ecommerce checkout flow plays a crucial role in ensuring
customers follow through with the purchase and return to buy from
you.
qAs a result, optimizing it to ensure customers have the best experience
possible at this stage of their ecommerce journey is so important.
 Checkout Process:
ØAccount Creation or Guest Checkout: Customers can choose to
create an account for faster future purchases or proceed as a guest.
Account creation typically involves providing personal information and
setting up a password.

ØShipping Information: Customers enter their shipping address,

contact details, and preferred shipping method. They may have the
option to choose from different shipping options based on speed, cost,
and delivery location.
 Checkout Process:cont’
vBilling Information: Customers provide their billing address and
payment details, such as credit card information or alternative payment
methods like PayPal or digital wallets. The checkout process should ensure
secure transmission of sensitive data.

vOrder Review: Customers are presented with an order summary that

includes a detailed list of items, quantities, prices, shipping details, and the
total amount due. They can review the information and make any necessary
changes before proceeding.
 Checkout Process: cont’
vConfirmation and Payment: Customers confirm their order and
submit the payment. This may involve additional authentication
steps like entering a CVV code or using two-factor authentication for
added security.

• CVV stands for Card Verification Value. It is a security feature used to

verify the authenticity of a credit or debit card during online or card-
not-present transactions. The CVV is a three- or four-digit number
typically found on the back of the card for Visa, Mastercard, etc…
 Checkout Process: cont’
vOrder Confirmation: Once the payment is processed,
customers receive an order confirmation page or email.

• It includes an order number, summary of the purchase,

estimated delivery date, and any additional instructions.
 Mobile optimization and responsive design
vMobile optimization and responsive design are both essential
considerations when developing a website or application to ensure a seamless
user experience across different devices, particularly mobile devices.

vMobile Optimization: Mobile optimization refers to the process of designing

and adapting a website or application specifically for mobile devices, such as
smartphones and tablets. It involves tailoring the user interface, layout, and
functionality to accommodate the limitations and capabilities of mobile devices.
The goal is to provide a fast, user-friendly, and visually appealing experience for
mobile users.
 Aspects of mobile optimization include:
qResponsive layout: Designing the website or application to automatically
adjust its layout and content based on the screen size of the device being
used. This ensures that the content is easily readable and accessible without
requiring excessive zooming or horizontal scrolling.

qPerformance optimization: Optimizing the website or application to load

quickly on mobile devices, considering factors such as limited bandwidth and
slower internet connections typically encountered on mobile networks.
 Aspects of mobile optimization include: cont.’
qTouch-friendly elements: Designing user interface elements, such as
buttons and menus, with touch interactions in mind. They should be easy to
tap with fingers of various sizes, avoiding elements that are too small or
closely spaced.

qSimplified navigation: Streamlining the navigation structure to

accommodate the smaller screen size, using collapsible menus, hamburger
menus, or other techniques that provide easy access to the content while
conserving screen space.
 Responsive Design

v Responsive design is an approach to web design and development

that aims to create a single website or application that adapts and

responds to different screen sizes and devices.

vIt involves using flexible grids, layouts, and media queries to

automatically adjust the presentation of content based on the
device's screen size.
 Features of responsive design
qFluid grid system: Using relative units (e.g., percentages) instead
of fixed units (e.g., pixels) to define the layout. This allows the
content to dynamically resize and reposition based on the screen
size.

qFlexible images and media: Ensuring that images, videos, and

other media elements are also responsive and adapt to different
screen sizes, preventing them from overflowing or becoming
distorted.
 Features of responsive design, cont’
qMedia queries: Utilizing CSS media queries to apply different styles and
layouts based on the device's screen size, resolution, and other
characteristics. This allows for a targeted and customized presentation of
content for each device type.

qProgressive enhancement: Designing and developing the website or

application to provide a core experience that works across all devices and
browsers, while selectively enhancing the experience for devices with larger
screens or more advanced capabilities.
 Conclusion:

NOTE: By combining mobile optimization techniques with responsive

design principles, you can create a website or application that
delivers an optimal user experience regardless of the device used,
improving engagement, usability, and conversion rates.
THANK YOU