eCommerce Checkout Page Design: What *Not* to Do

As the saying goes, you learn from your past mistakes.

With that in mind, you need to look at all your previous web design mistakes, so you never repeat them, which includes your websites checkout page.

If you have an eCommerce website, your checkout page design can be the difference between making the sale or a consumer exiting the shopping cart. It’s the place where you have one last chance to convince buyers to hit that pay now button. 

I bet you didn’t know that over 60% of people abandon their shopping cart on the checkout page. An alarming statistic if you want to help improve conversion rates. With this fact in mind, you have to make your checkout page the most robust and sales driven page on your website.

Following are some definite no-no’s regarding the design of the checkout page of your eCommerce website.

1) Not recommending other products

An eCommerce website without other product recommendations is like a salesperson not telling you about other great products they may have. It’s not a good idea. So, at the checkout page ( preferably near the bottom of the page ), make a few alternative product recommendations. Then, when they are at the checkout page, they have their wallets open with their finger on the buy now button, which is the ideal time to showcase a few of your other great products. If you don’t do this, you might be missing more sales and cross-pollination of different products, which is a definite no-no!

2) Strong Call To Action Buttons Highlighting the CheckOut Page

Like the sales desk in a shop, you can see the cash register where you pay. The same goes for the checkout page. There need to be strong pathways signals highlighting this page. You never want your customers to be wandering around your site, getting lost and not being able to find the checkout page button immediately. For this, you need clear, strong graphics. Essentially, if they cannot see this button, they will exit the site in frustration only to give their business to your competition. Placing a big, bold square at the top right-hand corner of the page with the words ‘check out’ is an excellent option as it’s obvious. So, every time you add an item to your basket, you can quickly go to the checkout page to see the total cost.

3) Have a live chat feature

Many customers won’t trust your website unless it’s a well-known brand or household name. I mean, why should they give you their details and pay for a product from you? You must be able to show a level of human interaction to help them trust you more. A great way to achieve this is to add a chat feature on the site. It’s so common nowadays that it may raise a few red flags if it’s not on the site. There are loads of chat features you can quickly install. And, if you cannot watch this 24/7 like most small businesses, most chat features will have the functionality to allow customers to leave a message.

4) Highlight security features

People shopping online can become very nervous a couple of seconds before they hit the buy now button. This is because many scammers, hackers, and dodgy sites online masquerade as credible sites, mistrusting the buying public. Placing a security icon front and centre of the checkout page will add a certain level of buyer security. Now I’m not saying this is a full-proof method, but it’s just one more in your arsenal that you can use to add an extra layer of trust.

5) Add positive reviews

Nothing sells harder than a few positive reviews from customers. So ensure your checkout page has some customer product reviews to help build trust in both their prospective purchase and your website. And according to Forbes, online reviews have been shown to impact 67.7% of purchasing decisions.

6) Have a rating system

Is the product decent, good, worthwhile to buy, and is it amazing? Place stars based on reviews next to the product so consumers can quickly see how good the product is by the start count. For example, if they see 5 stars next to the product, guess what will happen? They will more than likely hit the buy button.

7) Don’t make them sign up to buy!

Don’t you hate it when you’re at a store, and you want to buy something quickly and ask if you’re a member or would you like to join? It’s the same with any eCommerce shopping check out page; people do not want to go through a lengthy sign-up process to buy an item. The quickest way to lose a good customer at the checkout page is to make them sign up. If you want to capture their information, only ask them to sign up after they have hit the buy now button and offer an incentive for them to do this, such as a discount on their subsequent acquisition. This is one of the most critical aspects of eCommerce web design.

8) Shipping and billing details

Combine shipping and billing details will make it a lot quicker for people to check out and make the purchase. The worst thing you can do is make the billing and shipping details complicated.

9) Limit changes

If the consumer wants to change their mind and edit the shopping cart, they should be able to do this quickly without affecting other items in the cart. If they have to start again due to one change, this will kill the shopping experience. So make it super easy to change items in the cart, whether it’s colours, numbers or even sizes. Plus, if they go back to browsing once they have filled out their details on the form, the system should remember these, so the customer doesn’t have to go through the whole process again.

10) Use heatmaps

While not part of the checkout process, a heat map will allow you to track peoples movements on the checkout page. Knowing what buttons are being clicked on will help you know if the page is conversion-focused or not. Heat mapping is a great way to see if there are enough calls to action and if they are being utilised. It would help if you were using a heat map on all pages of your site, but critical ones such as the check out page are imperative.


