- Website Design & Development
Talk to anyone here at the Groove team, and they'll bestow the benefits of finding and using the perfect eCommerce platform for you business, myself included. (Full disclosure: Groove Commerce is a loyal Magento Professional Partner.) But having all the right functionality for your site, from gift cards to multiple shopping levels, from one page checkout to dynamic blocks, isn't enough to see those increases in conversion. The front-end design has to be user-friendly to your shoppers, otherwise the platform won't even have a chance to shine.
In this month's Design 1, 2, 3, we're going to look at an eCommerce store that uses the Magento platform, and look at ways in which simple design changes could improve usability, experience and ultimately conversion.
1. User Confusion
The Related Products sidebar is a fantastic feature for any eCommerce Platform. It's a gentle push to the consumer, psst, do you like Rest tea? You'll probably like Rise tea too! C'mon, give it a try. It helps them add variety to their purchase without much thought, unless they're on this product page.
Given the instructions "Check items to add to the cart" - what do you think the user needs to do? I checked the boxes and nothing happened. I looked around for an "Add to Cart" button or link and found none. Users are supposed to check the main product's "Add to Cart" in order to add a related product. Worse yet, when you do that, because the QTY for the main product is already 1, it adds that to the cart, even if you were just trying to add the related product.
While I think the functionality is a bit buggy-here, it's really the design and layout of the page that's making it difficult to understand what will happen next. The related products should some how be worked in with that Add to Cart button, or better yet have their own Add to cart buttons in the sidebar.
2. Color Hierarchy
Choosing the colors of your calls to action is actually much harder than it may seem. While you may want the colors to match with your company branding, the real goal of the CTAs are to stand out - and that usually means not having them match. It's also generally recommended that CTAs be green or orange because studies have shown that those colors have the highest conversion rates. (I have my own theory on why this is, but I'll save it for another post.)
This site chose to use green for it's Add to Cart button. A green that matches well in their color palette, a green that on its own is soft and lovely. But this green does not make a good color for the CTA because it doesn't stand up well against the rest of the page. In a quick glance, the "E-mail a Friend" button looks like the primary call to action with it's deeper green. Even the "My Cart" and "Categories" headers draw more attention in the sidebar than the "Add to Cart" button. A simple change in color would help that CTA do it's job (convert people/increase UPT) much better.
3. Poor SEO
You might think poor SEO doesn't have much to do with site usability, but if user's can't find your site, then there is definitely a usability problem. You can't see it from the image above, but the page's h1 is the product name, in this case Rest, which is correct placement but lackluster execution. "Rest" is never going to show up as a result in a product search for tea, herbal tea, rooibos, caffeine-free tea, tranquil tea etc. They're missing a great opportunity for keyword-rich product names. Likewise, the page title is also simply the product name. No company name, no category name, no keywords, nothing, simply just "Rest."
And an additional heads up to the owners of this site, when a user clicks on "Email to a Friend," on that page, the page title is the default: Magento Commerce.
Choosing the right platform is very important, don't let it go to waste with poor design choices. Find a fresh pair of eyes that you trust - people who know your industry and/or know eCommerce - to review your site upon launch, after three months and each year. Remember, success is in the details.
Mentioned in this Post:
Product Page :: Bird Pick