SimplyProtein wanted to refresh their website to make it simpler for their visitors to navigate their site, find product information and make purchases. The end result not only increased conversion rates, but also decreased abandonment rates. See the five web design tips that helped drive their improvements.

It’s long been thought that applying a new design to your website will automatically make your site perform better. However, we hear time and time again from our clients that web redesigns they’ve done in the past have actually caused a decrease in sales and traffic. All website designs are not created equal.

Clearly this is very frustrating – spending a lot of time and money for a design refresh only to discover that it performs worse than the previous design.

Here are some web design tips that have been proven to increase conversion rates for a new website redesign.

A New Design That Drives More Sales…

We recently completed a website redesign project for our client SimplyProtein. They wanted to create a new site design that would increase conversion rates and decrease abandonment rates. They also wanted a much cleaner site to mimic the product packaging and their offline advertising campaigns.

Old Design

New Design

>> Case Study: See how the new design increased conversion rates by 21%…

Tips For Your Next Design…

The following web design tips we used on the above website redesign to increase conversion rates and to decrease abandonment rates.

1) Less is more

One of our primary goals of this design was to remove as much visual and navigational clutter as possible to keep visitors on task. The first area that we looked at was the header of the site.

The old header had a lot of visual distractions and too many navigational items. Most of these items did not need to be there and were distracting from the user experience. So we removed almost everything and found that it really focused the paths visitors were taking.

Header before…

Header after…

2) Map a clear path

Create navigation that is easy for visitors to find the products they are interested in. Keep the navigation structure simple and easy to understand. Try not to use product names unless you have a well known brand, instead use high-level category terms like “Protein Bar” or “Protein Chips”. Create these high-level category names based on targeted keywords.

Navigation before…

Navigation after…

3) Create sensible messaging and limit calls-to-action

Make sure your text and messaging makes sense to visitors. Make sure it explains the features and benefits of your products quickly and does not confuse them. Give them a few very specific calls-to-action.

Messaging before…

Messaging after…

4) Use brilliant imagery

Be sure to use high-quality photography for your products and supporting imagery. Don’t skimp here. The better the quality of the photography the more your prospect will trust that the product is what you say it is. In this case showing the all natural ingredients was a successful way to communicate the quality of the products.

Photos before…

Photos after…

5) Add trust elements

Adding trust elements like the “Wellness Ambassadors” section helps communicate that other visitors have tried the products and like them so much they become product ambassadors. You can also use trust seals as they can sometime help with conversion rates. **There have been several A/B tests done that show that sometimes they don’t help. Be sure to test the types of changes.

Trust elements after (there were none before)…

Conclusion

While there were many other page design changes (category pages, product pages, etc.) that contributed to the success of this new design, the home page is one of the most important pages to quickly and effectively communicate your brand promise. Fail to quickly communicate who you are and what you offer and your prospect will move on to a competitor.

We highly recommend performing conversion optimization testing on any design changes done to your site. From completely new site designs to page element designs, testing the changes will prove that your efforts are going in the right direction.

If your website is outdated, not mobile responsive, or not helping you capture leads it may be time to consider a redesign.

At the end of January we launched a new website redesign for a client. Since the launch leads captured have nearly doubled while traffic only increased a small amount. How important is the design of your site? Based on the numbers in this case study, extremely important. If you’re not generating the amount of leads you want the problem may not be with your marketing initiatives, it may reside with your website.

The Numbers

Leads Generated

• Leads generated in the 12 months prior to the new website redesign: 198 (16.6 per month)
• Leads generated in the 5 months prior to the website redesign: 83 (16.6 per month)
• Leads generated in the five months since website redesign launched: 153 (30.6 per month)

That is a 91% increase in leads.

Website Traffic

• Average website traffic prior to the new website redesign: 1,200 per month
• Average website traffic since the website redesign: 1,400 per month

That is a 16.6% increase in traffic

Conversion Increase (Leads/Traffic)

• Conversion Percentage prior to the new website redesign: 1.4%
• Conversion percentage since the website redesign: 2.2%

That is a 57% increase in lead conversion

**Since the website launch there has been no changes in the marketing of the website.

Conclusion
While some of the new leads can be attributed to the new traffic, the majority of new leads is driven by the increase in the conversion rate.

