Designing Your Ecommerce Website...

Improving your site's path-to-purchase...

Top 10 Tips for Your Online Store

OK, your online shelves are fully stocked and your branding's polished to perfection, so what's next when it comes to great ecommerce? You're buzzing about your website design and those product pages are on point but there are so many design tips which may make your site even better. Yes that is possible! With an estimated 17.5% of global sales in 2021* coming from ecommerce, having shiny new website that stands out matters now more than ever before. Right, before you open your website doors to start selling online here is a checklist of do's and don'ts to ensure no virtual trolly wonky wheels invade the smooth running of your site's path-to-purchase.

*statista.com

1. Trust is key

If you're anything like me the first thing you do when visiting an online store is ask yourself, 'Can I make a purchase securely?' and 'Is my personal data going to be safe?' If your ecommerce website doesn't ooze trustworthiness, shoppers will more than likely go elsewhere.

So exactly how do you prove your ecommerce site is genuine?

Take a look at the following methods:

Ok, it's best to start with an overview of your online business, giving potential shoppers the following info:

• Contact details - phone numbers, location and email address
• Links to your social media pages
• Add faces and names to your ecommerce business with photos of the people behind the products/services
• FAQ pages

Store policies should be clear and concise for online shoppers and should include:

• First and foremost, your Privacy Policy - covering shoppers' personal and financial details
• Your return policy and procedure
• Shipping policy details

Securely does it...

Using a secure server may seem an obvious move - it is an expected one from those visiting your ecommerce site. An SSL (secure sockets layer) certifies authentication and encryption your ecommerce website needs this to remain safe. It is also a clear sign that your ecommerce store has secure checkouts. Add SSL and displaying SSL certificate badges as extra symbols of confidence.

Extra 'trust' seals...these may include for example, insurance symbols highlighting protection against fraudulent transactions.

The devil is in the detail...

Typos, broken links, 404 errors (page not found) or missing images not only look sloppy they won't do anything for consumer confidence either. Make proofreading and technical checks a routine part of your website design.

Share product reviews...

Product reviews offer shoppers a greater understanding of your products; helping them to make an informed buying decision and to remove any niggling pre-purchase concerns. All in all reviews are great for eCommerce UX (user experience). If you want to go a step further why not add additional information about the reviewers? This will reinforce that the reviews are genuine.

2. Key design considerations

You have seconds to make a first impression, well 50 milliseconds according to research. So, the look and feel of your website has to be spot on.

Let's look at some design interface tips...

Don't over design

Simply does it! A busy mix of font styles, sizes and colours are not the way to go with your website design as text can then begin to look like graphics. They may even be mistaken for an ad. Colour blocks and contrasting text are much better options.

Consistency, consistency, consistency

Brand identitycolours and type needs to be consistent not only throughout your website design but on all platforms too, both online and in store. This will strengthen your customers' relationship with your brand and products. Brand familiarity is the way to go.

Limit popup windows

Before adding popup windows STOP - they are a distraction your shoppers won't necessarily want and one which will not benefit your ecommerce store.

Staying above the fold

Keeping essential information above the fold works wonders. It's even worth considering reducing any white space to move the most important details up.

3.Everyone loves a special offer

Shoppers love a great deal, so discounts, deals and special offers are always a good call. Draw visitors into your online store with visuals, creating attention and whetting their appetite to buy.

4. Keep site navigation seamless

Navigation is the way in which shoppers move around your ecommerce store. So, the easier it is to move around the simpler it is to find what they’re looking for before ultimately making a purchase. The whole eCommerce shopping experience should be as smooth as possible so shoppers don’t drop off the site and leave your online store half way through the process. All in all friction-free to the way to go.

• Define your product categories
• Focus on placing product categories at pride of place at the top of your site's navigation when shaping your ecommerce website design. Creating product categories and subcategories is the way to go. When adding category labels within your website design remember that single words describing the range of products works best. That way shoppers can easily scan through them, immediately seeing what they need. Your website design process should include user-test site navigation.

Clear product search

Make your product pages clear. Items need to be easy to find. People won't go hunting for them, they'll simply drop off your e commerce website and go elsewhere. Using high quality images is just part of the process, there are lots of quick wins you can try too.

So, let's look at some of the ways to add clarity to the products within your ecommerce store:

Consider all queries. All types of query should be addressed when constructing your ecommerce store. Information would typically cover product attributes, names and categories. Adding customer related details such as clothing size, gender and is also advisable. Illustrating queries in imput fields is an easy way to guide prospective buyers in your ecommerce store.

