Pivotal Checklist for Creating UX-Rich e-Commerce Web Designs


Investing your money and efforts in e-commerce proves to be quite rewarding these days. Yes, people are getting lazier and as a result, e-commerce companies are mushrooming all over. Thanks to the breakneck growth, inventive ideas and the hunger to capture new markets, we can now order groceries from our home and have it delivered at our doorstep.

However, there lies another aspect to the story which may not sound so cheerful. Many e-commerce organizations (and startups) fail to join the successful business bandwagon. Surprisingly, some of them are thriving brick and mortar stores with significant presence and name. Yet they find themselves unable to utilize the online channel of making sales and gathering a customer base.

A major reason why these companies fail is because they are unable to provide a positive user experience on their websites. On the other hand, exceptional user experience is the very factor behind the “over the night” success of e commerce businesses that have been lucky or let’s say, have been intelligent enough to devote efforts in building great UX. Their focus on even the most minute details, is noticeable.

The 7-Point Checklist for Adding UX Value in Web Designs


  • CHECK: Approach

We begin the journey with a single product site, Robstep which is a line of two wheeled battery powered electric vehicles. The design approach is made from a sales perspective.

Show them the product, make them want to know more, make them compare with your competitors, get them to buy.

And all this, on the HOME PAGE itself !!! Here lies their strategic smartness

User views the product on main screen. On scrolling down (they have pretty buttons for navigation if you are too lazy to scroll) to the next segment, you will see enlarged and colorful range of products, with yellow “+” buttons that take you to product descriptions. Further down the homepage you get to see the gallery which has been intelligently designed with blur -and-highlight effect.

Robostep contains rich UX design

Example of a UX-rich web design

The accessories menu with visually appealing “+” buttons that will instantly take you to the description page.

Product page designed for high user experience

Note, they do not directly show the “place order” button even when you are in the shopping cart section. Instead they ask you to explore your options (as colors), which will further give you an insight into product awesomeness. They have intelligently placed prime importance on “discover” before buying.

The order selection page with strategically placed accessories as list view in the corner.

The purpose is to depict as many accessories without making the page seem cluttered or pushy. The best part is that here we are just one click after the home page, meaning that the prospective customer has already made a decision, explored the options and made up his mind (of purchase) on the homepage itself.

SMART !! isn’t it?


  • CHECK: Product Linking

This is another clever idea. Zazzle is an online retailer dealing with custom and off-the-rack merchandise (customized by others). Their homepage is a visually attractive vertical scroll based page with lots of colorful pictures and items.

And when you hover over the shop page, you get a typical category list.

Nothing unique right? Wrong. That category list is just for those who are looking for a specific product category. The “Too extensive-take me to my product please” version.

Their key differentiator can be seen when we visit the “shop” page. It has been designed to enhance the user browsing experience and make them explore possibilities linked with various products. And all this with beautiful, uncluttered pictures.

Zazzle shop is a great UX-based design

As you can see, an item ex: a card, is first divided into subcategories like invitation card, postage card, greeting card etc. and then linked with a broader category of “Cards and postage.” An associated image is kept as a highlight. A person who is browsing the site for different options, does not view a word and arrow based navigation menu at the top of the screen (as seen in most e-commerce sites) but explores other options in the category as well.

This is a perfect example of generating curiosity with well organized structure and visual appeal. The above approach can be adopted when you have stacks of categories that have to follow linked structures.


  • CHECK: Flat Design

Sophisticated yet simple. Dynamic yet adaptable. The most commonplace examples of Flat design are Windows 8 interface and Apple’s iOS7. A lot of e-commerce websites are adopting it owing to smooth user interfaces that are easy to make responsive. Moreover, due to smaller file sizes, pages load faster. And this feature is very important for e-commerce sites as too much time lapse can cause prospective visitors to leave their sites.

Gadget Flow website is an example flat web design with high UX value

Having a flat design was mandatory for Gadget Flow as it is loaded with heavy content. And they could not compromise with the user experience. Being the core portal for all the latest and greatest gadgets, Gadget Flow not only has a huge repository of products (and their detailed descriptions), but also direct links to the websites who are selling them. That makes gadget flow not exactly an e-commerce site (because it’s not the point of sale) but in terms of heavy content and need for users to browse and pick products, it is just like that, probably even more.

They have used the width of the webpage with funky colors and awesome images.


  • CHECK: All of the above. And helpful reviews. And single click purchase… And…

And now the lord. The lord does nothing wrong and as stated above, you can pick everything from “Him.” Coming out of the “praise-thy-lord” phase, two features we would really like to highlight are:

1. Reviews:

Amazon asks a simple question to everyone who comes across a customer review on their site: If the review was helpful to them.

Through this subtle question, amazon cleverly filters out positive and negative reviews based on one aspect that is very important to the customer: what others have experienced.

As the most “useful” reviews are positioned on top of the review section, customers (prospective and actual) get decision making insight without hassle. And this small user experience aspect is making Amazon earn a lot of moolah.

Reviews add user experience

2. Single click purchase

As we blatantly said, people are getting lazier. Who wants to put in their address and credit card details every time they shop? Our fingers are for better things.

Single click purchase? Yayyy!!

The site allows you to checkout and place order in a single click if you have previously made a purchase using the same payment and shipping details. From the sales perspective, one click purchase decreases the basket abandoning rate as the path to checkout is shortened.


  • CHECK: Video

With increasing internet penetration and high speed connectivity even in developing countries, Video marketing is touted as the next big thing. And what’s better than having one on your homepage itself?

Bellroy sells slim wallets and cases (custom and off-the-shelf). They needed to highlight the uniqueness of their products: Slim nature. How they did it? Minimalistic design with negligible words and some really nice photographs which have been put together categorically. For each category you will find a video which explains the product awesomeness.

Product linking is an important element of user experience


  • CHECK: 360 degree view of product

NO one does it better than Apple. There are a few players out there who have attempted to incorporate 360 view for their products but you have to drag the image to view it. In Apple’s case, you just have to make a one time click on the “Play” button, rest all is automatic.

But then again. uniqueness and visual appeal is always expected from Apple.

Apple product page design


  • CHECK: Feature Filtering

For this one, we need to look at their website first.

This site provides one hell of a cute experience with an emergency “pull” button in pink.

Their filters are quite unique, like filter by personality and filter by pattern. And alongside text for each filter feature, we have a cute little icon. The “filter by personality” looks quite interesting due to this.


Exceptional user experience is a must in order to keep the customer bound to your e-commerce site. Aspects such as cart abandonment have to be kept at a low in order to achieve high revenue along with good user experience. An e-commerce business owner and UX designer must make thorough research before setting out to build their online platform for sale.

create free website wix below post

Further Related Readings

Leave a Reply

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

Copyrights © 2016 - Designzzz. All Rights Reserved