4 Website Changes Driving The Increase In Leads

1. One of the biggest changes we made was to add a visible Quote Request form at the bottom of the content on each page.

Prior to the redesign we included a text based call-to-action on each page with a form in an accordion.

The new design removed the text portion of the CTA and brought the form out of the accordion.

2. We changed the multi-messaged slider to a single message to support our primary call-to-action – Get A Quote. Studies have shown that fewer than 1% of people click on the slides after the initial slide. By keeping the message consistent we place more emphasis on the primary objective (if someone could only do one thing on the page, we want them to submit a Quote Request), while still being able to show different images representing the full scope of work the client does.

The previous slider included images tied to learning more about Glazer Construction, the residential services, commercial services and the project portfolio.

The new slider kept a single message across multiple slides showing images of the different types of projects they handle.

3. Improved the Visual Navigational Menu for the projects, videos and virtual tours.

On the old site we had already implemented a mega menu to show portfolio items in a more visual manner. In the redesign we simply focussed on improving the design and layout to better showcase the projects. The original had three images, one each for photos, videos and virtual tours. With the new design we used tabs for each which allowed us to add more photos of each category.

Here is the original portfolio mega menu layout.

The new mega menu using tabs does a better job of visually representing the portfolio which is a key component in building credibility with prospects.

4. We increased white space on the page to allow the eye to better peruse the content on the page, along with some tweaks to the content and how the content laid out.

The new site with increased white space and tweaked copy.

Wrap Up

Website design and best practices are constantly evolving as new technology and techniques are developed. You job as an online marketer is to ensure that your website keeps up with not only the latest design and technique trends, but that also adjusts to how consumer research and purchase behavior changes. On average you need to consider a redesign or refresh every 24 to 36 months.

One thing to keep in mind is that as your site build SEO value through search engines you have to be careful when you make changes. The worst mistake you can make is to wipe out years of SEO value by complete changing the design and content of your site. One of the ways we combat the loss of SEO value is to improve the site visually while maintaining consistency in the content.

For the client above, while we did a significant design upgrade, we kept the majority of the content on the site consistent, only making changes where we felt we could improve the SEO performance. Another consideration is if you are eliminating a page from your site, it may make sense to keep the page but simply remove it from the navigation. Or at least use a 301 redirect to send traffic to the deleted page to the most relevant current page.

Small Business Website Series Part 3

Creating a website isn’t that difficult with the free and paid website builders, and WordPress and other CRM’s.  Just about anybody can build a website with the right amount of time.  The challenge is creating a website that looks professional, conveys the right messages and that accomplishes what you want your website to accomplish.  Its a lot easier to get it wrong than it is to get it right.  Which leads us into today’s topic:  Bad vs. Good website design and development.

What makes a bad website?  To some degree the answer is subjective.  An ugly site can work well just as a great looking site could fail miserably.  A site with a bad layout or minimal content might succeed where one carefully laid out with a lot of great content does not. So in essence a bad website is one that doesn’t do what you want it to do.

That being said, based on years of building websites and conducting conversion optimization testing, your probability of success is affected by:

• The design of your site
• How you organize page objectives
• The layout including the appropriate amount of white space
• Conveying the right messages
• Having clear calls-to-action
• Content that informs and directs the user to take action
• And more…

An Example of What We Would Call A Bad Design

As a web design firm we look at a lot of websites.  I recently came across a website for an attorney that I thought was a good example of a poorly designed website.  This site was redesigned in the last year, so at least it was mobile responsive.  Here is the site (I’ve changed some of the items on the page like the logo, address and phone number, and any references to the business name).

1.  The logo integration looks unprofessional.

Typically the first element on a website people notice is the logo.  The logo to some degree can affect the visitor’s perception of  your website.  If your logo is clean, clear and professional looking then the visitor moves onto viewing the page with no negative perceptions.  If your logo doesn’t look professional, though, it starts to create a negative perception in your visitors mind.  Remember this is taking place at the subconscious level at the speed of a blink of the eye.

In the case of this site the blue background framed logo looks outdated and unprofessional.  It would have been easy for the designer to remove the background and have the logo in a color to offset against the white background.

2.  Poor eye flow design

