How to create a simple ecommerce website design that converts

As a business owner, you want to build an e-commerce website that encourages visitors to purchase the products you have to offer. Studies indicate that most visitors take just 90 seconds to assess the products on a website. Therefore, if your website attracts lots of traffic but has a low conversion rate, you may want to rethink the design of your site. Website design is crucial to your success, despite there being many other factors in play which can affect conversion rates.

If you’re struggling to come up with a simple design for your e-commerce website that converts visitors into buyers, this article is for you. We will take you through some ways to keep your web design simple and discuss how thinking like a visitor can help you keep your customers in mind. Next, we will emphasise the importance using high-quality images for both your products and lifestyle images and team photos.

When considering the design of your website, it is important to be aware of certain conventions. It may be a mistake to try to re-invent the wheel, but stripping things down to the essentials that your customers’ need is often well worth the trouble. People are more likely to buy from you if you make things as easy as possible for them. Make sure visitors to your site don’t have to think about things any more than absolutely necessary. We will explore how you can take an essentialist approach to building a simple website which conforms to established design conventions, but still provides users with frictionless navigation around your site and gives buyers a good, uncomplicated experience. Just by creating a user-friendly experience for people and making it easy for them to take action, you are more likely to increase your conversion rate and give your whole business a great boost.

So without further ado, let’s get into the detail.

Keep it simple by using simple designs

Research has proven time and time again that simple, minimalist website designs result in higher conversion rates. This is because simple designs allow people to make purchases easily and find information without feeling that they were led into doing so. Websites that take a minimalist approach are also constantly rated as being more appealing to the eye and more trustworthy than complex websites. Obviously, if people trust your website they are more likely to buy from you. You should therefore use elements like videos, imagines and striking colours sparingly, so that the effect is pleasing but not overwhelming. You don’t want to bombard visitors with too much information. This will make existing videos and images more eye-catching and effective.

To simplify your design further, eliminate whatever isn’t necessary and keep your colour scheme simple. Websites that use just two colours can look stunning and professional. Never be afraid of leaving white space. Just because there’s a gap doesn’t mean you have to fill it. In fact, by using white space well, you can increase the readability of your site by as much as 20%. White space lets you structure and organise your content, gives users an impression of luxury and focuses your customers’ attention. By making good use of white space you can give visitors an enjoyable, comfortable user experience because it’s so easy to interact with.

You may also want to think of changing the colour of any call-to-action buttons on your website, like the ‘Buy Now’ or ‘Add to Cart’ buttons for instance, to something which looks good but contrasts with the rest of the site to make them stand out. You should take your audience into account when choosing which colours to use. Women tend to be more attracted to blue, green and purple, while men like black, green and blue. Studies have shown that the least effective colours are orange and brown, so you should probably avoid them.

It is a good idea to reduce distractions on your site so that visitors will pay more attention to clicking the checkout button. Here are several ways you can do this:

Make sure there’s not too much information for customers to take in – Be as brief as possible.
Make sure your page has one clear purpose -The content on a page should all work together seamlessly.
Only use one Call-To-Action (CTA) on a page – Be sure to have a clear idea of a page’s purpose first so that you don’t come up with a boring, generic CTA.
Ensure that all the information given on your landing page is focused– Don’t divert customer attention away from compelling elements of your site. This can mean you have more than one review displayed, of course. It’s a good idea to have as many reviews as you can, provided they all revolve around a single focal point. Ask yourself if many similar elements add value to the purpose of a page. If not, get rid of them.
Avoid boring copy– Keep things short, clear, punchy and to the point. That way, you can better hold your customer’s attention.
Remember to remove the navigation bar from your landing page– A landing page has only one purpose, to sell. Removing the navigation bar from your landing page can increase conversions by as much as 28%.
Decrease the number of form fields on sales pages– Get rid of fields which doesn’t apply to what you’re trying to sell. This is a proven way to increase conversion rates.

By following this advice, you will have made a good start on optimising your web pages. The next step in designing your e-commerce website is to put yourself in your customers’ shoes.

