Killer eCommerce Site Design Tips That Work

You’ve just opened your online store, and have been promoting it everywhere. As you track visitors to the site, you notice something alarming:

People are coming to the site, but they aren’t buying anything!

Why is that? You’ve read everything you could on having a beautiful site, you hired a great web team, but you’re in a panic because you have no idea why sales aren’t happening.

As the Principal at Verbal+Visual, we find new partners (clients) of ours coming to us with this very issue time and time again. There are a number of elements to consider when discussing eCommerce optimization, so we’re breaking them down into a 7 part series. Each week, we’ll be focusing on one particular area of improvement for your eCommerce experience to significantly improve conversions.

Next up, what we’re known for: Design!

Before we get into the tips, some preliminary information about design that would be very valuable for you to define would be the following:

• Are you disrupting an industry or adding to it? The difference being, do your customers have a learning curve associated with your products or will they “get it” immediately? Your initial eCommerce content strategy may focus on learning first, commerce second, if it is the latter. This can influence the design of the site
   significantly.
• You should know the flow of a user from the time they arrive at your site until the time they leave. What do you want that flow to look and feel like? What pages should they click to get to other pages and to get to checkout? Here’s a great article on creating the flow of your online experience.
• You should know where a user’s eye flows through a particular page: top left to top right to down and left, and then to the right, and repeat. Prominent blocks of colors, buttons, or imagery can disrupt this natural flow, so be cognizant of that when designing. Onto our tips!

Create a Visually Interesting Website.?

First and foremost, when you look at the site, is it eye candy for the user? Does is pique their interest in a unique way? This can be done using unique layout, beautiful imagery, compelling copy, or a combination of the 3.

This seems so obvious, and it is. But it’s number one for a reason. Unsure if you’re website is interesting upon first glance? Ask your friends and colleagues to look and be clear that you want honest feedback. Make sure that a large portion of your friends and colleagues whom you ask are in the target audience or at least within the industry.

If you’re still unsure, we follow two simple tests: Do I look at it for longer than 5 seconds? Would it fit as a winner on awwwwards.com, what we consider the ultimate “great website” website.

Keep Consumer Flow Color Consistent.

The point above about knowing the way you want your users to flow through your site should incorporate having the same bold color throughout the site.

Add To Cart buttons, Check Out buttons, and any other of your primary calls to action should be in your strongest, boldest color within (or sometimes even completely outside of) your brand color palette.

If you’re looking for some information on how people react to color and what certain colors stand for, check out the color chart we reference often when designing a site.

Use Big, Colorful Action Buttons.

As we just mentioned, having consistent, bold color for user flow is very important. But what about size? Interaction? Also very important.

If you notice, on any big brand shopping experience, the size of the Add To Cart button is huge. The Checkout button is too, and it’s easy to find no matter where you are on the site. A good user flow combined with easy to see buttons makes shopping online a breeze for users, and is vital for conversions.

Keep It Consistent.?

Consistency means using the same fonts (colors, sizes, faces), colors, imagery, etc., in the same situations over and over. An early part of our design process is creating a 1 page standards guide, displaying all headers (H1-H6), paragraph copy, captions, secondary copy, grid formats, etc, so that when we need to pull from the style guide, everything remains consistent across the entire site.

Going one step further, we now make our style guides as a hidden page on the website and tie in the CSS from the entire site to that page. This keeps our styles consistent across the board.

Have Mobile Responsive Design ?(duh!).

This is a no brainer. If your site doesn’t work well on a mobile device, you’re losing HALF of your audience right off the bat. Over 50% of online shopping is now done on a mobile device, and we even design our experiences for mobile first many times to ensure that the mobile experience is perfect.

As mobile shopping grows, this becomes more and more important for the growth of your brand.

Have Compelling Content, And Organize It Well.?

More so now than ever, compelling content helps in the story telling process. Take beautiful, consistent photography, and consider adding in elements like product / experience videos, cinemagraphs, and animated gifs to make the experience while shopping easier and more interactive.

In addition, make sure that your navigation structure is easy to use. Nothing will drive people away quicker than not being able to find what they're looking for. Run some quick tests with friends to see if they can find a particular item – if it takes them long than a few seconds, you need to fix your navigation and hierarchy.

Use Bigger (and fewer) Form Fields.?

Your checkout experience should be a breeze. It is statistically proven that the fewer form fields that exist, the more likely a user is to checkout.

Make form fields large and welcoming to fill out versus small and tedious. Hide form fields until they are absolutely needed. Break up the process so that you only see a few form fields at once.

Our friends at Warby Parker have distilled the process into just 11 form fields, and besides the quality and affordability of their glasses, their ecommerce experience is a large reason why.

Email, Our Forgotten Friend.?

Designing your email newsletters and shopping follow-ups is an important way to regenerate interest from missed opportunities.

Offer incentives for signing up to your email list, put it in a pop in window and/or in the footer of your site on every page, and make sure people sign up.

Then, integrate your email system with a system such as Klaviyo, which allows you to send follow ups for things like abandoned carts and abandoned product pages, so that once a user comes to your site, you can get them to keep coming back for more.

From a design perspective, design your emails with a singular focus and a large, brand consistent button to send subscribers to your site.

As you’re going through the process of updating your design, you should always figure out how to test your results. We recommend using Optimizely or CrazyEgg to check how changes to your site can improve or decrease conversions and user flow.

What are your best ways to improve eCommerce site design? Leave your comments below!

If you’d like to learn more about eCommerce website design and development, please visit our blog at verbalplusvisual.com/blog