Google

The Definition of the Perfect Ecommerce Website Design

EcommerceIt’s easy to get carried away when building an ecommerce website and even more so when designing it.  You add beveled and bubbly text, shadows and underlines, clip art icons and real-life photos, and before you know it your website looks ridiculous.  Unless there’s a method to your madness, those excess digital designs are probably adding little value to your website.

If you’re still debating, just look at some of the world’s most accomplished ecommerce websites – Amazon, eBay, Zappos.  What do they have in common?  They adhere to the philosophy of function over form.  They have the funds to do anything they want, but they use it towards making it work rather than making it pretty.  In other words, they dedicate their sites to improving usability for the consumer as opposed to studding their sites with 3D effects.

You have to treat your website like you would treat a brick-and-mortar business that has no staff.  Make it easy for consumers to get in, grab what they came for, and get out.  Make the experience enjoyable BECAUSE it’s so easy.

Right now, you’re probably thinking, “Wait a second, aren’t you website design company?”  You might call us that, but I prefer the term website development company.  There are many ways to explain the difference but for the purpose of this article I’ll put it this way:

The statement “make my website look beautiful” might be answered this way:

  • A website design company would say – “OK! We can do that!”
  • A website development company would say – “Why? Who’s the target audience? What is your existing brand image like? Will a beautiful design add value to the user’s experience?”

You can see the difference.  We’re a website development company that asks the right questions and now has the answers for the perfect ecommerce website…

Transparent Homepage

Think about Olive Garden for a second.  When you pull up to their restaurants what do you see?  A big sign that says “Olive Garden – Italian Restaurant” and a building designed like a Tuscan villa.  Before you step inside, you know exactly what kind of food experience you’re about to get.  This same concept of transparency must be applied to your website:  from the moment someone lands on your homepage, you need to be as direct, clear, and authentic as possible before users even begin to click.

So when a new visitor lands on your website you’ll need to answer these questions:

  1. Who are you?
  2. What do you sell?
  3. Why should I trust you?

Everything you do should be built around the answers to these questions, because if you can’t answer these questions, then how will you move potential buyers further through the funnel?

You can answer these questions through a combination of means, none of which is a long-winded explanatory paragraph.  A solid design, high-quality graphics, strong branding elements, hard-hitting titles, obvious navigation controls, well-known security symbols like Veri-Sign, and clearly stated privacy policies and guarantees are all simple, yet more effective ways of telling people who you are, what you sell, and why you can be trusted.

Because that’s what transparency is all about – trust.  Trust makes a user more willing to stay on your website, browse around, and make purchases.  If you can design an ecommerce website homepage that delivers transparency, you’re already halfway down the road to perfection.

Just look at the homepage for Columbia Sportswear.  What do you see?  High-quality imagery with people wearing Columbia clothing in action, info on the latest sports technology, and a reference to the company’s roots (“SINCE 1938”).   The logo, photos, and titles are all right there in your face.  That’s transparency:

columbia

Intuitive Navigation

After landing on a homepage, a user needs to know what to do next.  It’s your job to make that possible.  By providing a well-organized and intuitive display of tabs and drop-down menus, users can quickly scan and find the portion of your business that they seek.  The faster they can move through your products and services, the easier it will be for them to transact on your website.  You can even encourage faster navigation by adding convenient “past purchases” or “similar products” sections in the sidebar as they search.

The best way to display tabs is to work with the way people read (so left to right and up to down).  That means putting your most important information in the upper left corner first.  This will also help you keep your most important information “above the fold” or before the bottom of the screen where users have to scroll to see more.

There are other ways to implement easy navigation too.  Include a visible search bar for users with specific needs.  Create an accessible FAQ section for curious visitors and make your customer service number readily available for concerned visitors.  The eBay.com homepage is a great example of intuitive navigation, with a huge search bar/button across the top and popular categories listed on the left:
ebay

Powerful Imagery (and Videos)

Ecommerce is far from perfect.  While your customers can buy your products from anywhere in the world, they lack the ability to touch, hold, smell, taste, feel, rub, or accidentally break your products (ok fine, that last one IS perfect).  That’s why photos, as well as videos, are crucial for the sale of your product.  They bring your products to life and make it possible for consumers to make educated purchasing decisions.

Therefore you need your photos to be as awesome as possible.  They should have a high resolution, vivid color, large size, viewable angle, and overall comprehension.  And you want to use a plain background (rather than an image) to make sure they stand out on the page.  Your videos should also be high resolution, show your product in use, and inspire your consumers rather than just inform.