Keep the user in mind – think like a visitor

Sometimes, we can get too close a project and fail to spot glaring errors in our website design. Therefore, you need to train yourself to think like a website visitor if you want to design a platform that has high conversion rates. If you’re unsure how to do this, enlist a friend’s help and get some honest critique. You can ask what sort of layout they find easiest to navigate and if the way you’ve organised your products makes sense to them. You can ask how you could make the checkout process easier too. It’s important not to overload people with too much information, though. If you do, people are more likely to be biased.

By thinking like one of your customers, you will have a better idea of what people want from your e-store. You can then work to tailor your web design to your customers’ wants and needs.

Ideally, we want our visitors to trust us. One way to promote trust is to make information easy for visitors to get to. A strong “About Us” page featuring photos of the people behind your business is a good way to build a rapport with your visitors. This can even turn first-time visitors into regular customers. People don’t tend to like buying from faceless entities, they like to make a personal connection with companies. By adding a personal touch you and your business can seem much more approachable, which means people will be more likely to purchase something from you. It’s vital for visitors to be able to put a face to a name. This has the added benefit of building brand recognition. You shouldn’t forget to add contact information to this page.

Having social media links on your website is a must. They help you communicate easily with your visitors and followers. This lets you give customers regular updates on your products and offers and allows visitors to cultivate a personal connection with you. These links can help you network with other professionals and create a distinct online presence.

Including a Frequently Asked Questions (FAQ) page will also help boost customer engagement and promote trust. A FAQ page provides visitors with a place where they can find answers to common queries without any hassle. It can help people find their way around your site and can make customer service more cost-effective. By paying attention to customers’ questions on this page, you’ll be able to better anticipate what people want from your e-commerce store.

You should also ensure that shipping and return policies are clearly outlined. Customers need to know what can be returned and how to go about doing so. It is crucial that you provide easy access to your company’s privacy policy that covers shippers’ personal and financial information. Write your copy in plain English. Avoid using jargon and industry-specific terms, as this is likely to confuse people. Make sure visitors can easily find reviews. It might be helpful to give people some information about reviewers too, as another way to build trust. Giving people access to reviews is especially important as social proof has been shown to drive purchases, make your website seem more trustworthy, get people taking about you and help people make purchasing decisions.

One last essential element for encouraging people to trust your website is to operate on a secure server and have a SSL certificate. This is now a must for any e-commerce business because it ensures data is encrypted. This means data going from a user’s computer to a website remains secure and unreadable. This means customers can feel secure when providing you with sensitive information, like payment details and credit card information.

Use high-quality images for your lifestyle, product and team photography

Excellent lifestyle and product photography is key to building a successful e-commerce website and serves to build trust in your business. In e-commerce, the old cliché of a picture being worth a thousand words holds true because your products act as the face of your brand.

Keep in mind that you may need to hire a professional photographer to get the images you want, so you’ll need to account for that in your budget. High-resolution photos are vital, as potential buyers often want to see all the details of a product, right down to the texture of certain things. Since looking at photos taken from many different angles is the only way for people to interact with your products, you’ll need to have the best possible photos. Using low-resolution photos can have a significant negative impact on sales.

In product photography, you’ll need to aim to get images of your products showing them from as many angles as possible. Combine shots of your products on a white background with lifestyle photos showing your products being used in context. Providing potential buyers with multiple views of a product gives customers the full picture of what your product looks like. Making sure people can zoom in a view products close up mimics the feeling of physically interacting with something. When considering how many angles to go for the general rule is the more you have the better it is. Having shots showing something from 10 different angles is better than having just 3.

First-rate lifestyle photography is also a great way to showcase the benefits a product will bring to your customers’ lives and how buying a particular product is likely to improve their lives, or solve a problem they may have. You can use high-quality lifestyle photos to push all the right emotional buttons, making people even more likely to buy from you.

Photography plays a key role in one other area of your business, the photos of your team. Professional headshots of your team can go a long way towards ensuring trust and accountability with your customers.

