Although designing for eCommerce follows the same design principles as designing for any other kind of website, there are a few things you need to remember. Even a small omission or mistake can have a massive impact on conversion, which will cost you or your client lost sales.
Here at Marvellous we happen to specialise in eCommerce, and we want to help you become an eCommerce expert too! We created this handy guide of tips and tricks that will help you design beautiful and functional online stores, making both the client and the user happy!
The basics
The first thing is to get the basics right. What is your value proposition? What is it that you’re selling, and what makes your product attractive? Is the product or service obvious as soon as the user lands on the site, or can it be confusing?
Some eCommerce sites can try to create a mysterious feel around a product, not being clear about what it is exactly, until the user digs deeper. Although it might seem like a cool idea, most people will get annoyed and just leave the site. Ain’t nobody got time to figure out what you’re trying to sell them. It’s not a puzzle.
Build a sense of trust with your user. Just like you would with a normal shop, make sure your website looks presentable, its design is up to date, there are no missing images, and links take you where they should. Being transparent to your customers is important too. Include your contact details, display customer reviews or testimonials and if you messed up – be honest about it. Try to put yourself in your user’s shoes and think – would I entrust this website with my card details?
Finding the product
Unless you sell literally a handful of products, it’s essential that you include a search bar. Make sure it’s prominent on the page, ideally in the header, and that it has a good algorithm. From previous experience, we can say that the default Magento search isn’t great, bringing back incomplete results or unrelated products, so we usually offer the search plugin Algolia to our clients. Good search is an absolute must for eCommerce sites.
The second most important functionality of a site’s search is flexible and contextual filters. Especially if you sell a wide range of products, let users refine their searches. Beware of making decisions on the way they filter on their behalf, though. For example, allow them to set their own price range, rather than give them predefined ranges to choose from. Make sure your filters are contextual as well, letting users filter different types of products by different attributes.
Learning about the product
On an eCommerce website, your product is always the main hero. If you’re working for a client, get all the product information and assets early on in the process to ensure your layout fits them perfectly.
Great photography
To really make it shine, use high-quality photographs. Ensure they’re well lit and show genuine colours, whilst not being blurry. The more details of the product you can show, the easier it’ll be for the user to make a decision – so don’t limit yourself to just one or two shots.
Well written product descriptions
Informative product descriptions are very important. If there is a lot of information that you want to get across, use visual hierarchy rules to avoid overloading your user. Consider hiding parts of it in accordions as well, so that only key messages are visible straightaway, and if a user wants to read more details, they can always expand the relevant section. For example, not everyone may want to read a list of ingredients in a shampoo, but for people with allergies this will be a key piece of information.
To compel people to decide quickly, show how many of the products are left in stock, include timed offers, or how many hours are left to guarantee next day delivery. In fact, all kinds of promotions will help in conversion!
Cross selling
A common method to increase sales is to use cross-sells and upsells within the product page and basket. If a user is looking at a particular product, there is a good chance they might be interested in related products. Show them these on the product page! This is what cross-selling is about. You can also upsell accessories or add-ons to the chosen product either through the product page or basket. After all, if someone is buying an ebook reader, they’ll probably also need a case and screen protector for it – or you might remind them to! Cross sells and upsells are proven to raise your average order value.
Make delivery information clear
Provide your user with delivery information upfront. Always have a link to delivery info page in your footer, as that’s the most common place for this kind of content, but also link to it from the product page. If it’s possible, display an estimated shipping cost below the product price. If you deliver internationally, let people select their country and calculate the cost.
People who have hefty delivery charges feel like they may prevent people from buying their product and don’t want to display them, but hiding the shipping cost and then surprising the user with an extra fee at the end of the checkout process is far worse. While in the first instance, they might have not bought the product and left the page, now you risk they’ll share their bad experience with friends or on social media.
Buying the product
If there’s one thing on eCommerce sites that you absolutely can’t mess with, it’s the basket. As soon as your users can’t find it or don’t understand how it works, they’ll leave the site. Try to follow the patterns that all the other online shops use – display it clearly in the top right corner of the header, use a recognisable icon (or label it properly), show the total amount next to it, allow users to change quantity or remove items from within the basket, and include a clear link to checkout. Play it safe and stick to what people are used to – ‘if it ain’t broke don’t fix it’ applies crucially here.
One step checkout
The most important part of the sales funnel is the checkout process. Try to keep it simple to reduce the drop-off rate. First of all, swap the usual multi-page process with a one step checkout. It’s more streamlined, simpler to use, lets user see all the information at once and, drum rolls please, according to this study, it increases conversion rate by 21.8%. We use a one step checkout on all of our eCommerce sites and can confirm it’s doing its magic!
Secondly, don’t force your visitors to set up an account. Allow them to checkout as a guest and complete the purchase quicker. Trust us, if they’re happy with your product, they will come back.
Thirdly, don’t distract your user. There is this temptation to try and get them to add that one more teeny tiny thing into their basket as they’re about to checkout their order, but don’t do it! You had your chance on the product page, category page, basket… checkout should only be about finalising the purchase. Many people still worry about online payments and want to triple-check their contact details – flashy banners and information overload will only make them abandon the process. Don’t distract them and let them complete the purchase in peace.
Provide broad payment methods
And finally, allow different payment methods. Even if your UX is absolutely spot on, not letting users pay with their preferred method of payment will result in lost sales. You don’t need to give them all the options that exist, but a couple of the most popular ones will be enough.
Customer care
Throughout the whole process, no matter if you’ve been successful in getting the sale or not, you need to support your customer. Give them plenty of ways to get in touch with you. Keep in mind that not everyone may be able or feel comfortable to call you, so don’t focus just on phone support. Instant chat is a great way to offer real time assistance to those that prefer to communicate in writing.
And that’s it! If you keep these things in mind, your eCommerce site should work beautifully, bringing you or your client happy customers and sales. Of course, it’s not an exhaustive list and there are other things to consider too, but the set above should be enough to get you off to a flying start! Get in touch with us on twitter @MarvellousLeeds if you have any questions or tips you’d want to share with us!
