eCommerce Web Design: 10 Principles for Success

The success of any eCommerce site depends on a well-developed strategy that combines aesthetics, usability, structure, and layout. When these facets all work together (along with flawless development and solid SEO), your site will be primed for high conversions. Here are 10 sequential principles that I bring, as Creative Director, to every site design to ensure our clients’ success.

1. Know Your Brand

Can you describe what your eCommerce store does and sells in ten seconds? Will your employees and customers say the same thing? If not, you need to uncover what your brand really is and how it currently fits into your industry/market. Once uncovered, steps can be taken to adjust how your brand is perceived and how it is positioned; i.e. choosing proper typography along with an appropriate color palette and styling. If you already have a firmly established brand, great! Just make sure you are happy with it and the overall direction it is heading.

eCommerce Web Design: 10 Principles for Success eCommerce Web Design: 10 Principles for Success

2. Know Your Customers

Who wants to consume your products? Are you missing out on a potential audience, large or small, that can increase revenue? By properly identifying who your target audiences are and the demographics they are in, you will ensure that your design strategy makes these people feel comfortable and the site design feels right to them. This is the first step in building the trust factor. Unlike sales in real life, there is no salesperson to guide the consumer through the sales funnel. That is why it is crucial to understand your target audience and ensure through the design that your site looks and feels trustworthy.

At Groove, we start the process of knowing your consumers by identifying the site’s buying personas. By identifying and vetting out the various buyer personas and how they expect the eCommerce experience to be, you ensure a proper experience that leads to high conversions.

3. Focus on Usability

Making your navigation easy and intuitive is a science. That doesn’t mean that it needs to be overly difficult or figured out by someone with advanced degrees and years of research experience to manage. Rather, it just needs to be carefully and strategically thought out. Your products need to be grouped into categories and subcategories that make sense. Your products should also be presented in a clean grid with proper labeling that is easy to read and scan.

4. Give Users a Path

Users are not afraid of or deterred by clicking on a link or CTA, just as long as those paths make sense and bring them to a page where the content is interesting, organized, and it is a natural progression toward an intended destination. Users tend to be deterred by clutter and a page with no real paths to follow. Since conversions don’t necessarily happen on the home page, giving your users these clear paths to follow is smart. Having a simple and clear main navigation is one good path, having clear calls-to-action and call-outs for popular items is also a good path. That is three clear paths, add a clear and well-placed site search block and you now have four strategic paths for your user to enter the sales funnel.

eCommerce Web Design: 10 Principles for Success eCommerce Web Design: 10 Principles for Success

An overuse of text links can also clutter a page. I prefer using images and icons whenever possible to provide a visual solution to navigation. A solid icon set can provide some extra eye-candy and a clever design element for the site and help make navigation simpler. These are some of the details that make a decent site a great site.

5. If it walks and quacks like a duck…

I have a saying I use regularly here at Groove: make sure it works as expected. While users crave an interesting and satisfying experience, solving puzzles or trying to figure out unexpected features or functionality is not what they want. If something looks like a link, it should be a link, otherwise redesign it. Do not include a hover effect for something that isn’t clickable. Users quickly come to the conclusion that when things don’t work as expected, red flags get raised causing your users to question your site. Having elements that do not work as expected can be the kiss of death. Your design & functionality should do everything possible to prevent confusion and minimize compromising trust.

6. Push the Right Technology

It is true; some of your users will be on old machines using ancient browsers. That doesn’t mean we should be designing the web for these folks. But it also doesn’t mean we should be designing sites for those using only the most cutting edge machines and browsers. The goal of any eCommerce site is to increase revenue and conversions. There are many things we can do to improve the numbers, but there a few things you should do to prevent a decline in numbers. It may not be in the budget to have a fully responsive eCommerce site, however the design should be flexible enough to present your info and content clearly on most devices without tons of extra development time.

Your site should avoid using Flash; not only is it clunky, but it also is not supported on Apple devices. Avoid trendy technology like parallax scrolling, it is cool, but doesn’t improve user experience and conversions. And lastly, clean, semantic code is your site’s best friend. Nothing can positively impact a user like a fast loading site that enhances the experience and your products.

7. Google trained us to Search

Its true, search is very important. Your site design should include a prominent, yet appropriately designed search. We’ve successfully executed a lot of creative treatments for search because I feel like search should never be a throwaway element. Understanding user personas will help define the importance of search in your site and utilizing good design fundamentals will help determine appropriate location, styling and calls-to-action text.

8. Consistency is Key

A consistent layout is crucial to a successful site. Using content management systems like Magento make a consistent theme easier to maintain. Header, footer and product grid must be the same on every page; but so should many of the style elements and aesthetics. For example, text should follow basic fundamentals of good typography. A color palette should be established and strictly followed. The tone of the photography and the text/descriptions are important and should always follow the tone of your site and follow the brand identity. A website’s calls-to-action also need to follow a strict hierarchy, which holds them to specific colors, sizes, and styling throughout the site. Your final site design should be easily represented in a style guide that features all form elements, buttons, font families and sizes, colors, and more.

9. Less is More

No one wants to be overwhelmed with information and content. Do not feel compelled to fill up all of the space on a page or cram more categories into your navigation. Proper whitespace improves readability and allows your content to stand out better. By utilizing a solid grid structure your layout will have a constant look and feel throughout the site, while allowing content to be clear and pages clutter free.

10. Own the Calls-to-Action

I could write an entire blog about the importance and power of calls-to-action (AKA CTA). A couple wise rules of thumb for CTAs: maintain constancy throughout your site and focus on the text used. For example, a great call to action for your contact page is “Contact Us Now” instead of “Subscribe”.

No truly successful web site comes to fruition without a lot of planning and research. Understanding these 10 principles will allow you to focus your attention on what is important and crucial to a successful web design project. The web is an amazing medium and producing a high converting eCommerce web site that offers an incredible user experience starts with understanding these principles and developing a strategy that focus on the fundamentals.

Got Comments?