E-commerce UI (User Interface) design considerations

As discussed above, the look and feel of your website is critical to the success of your business. That being said, you also need to bear in mind some interface design factors.

Keep branding consistent and ever-present– Make sure branding is immediately visible, and that your brand identity is integrated into the interface to increase brand awareness. You can do this using headers, mascots and splash screens, among much else. If necessary, redesign your logo for mobile users. Make sure the colour palette you use is consistent over all the platforms you operate in, be it on the web, in social media or on the mobile version of your site. The packaging you use should also follow the same colour scheme.
Use a visual hierarchy to make things stand out- Make sure that all vital information is displayed ‘above the fold’ so to speak. In other words, make sure all the most important things are shown in the top half of a page. Make sure the layout looks natural to the eye. Not making sure of this can cause visitors to become distracted. Can a visitor easily scan the page to quickly figure out what’s important?
Don’t include too many design elements- Don’t take design too far when you’re experimenting. Limit the number of font sizes and colours you use. Be sure to use contrasting backgrounds as this will make for a more eye-catching design.
Don’t go overboard with icons- Stick to the conventions when you use icons. This is not an area for innovation. Staying within established conventions makes people more likely to buy. You should try for a balance between innovation and tradition. Make sure any icons you do use don’t have double meanings.
Avoid unnecessary distractions- Pop-up windows and the use of audio have a place in business but you should use both sparingly to avoid diverting visitor attention away from buying your products. You should only use audio where it’s needed to help describe product features.

By following these simple do’s and don’ts, the interface of your website will be more user-friendly which will lead to more comfortable, happier customers. Happier customers ultimately lead to higher conversion rates for your business.

How then, do you make it as easy as possible for customers to navigate your e-commerce site? Let’s discuss this in the following section.

E-commerce Site Navigation

The concept of not making your customers think too hard and promoting ease of use is key to excellent site navigation. Good navigation helps improve the shopping experience, so by providing intuitive, familiar navigation to visitors you can increase your sales.

The top level of e-commerce navigation should include a sensible set of product category labels. Typically, these consist of one word which describes a wide range of products. People should be able to easy scan the categories and understand what they mean in the context of your e-store. It’s often a good idea to user-test your navigation, and to make the top level of navigation links that users can click on. Make sure any sub-categories are links as well. This is what most users expect of an e-commerce site. It is advisable that you stick to design conventions where navigation is concerned. This means navigation should generally be on the top of the page. Hidden menus are also commonly utilised on desktops, laptops and mobiles to make navigation simpler on smaller screens.

Adding a search is crucial if you want to promote easy navigation of your site. This is good practise as it reduces the time and effort customers have to expend to find what they want. Ensure that you search function is always visible. It’s best to place the search either on the top-right of every page, or in the top-centre. Alternatively, you can put your search function in the main menu. It’s good practise to have a search that accommodates several types of searches. This means people can find products using names, product codes, a SKU (stock keeping unit) number, and by using keywords. You may also choose to include an example search query in the box to give visitors an idea of what they can search for. This also works to encourage people to search. If you allow users to select the way they want to view their results, they can easily filter their own results to find what they want.

Another way you can make using the search less difficult is by using autocomplete to suggest products as people type. This means your customer doesn’t have to put as much effort in, making their shopping experience easier. It might even reveal to customers that you sell something they didn’t know about. Adding the functionality needed to filter searches is also a winning strategy as this lets customers immediately reduce the number of results displayed and minimises the effort needed to find what they’re looking for. People are also used to using standard catalogue page filtering to simplify a search.

One really good feature you can use on a catalogue page is a product quick view function which allows customers to access a more detailed overview of a product and see a more detailed image of that product. This makes it easier for customers to add a product to their wish list, add it to their shopping cart or proceed to the checkout.

By having clear, clickable category labels and a versatile search function to make navigating your site as simple as possible, you can significantly boost your website’s conversion rate and give your small business a great start. The next thing you need to consider is how to perfect your product page design.

