For three years now I have successfully avoided the Black Friday
madness by shopping online on Cyber Monday instead of in stores. It
seems that I’m not the only one either. This year many stores, such as
Toys R Us, offered Black Friday deals online as well as in store fronts.
This allowed me to get the best possible deals since different
discounts were available for different items for each of the two events.
Because of shopping online, I could easily jump from one online store
to the next to compare availability and prices. The result? I bought way
too many gifts for my kids this year simply because of the amazing
deals available from multiple stores, all from the convenience – and
safety – of my own home.
The second result? I’ve also started purchasing produce online from a
local farmers’ coop, which delivers organic fruits and veggies right to
my door. Before, I had to brave our overcrowded Walmart or poorly
located local organic store up to once a week for fresh produce. Face
products, vitamins, and other healthy food items I also purchase online
due to the variety available and the fact that some of these stores
offer an automatic monthly purchase option. So I don’t even have to
think about re-ordering. And I keep wondering why I didn’t do more
online shopping before. Was I just loath to jump onto the digital
shopping bandwagon? Or was it because ecommerce wasn’t that great just
until this year?
If you guessed the second reason, you guessed correctly. (Only a tiny
bit of the first reason is a factor due to a weird combination of my
love for new technology but also my fascination with the “olden days”.)
Most online purchases I’d made in the past were a failure. Sometimes the
product that arrived didn’t look at all like the images online.
Sometimes it simply took way too long for it to arrive. And then most of
the time, I left the website before purchasing either because the
product information was lacking or the checkout was just way too
complicated and time-consuming. And I almost never made a purchase from a
small company online due to a fear of scams.
Web design has come a long way in improving ecommerce conversions,
especially in the last year or so. Designers have found that specific
design elements need to be included in an ecommerce page to gain the
trust of a customer. All of my issues for making online purchases in the
past, of course, first start with the actual company policies. But a
web designer now has the responsibility of making sure these policies
are front and center for consumers to see – and I’d go so far to say
that designers also should suggest their clients adopt certain policies
if these are not present. After all, it’s your job as a web designer to
build a successful ecommerce website for your clients.
Make sure you as a web designer, or even an online retail business
owner, knows just what an ecommerce website needs to improve
conversions. The following list includes the top design elements (and,
consequently, value offerings) that every ecommerce site should have to
help consumers like me not only know exactly what they are getting with
an online purchase but also feel safe making a digital purchase. For
more inspiring ecommerce design examples, check out these
50 ecommerce websites.
Clean Design
A clean design is important for any website, but especially an
ecommerce one. What exactly does a clean design mean for ecommerce? For
one, it has to focus on the products. A visitor should be able to
immediately tell what your client sells when visiting the site, so large
product images on the home page is essential.
The Brigitte Bardot website is not only nicely organized and easy to
navigate but it also looks uncluttered with a single, large image and
simply tagline above the fold on the home page, creating a clean first
impression.
Home Page Promotionals
The home page is also the place to advertise any current promotionals
of the company, whether it’s a discount on certain items, free
shipping, or storewide savings. And, of course, illustrate with product
images and short, snappy descriptions.
Immediately on the home page of the Forever 21 website, visitors see
the current sale details. The following images in the slideshow suggest
other hot items.
Effective Navigation Menu
The navigation menu needs to always remain visible so that clients
can jump from page to page quickly and easily. Be sure to keep the
navigation menu simple using drop-down categories to help better
organize clients with lots of products. A Search bar is usually helpful
as well if your client has a huge list of products. And include a FAQ or
Help tab in the menu so that customers can search for answers to
popularly asked questions on the site.
For such a huge inventory of products, Toys R Us has an incredibly
organized website. Their main navigation at the top of the home page
includes drop down sub-items, and the product menu on the left side of
the page allows customers to shop by different categories.
Recommendations/ Featured Items
Featured products on the home page are an excellent way to give
customers an idea of what type of product you sell. If your promotional
ad takes up the entire space above the fold, place popular items just
below the fold for customers to see when they scroll down.
Amazon.com suggests items based on previous products individuals have
viewed and places this list both on the home page and at the bottom of
product pages. In addition, Amazon also includes a list of items others
have viewed on each product page.
HM.com includes a list of items both similar to a product as well as
upsell items, such as accessories or shirts that go well with a pair of
jeans.
Visible Testimonials
An actual page for testimonials is becoming a bit outdated. Instead,
designers are incorporating testimonials right on the home page and/or
product pages. Or, if a separate testimonials page is included, make
sure to show previews of testimonials on the home page. Keep in mind
that these are company reviews, not product reviews – two very different
things. Testimonials should be about the satisfaction of the customer
working with the company.
Bold King places a scrollable testimonials section near the bottom of
their single page website, along with images of the customer who left
testimonials.
A company review/ testimonial placed in a side bar or just below
featured items gives consumers confidence in the business. If your
client allows the option of customers leaving a review through a social
media profile, such as Facebook or Google+, then you can also include
the reviewer’s profile image, making the review much more believable.
Each product on the Born website allows for customers to leave a
comment or review via Facebook, which encourages customer interaction.
Large Product Images
Every product will need several photo sizes for different pages. Make
sure that images are large enough that the product is easily
discernable, good resolution, but also are optimized for fast web page
loading. Usually this means keeping images at less than 70kb, and really
for the web you don’t need a higher resolution than this. Make sure
your client has at least two angles for each product that you can place
as thumbnails on the product page for consumers to view at a larger size
if desired.
Another excellent feature for products on the Born website is that
each come with multiple viewing angles and even videos. In fact, videos
are becoming an excellent method for showing off products. Many
companies are placing TV ads of products, videos of how the product was
made, or even examples of how to use the product.
On the Budnitz website, visitors can view a film that was created
using at Budnitz bicycle. You may notice that the video is embedded from
Vimeo to save bandwidth on the website.
Organized Product Information
Some of your clients may only have one category of products, while
others may have several categories. No matter how many different
products a client has, though, always have a page/ pages that displays
all products within a single category along with individual pages for
each product. This way, you can more cleanly fit a product description,
specs, the availability of the product, product reviews, price,
customization options (such as size or color), recommended items to
purchase along with this product, etc.
On Target.com, items are placed within categories, sub-categories,
and even sub-sub-categories. This hierarchy of categories allows the
website to stay clean and easy to browse through items quickly.
Another excellent way to help customers preview items more quickly is
with a quick view option. When customers are browsing through a list of
items on a category page, they can click on the preview/ quick view
button and a window appears with all of the product thumbnails (which
can be clicked on for a larger view), short product description,
customization options, price, and purchase button.
Some websites, like Abercrombie, show a Quick View button when the
pointer hovers over an item. Clicking on this button makes a Quick View
window pop open that customers can quickly close down to continue
searching. Others simply provide a Quick View button next to the Add to
Cart button below each product in a list.
Clear Product Price and Shipping Costs
Nothing is more frustrating to consumers than to have to wait until
the product page or (god forbid!) the checkout page to know how much an
item will cost them. Be sure to place the price of the product
everywhere you show the product (home page, category page, product page,
etc). If your client offers fixed shipping costs for every product,
then place this at the very least on the product page and quick view. If
shipping costs are configured at checkout, then place a shipping cost
button on the product page that opens a window or leads to the FAQ page
and an explanation of how shipping costs are determined.
Nike shows their Free Shipping offer in the sub-header seen on every
page. Their prices are listed next to thumbnail images and immediately
under the title on every product page.
Another price affectant to display is a reward or points system. If
this is something your client offers to customers to encourage loyalty,
then display this information on the product page or in the header. For
instance, when a customer logs in, next to their name that appears in
the header, show how many reward points they have gained so far. You can
also show the points on product pages.
Improved Call-to-Action/ Add-to-Cart Button
Depending on what products the website sells, you will need a call to
action or add to cart button. Some web designers make the mistake of
creating a fancy button that blends in with the color scheme or style of
the website. DO NOT DO THIS. Yes, I am shouting at you – that’s just
how important it is for add to cart or purchase button to stand out.
Notice that on this product overview on the ToysParadise website, the
Add to Cart button has a dark green color and a unique font. It’s also
larger than any other button on the page. Now, you can keep the button
in the same style but use a high contrast color, just as long as it
stands out from the rest of the page.
Beside the product image, the call to action button should be the
first graphic the customer spots on the page. So this also means placing
it in the best location possible – on the right side of the page,
opposite the image located on the left of the page. The only exception
for this is during the checkout section. A purchase button should be
placed at the very end of the checkout form.
Another consideration with the call to action button is the wording.
Don’t get creative, unless the words on the button still tell the
customer exactly what you want them to do. Most of the time, a simple
“Add to Cart” is the best phrase to use.
Minimal Checkout Page
Studies show that
67% of customers leave during the checkout process.
Why? Sometimes it is because the price and shipping costs weren’t
displayed before the customer started checking out. Sometimes consumers
leave because there is no option to check out as a guest. Other times,
it is because the checkout page requires too many steps or even because
it contains too many distractions. All of these problems are very easy
to avoid.
Walmart.com gets the first step right with the option to checkout as a
guest. The rest of their checkout process is easy and quick as well.
For most of your clients, their checkout will have at least two and
usually three or four steps. Just like Walmart, make sure you place a
progress line at the top of each step.
The first page of the checkout procedure should be a login/ create
new account option, but encourage your client to allow purchases to be
made as a guest. If the customer is a guest, you will need a shipping
and billing address, phone number, etc. Make it easy with a checkbox for
“billing address same as shipping address”. Then you will need a
billing information page. Again, have the billing address filled out for
them already. Finally, you’ll need a review page that contains the
Purchase button. Notice how on Walmart, the Continue button is the only
large orange button on the page:
In every step, avoid adding in distractions, such as links to
anything else not related to this purchase. Another bonus for customers
is to have the estimated cost of the purchase on every page. If you do
this, just make sure you include a fine print phrase below the Next
button that explains that hitting Next does not confirm the purchase.
Unique Design Elements
This is where you as a web designer can show off your awesome design
talents. Some would argue that creating a unique ecommerce design is
just as important as the layout and placement of elements. Make sure to
do your research, of course, and know the audience as well as the
company image. And never allow a creative design ruin the ability of a
customer to easily navigate or see products.
One page you can get really creative with is the About page.
Encourage your client to create some professional videos that explain
the company. Include their story in a voice unique to the company.
Pictures of employees at work are also a great way for your client to
gain the trust of new customers.
The Southtree about page is titled “Our Story” and is a recount of their foundation, mission, and values in a story format.
Value Elements in the Header
Make sure the header includes what can be called “value elements”.
These are anything that adds value to a consumer’s purchase. Your client
may offer free shipping with a certain purchase amount. Or they may
have a stellar return policy. Anything that would be considered a perk
and increases the value of the company, you should definitely include in
the header.
At the very top of every page on the Skinny Ties website is an orange
header bar that lists their current special offers. However, some
ecommerce sites have too much going on in the header already and can’t
afford extra space in the header such as Skinny Ties. When this is the
case, placing these value elements somewhere above the fold line on the
home page may work best, such as what Jenier does with value elements
directly below the home page image.
The idea is to simply make sure that new customers immediately know
the benefits of shopping with this company. Don’t forget to repeat these
perks in an easy-to-see location on product pages as well.
Trust Factors in Header and Footer
Both the header and the footer should include the company phone
number (if available) so that customers can call if they need help or
have questions – and be sure to also list business hours next to the
phone number. Live chat should also be placed in the header, if offered.
Social media buttons in the header, such as what Inkefx lists, help to
show a company’s legitimacy and also give customers some quick places to
check for legitimate customer reviews.
In the footer, be sure to also include your client’s seals of
legitimacy, such as BBB, TRUSTe, and VeriSign. Other great footer
elements are logos of brands the company sells, logos of large
organizations who purchase from the website, and credit cards the
company accepts.
The Nutty Scoop includes all of these trust factors plus other media
on which they’ve been mentioned in the bottom of their home page.
Final Considerations
Of course, the list above is not complete. As with any client, make
sure to include vital SEO elements on every page. Keep in mind too that
not every client will need all of the suggestions above, since every
company is different. Use this list as a guideline, however, and
hopefully you will gain the reputation of a web designer who knows what
it takes to create an ecommerce website with record conversions.
Source : http://vandelaydesign.com