There are far too many mistakes you can make on the checkout page of your site to mention. So the best advice I can give you is to keep a few harmful design elements well away from the checkout page. Doing this will dramatically increase your conversion rates, sales and ultimately revenue. Of course, I have not touched on the technical issues such as slow loading pages or check out pages that do not render correctly on a mobile phone, but these quick what not to do’s should point you in the right direction.

What Is The Most Critical Aspect Of An eCommerce Web Design?

eCommerce web design is a highly competitive and complex field, and to be successful online, you have to follow specific critical points.

It’s simple enough to build an eCommerce site but to be competitive and make it successful, you must understand the critical components that make the best eCommerce websites.

The common thread that separates the memorable and extraordinary eCommerce sites from the rest of the pack is the user experience or UX.

This article, Hopping Mad Designs, will go over the user experience. What is the UX, why it’s essential, and ensure that your customer shaves the best user experience possible on your website?

The Most Critical Aspect Of An eCommerce Web Design Is The User Experience or UX.

Wikipedia defines the user experience as to how a user interacts with and experiences a product, system or service. And this includes your website.

If you want to build an eCommerce online store better than your competition and get as many sales as possible, then the user experience has to be seamless, easy to use, navigate and overall; world-class.

Let’s start by breaking down the UX for eCommerce stores.

To explain what a user experience is and why it’s important, let’s compare the standard eCommerce website to a brick-and-mortar store to give you a better idea of what the user experience means.

Whenever you walk into a shop or store, say in your local Westfield shopping centre, you will expect to see and get:

  • Eay access into the store without anything blocking your passage.
  • Clear signage and any specials of good for sale, you should be easily able to spot these.
  • Be able to speak to a salesperson who is friendly, knowledgable and honest.
  • Buy as many products as you want using your credit card and other payment methods.
  • The shop has to be clean, uncluttered and easy to walk around.
  • Be able to get your goods and exit the store. Oh, yes, and you want a decent parking spot!

If you have had any bad in-store experience, say you are shopping with a friend, and you have been treated rudely by a salesperson, or perhaps the store didn’t have friendly energy or was poorly designed. Chances are you not going to buy from it or revisit it. You might even go online and leave a negative Google review.

You can quickly draw a comparison between bricks and mortar retail shop and an eCommerce online website. They are essentially the same.

Customers online want to be able to see and do the following:

  • If they are a repeat customer, they want to know if there are any upcoming sales online via email.
  • They should navigate the site easily and find the products they are looking for with a minimum fuss. PayPal tells us that over 70% of online purchases are abandoned at the checkout stage, which is one of the biggest challenges to face any eCommerce website. 
  • Products should be less than 3 clicks away.
  • All products are labelled clearly with detailed descriptions as well as delivery and shipping information.
  • You should be able to pay online quickly using your credit card or other platforms like ZIP or AfterPay. 
  • The website must load quickly and render on all handheld devices.

All of the best eCommerce sites go above and beyond clients expectations by making the whole buying process a breeze. Most websites that go bust never fully understand these critical must-haves for the customer experience. Many eCommerce sites I see are free cheap templates that have absolutely no thought put into the UX and look dreadful. They may load fast and have a decent check shopping cart page, but they look amateurish, which doesn’t inspire trust with the customers. The conversion rates are shocking, and they generally go out of business within the first year or so.

What elements are part of the best eCommerce web design & UX?

Now you have a clearer idea about the whole online user experience and what online customer expectations, we can now look at the variables essential for the best eCommerce website. 

A design that works on every device

Statista tells us that in 2017, 75.8 per cent of the Australian population used a smartphone and will reach around 80.1 per cent by 2025.

Your customers are fully mobile, and to capture this market, you need to fully design your eCommerce website to cater to this mobile market. Failure to do this is one of the reasons why people will leave your website.  

Online users want fast, snappy information at their fingertips and websites that show even the slightest hassle in getting to the products area are a real cause for concern.

Website load times

Simply put, your website must load quickly. No one, and I repeat, no one is going to hang around waiting for your site to load. Website page speed is critical for the customer experience and will also affect your SEO rankings. Neil Patel, in his blog How to Increase Page Speed, 

explains that 47 per cent of consumers expect a website to load in no more than two seconds.

Any longer than a two-second load time will smash the user experience, and your next online purchaser may just hit that back button and exit the site.

Top-quality, detailed product descriptions

Shopping online is highly visual. Your customers can’t touch or feel the products that eliminate the whole tactile experience, which means they need to read the product description and view the images in detail. The only way they can decide to buy or not is if the description is tempting and the product shots are clear and high-quality.