E-commerce Product Page Design

The importance of great product photography cannot be overstated, as we explained earlier in this article. It is particularly important when you’re designing your product page. This is because viewing the photography is the only way visitors can interact with your products. This means that their choice will be heavily influenced by the quality of those images. Using high resolution photos will allow you to add a zoom feature so that potential customers can see the build quality. Make sure you allow people to view a product from as many angles and viewpoints as possible. If you can, include moving images and produce product videos. Make sure there is uniformity in your photos too. Generally, it’s best to use a white background to make them stand out. If you use a consistent style people are more likely to trust the site, because consistency implies that you take a professional approach to it. Uniformity of design also allows customers to find out more about product features easily.

Your product page needs to provide people with enough information to engender confidence in your visitors, be clear and concise and provide people with a first-rate shopping experience. To make sure your product page design is as good as possible, incorporate the following things.

A selection of good quality images showcasing your products from various angles.
A title and product overview that are easy to see.
Product images that are the focus of the page. Photos should be taken in the best possible light.
There is a unique, detailed description of each product provided, that explains the thought process behind the design.
Customer reviews of products are provided to promote trust.
A space showing recently viewed products, with plenty of options on the same page so that users don’t have to go through many pages to find what they want.
An ‘Add to Cart’ button that stands out.
Information on the shipping and returns policies to help answer customer queries.

When you have designed perfect product pages, you need to think about what product information you need to give to visitors to make them more likely to buy.

Provide the right amount of product information and maximise customer behaviour

It is crucial to provide customers with any information they need to help them decide whether to buy your products. This may seem an obvious point, but it is one that is often overlooked by e-store designers. It can mean you lose some potential sales. To maximise your conversion rate, you’ll need to include all the necessary information about the product itself.

This can include factors such as variations in a product and whether customers have a number of colours to choose from. In addition, add fundamental information like the size and weight of a product, the dimensions of an item, any hazard warnings and any warranties that apply. It’s also a good idea to provide customers with information about your refund, returns and shipping policies. Be careful not to overload your customers with information though, as keeping things as simple as possible has proven a sure way to increase sales. Use simple, easily readable copy on your whole website. That is going to make people more likely to buy from you.

It is useful to include some persuasive information on your product pages too. Providing social proof in the form of reviews has a significant positive impact on sales. Reviews can also help you to generate trust in your brand. Even negative reviews have been shown to boost sales, if they are not too abundant. This helps convince shoppers that your product isn’t too good to be true and that the reviews on your site aren’t fake. Shoppers make emotional decisions which they then seek to justify, so make the most out of you customers’ emotions. Make things as easy as you can for them. Include sales deadlines and stock levels, as studies have shown that people are more likely to buy quickly if they believe a product is scarce. People are also more likely to buy more in this scenario.

Another great thing to do is to display related or similar products on the page when a shopper is viewing an item. Make sure related products are available and are key to what that particular customer was searching for. This can make shoppers aware of additional items they may want or need. There may also be an option for shoppers to upgrade to a more expensive version of the product they are viewing, should they wish to. By doing this one small thing on your product page, you can really boost your conversion rates.

Now that you know the correct information to provide on your product pages, it’s time to talk about how to design your shopping cart.

Simple, Intuitive Shopping Cart Design

In business, you’ll want to avoid the dreaded phenomenon of high shopping cart abandonment. This can cripple you before you really get started. Therefore you need to use a simple, intuitive shopping cart design to make the process as easy as possible for shoppers so as to maximise your conversion rates.

Shopping carts are a fundamental part of your customers’ shopping experience and of their decision to buy. Your aim is to allow customers to clearly review what they have selected and lead them through to the checkout page as seamlessly as you can.

The established convention is to place the shopping cart icon in the top right-hand corner of the page. A good shopping cart should include the following aspects and functions.