Search boxes. Don't be shy, ask your website designer to put your search boxes everywhere on your ecommerce site. Place them in familiar places on literally every single page during your website design. That way you'll know they're firmly in place and shoppers will undoutedly know where to find them. When selling digital products the ideal placement for search boxes is top right, top centre or slap bang on the main menu.

Filter what they fancy. Your website's design must, must, must incorporate filters. Not only will this allow your target audience to locate what they want, it'll help them disregard what they don't - resulting in a smoother UX (path-to-purchase experience). Best sellers, lowest price, new items, all of these are key criteria to add to your ecommerce platform. Product ratings are great geo throw into the mix.

Make life easy. Shoppers appreciate a helping hand especially when driving their trolley around ecommerce websites. Great ecommerce websites boast auto-fill functionality. The easy way to do this is by suggesting items your website visitors may like based on their searches. Making that online shopping experience effortless all adds to happier shoppers.

5. Sneaky Peaks

Once again make life easy for visitors to your ecommerce site. How? Well, 'quick views' give shoppers a quick and not forgetting to mention influential snapshot of your products. Remember online stores tend to display product info in a modal window. These vital windows are typically positioned over the viewed page.

Note, when shaping your ecommerce website design to resist the temptation to show all the product details. The way around this is to add a link to the full product page featuring view all the details site visitors will need to make an informed purchase. 'Add to Cart' and 'Save to Wishlist' functions are pivotal in your ecommerce website design.

6. No 2nd change to make a 1st impression in ecommerce business

Site visitors to your ecommerce website will form an impression in seconds. Your homepage should give a clear overview of what your online business is all about. Resist the temptation to pack the homepage of your ecommerce site with products. This isn't the place for product listings.

So what should your homepage feature?

When creating your ecommerce website design it's important to add:

• Pictures of your products in use - make these high quality images and don't be shy, lots of them is the way to go. Visitors to your ecommerce website will find photos/images easier to enage with than whole reams of words.
• Attention-grabbing titles - a carefully crafted line that encompasses what your product(s) do and how they work wonders for attracting shoppers' attention. This is also a great opportunity to add special offers or sale info into your ecommerce website design.
• Make your CTAs catchy - out with the boring CTAs (calls to action). Have fun, create CTAs that refeflct the look and feel of your brand.
• Special offers - despite not being a place for pure product listing you can showcase any best sellers or special offers. Think of you homepage as your front shop window when creating enticing ecommerce website design.

• 7.Listings - feed your shoppers's curiosity

If you're aspiring to be a leading ecommerce platform there are some handy hits for feeding ecommerce website visitors' shopping appetites. As a general rule visitors tend to get to a listing (or catalogue) page via the search bar. Alternatively they'll get to it by selecting a product category via the navigation. At this point your ecommerce website should be doing its job and they're starting to get curious. This is the place shoppers will find entire product listings connected with the category closest to their needs. This is a crucial part of your ecommerce website design.

Here's a top tip if you only sell a limited amount of products. Breaking them down into categories means that you can include all the items you sell on the listing page.

Further tips when shaping your ecommerce website design include:

Introduce your categories

Let your site visitors know that they are at the right place to find what they are looking for. How? Well, a snappy intro to your catalogue page will confirm to customers they are in the correct area to locate the products they want. Remember, be clear and transparent in your category introduction or shoppers will get bored and drop off. The less effort it takes the more shoppers will stick with you.

- Filters & Functions

Simplifying customers’ path-to-purchase journey is your main focus. You want to make it as easy as possible when they're looking for a specific product on your online store. Filtering and sorting should play their part even in single categories. If you have more products available, it's more important to filter them. Numerous sorting variables such as colours, price range, brands and sizes are an important addition to the mix in helping customers navigate their way around your ecommerce business.

Having said that though there is also a belief in, 'user experience' ecommerce website design which states more options can equal more problems. So, note to self! There’s a fine balance between having too many filters and not having enough.

It is the job of filters to assist shoppers not to bombard them. So, be generous but try not to overdo it when incorporating filters into your ecommerce website design. Finally, if there’s no result for the filters applied, don’t just present an empty page to those shopping online. Instead use it as a crafty opportunity tempt buyers to choose an alternative.

Got best sellers & reviews - highlight them!

When an opportunity to showcase your best products arises, step on it - make the most of your web design chances to highlight your best sellers. Use your ecommerce design to illustrate the products you know your customers relish the most simply by placing them higher on the listing. Better still you can give them their own featured spot.