Product categories are evident

People hate navigating through different pages to find the products they want to buy. There is a three-click rule determining the user experience, which tells us that customers should get to a product within 3 clicks. Any more, and they are likely to leave the site and shop elsewhere. When you are briefing your web developer, make sure they understand this before designing the wireframes.

Easy checkout process

BigCommerce tells us that shopping cart abandonment occurs when customers add items to their shopping cart but leave before purchasing. 

Most people will abandon their purchase during the check out stage if they have to create an account. Never ask your customers to do this. It’s a killer for conversion. And give your customers a wide variety of payment options and shipping options. 

Offer Free Shipping

People love the words free, and if you can offer some free shipping, scream this out and let them know about this on the home page and the checkout and product pages.  90% of consumers view free shipping as the top incentive that would encourage them to shop online more often, according to Ship Bob. Free shipping is a massive incentive for customers to buy from your site. Wherever possible, push the free-angle as customers enjoy freebies.

Include a search bar 

Searching for products on large eCommerce sites can be a hassle and frustrating, especially when you know what you want. Adding a search bar eliminates any search hurdles by allowing customers to find what they want in one click. Over 40% of customers go to the search bar in the first instance, so definitely include this.

Customer support

Adding a contact button with a phone number adds trust as customers know that they’ll contact a real person if there are any issues with the product or delivery. If your a small start-up without the resources, then include an email such as:

Make sure you get back to every customer as happy customers tend to leave positive reviews on Google, which will further boost your websites trust factor and overall user experience.

Summing it up

There are many facets to the user experience. It’s not as simple as it looks, and for an effective eCommerce website, you shouldn’t take a DIY approach. I have seen far too many failures with sites that don’t cut the mustard. Investing in designing and building an eCommerce site with a significant focus on the user experience is worth every cent. Invest now if you have a long term strategy for your business and watch your client base and revenue grow.

Need Help With Your eCommerce Store? Contact Hopping Mad Designs

As specialists in web design and WordPress eCommerce stores, Hopping Mad Designs is here to help you create a more robust, hard selling and user-centric eCommerce website that works.

To start the conversation call us on 02 9360 8514.

Designing E-Commerce Sites Learned From Real Stores

In today’s online world where everyone has an opinion on what makes an eCommerce site work and what doesn’t, it’s hard to make the right choice.

The trick here is to sit back, look at the bare basics and make sure that these are done correctly. Simply put, an eCommerce online store isn’t too dissimilar from a retail brick n mortar store.

The following article will highlight, how incorporating the elements of a physical store can be adapted to your eCommerce store making it a great online experience – all these means, greater sales and online visitors for you!

We need to break your website down into all the main pages. On the home page, the category page, the product page and the checkout page you can see the similarities.

The home page is like the storefront, the category pages are like the aisles, the product pages are like your products displayed on the shelves, and obviously, the check out page is the check out process.

THE SHOP FRONT: Let’s start out with the store from which is the basis for the home page. In terms of the branding for the store, you can see in most shop fronts the brand is present but does not overpower or dominate the store’s landscape. So whilst branding is important, your products are the things that need to stand out and this is true of the eCommerce website. Don’t focus too much on the logo, emphasis should be placed on the products and how they appear on the website. Remember, people are coming to your site to make a purchase and they need to see what you are selling instantly – keep the overall clutter and internet noise to a bare minimum.

The second area is an inviting display. Your shop front needs to be appealing to get passers-by interested, the question here is how to make this display inviting for your audience. Are they young, old, retro, funky, there are so many types of consumers that you need to cater for their tastes. Who are your customers and what type of display’s do your think your shop may need? Older, more mature audiences may want a cleaner looking store, whilst younger more youthful markets are happier with a lot of clutter and distractions. The same goes for your eCommerce website. Appealing to varied audiences will determine, how your home page looks in terms of font, colours and imagery. Remember the design of your home page will set the tone for the rest of the site. For this reason, be very careful in how you design this page as you do not want to alienate or lose customers. Design for your audience, but keep certain elements generic.

In terms of navigation, many stores will have a clear point of entry into the store and it will be very easy to make your way around the store to browse. The same goes for the website. Easy navigation will make the buying process easier and therefore more sales. Impressions count and if the navigation is easy, the customer will be a lot happier. Make all clickable links large, and easy to be seen. You don’t want to make the user think too much.

