First, Let’s talk about UX Design in General

Designing user experience does not mean designing one thing. It is not designing a component like a button, a menu or even a web page. “Experience” refers to the bigger picture of the user interaction. It is about how well the site or the app functions and how does a user feel throughout the process. Design is concerned with aesthetics and making things look  well and function sensibly, while experience designing is concerned with the satisfaction of user in doing a certain task.

User Experience of eating an Oreo

Many a times, users bend and modify the intended usage of a certain product just because it feels good. Good user experience may come from something that wasn’t designed. However, the best systems are those in which design component and designing experience synchronize perfectly.

Designing user experience involves 3 major and equally important steps.







  • Who are your audience?
  • What is their behavior?
  • How do others do it?
  • What is the main objective of your users and how can you make it –
    • Easier?
    • Better?
    • Faster?
  • Design Journeys; not components.
  • Make it obvious
  • Don’t make the users think.
  1. First Research
    Ask questions like who your audience really is? This means finding out their age group, their gender group, where they live, what their education level is.
    And find out what their behavior is like. This means figuring out –  

    • how often they use the internet
    • what do they use to get to the internet
    • how do they look for stuffs to buy
    • what makes them choose one brand or product over another.
    • And also, of course, research on how other e-commerce sites and companies do things. You can learn a lot by just observing what others got right. (You don’t always have to be “inventive”).
  2. Second is strategizing
    This means first finding out what the main objective of the user and then figuring out ways to make the process easier, better and faster for the users. A good strategy will help you retain customers.
  3. Finally, we design.
    And when designing, do not design components and elements, but design journeys. Think about the whole journey that a user goes through starting from finding out about your site and product; all the way to the final checkout. Look at all the steps involved and then design a system that is easy, intuitive and obvious at all these places. Your primary goal is to not make your users think.

Designing User Experience for E-Commerce

Now, lets talk about designing user experience for e-commerce websites and apps. Here are a few things that I think that e-commerce business owners should think about to make the user experience for their websites and apps better.

1. Put PRODUCTS in focus.

This is pretty obvious, but its amazing how may people get this simple thing wrong.

When I say put products in focus, the simplest thing you can do is to use bigger and better pictures. Multiple studies have shown that putting bigger and clearer pictures increase sales. So, you have to invest on the pictures that you use.

Using bigger pictures for your products increases your sales.

Also, use pictures that will give the overall feel of the product to the users. Use pictures that clearly show its shape, size, type of material, weight, color or whatever feature of the product that the user might be interested in. 360 views might be useful too, specially for products like laptops and mobile phones. If you’re selling clothes, put pictures of people wearing it.

Product pictures in e-commerce sites that convey the feel of the product.
Screenshot: Sweaty Betty

The goal here is to convey how the product looks and feels through the pictures rather than through text. Imagine going to buy a washing machine at a physical store. What do you do when you go there and find a machine that you like? You immediately start looking at the machine and its different buttons so you know what features the washing machine has. You do not pickup the user manual and start reading them. The picture below is really helpful when buying a washing machine online. Its big and it shows all the buttons clearly so you can have an idea of what the machine is like and what it can do. The point is; nobody likes to read. 😀

Washing machine picture shows all the buttons and features .


Of course, make sure that your website has proper product reviews. But I don’t have to tell you that, do I? We all know what user comments and reviews can do. So do not take them lightly. You can encourage your buyers to leave feedbacks and reviews by giving them incentives like “User Ratings”, discounts, etc. Most of the times, all you need to do is, just ask.

Ask users for feedback.

And make sure you have all the relevant information about the product that the user might need. Here, the site gives the specification of a laptop that I want to buy with things like its hard drive capacity, RAM, battery life; which is really helpful for the user.

Specifications of a laptop in an online shop

2. Flexibility

Flexibility means letting your shoppers shop their own way. This includes implementing a comprehensive search and filter mechanism that help users find and refine lists on a very detailed resolution. An excellent example is amazon’s filter sidebar which lets user filter through a lot of variables to help them find the right item.

Making search more comprehensive and easy to use.

Implement a navigations system that is intuitive and simple. Comprehensive categorization of the products can help the users navigate through the site much more easily. A good navigation system is very essential for a good user experience for buyers that browse.

Navigation in e-commerce sites

Also, give users the ability to manage and change orders that they have already made when needed. For example, features to change the number of items or even removing an item from the checkout page highly enhances user experience.

Manage carts whenever needed.

3. Making Checkout Process Better

Talking about the checkout process, it is the most important part of any online shopping experience. Most users abandon the shopping during the checkout. There are many reasons behind it. The main reasons are

  • the cost was higher than they imagined
  • the site wanted to create an account and it was just a hassle for them
  • the checkout process was long and complicated.
Reasons for abandonments during checkout

So, we can take a bunch of steps to make the checkout process better.

First, you have to make all the costs and fees perfectly visible and clear, so that the user always knows what amount is going to be spent. Show shipping costs, taxes and everything important at a visible space.

Shipping details on shopping cart

Let the users buy without the need to create an account. The hassle of going through the signup process makes the user abandon your site. There are other ways of retaining these customers. But do not get in the buyer’s way of shopping by asking them to create an account. If possible, you can make the account creation part happen behind the scenes so that there is no friction for the buyer. Otherwise, you can provide the feature to buy as a guest without creating an account.

Checkout as a guest