Here's an extra thought...why not have product review scores appear next to each item? Showing that social stamp of approval is an easy way to entice site visitors when it comes to buying from your online store.

Show your stock availability

Firstly let's turn any low stock levels into a positive - they can be an awesome way to create urgency, incentivising shoppers to buy quickly. Showing your stock availability also acts as a preventative measure. If products are out of stock, it's not great if customer don't find out until the last moment or even at the checkout. Be up front, showing them immediately on the listing page, you're often likely to steer them towards an alternative online purchase rather than lose them altogether.

Another aspect to consider when designing your listing page on your ecommerce website is: should you list products in either grid or list view? The answer? Well the answer is that both actually serve different purposes.

Let's look at a list view first of all. This is an ideal option for products that require longer descriptions and more in-depth information. Typical products in this scenario might be technical or high-end spec items for instance.

Next is the grid view. This is great for products that lend themselves to more of a visual presentation. Those which don't need too much description. You'll also find this format works well for side-to-side product comparisons.

8.Product Page Design

OK, that final purchase is so close now that shoppers can almost touch it, but that's the problem. No matter how slick your ecommerce website is customers are still missing the ability to physically feel or try products out for size. Creating an experience which is as close to actually being in a store needs to be built using high quality images, detailed descriptions, info on what other shoppers think and the following:

Your 'add-to-cart' button

Ok, this is the star of your product page - it’s the golden and necessary step in the sales process as shoppers move ever closer to that all-important transaction. A buy button needs careful attention, it's a key part of your ecommerce website design. Getting your 'buy button' right is crucial and believe it or not there is such a thing as a bad, 'add-to-cart' button too.

What constitutes an effective 'add-to-cart' button?

Placement is key! Your 'add-to-cart' button should ideally be positioned in the most obvious place available. That may be an obvious suggestion but a prerequisite nevertheless. Wherever you decide is the ideal place it simply has to be, 'above the fold' - no matter what.

Once happily settled in pride of place, don't spoil things by surrounding your add-to-cart button with too much clutter - whitespace is beneficial in these circumstances. Remember to double up. Adding your button at the bottom of the page reinforces its presence and presents another chance to buy.

Be bold...Don't be afraid to contrast your add-to-cart button against the general look and feel of your page. A simple way to do this is to use a completely different colour than any other used on your page. This is where your designer comes into their own as the contrast must look ore like a happy accident than a fight in a paint factory. Bold contrast juxtaposed with subtlety is what you're looking to achieve with this area of your e commerce website design.

Size matters...contrary to common belief size does indeed matters especially when it comes to your add-to-cart button. Site visitors shouldn't have to search to find it, it should be easily visible in a matter of minutes.

To click or not to click... If your click-to-cart button doesn't look clickable people won't click it. Yes, I'm afraid that there is no room for design subtlety here - blatant is the only way to go. Having said that, this isn't your cue to get uber creative with your website design. Site visitors expect add-to-cart buttons to look a certain way so don't change that. Humans are creatures of habit after all. Having said that though, quirky elements such as a shopping cart icon on your 'add-to-cart' button or a down arrow for a download button can actually work to emphasise the function and intention of your button.

9. All about image.

Images are the closest thing you have in your web design toolbox to bring your shoppers as close to your online products as they can be before making a purchase. As you can imagine it's not just a case of plonking an image on your e commerce website it's about applying strategy to boot.

How?

• Products shot from various angles and images of products being used are a great idea.
• Get interactive - slideshows work well, even better with a zoom feature
• The bigger the better. Shoppers like to emmerse themsleves with products
• Video is becoming increasingly popular so why not give it a try?

Once you're satisfied that you've shown shoppers your products it's time to bring product description into your website design. It's all about balance. The idea is to capture the essence of the product, at-a-glance then to give shoppers the option to find out more with a 'learn more' or 'more info' instruction. Remember, high-end products such as cars may require a greater amount of specifications and information - the use of tabs are a handy way to offer those details in an organised fashion.

Handy hints...

Bring related articles to the attention of site visitors. Introducing , 'You may also like' section is also a good way to go. This can act as a great opportunity for upselling - so making them part of your product pages is well worth consideration. Please note the importance of keeping things relevant, otherwise you'll end up with a jumble of everything which may be a website full go nothing at all.

Give shoppers a second chance with an, 'add to wishlist' button. If they don't buy first time they may return a buy later. Keeping shoppers informed of estimated delivery times is alway much appreciated by your e commerce site visitors.

