E-commerce Website Review of Koi Botanicals
E-Commerce is booming right now.
And even the clients that once told me that they had no need to sell online are having me rush their e-commerce websites so they aren’t left behind.
Today, I’m reviewing a new e-commerce website called Koi Botanicals. I’m going to go over the main pages as well as give tips on color and images. A special thanks for the submission!
Things to watch out for when DIYing your e-commerce website (and what I found on this site).
The header is taking up way too much space on the website.
The goal of a website is to get people to either read a post, buy a product, or sign up for a service - it’s never to look at the logo.
When landing on this site, depending on the screen size, all you see is the logo. The product is being pushed down. When deciding on how big your header area should be, ask yourself:
Is my header area taking up more than ¼ of the screen?
Am I forcing a stacked logo on the site?
Can I upload a horizontal version of the logo on the site to avoid the space?
Will it help if the logo goes on the left side of the screen instead of the center?
Color is making this website hard to read.
Honestly, this site is bordering on the Myspace pages that were created by emotional teens using dark pink text on black. They were so hard to read (and not just because the content sucked).
Just because you have a color scheme, it doesn’t mean you need to spray it everywhere. Decide what color will pertain to which part of the site. For example, which color will help emphasize buttons and links while another will only be used for details such as line separators.
Use these colors sparingly. In this site, the background color makes the text harder to read since there’s little contrast between them. It also distracts from our main focus: the product images.
The fix? Go for a more simple use of color. A white background throughout the page will help with readability. The header can be another color while buttons and links yet another.
Text on this e-commerce website is too hard to read.
The readability issue on the text is partially due to color but also to the text size and the way it’s being used. Here’s a few things to keep in mind when it comes to text on your website:
If everything is bold, then nothing is important. Use bold only when you want to emphasize a portion of the text. If you’re bolding to make it easier to read, that’s a sizing issue.
Same as above for italics. If you’re adding italics to a whole section, it’s only going to make it harder to read.
Make sure you’re using ADA compliant font sizes. You can simply google contrast checker for a free one to see what it comes up with. You could also squint your eyes or turn down the brightness on your computer a bit. If the text is starting to get hard to read, you need to up the contrast. This can be done by changing:
Font Size
Font Type
Font Color
Background Color
Image cropping needs to be consistent on an e-commerce website.
One mark of a DIY or rushed e-commerce website? Images aren’t cropped the same size.
Make sure to create images that are exactly the same dimensions to avoid the off-putting differences on the product page. You want the products to be the focus, not the image sizes. One tip: use something like Canva to crop images. Simply create your desired image size, upload the images, add them, export, and done.
You can then utilize that same Canva file for the next time.
Hero sections are bland.
A “Hero Section” is the top-most area of a webpage. It’s what loads first. If this area has no eye-candy, headline, or call to action, you’re in trouble.
What you should do when creating your own e-commerce website is to open all the pages and DON’T SCROLL. Ask yourself:
Are the pages enticing?
Is the focus on the product you’re selling?
Am I telling the user my main goal (i.e. sale)?
Or Am I telling the user what I’m about?
Am I giving the user their next step (i.e. shop all lotions)?
If you find that you’re site is giving “homework” in the hero section or pushing the product focus down, you need to pivot the emphasis.
This e-commerce website has no contact form.
Other than a hero section, this is one of my biggest pet peeves. How are people supposed to contact you? Although some sites do offer an email and mailing address, you need to know that your site visitor is lazy.
You’re creating a website that’s drunk/lazy/tired friendly.
That said, filling out a contact form is 10x easier than copying and pasting an email address onto the desired email provider.
Things that this e-commerce website is doing well?
Photography on the website.
Although the photos are a bit busy and could do with removing some of the books (or at least covering the text) the images are all consistent and well branded. As a side note: make sure to always have styled images and solo images with just the product.
Having testimonials on the product page.
Utilizing your testimonials on the product page helps give the user some social proof. I would recommend sprinkling these testimonials throughout the rest of the e-commerce website, such as the home page.
Navigation on an e-commerce website.
This site keeps their navigation focused on the product - which is perfect! Another sign of a DIY e-commerce site is the “Shop” dropdown or pages that aren’t really helping the user get to their desired product faster, such as the About or Contact Us pages.
That’s it for this e-commerce website review!
Make sure to comment on the one thing you’re going to change on your site, the one thing you’re doing wrong, or whether you’d like me to go review your website as well!