Clearly display the number of items in the cart.
Confirm when products are added to the cart– Make these very clear so that there is no confusion. Ensure that the number of items in the cart is correct at all times.
Essential calls to action, the most obvious being a clearly displayed ‘checkout’ button– Use graphics and colours to make it eye-catching and to make sure it’s a highly visible element of your cart design.
Make use of Mini Cart widgets– These let shoppers send products to the cart without having to navigate away from the page they are viewing. Mini cart and call to action buttons should always be clearly visible where appropriate.
Brief product descriptions and a summary of essential information– Product details are key factor to include in the shopping cart, because this means customers can confidently review their choices without having to backtrack to the pages they were visiting to confirm the information is correct. If you force your customers to do this, it only increases the likelihood of shopping cart abandonment.
Be sure to make it easy for people to edit the shopping cart– If you make it hard to do this, customers will become frustrated and are more likely to abandon their cart.
Ensure all shipping costs and taxes are clearly shown– This avoids making people feel like they have to pay hidden costs, making them more likely to trust you. Remember, no one likes this kind of surprise.

So, now that you have an excellent intuitive shopping cart that your customers can use, you need to turn your attention to the final vital element of your website design. That is, how to come up with a first-rate checkout page.

E-commerce Checkout Page Design

When it comes to the checkout page of your e-store, functionality and ease of use should always triumph over style. The key to a fantastic checkout page design is to make things as clear as you can, promote trust and stick to convention. Ensure you know what customers expect and want to see on a checkout page, as the success of every business is measured by the number of sales.

The following are a few do’s and don’ts to help you create a great, successful checkout page that helps drive sales.

Don’t make customers sign-in or register in order to shop– Registration should be done during the checkout process and not before. If a registration barrier is put in their way at the beginning of their shopping experience they are more likely to walk away. After they have chosen items they would like to buy, they will be more willing to put a little time and effort into the registration process. You can also provide shoppers with a guest checkout option, if they would prefer not to register with you. This is a crucial element, as being forced to register can be a big turn off for shoppers.
Let customers know if an item is unavailable before they checkout– This reduces shoppers’ frustration with the process, and lets them easily edit their cart before buying.
Keep the checkout process simple– We all know that the checkout process requires user input, but keep things simple. Use the minimum number fields necessary to get the information you need. Lead shoppers through the checkout process in the fewest possible number of steps.
Highlight any input errors early in the process– It is really irritating for customers to have to begin the checkout process again if they make a mistake. So, if there are any errors or mandatory fields that have been missed in the process, ensure that shoppers can correct this in the same viewport. Don’t just assign them a random error code when they submit the form.
Provide users with checkout steps or progress bars– This is a very useful, simple framework to utilise when you are using a multi-page checkout process. It lets customers know where they are in the process, what’s up next and how far they have to go until the process is complete.

Provide shoppers with support– If you have the resources available, provide a chat function with a person on the other end to whom customers can address any questions and concerns they may have to. This is ideal, but if this is not a viable option for you, make sure there is a support contact number clearly displayed on the page. This is vital. If you have done all the hard work up until this point, you don’t want to lose a sale for want of a quick chat. Just giving your customers a little time can make the difference between making a sale or not. Providing good support can make the difference between gaining new customers and having dissatisfied, anonymous visitors.

Conclusion

Today then, we have detailed the most essential, fundamental components you need to build an e-commerce website that converts. We’ve discussed how essential it is to keep things simple, and to conform to certain design conventions. We’ve discovered how important it is to give shoppers a good, enjoyable user experience by simplifying the user interface and highlighted how important excellent product photography is in this business. We have talked about how you should keep users in mind when designing your website, and how you can provide them with easy ways to navigate your site. In addition, we have provided you with some great design tips for building great product pages, providing shoppers with a fantastic, useful shopping cart and building a successful checkout page and process. The tips provided aim to garner the best possible conversion rate for your e-commerce website.

We hope that you now have the confidence to go and build your very own first-class e-store and get your business off to a fabulous start. Be sure to check out Simple Shop now for lots more helpful, inspiring tips on designing, running and managing an e-commerce website.