10.Sealing the deal: Shopping cart & checkout design

OK, your shoppers are almost at that all-important point of purchase so there's no room for over-complicated website design now - keeping that checkout process simple is absolutely crucial. A lengthy checkout process can be a painful experience for your e commerce shoppers - even more painful for you if they drop off at the last minute.

So how can you make that checkout experience run as seamlessly as possible?

Here are some top tips on how...

Make sure that your cart stands out. How? Well... It is vital that adding products to the cart shouldn’t feel like a break in the shopping experience. Making it easy for shoppers to have a quick look at the content of the cart then to go back to shopping if they fancy needs to be an integral part of your website design.

Position your cart well, pop it in a prominent place but one that feels organic. That way the process of adding to the cart will be a smooth part of the path-to-purchase journey. Despite needing to be easy to find the placement of your cart shouldn't look forced and disruptive either.

What to do about an empty cart... Right, there are some ecommerce solutions you can try here. You could inform shoppers that their cart is empty but hey that is such a wasted opportunity. So, let's turn that around by inviting users to pop products in it. Impossible? No. With a simple call-to-action or an outline of shopping instructions your potential shoppers can become definite shoppers. Think about include product suggestions or special offers to give shoppers a nudge in the right direction.

What about a full cart? Listen up, this is not the time to let your guard down. Momentum needs to be maintained. You must keep shoppers informed with a product inventory including quantity, product options (incorporate pictures & descriptions), product options (for example alternative sizes) and pricing (both individual and total price).

Get responsive. It goes without saying that your whole site should be optimised for mobile use. That's a critical stage of your website design right. This is particularly important for your shopping cart. Did you know that in 2021 mobile sales accounted for approximately 52% of all e-commerce sales? What's more, mobile cart abandonment stands at an incredible 85%. So, it's not difficult to see why your site must lend itself to both PC and mobile use. When looking at your mobile UX (user experience) keep the following key elements in mind:

• Remember, your CTA (call to action) to checkout or to complete order should sit at the top of the page. What's more that shouldn't move as shoppers scroll down. It may sound obvious but that way it will always be readily available to be clicked.

• If you're unsure as to the difference between a desktop and mobile checkout just remember that lies with text and button size. When using a mouse shoppers can be more precise but when using a mobile it's not so easy to navigate.

• Checkout Flow....there is a simple pathway to follow when shaping your website design which goes: Shopping Cart, Billing Information (merchant dependent), Shipping Information, Shipping Method, Payment Method and finally Confirmation. Obviously digital products won't follow the same pathway.

• Be our guest! It's worth noting that asking shoppers to create an account can sometimes be off putting. For that reason it is worth enabling site visitors to check out as a guest.
• Too much info...Before asking for a shopper's information ask yourself, do you really need everything from their inside leg to the colour of their car? Keep things basic, only ask for what you need to.
• Sometimes single is best...When it comes to columns, single layout is the ideal option. Why? Well, firstly it will be much more straightforward to have a mobile-first design. That way with the new mobile devices the web has become vertical. Secondly, it is natural for our eyes to view from top to bottom and we tend to do that in a single line.
• Keep it concise! If certain fields can be merged or condensed go ahead - the simpler the better.
• Exchange placeholders for masks, for instance DD/MM/YYYY for the date or MM/YY for an expiry date.

• Validate input information...It's useful to add validation signals (for example green ticks) into your web design when shoppershave completed fields correctly.
• Purchase confirmation counts - ensure that shoppers are thanked for their purchase and that they're given a brief summary of their order including any essential info.

• Have payment options? Tell shoppers about them at the checkout. From Paypal to Apple Pay, if you take it, tell them. Include logos to the shopping cart - shoppers appreciate a quick indication of what is available to them.
• Safely does it...Reassure site visitors that your site is secure, especially in terms of secure payments. Yes, HTTPS is an obvious indication however there are other signals you could add such as a link in your cart to information explaining what makes your site a safe place to buy from.

Ecommerce Website Design Concluded

We have covered a whole host of hints and design tips to consider when taking your ecommerce design from the drawing board to the masses. Please note that design is not an exact science. These are all elements which could elevate your e commerce business to the next level - we can't guarantee it will. Only you know and understand your shoppers and the carrots which may be most likely to encourage them to purchase online. Obviously our design tips are great to pop into your web design toolbox but trust the knowledge you have of your shoppers too. Finally, remember that you may have an a professional website however as times change keeping your ecommerce platform ahead of the curve is essential too for great ecommerce sales and brand growth.

Get in touch today!