best practices for ui/ux in ecommerce

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

FilterSorting

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

Videos

Product Page

360 degree interactive image

Product Page

So what’s 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

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

http://ecommerceuxdesign.com/

https://selfstartr.com/

https://uxmag.com/

https://econsultancy.com

https://www.smashingmagazine.com

http://uxmovement.com/

… and, of course, Magento.com

Queries?

Confidential

Thank You