What you need to remember is that people are on your website because of your brand and not your product. Therefore, you don’t want to overkill the user experience with too many products on the home page. Teasers are great and small snippets of products are a good way to entice users. But, overall keep the home page generic and let the user make their decision whether they are interested in progress to the product pages. So if you have a clothing site, for example, you might have featured images and below you may have wools, knits, hats, jackets, socks, to show your variety. But remember, keep it clutter-free and use white space without too much animation. The focus should be a balance between your branding and your products.

So to recap:

The storefront is your home page and it should have:

  • balanced branding
  • the style for your audience
  • take care with what you feature
  • easy to navigate
  • show your wide range
  • clutter-free.

THE AISLES: This is similar to your site structure. You need to find the main categories and put these in their respective URLs. This is because a cleaner site structure and layout, like the aisles in a store if presented cleanly, will lead to a better shopper experience. One point to note is the checkout process. Like any store, it is easy to find where to checkout. The same goes with the shopping cart. Make this button as easy to find as you can and limit the hurdles in the way of this check out process. This is where you make your money so it has to be accessible from all site pages. Read more from PayPal at 6 ways to reduce shopping cart abandonment.

Main points for you to consider:

  • categorise products neatly
  • checkout should always be in view – perhaps in the top right-hand corner with an icon ( a cart)
  • give the customer an overview
  • DON’T make them explore – you want them in and out as soon as possible.
  • Keep it as clean and simple as possible.

PRODUCT DISPLAY pages are similar to your product pages. Typically like to try your products before they buy ( think the Apple store) – essentially the shopping experience in a store like this is awesome – hence its success. Online, however, customers are unable to feel and test your product. So you need to recreate the in-store shop experience as much as possible. So imagine you are selling a new laptop. At the retail level, the customer can pick it up, turn it on and have a play around. Online, you need to offer a similar experience, except for the physical component. You need to be able to have 360-degree viewing, close-ups, zoom outs etc etc. make people feel as though they are really interacting with the product. The price if it is discounted should show it with a slash in the price and really highlight it. A good product description area is vital as well. Don’t make the consumer search online for this information as they may end up at a competitors website. Also, list product benefits and important features. Think about useful product information ( washing instructions for clothing, health benefits for food ) and highlight these on your product page.

As a summary for your product pages:

  • multiple product images
  • clearly display price/discount
  • clear and to the point description
  • additional details


Think of this as automated and fast, but if there is an issue then help is never far away. In the retails shop you have a person there who can help and online you should offer a live chat feed if there is an issue or a clear contact form to handle any check out sales issues. Put the customer’s mind at ease that if they are going to but from you then there is a real person at the other end who can help.

You will note in some shops they have candies or magazines for those impulse buys. Yes, we are all guilty of it. The same goes for your shopping cart process. Once they have made the purchase you may like to have alternative product options pop up for the online consumer before they exit the site.

So Remember for Check Out Pages:

  • Make it easy
  • Make it clutter-free
  • Upsell if appropriate – for your target market.
  • Trust is the key – third party logos are ideal.

Magento Ecommerce Website Platforms

Magento will facilitate the establishment of an e-business environment that will allow you simple easy to use products as well as catalogue browser options, an array of customer management tools, and top of the line analytics.

Which is great for measuring web statistics, a whole lot of vital reporting, sales and marketing features, the list goes on and on.

Wikipedia defines Magento as an open-source e-commerce platform written in PHP. Obviously, if you get a website designed by Hopping Mad with a Magento Shopping Cart, we will train you in all the features as well as be on call if you have any issues or problems in uploading data.

So if you are thinking about getting online and having your own web business shopping cart then you should really consider Magento as your preferred option. Combine this with customised web graphics and you will be well on the way to looking the part online and having a successful online retail business.

Advantages of Magento CMS

It really gives you the freedom to maintain and have total control of every component within your store, including sales, merchandising right through to particular promotions. Think about all those important days throughout the year that you could market to. Mother’s and Father’s Day, Christmas, Easter, Australia Day. Each and every holiday on the calendar can be marketed to. Again, you might want to consider using a team of expert graphic designers like us at HMD to create these cool web tiles for you to put into the site.

This can often be as simple as a 20-minute design exercise. Just imaging how current your site could be and how appealing this would be to all those looking for gifts or products for that special event. No longer will your site remain static, out of date and tired looking. Refreshing your graphics and content regularly will keep users interested, customers up to speed on your latest offerings and on top of this the search engines will pick this up and index your site on a more regular basis.