The ideal eye flow of a page is for the visitor to read from left to right moving down the page.  In the case of this page the combination layout and the random placement of color in the elements drives the visitor to read down the page in a less-than-ideal fashion.  People tend to first skim pages and the eye is drawn to color.  Based on our experience the grey line in the graphic above represents what we would expect the eye path to be on this page (we did not conduct eye flow testing on this page but assigned the expected eye flow path based on experience).

3.  Use of a slider with poor stock photography choices

(this page included 6 different slides with alternative messages)

Sliders are one of the design trends that have been around for a couple of years.  They seem like a great idea as you can get multiple messages into a single space.  The problem comes in how people respond to sliders on a page.  According to Yoast, the developer of the popular Yoast SEO plugin for WordPress, “only 1% of people click on sliders, and that tends to most often be on the first slider”.

A second issue is that having sliders with different messages violates the principal of having one Primary Objective per page.  If a visitor could only take one action on your home page, what would you want them to do?  Whatever it is, that is the primary objective of your home page. You want this message and call-to-action tied to your major objective to be in the prime real estate of your home page …the space below the header and above the fold.  With a slider you dilute your primary objective by including additional major and minor objectives.

4.  No clear primary call to action

As part of the fall out from using the slider, along with no primary objective there is no primary call-to-action.  If you look at the slide in the image above the call to action is “How to know if you have a personal injury claim?”  But the slide, and the additional five are not clickable meaning its a message with no chance of driving the visitor to take an action.

That leads me to conclude that the primary call-to-action is likely this text “Free Initial Consultation, Hablamos Español, Call: 404.969.1284” offering a free consultation.  This text though is styled like all of the text on the page and does not stand out, in effect leaving the page without a primary call-to-action.

5.   Lack of proper white space

Many bad website designs suffer from the lack of an appropriate amount of white space.  This often occurs because the designer is trying to “sell” verses “direct” on the home page. While the end goal of your website may be to sell, your home page should act more like a traffic cop directing traffic to the appropriate place. In effect the goal of your home page is to get the visitor off of it as soon as possible, directing them to the content that best fits their needs.

Using white space allows visitors to more clearly identify content to find what they are looking for.  Compare the original image above with our sample redesign below and ask yourself which is easier to read.  The more readable content will be the content that does the best job of directing the visitor.

6.  Bad footer layout

Content that is placed in your footer is often what we would call minor objective content.  It usually includes basic company descriptions, contact information, links to blog posts, or maps to the business.  This content has its place but by nature it is content that is good to be repeated throughout the site as a reference.

The design above has the appropriate information in the footer, but its just bad design to have the large block of space on the right side with no content.  It leaves the page unbalanced and leaves an impression that something was forgotten or is not working, leaving the unfilled space.

Drumroll Please …How We Would Have Designed the Page

First a disclaimer.  The redesign below was created in about 2 hours with no input from the site owner.  We could only rely on what was on the current page to decide what was or was not important.  In the real world we would have had several meetings with the client to help them develop or flesh out the purpose of their site, and determine the Primary, Major and Minor objectives.  Only after we had developed a clear strategy for the site would we go into the design phase.

1.  Updated logo to remove background color

This looks more professional and the coloring matches the site branding.

2.  More natural eye flow path

The natural eye path is to read left to right.  The new home page design uses sections to keep content on consistent levels making it easier for the visitor to methodically move down the page naturally.

3.  Eliminated the slider in favor of a single image and call-to-action

This allows us to focus on our primary objective of either scheduling an appointment online or to call to schedule an appointment.  We also are able to convey exactly who we helped (those injured due to the negligence of others) and state that we’ve had many successful settlements and trial verdicts.

We also use this to establish branding by having the attorney’s photo in the space (ok the image included is a stock photo.  But if we were working with the client we would use an actual photo of the attorney.).

4.  Use of white space to improve readability

In this redesign we are primarily working with the content available on the current design.  By using a stacked horizontal layout with an appropriate amount of white space we make it easier for the visitor to scan content and easily find content that addresses their needs.

5.  Completed the Footer

In the current design there was a huge empty space that made no sense.  We used the extra space to add the address and contact information to the footer and improved the blog post listing styling to feature four instead of two.

6.  Other changes we incorporated

