Observing the E-commerce boom in India, it seems easier than ever for brick and mortar stores to move online and run their business successfully. Corporates these days usually utilize the services of ex-digital marketers going by familiarity and expertise with brand websites.
However, starting an e-commerce store is an amalgamation of hard work, planning and decision making that come together at a right time and place. A successful e-commerce store has to be unique and efficient when compared to s contemporaries. This is given. However, only a hand-picked few can understand the subtle differences between designing an e-commerce store as compared to a brand website. While brand websites are a lot more about ‘wow’ing the customer with vibrant and beautiful illustrations, crafting an e-commerce stores involves the architecture based on science more than just visuals in order to convert visitors to customers. Here is what you would want to keep in mind before designing your e-commerce store

· Search-ability: How easy is it for user to look up something on your website (Assuming they know what they are looking for in the first place?)
· Discover-ability: How easy is it for a user to identify what they are looking for, when they aren’t sure of what exactly they are looking for
· Navigation: Navigation can especially be challenging when your products have a lot of categories and sub-categories. Are your users aware of where they stand on your site and comfortable navigating through your pages to get to their goal? You know the navigation has not been well thought of when you observe users moving back and forth your website unable to figure out where to go next.
· Mobility: Does the interaction of your website on the desktop match with the interaction on a mobile device? Remember, the screen size of a mobile device is only a fraction of the desktop and it is important to manage designs within this space constrain
· Cart: Are you confusing your user by providing too many fields at this stage? Does your website have a guest check-out option? Is the percentage of cart abandonment very high?

Some of these points are precisely the reason why e-commerce stores lose out on majority of their traffic. However, these factors only scratch the surface of the real challenge. There may be several more questions that you might want to ask yourself before opening up your e-commerce store. I have limited the scope of this blog to front-end designs of an e-commerce stores. I will soon be publishing another blog to focus on back-end pre-requisites marketers might want to keep in mind before they plunge into their e-commerce store

To further illustrate challenges with front-end designs, I’m going to be taking the examples of common mistakes that e-commerce brands make with respect to:

· E-commerce Homepage
· Responsive designs
· Navigation
· Search
· Filters and sorting
· Product detail page
· Cart

E-commerce Homepage
Several times E-commerce stores make their homepage so brand–centric that visitors often see it as brand destination rather than a platform to make a purchase. This is definitely one of the most common mistake that e-commerce stores make. Having heavy banner images that load at a snail’s pace or having minimal call-to-action buttons like ‘show now’ as in the case of American Swan give users few reasons to explore your site. There is even a high probability of your site being confused for a content website instead of an e-commerce store.
The purpose of an e-commerce store is ideally to communicate the identity of your store. Factors to be taken into consideration include visitor relevance and if you are giving your visitors the right reasons to shop at your e-store. Have you included deals, offers and promotions? You can even personalize such pages for the user based on behavior patterns and demographics.

homepage 1

A good example of this is the Myntra’s homepage that displays a plethora of products and call to action buttons, enough to direct the user to their inside pages

Home 3

Responsive Designs

Today, our clients are seeing more than 50 % of their conversions from mobile devices. This explains that a mobile-friendly responsive design is the bare minimum today to jump-start an e-store. Observing recently consumer preference behaviours and models, it’s pretty evident that e-stores must first be designed primarily for mobiles and then for desktops. In case this isn’t achievable, your e-store should at least be mobile responsive ( i.e designed for Desktop, but adapted to a mobile interface)

Croma store uses a non-responsive interface that makes mobile transactions difficult.

Responsive 1

On the other hand, The Wills Lifestyle store is responsive in design but the HTML implementation appears improper.

responsive 2

In recent times, we have observed that the biggest challenge in being mobile responsive is the space constraint. The screens are small, yet the call-to-action buttons need to be significant. This remains the major challenge while designing for mobile devices. A good example here iswww.tailor4less.com. This e-commerce store even makes actions such as customizing a shirt or suit easy on mobile.

Picture3

Navigation
Navigation forms the backbone of your e-commerce store. At Kuliza, we even use advanced design techniques such as ‘card sorting’ to identify the right navigation process for clients.

I’ve take the example of Fashion Retail Biba (for the sake of explanation) to illustrate common mistakes brands make in their e-store

Menu: A defined action button to close the navigation button assists the user in getting back to the homepage from the navigation menu.
Information Architecture: Categories items under categories in the menu is integral for users to seamlessly navigate your store. Also, repeating the same product category only confuses the user and serves no other purpose (For e.g. in the below example the user might wonder — what is the difference between the two call to action buttons for ‘Biba by Rohit Bal’?. )
Alignment and presentation: The alignment of your sub-menus should be aesthetic