The Magento platform is ultra SEO friendly. All features within the back end allow ease of change of titles, tags and content. This in turn will allow you to update products, create super search engine friendly pages and then sell as many products online as you can. Clearly, you will need help in setting this up and that is where we can also help you. Don’t for one minute think that you can open an eCommerce web store and have immediate success. If you do, then you will fail. I was a business owner of a web studio have seen this time and time again. People come in and after reading a few success stories about companies ‘riding the internet boom’, think that they can also do this because they have a few cool products to sell. Online retail requires a lot of hard work, effort, and above all patience and a realistic understanding of what is achievable online. If the eCommerce process is well thought out and you spend the time discussing ( with me) what is achievable, then you are taking the right steps and putting yourself in the best position to succeed online.

Related Post: What Is The Most Critical Aspect Of An eCommerce Web Design?

Magento is so diverse that it offers 3 separate versions, depending on your business needs and goals and obviously budget.

Magento Community: Not really for the business owner but more for the person who users the online environment as a hobby or for entertainment.
Magento Enterprise: This is the most popular version and it is used and implemented world side by small to medium-sized businesses. This is really our preference and the one we ten to use mostly Magento Enterprise Premium: If you have the budget and want to really have a robust platform, then this is the one used by large businesses and organisations who are after all the bells n whistles that an eCommerce platform could offer.

Magento works closely with Google’s third-party ad-ons meaning that your Magento eCommerce store will already have some very cool features such and integrated with Google Analytics, as well as Google Checkout. What this means for any eCommerce website owner, is that you will be able to track the number of site visits and conversions. You can then use this important data to adjust and readjust your product offering until it is at its optimum.

The Magento CMS eCommerce platform supports the usual payment operating systems such as the very popular and most commonly used system, Paypal as well as other known gateways such as Eway. We will hold your hand through this process and show you what you need to do in relation to the banks to get the website off the ground.

Why not sell your products internationally as well? Don’t just limit yourself to Australia. Think about other markets such as China, the USA as well as Singapore. If you are looking at offshore options as well then the Magento platform has live currency update feeds that allow you to sell your product based on the actual, current exchange rate. Don’t ever lose money again with currency fluctuations. Magento will ensure this does not happen.

If you have a really special product that you know will be a winner, then allow customers to write product reviews. People trust reviews way more than testimonials and Magento gives users the opportunity to air their opinions about the product. New visitors to your site will read these very good reviews and be more than likely to purchase a product based on what they read. A review that is not fabricated or thought up by a web owner has much more punch and clout than an obvious testimonial. If, on the other hand, the review is not that good, then you can always delete it.

Once professionally designed, your eCommerce store will allow for a variety of add-ons including a very unique and cool feature such as zoomable images. If you have never seen this, you must try to check it out as it is an awesome selling tool. Basically, it allows you to cursor over the product and the area in focus will be magnified by about 3 times. This is great for products you are selling that is rich in features or details; think fashion or engineering products as an example.

It is very mobile friendly. Once the system has been implemented it can be viewed across a range of browsers and platforms including Ipads, iPhones, androids and other handheld devices. Clearly, you are going to start thinking about responsive web design with the Magento package; where a site can expand or contract neatly based on the screen size. This is rather new and will become more popular as time moves on. Basically, it is one website size fits all. Best at this stage to give us a call on 02 9360 8514 to discuss this particular point.

A good goal to keep in mind before you start on your road to becoming an eCommerce success is to do things in stages. Start by firstly choosing the best web designer you can find and then look at getting a website that is fully customised and a site that stands out and looks not only different but appealing. Make very certain that your web guys have a clear knowledge of the user interface and are able to guide users right through the site to the final buying process/check out. Never ever settle for any old cheap web company but look for that special something in them that will give you peace of mind in knowing that you are with a team that will work extremely hard for you. Following on from this look carefully at working with them on your online marketing campaigns and strategies to ensure that you will be driving a decent amount of traffic through to your new web address. And lastly, look at other new technologies to push your name out there including but not limited to some social media areas and mobile phone platforms.

If all this sounds quite difficult, and a bit over the top then you are absolutely right. Online millionaires do not just happen. They seek the right advice and deal with web and SEO experts that can guide them through the internet cemetery which is littered with online businesses that have gone bust, purely because they did not get the right advice or chose to take a cheap and budget style approach to their Magento e-commerce business. Saying that getting online and following a few simple successful rules is not that expensive or hard to do.

Many of the best website owners do this and all you need to do is pick up the phone and give us a call here at Hopping Mad Designs and we can show you the pathway to your booming Magento eCommerce online shopfront.