If its a new customer, they will always have some doubt of the credibility of your site. Use messages of “guarantees” and “return policy” to build trust that will make your buyers more comfortable clicking that Buy button.

Messages of guarantee and return policy during checkout

4. Two Types of Purchases. Design for Both.

Finally, you have to understand that there are mainly two types of online purchases. There are purchases where people really think through it, do a bunch of research and contains high risk for the buyers. They are called considered purchases. And there are purchases where people don’t think too much. They just want to get it done as quickly as possible. These are non-considered purchases.

Design strategy for one will not always work for the other. So, you have to design for both kinds of purchases.

Considered Purchases

Examples of considered purchases

Considered purchases are usually expensive and high risk, or affect the user in a personal level. So people put some thought in it before buying them. Considered purchases include things like a house. People just don’t decide to buy a house online on a lazy evening. They think a lot and do a lot of research. And its high risk and is very personal to the buyer. Similarly, buying a car, dresses, clothes, shoes, phones, laptops, are considered purchases.

Non-considered Purchases

Examples of non-considered purchases

Similarly, non-considered purchases are those where people don’t put a lot of thought into. These purchases are done for necessity every-day items like groceries and stationeries, or they could be impulse purchases like with DVDs, books, SD cards, batteries, etc.

Purchase behaviors are different for considered and non-considered buying.



  • “I want to be sure about this.”
  • Well thought and Re-thought.
  • 2 or more visits.
  • Multi-channel
  • Product reviews.
  • Look at pictures.
  • “I just want to get it done.”
  • As quickly as possible.
  • Usually just 1 visit.
  • Mostly mobile.
  • Vendor reviews

Considered purchases are well thought and then re-thought because people want to be sure about what they are buying. It usually takes 2 or more visits to the site before the user makes the purchase decision because they’ll look around, show it to friends and family, get their opinion and then finally make the decision. People may use multiple devices and channels to visit your site like mobile and desktop. Product reviews and pictures are really important for these buyers.

On the other hand, non considered purchases should be quick and painless because people do it as a chore and want to get it done as soon as possible. Its not the type of shopping they enjoy. Purchasing decision is done usually through 1 visit and most people use mobile devices. Vendor reviews and brand reviews are specially important for these types of purchases.

Similarly users are looking for different things according to the type of purchase.



  • Product quality
  • Service
  • Trust in Product
  • Long term satisfaction
  • Good price
  • Shipping speed
  • Trust in vendor/brand
  • Short term satisfaction

For considered purchases, they are looking for good quality product, good service, trust in the product and a long term satisfaction.

Meanwhile, for non considered purchases, they’re looking for a good price, shipping speed, trust in vendor or the brand and short term satisfaction.

Designing Experience for Considered Purchases

Using big pictures from different angles for selling houses online

When designing experience for considered purchases, use big pictures and form as many angles as possible. For example, when you’re buying a house, you would like to look at it from as many angles as possible. Using good quality pictures that shows the house (or the product) from as many directions as possible will make the user more confident about buying the product. Also, you have to make sure that you provide all the relevant information necessary. For example: If you’re selling a house, put in information ranging from the area it covers, number of bedrooms and bathrooms to the estimated mortgage rate, or more information about the neighborhood. 

Another good idea is to put an “Email This” button which will email the product link to the buyer’s email. This will allow the user to get back to your website and the product page any time they want, and also to forward the product to their friend, family or anyone they want an opinion from.  Similar concept is a “Save for Later” button that saves your choice in the website for later viewing.

Save for Later button on product page


Other components that can enhance the user experience for buyers while making considered purchases are :

  • Product reviews
  • Third party product reviews (reviews on other magazines, newspapers and blogs)
  • Previously viewed items

Designing Experience for Non-considered Purchases

On the other hand, for non considered purchases, the one thing that you have to do is to “be cheap”. That means, you have to help people save money, time and effort. Since, people do this kind of shopping as a chore and want to make it as  quick and pain free as possible, you have to show that you are giving your buyers better deals and quicker shipping than any other place.

Showing discount amount for non considered purchases

With these kinds of  purchases, buyers already know that they want the product. You only have to make them trust you as a seller. So, you can show shipping costs and time clearly, show your return policies, guarantees and warrantees that you provide, etc. to make your buyers feel better about buying products from you and not from someone else.

And finally, make it quick. Get out of the users’ way of checking out. So that means, no popups, no distractions, no asking for filling a survey, etc. Remember, they just want to get the shopping done. Don’t delay their checkout process.

In Conclusion

  • Put products at the center. (Big pictures. Good pictures)
  • Make it flexible. Let shoppers shop their way.
  • Don’t make your shoppers think.
  • Make checkout process quick and pain-free.
  • Design for considered purchasing and non-considered purchasing.

I gave a webinar on “Designing User Experience for E-Commerce” at E-UKM Kenduri (Indonesia) on August 30, 2017. Here, I talk about designing user experience in general and designing user experience for e-commerce websites. The webinar was meant for e-commerce business owners, so I talked about understanding users, understanding purchase behaviors and the general steps that you can take as an e-commerce business owners to make sure that your site is usable and provides good user experience to buyers. You can find the slideshare link to my slides below.

Presentation Slide


One thought to “Designing User Experience for E-Commerce”

  • surendra gupta

    Awesome article.. I am impressed the way you have explained everything.


Leave a comment

Your email address will not be published. Required fields are marked *