6 Key Principles For Great Website Design
It doesn't matter how complicated technology gets, these key principles remain consistent and fundamental for any eCommerce site.
1: Understand your brand
If you haven’t thought about your brand culture, I don’t personally think you can embark on the design of your website. This is because your website design needs to directly reflect and represent your brand values.
I own a skin, health and beauty store named Jersey Beauty Company. When my team and I designed the website for Jersey Beauty Co, we wanted the design to amplify our values. At the heart of Jersey Beauty Company, there is a desire so celebrate innate, unique beauty that resides within each individual and we wanted this to come across to our web visitors. In other words, we wanted our website to make people feel celebrated or loved. The light-hearted fun of Jersey Beauty Company is thus conveyed throughout our website. Clients and prospects see a unique combination of colour-filled happiness, authentic beauty and upscale savvy. Jersey is portrayed as clever, positive and at times cheeky. Bold and vibrant colours with clean lines lay a foundation for happiness.
- List 3 words that describe how you want your web visitors to feel when they browse your eCommerce site…
- Some ideas for how I can embody these words with my web design are...
Often, when it comes to your website, the most significant struggles are not with trying to understand what to put on your website, but more – what to keep off. What can you do to keep your site simple and clutter free?
Let’s look at Apple. Look at the simplicity of their site. It showcases their brand remarkably well. Everything is grey, and the only colour is from the products themselves. Steve Jobs is often cited as ‘the dude’ when it comes to simplicity of design. His presentations were legendary, memorable and simple. He is quoted as saying: “Simplicity is the ultimate sophistication.” And for Apple, that’s true. They took everything off the phone apart from the one button in the middle. Simple design that changed how the world used phones.
- Three ways that I can spring-clean my website include...
- My three primary web colours will be...
I don’t want to big up Steve Jobs too much, but he also said that “Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.“
So while you have to keep the design simple, it has to stay functional. People have to be able to use your website easily and intuitively.* The simpler the structure of your site, the easier it is for users to navigate.*
Keep menus at the top and on the left – that is where people expect to find them. Keep checkout information on the right – that is where people expect to find it. If these items aren’t there because of your sexy design, then you are making the viewers work harder to find what they want. The bottom line – they buy less.
On the Jersey Beauty Company site, you will notice that we have a top menu for the key brands we sell, and then a search and category menu on the left for that brand. Our basic site structure has always been the same – menu on the top and category menu on the left, and it has worked well for us.
- What is the main reason people visit my website/ what are my customers looking to buy...
- What are the five main categories on my website…
I’ve mentioned this already but is has to be ridiculously easy for customers to find the products that they need. And I mean ridiculously easy! Don’t take anything for granted. Once you have a site framework up, you need to get people to use it. Watch them and see what happens.
On the Jersey Beauty Company site, if people know their favourite brand and product already, it is very easy to find. They can just type it in the search bar, or head straight to that category. We even added a favourites feature, so when they are logged in, their favourites are right there.
But what if someone comes to the site and doesn’t know their favourite brand or product? How do they find information out?
Working the beauty/skincare industry, it worked for us to add a “shop by skin type” section. We then list the products that are best for your skin type, making it all as easy and obvious as possible.
Before I carry on, a quick aside about search bars, we have found that when people type in their product in the search bar and head straight to that page, they are more likely to buy from us. In other words, sales originating from the search bar were more likely to result in a sale than those that didn’t. For that reason, the search bars are in key places on our website.
- Does my website have a search bar? If not, when will I install one?
Add recommendations. Add reviews. Make them easy to manage. People love recommendations, so make sure you add these into your design whenever you can. Everyone wants to know the best sellers. Everyone wants to know what other people who purchased this product also purchased. It’s a great way to up-sell and cross-sell products. People are curious, and adding these feature to the design is a great way to get them to search through your site and try new things.
Amazon does this very well with their customers who purchased, all purchased…statement. This is not there by accident….
While we are talking about recommendations, always have reviews on your website. People read them, and it influences their decision to buy. Fact. Reviews are critical because they add independent credibility to your site. They give customers confidence. Don’t take down the bad ones because you don’t like them; people see through that. If you’re concerned, leave the review up but include a great response underneath it. If you get too many bad reviews, take the product out of your range, it’s not helping you. The people have spoken, listen to them!
- Collate five reviews from those who have shopped at your store or tried your product, list them below…
- What are your best selling products?
6: Clear call to action
Last but very definitely not least, is there a clear call to action? I cannot overstate the importance of this. You do not want to hunt for the ‘buy now’ button!
When you look at the Amazon product page, the call to action is really clear; it stands out from everything else. There is little colour in the menu, which is very Apple, the ‘buy now’ button is on the right-hand side of the page, where it should be, and it is the only thing that is in yellow. You see it instantly. It is clear.
It may sound obvious, but it is essential to use verbs like ‘Buy Now’, ‘Subscribe’, ‘Select’ or ‘Add to cart’ etc. They are very clear identifiers for the customer on what they should do.
I like the simplicity of the ‘buy now’ button. It’s my preference. But you can also be creative, as long as you are clear. Buttons like‘I want to start my FREE trial’also work well, particularly as it is written in the first person.
Another mistake that we made was on the “Have you tried this?” Section of the site. There was no clear call to action underneath the image, so not many people clicked it. We changed it and the response was much better.
We have started to add buttons to images on the home page. However, you can’t assume that people know to click on the images, tell them. Make it clear and stand out.
Charity Water is an excellent example of a very clear call to action button on the main image. Brilliant.
Many websites use the word ‘next’. The problem here is that you don’t know what is coming up. You need to tell customers what is around the corner. Amazon uses journey map at the top. So do we, so customers know where there are on the journey. Rather than Next, we used phrases like “Proceed to Checkout” on the CTA button and “Continue to payment” and finally ‘Place order”. All deliberate. All are avoiding the word next.
Finally, remember that the customer faces a critical decision. Do they go on to the next stage, and press that button or do they leave your site? If there were ever a time to add reassurance, this would be a great time to do it. It is crucial to think about how to provide that reassurance.
Anything we can do to get customers to press that button helps your business. Don’t make life harder for yourself; make it easy!
- My main call to action will be…
- I will place this button in the following locations...