• We moved the types of injuries they represent from hidden on the right side to featured in its own section with some additional content to drive clicks on each.
• We changed how the blog posts were presented  to have them in two columns, rather than stacked, with the newsletter sign up right next to them.
• Added a testimonial to the home page in its own section.  These testimonials would feature a random testimonial every time the page is loaded.
• Moved the social media icons to the footer.  We view social links in most cases as minor objectives. We want social media to drive visitors to our website.  We’re not as concerned with driving people from our website to social media.
• Established a contrasting color (orange) for our calls-to-action.  There have been numerous studies about what the best color is to drive clicks on your calls-to-action.  The findings show that the actual color isn;t as important as choosing a color that contrasts with the primary colors of your site.  Blue is the primary color of this site so orange stands out very well.

Wrap Up

Over the last couple of posts we’ve been looking at questions and issues surrounding small business and self-employed websites. In “5 Bad Reasons Why Self-Employed or Small Businesses Don’t Have A Website” we looked at the top 5 reasons why they don’t have websites and how from a long-term perspectives these were not good enough reasons. In “The Best Way to Build Your Small Business Website” we looked at options for building your website yourself or outsourcing the development. And today’s post takes the next step in looking at bad verses good website design, and how its easier to get things wrong than right.

If you’re looking to build a new site or redesign an existing site, and would rather outsource your design and development, we can help. We’ve been building websites since 1998 and know a thing or two about designing websites that attract and covert visitors. Call us at 404-216-3953 or complete our contact form to take the first step in improving your website.

Small Business Website Series Part 2

I don’t care who you are, what your business is, or whether you are self-employed, a simple partnership or a small business. You need a website. Not having one is a mistake. In our post “5 Bad Reasons Why Self-Employed or Small Businesses Don’t Have A Website” we look at and refute the top 5 excuses to not have a website.

Once you accept that you must have a website, the next step is to figure out the best way to make it happen. In today’s post we’re going to look at the two primary ways to get your business online: Build It Yourself or Outsource It.

Build It Yourself

With this option you either learn to code, use a free website builder, use a paid online website builder service, or use a CRM like WordPress.

1. Learn to Code

There are thousands of resources online to help your learn html, php, javascript, jquery, etc. The problem is that every minute you’re learning how to code is a minute you’re not working on your business. This is probably one of the worst options when it comes to building your website, unless you already know the proper coding.

Pros: Cheap in terms of cost

Cons: Takes time away from your business, learning html, php, javascript and jquery is like trying to learn four languages at the same time, and there is a lot more you need to know beyond coding to build an effective website (strategy, graphics, SEO, etc.).

2. Use A Free Website Builder

Free website builders have been around for a while. Many website hosts also include free builders with there hosting packages. These builders allow you to set up a website without knowing code or technical stuff. You simply use a template, drag and drop content areas to create a layout, and add your content. In most cases they are simple to change fonts, colors and copy from a user interface.

Pros: Requires no technical experience, free templates are available, and cost (it’s free right)

Cons: The quality of the tool will vary, customization can be difficult or impossible (hope they have a theme you like and that fits your business) and the code produced for the back end of your site can be clunky and not optimized for SEO. Plus you still have to learn how the tool works, develop your website strategy, create graphics, write content, etc.

3. Paid Website Builder

Paid website builders like Wix, Weebly and Squarespace do offer free options, but often the free version restricts tool usage and/or includes an ad placement. The paid versions are more robust and the code produced for your site is typically better optimized than the free builders code.

Pros: Requires no technical experience, free templates are available, typically include apps to extend functionality (some at an additional cost) and relatively low cost.

Cons: While building a site is easy customizing some aspects of the site can be difficult or next to impossible, making the site mobile responsive requires that you do extra work to control how elements appear on different devices, and extending the site functionality can require additional costs. Once again you still have to learn how the tool works, develop your website strategy, create graphics, write content etc.

4. Build Your Site with a CRM Like WordPress

WordPress originally started as a blogging platform but has evolved into the most popular website CRM.  It is relatively easy to use. Most hosting accounts include an option to automatically set up WordPress. Then you can select a free template or purchase a commercial one for your design. Its easy to add pages and edit content using either a word like editor or through a text editor for using html code. Functionality can be added through either free or paid plugins.

