best practices for ui/ux in ecommerce

Download Best practices for UI/UX in eCommerce

Post on 19-Jan-2017




0 download

Embed Size (px)


  • What is eCommerce

  • UX design is the process of designing (digital or physical) products that are useful, easy to use, and delightful to interact with.

    What is UX?

  • UI Elements - Legibility

  • UI Elements - Colors

  • UI Elements - Content

    Use relevant content which is familiar to users and easily take action

  • Navigation Menu

    Currency/Country/Language selector

    Service Phone number and help WishlistTrack OrderStore Finder

    Home Page

  • User Account

    Help Customers to remember your brand

    Search Box

    Home Page

    Easy access to shopping cart

  • Search Page

    Is the search box easy to use?

  • Search Page

    Is your search box clearly visible and quickly noticeable?

  • Category Listing

    Grid View


  • Category Listing

    List View

  • Product Page

    Images for every color

    Multiple Images

    Show Product In Context

  • Product Page

    Zoom Functionality

  • Product Page

    Show Product Texture

  • Product Page


  • Product Page

    360 degree interactive image

  • Product Page

    So whats inside

    Create a sense of scale

  • Product Page

    Product Price

    1. Highlight discount if any

    2. Clear Pricing

    3. Product availability

  • Product Page

    Product Options

    1. Include a size Guide

    2. Add color swatches3. Allow shoppers to

    select quantity

  • Product Call to action

    Product Page

    Social Sharing Buttons Add to Wishlist

    Write a review

    Notify Me Quick Buy

  • Product Page

  • 1. Empty shopping cart design

    2. Mini shopping cart

    3. Full page cart

    Shopping cart page design

  • Shopping cart page design

    1. Should you save the shopping carts?

    2. Let the shoppers easily remove items from cart

    3. Allow the user to edit cart items

    4. Notify when an item has been added/deleted to cart

  • Shopping cart ADD-ONS

    Show different payment options

    Persuade your shoppers with offers

    Create urgencyCross-sell/upsell

    What if shoppers buy gifts for someone else?

    Allow shoppers to save items for later

  • 1. Things to take care when you opt for a single page checkout

    a. Data validation

    b. Organize the checkout form

    c. Avoid asking unnecessary information

    2. Single page checkout


  • 1. Design for Images Off

    2. Design responsive email templates

    3. Link your CTA to the right page

    4. Easy to find call to action

    5. Optimize for social media

    6. Help recipients recognize your emails7. Remind shoppers to buy gifts for themselves

    eCommerce Marketing Email

  • Mobile UXor

    How to fit an elephant in a box

  • Inspiration and Sources

    and, of course,

  • Queries?

  • Confidential