UX Principle: How to Design your Homepage for eCommerce site

About the Author:

App developer and computer programmer of WebClinicalWorks Pvt. Ltd.- Android Application Development Services, Amanda Cline explains three easy, hassle-free ways you can develop high performing mobile apps.

Everything has a user-experience: may it be a drive in Porsche, may it be using iOS 9 on your iPhone, or may it be using a website. As a UX designer, the challenge you face is to provide the best UX and least hindrance as possible for the user. UX design (UXD) involves a lot of research to understand the user and how they behave on the website.

For an eCommerce website, it’s important to target users subconsciously and homepage is the first thing users see and experience, and on a subconscious level decides if it’s a good website or not. So, a homepage must be designed well for the users to enjoy their experience on the website, which will eventually lead to building a better relation with the user.


#1. Large Image and Search Box

Most e-commerce websites today will greet you with a large image slider to give you preview of their best products, latest deals, and discounts. Clean, high quality images of the image slider with white background puts the focus on the product in the image.

Also having a search bar is essential for the user to easily type and look for their product with ease without having to apply 5-10 filters to search their product.

#2. Navigation Menu

Navigation menu gives user an idea of the range of products available on the website. Most users come to e-commerce site to browse before they can make their decision, so make navigation menu prominent and keep 6-7 main categories.

  • Don’t clutter the navigation menu with more than 6-7 choices.
  • For most e-commerce websites, navigation menu on the top works well but you can also keep one on the left side.
  • Show the navigation menu on most of the pages, even when you scroll down, make sure it’s visible.

#3. Logo

A good logo can help your customer create a positive impression of your brand. So a good prominent logo whether on the top left corner or in the center is a must and add your company’s tag-line below it, and it should be functional. Clicking on the logo should land the customer on the home page.

#4. Shopping Cart

Shopping cart should be easy to access and must display the number of products added to the cart. If you add three distinct products to the cart,  the cart should display prominent number 3 on it, like a notification.

#5. Wishlist

When a user browse through products, let’s say a user is looking for a nice pair of jeans. He types ‘Jeans’ in the search box. The result displays all the jeans available on the website, then the user uses filter for his gender, waist size and colour preference. The user must also have the option to sort the products by: most popular, high price to low, low price to high, new, or discount. Through these small steps the user can now see the type of jeans he was interested in.

As the user scrolls down and keeps checking the number of jeans, he can add the one’s he like to the wish-list and check them later or make the payment later, if he’s not ready to buy yet. It’s important to note that product should remain in wish-list as long as user doesn’t remove it.

#6. User Account

Give your users their private account where they can store their personal information like: name, address, credit/debit card information, email, last order details, status on the current order, discount coupon, etc.

It’s important to know that customers love personalized shopping experience.

#7. Track Order

Fast and easy access to tracking their order is such a useful tool for the customer to keep track of where their product has reached, and how much time will the product take to reach their home or office. Rather than going through the whole process of sign-in, check your account, click on last order, check last order and click on it, and then see the details ─ make it more convenient for the user by putting a ‘Track Order’ button on the home page.

#8. Customer Care Contact Details

By simply adding the customer care phone number on the homepage, you tell your customers that you are there to help them and it establishes a trust between the user and the website. But keep note that you have enough staff to help the customers, and don’t forget to specify the days and time to call. Else the user will feel irritated and agitated if the problem isn’t solved right then and there. We’ve all has been in that situation. And as I write, I’m talking to customer care with one of the world’s leading brand, who seem to have lost my return package and haven’t initiated the return process from last 10 days.


Optimum UX can be a hard thing to achieve but it’s under constant evolution, as people use more and more e-commerce websites, it’s helping UX designers to evaluate the users’ behaviour and give them the best UX. For now, these tips above will keep your e-commerce website running well.

Related posts

10 Replies to “UX Principle: How to Design your Homepage for eCommerce site
  1. 為您提供多元化樓宇按揭貸款方案、物業估價、按揭評估及計算機,助您挑選最合適的按揭計劃,讓您置業更有預算。了解更多渣打樓宇物業按揭服務。

  2. 全「身」趨勢!LSD真空無痛技術,無需使用冷凍啫喱,比傳統激光脫毛更安全,更舒適,更快捷。腿部背部永久脫毛,只需15分鐘!最快激光脫毛科技 配以22x35mm 及 9x9mm 治療機頭,比其他品牌之24mm為大,覆蓋肌膚範圍更廣。 因而更能縮短療程時間及次數。專為亞洲皮膚而設 因應不同膚色設定不同能量,無論膚色較深或較白均適用 最舒適及最有效的激光脫毛體驗 (與755nm及1064nm作比較) 設真空脫毛技術 LUMENIS LightSheer® Desire 激光脫毛儀備有真空脫毛技術,令激光能量更集中聚焦,達至更快及更有效之療程效果。激光脫癦

  3. 日本Shupatto可折疊保冷袋(S Size) -榮獲 Red Dot Design Award 2016 設計大賞,日本大熱賣購物袋 -容量超大,承重3kg /5kg,不論外出逛街或去旅行也非常方便 -可以摺疊收納,一拉一捲就自動摺起 -二個尺寸款式可供選擇美療

  4. Read our in-depth iPhone XS Max review
    Read our hands-on iPhone XR review
    Read our hands-on Apple Watch 4 review
    iPhone XS price and release date
    iPhone XS

Leave a Reply