Navigation 1

On the other hand, a very good example here is the Nixon’s with a clean & intuitive categorized navigation. With a prominent action button to close the menu, the categorization has been well thought of and appealing to the eye.

Navigation 2

Search
Traditional digital marketers and site owners have never given great prominence to an in-site search option. The reason might be obvious — very few persons used the search functionality and the search engines were earlier using legacy technology that lacked relevance. Gone are those days. Today, research shows that more than 28% of visitors on an average use the search functionality while technology has evolved search tools to provide personalized, relevant and semantic search options.

If we take the example of Amrapali here, The page has no semantic search (hence the user is prone to making spelling errors), no realization of spelling errors (to suggest the right product in case someone makes an error in search), the search bar is given very small screen real estate and shows unrelated products (a search for ‘Gold Earrings’ shows everything but Gold Earrings)

Search 1

On the other hand, let’s review the Titan’s E-commerce page. Not only does the e-store have a semantic search option to assist users in searching relevant products, it also has a well thought of refined search filter.

search 2

Disclaimer: Titan is our client.

Filters on Smart Devices
It’s well known that conversions are directly proportional to the ease of navigation. It’s fairly common for a brand to have filters for their product categories to refine their search. However, this can get a little challenging when it comes to mobile devices. Let’s face it, the user in most cases does not have the patience to scroll through several unrelated products to get to what they are looking for. In this case, it’s best to provide the users options to filter their search.

Many retailers such as FabIndia choose to ignore the refine / filter / sort functionality on the mobile device, most probably due to the very issue of lack of space.

fab India

But better designed sites such as Office Depot give the user ability to refine and sort amongst products. You can see that the filters and sorting options come above the page once the right call to action button is triggered.

OD

Product Detailed Pages
I’ve also observed that marketers usually favourite a homepage over a product details page. However, research has shown that users equally spend a great deal of time on the products page since these pages are integral while deciding on their product.

Here are a few elements I’d like to highlight for you to consider on the product details page:

· Distractions: In the ideal user flow scenario, the user either add the product to cart or go to another product detail page. It’s best to avoid distractions to keep their focus on the product, Body Shop India’s E-commerce site is guilty of this practice.

PD1

Visibility: Several times, marketing teams of E-commerce stores end up creating large headers to beautify the site. But it’s also essential to know that pushing the products down the page forces the user to additionally scroll down to see your products. W For Women is a good example of this design mistake.

PD 2

Feedback: During our design research, we have observed multiple brands make the mistake of ignoring the apparel size before they add the product to cart. Again, you can take the example of W for women, you will see that ‘select’ a size is given an equal design weightage to ‘add to cart’. This can be easily missed if the user is not cautious. Also, when the user forgets to select a size, the notification that appears isn’t pleasing to the eye.

PD3

A good example is that of Zappos. This e-stores gives you an indication of selecting a size the moment you miss that button and hover your desktop cursor on ‘Add to cart’

PD 4

Similarly, another great example of Product Detail Page is Threadless. This e-store has a very prominent visual design for size selection and has also used colors to make the ‘add to cart’ button prominent.

PD 5

Cart and Checkout
A lot of research in the past has been done on the e-commerce cart and checkout. Essentially, once the user has added a product to the cart, you do not want to lose him in the last mile.

Some of the good practices for Ecommerce checkout are:

· User should know at what stage he is in the process and should not feel lost. A single page checkout is perhaps the best way to achieve that

Flipkart uses a single page checkout:

cart 1

· Similarly, it should be easy for the user to edit the cart, address etc any time in this process

Cleartrip makes it really easy for a user to edit a stage during the checkout process

cart 2

· User should be assured that the product they are buying is the product that they will get. This is especially important when the user choses a payment method or makes a payment.

Amazon confirms the order before it takes you to the payment gateway

Cart 3

· Another good practice it to save the billing / shipping addresses so that the user need not enter them repeatedly.

· Finally, attempts should be made to reduce the number of entry fields as much as possible. Nobody enjoys filling up fields, especially when they are on a smart device. Things like confirm email, confirm password etc. have repeatedly proved irrelevant in user research. I really like dropbox’s account creation form which is really short and simple for the user

Dropbox has always been a personal favourite:

cart 4

In this post, I have covered most factors to keep in mind when it comes to the front-end process. Stay tuned to get all and more information on back-end processes and the best practices for the same. In the meantime, what best practices does your brand follow when it comes to front-end? Feel free to comment and share your thoughts.