There are two versions of WordPress – the publishing platform (wordpress.com) which is fully hosted and similar to the website builders and a self-hosted version (wordpress.org) that is more flexible. For the builder like version the pros and cons listed above  under the free and paid builders apply. For the self-hosted version refer to the following:

Pros: Cost (WordPress is free), availability of free and paid themes, there are over 1.2 million plugins available to extend functionality (most for free), large number of communities for support and troubleshooting, easy to add, delete and edit content.

Cons: If you want to customize beyond the basics you will need to understand css, html, php, javascript and jQuery, you have to update WordPress, the theme and plugins to prevent security risks, free plugins may be abandoned by the developer requiring you to find a new plugin (using paid plugins can reduce this risk), and there is wide range in the free and paid templates in regards to theme quality (if you go this route we recommend using Genesis child themes from Studio Press). And like the previous three options you will have to learn how the tool works, develop your website strategy, create graphics, write content etc.

In each of these four options the primary benefit is cost relative to outsourcing the building of your site.

Outsource It

The alternative to building your own site of course is to let someone else build it. One of the advantages of outsourcing to a qualified developer is that they will do a lot more than simply build your website.

Pros: The benefits of working with a good website developer include

• Strategy:  What is the purpose of your website?  There are a lot of reasons to have a website starting from simply providing company information online, generating online leads, selling products or services, generating sign ups, promoting events, establishing thought leadership via a blog, and more.   Your developer will factor in the purpose of your website throughout the design and build process.
• Design:  Most often people equate design with how nice a website looks.  That’s partially correct, but we’ve seen a lot of sites that look good yet do nothing for the business.  Design also includes ensuring that the site is easy to navigate through the information architecture and navigation of the site.  It includes how messages and calls to action are incorporated into the natural eye-flow pattern visitors follow when visiting a site. And it includes the use of size, placement, color and accessory elements to properly place emphasis on the most important elements of a page.
• Optimization:  Your website needs to appeal to both people visiting your site as well as search engines.  Your development should include on-page optimization to ensure your pages have the best chance possible to rank in search engines such as Google for keyword searches.  You can also optimize pages to improve conversions.
• Usability:  The visitors to your site will use a variety of devices, desktop computers, laptops, tablets and smartphones, each brand having different unique screen sizes.  A good developer will ensure that your website is mobile responsive and performs equally well regardless of the device used to view it.  Even if you build your own site with a mobile responsive theme, we find that some additional tweaking is usually needed to present content in its optimal format.

Each business is unique and will have different needs.  Your developer should be able to provide additional resources like keyword research, determining the best website structure, graphic editing and image sourcing, customization not available in plugins or templates, additional SEO, content development…

Cons:  Cost (relative to Build It Yourself options)

Cost: The 800LB Gorilla in the Room

Cost (along with “not relevant to my business”) is one of the top two reasons why self-employed and small businesses don’t have a website. So how much does it cost to outsource your website build to a developer?

According to Inc.com the price for a website is between $2,000 and $25,000. In a post on Elegant Themes, a WordPress theme seller, they list a range from $6,000 – $15,000 for a custom WordPress website.  In both cases I think they are right and wrong.  The pricing they are providing is for a site that is larger and more customized than most real small businesses (2 – 5 employees) or self-employed people need.

We’ve developed a special website development package that has prices that are more affordable and reasonable, and offer two payment options:

• Pay As You Go (Monthly): Includes strategy, design, development, optimization, maintenance, and hosting.  In addition you get 1 hour of edits each month, your site is insured against being hacked and you get a free redesign every 36 months.
• Pay Up Front (one-time): Includes strategy, design, development, and optimization.  You provide the hosting and maintenance.

=>View Pricing and See What Is Included in these Affordable small business websites.

Wrap Up

Every business should have a website and there are affordable options whether you choose to build it yourself or outsource the development. If you build it yourself you will want to take the time to learn more about website strategies, SEO, creating graphics and how to use the tool you choose.  If you choose to outsource your website build or redesign you will still need to spend some time thinking about the purpose of your website and the content that will be included.  The difference is that your developer will guide you in developing your strategy and content, and you’ll spend more time focused on your business instead of your website.