Where do you need photos and videos most?  On the product detail pages, of course.   The best ecommerce websites offer photos from different angles with different color combinations and offer videos that showcase the product in action.  That extra effort equates to more sales.  Just look at what Zappos.com does to a simple shoe.  They offer three different color options, seven different photo angles, plus a video!  If that doesn’t convince you, then nothing will.
zappos

Well-Organized Content – It’s More Than Just Words

Images are great, but content is king.  Written content defines an ecommerce website because it provides all the relevant information for your customers to enable an easier purchasing process.   This content can bring products to life through descriptions and stories, it helps answer nagging questions, and it spells out processes that might be initially complex; all things that people want and need to know.

But content isn’t just about writing good quality descriptions under your products.  It’s about putting the right content in the right place for the right person.  Think about it – not everyone reading your website needs or wants to know every bit of content you provide.  Take Kohler, for example, who sells toilets.  They probably have homeowners, designers, plumbers, and architects all reading the same content for the same product.  How do you create and provide content for all these different audiences on the same page?

The solution is through content organization.  The key is to use the space on your website pages to section off certain information for certain groups of people, allowing them to skip over or hide it as they please.  Sub-headers, linear formations like boxes, tabs, buttons, and drop-down menus all enable this organizational process to exist, so use them wisely.

Check out a product on Kohler’s website to see how they arrange content to describe a toilet to different audience segments.  For instance, an architect might look for the “Dimensions” section, a plumber might seek out the “Parts, Service, & Support” section, and a homeowner might focus on the “Features” section.

(Ya, we just showed you a $6,600 toilet!)

Obvious Call-To-Actions and Customer Service

You measure an ecommerce website’s success by its ability to do commerce, or in layman terms, to sell.  The call-to-action is the phrase, link, or button that prompts a user to make a transaction, whether it’s calling the company to request a quote for service or adding a product to the cart.

The perfect ecommerce website has a clear and concise call-to-action.  The CTA is designed to be as obvious as possible (without going over the top).  It is also listed in consistent places throughout the website.  Don’t have the “Contact Us” email or “add to cart” button in different places.  Remember to utilize the header and footer sections too as they stay consistent throughout the entire website.

When a customer has difficulties making an action, what’s the first thing they do?  Call customer service.  For this reason, your customer service button or phone number needs to be just as obvious as your purchasing CTA.  Customer service is vital to the success of every ecommerce business and deserves the same amount of attention as everything else, so put it somewhere obvious like the header or footer.

Take a peek at Amazon.com for an example of obvious and strong CTAs.  The shopping cart is always in the upper right corner, all the CTA buttons are consistently yellow, and the “Help” tab stays at the top – very hard to miss:
amazon

Straightforward Checkout

For any ecommerce website, check out is the final and most important step in the purchasing process.  Unfortunately, this is where too many websites lose business and customers.  Make the process too complicated with too many steps, checks, and clicks and your customers will get bored, confused, or deterred.  Offer too few steps and safety features and they’ll question your legitimacy.

The process of checking out has to be as straightforward as a convenience store checkout counter:  walk up with the item, pay for it, and leave satisfied.  The perfect ecommerce website designs its checkout process with these three easy steps in mind:

  1. Review items for purchase in a checkout cart or section
  2. Pay for items in an easy-to-follow and noticeably secure platform
  3. Be provided with a confirmation/receipt and have it sent via email too

At all times, users should be informed of the three-step checkout process via a breadcrumb trail above the checkout process.  Similar to seeing the length of a store’s checkout line, seeing the steps it takes to checkout makes a customer more comfortable transacting.

Google Analytics is used by many ecommerce websites to track where customers are aborting the checkout process.  Check out their video on the importance and challenges of the checkout process:  http://www.youtube.com/watch?v=3Sk7cOqB9Dk

Page Consistency

With dozens of pages per website, it’s easy to see why pages can vary from one to the next.   However, backgrounds, fonts, colors, and overall design need to be consistent throughout the entire website.  Consistency reminds customers that they are still on the same website, makes it easier to navigate, and also increases visual appeal.

One of the biggest challenges ecommerce companies face is having their checkout look like the rest of the website.  Spend the money and get an SSL certificate so you don’t use the “shared” one allowing you to keep you checkout under mywebsite.com rather than the URL changing to mywebsite.bigcommerce.com.  Consistency, like transparency, helps to build trust with the consumer.  A well-designed and well-organized website proves that your business cares about its reputation as well as its customers.

As I always say, your website has to look professional enough to take design out of the equation.  If you follow these simple instructions above, your website will have all the design it needs and become the definition of the perfect ecommerce website design.  You can also request a quote and LeapGo will be more than happy to help you develop the ideal design for your ecommerce website.

What do you think?  What have you seen on an ecommerce site that you love? What do you hate? Tell us below: