Monthly Archives: May 2017

Website Design: Beauty is in the Eye of the Beholder

It generally takes a third party to point out a website’s physical and esthetic flaws. Sometimes it takes a few hundred of your dearest friends and colleagues to convince you that your website is ugly. An ugly website can come in many shapes and sizes. It may have a horrendous color scheme, a nasty logo, outdated architecture, inappropriate images, spelling errors, or it just might be difficult to navigate and locate information. Regardless, these ugly ducklings exist and they seem to be growing and living well past their intended lifecycle.

As a small business owner or C-level executive, listen to those around you and seek outsiders’ opinions. If someone you know and trust or even a prospective customer tells you your website has “issues”, it probably does need a refresh or a complete overhaul. Seek outside help and seek it quickly, before you are labeled one of the ugly ones. This isn’t the playground and you won’t hear your girlfriends whispering behind your back. All you’ll know is you are receiving little traffic, few conversions, or virtually zero website leads or sales.

Simple tips for improving your web design

1. Have a polished, professional logo–and link it to your home page. “Your logo is an important part of your brand, so make sure it’s located prominently on your site,” says Tiffany Monhollon, senior content marketing manager at online marketer ReachLocal. “Use a high-resolution image and feature it in the upper left corner of each of your pages,” she advises. “Also, it’s a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to it.”

2. Use intuitive navigation. “Primary navigation options are typically deployed in a horizontal [menu] bar along the top of the site,” says Brian Gatti, a partner with Inspire Business Concepts, a digital marketing company. Provide “secondary navigation options underneath the primary navigation bar, or in the [left-hand] margin of the site, known as the sidebar.”

 

Value Content Before Website Design

Design Trends Come and Go, But a Focus on the User Should Not

I’ll receive emails from people discussing their website design requirements and many times these lists will be focusing on specific project criteria like infinite scroll, hamburger menus, hero images, video backgrounds, and motion. Rarely do people approach a design firm and present data based on their visitors, the user’s needs, and the ultimate goals of a website visit.

Website owners get caught up in design trends, their competitors’ websites, and what they believe is modern and current design elements. In doing so, they lose track of the actual website visitor. All too often people select a website template or blog theme and get caught up in the graphical presentation or bells and whistles it offers. It’s an emotional buy that supersedes the desire to help the actual website visitors.

Once they buy the stock theme, they force their content to fit within the template’s available content blocks. Or worse yet, they force a custom design to adhere to the same style and presentation of a top competitor’s website. In most cases this leads to disappointment and buyer’s remorse. The reason this occurs is this process follows the path of purchase, design, development, and finally content. That path is in the wrong order. The process is going backwards and it leads to frustration.

Content First Leads to Educated Design Decisions

Documenting your desired user flow, visitor paths, and call to actions is something that is typically done after the graphic design is completed. Unfortunately that’s the wrong approach because it forces you into matching content to the website theme or design. It should be just the opposite.

While graphic design in very important, it must take place at the right time within the project to truly allow you to showcases the website, content, and offering in the best light possible. Messaging and content are the building blocks and foundation of the website. This means they should be carefully thought through and documented well before any colors, fonts, and layouts are considered.

The design elements should complement, highlight, and showcase the key messaging and most important content.

Focus on the Right Content

While I am saying you should have content written before beginning design, I’m not saying that you have to have all your content written. That would be a difficult task to accomplish for most website owners and businesses.

I encourage clients to focus on core website sections and pages. During the sales process I usually go through their website and look for areas I think would benefit from custom design templates. These will vary based on the client, industry, and target demographic.

Here are some common areas that can benefit most from a content first strategy:

  • Home
  • Main about or company page
  • Main services page and individual service pages
  • Main storefront and individual product pages
  • Resource section, categories, and/or resource items
  • Personas
  • Landing page templates
  • Main blog page and individual blog posts
  • Contact page

Sometimes I’ll suggest just a few custom design templates and other times I’ll suggest fifteen to twenty. It really depends on the complexity of the content and the variations in the content flow and call to actions.

As we progress into a project with a client, we like to have as much information as possible on core elements and how these might be altered based on different areas of the website.

Content elements that matter in a content before website design approach:

  • Headlines and subheaders
  • Core messaging
  • Paragraph text
  • User personas and visitor paths
  • Call to actions
  • Images
  • Videos
  • Navigation
  • Social media accounts
  • Search engine optimization

The more your graphic designer knows and has available, the more unique and targeted your design will become.

Website Design Inspiration

1) FreshBooks

Why It’s Brilliant

  • It’s easy to consume. There is much debate on whether short or long homepages work better. If you choose to do the latter, you need to make it easy to scroll and read — and that’s exactly what this site does. It almost acts like a story.
  • There’s great use of contrast and positioning with the primary calls-to-action — it’s clear what the company wants you to convert on when you arrive.
  • The copy used in the calls-to-action “Get Started for Free” is very compelling.
  • FreshBooks uses customer testimonials on the homepage to tell real-world stories of why to use the product.
  • The sub-headline is also great: “Join over 10 million small business owners using FreshBooks.” FreshBooks expertly employs social proof — 10 million is a big number — to compel its target audience to join their peers and try the tool.

2) Airbnb

Why It’s Brilliant

  • It includes the destination and date search form that most visitors come looking for, right up front, guiding visitors to the logical next step.
  • The search form is “smart,” meaning it’ll auto-fill the user’s last search if they’re logged in.
  • The primary call-to-action (“Search”) contrasts with the background and stands out; but the secondary call-to-action for hosts is visible above the fold, too.
  • It offers suggestions for excursions and getaways Airbnb users can book on the same site as their lodgings to get visitors more excited about booking their trip on the site. It also shows which of these offerings are most popular among other users.

3) Mint

Why It’s Brilliant

  • It’s a super simple design with a strong, no-jargon headline and sub-headline.
  • The homepage gives off a secure but easy-going vibe, which is important for a product that handles financial information.
  • It also contains simple, direct, and compelling call-to-action copy: “Sign up free.” The CTA design is also brilliant — the secured lock icon hits home the safety message once again.

4) Dropbox (Business)

Why It’s Brilliant

  • Dropbox carries over its simple design and branding. It includes only what is important: A large, relevant image with supporting copy, and a “Try free for 30 days” call-to-action button
  • Dropbox’s homepage and website is the ultimate example of simplicity. It limits its use of copy and visuals and embraces whitespace.
  • Its sub-headline is simple, yet powerful: “The secure file sharing and storage solution that employees and IT admins trust.” No need to decode jargon to figure out what Dropbox really does.

5) 4 Rivers Smokehouse

Why It’s Brilliant

  • Drool. That’s what I think when I arrive at the website for 4 Rivers Smokehouse. Combined with great photography, the headline “Brisket. 18 years to master. Yours to savor.” sounds like an experience worth trying.
  • The parallax scrolling guides you on a tour through the services, menu, and people having a great time — a great use of this popular design trend.
  • The only negative? I don’t live close enough to this place. Boo.

6) Cobb Pediatric Therapy Services

Why It’s Brilliant

  • The headline and sub-headline appeal to the visitors’ emotional side: “Work With a Company That Gets It”; “Trust us. We’ve been there too! We’ll find jobs where you can thrive.” That value proposition is unique and compelling.
  • It’s hard to tell from the screenshot above, but the headline is on a rotating carousel that caters to specific personas, from job applicants to people searching for a therapist for their schools.
  • There are several pathways visitors can take when they arrive on the page, but the calls-to-action are positioned well, worded simply, and contrast with the rest of the page.

7) Jill Konrath

Why It’s Brilliant

  • It’s simple and gets straight to the point. From the headline and sub-headline, it’s clear exactly what Jill Konrath does (and how she can help your business).
  • It also gives easy access to Jill’s thought leadership materials, which is important to establishing her credibility as a keynote speaker.
  • It’s easy to subscribe to the newsletter and get in touch — two of her primary calls-to-action.
  • The pop-up subscription CTA uses social proof to get you to join her thousands of other fans.
  • It includes news outlet logos and testimonials as social proof.

 

Front Page of Your Website

 The relationship between a customer and a business is based on trust. Is your website customer-friendly? Start with the five things that belong on the front page of every business website.

1. Contact information: A recent survey by Chantilly, Va.-based local media and advertising research group BIA/Kelsey indicates that nearly 75 percent of small-business websites don’t have an email link on their homepage. And six out of 10 don’t have a phone number. Minimally, your site should have a clear email link and a phone number. If you have a physical location, consider including the full address with the state and zip code, as well as a map and directions.

2. Images that represent what you do: If you sell wedding cakes, for instance, the front page of your website should have a picture of one of your cakes. As basic as this sounds, many business sites use irrelevant graphics such as butterflies and family photos, or worse, no graphics at all.

But be mindful of how you display images. Think twice before making them spin or shake or do anything else that can be distracting or irritating.

3. Clear navigation with working links: The front page of your site should have a clear navigation system either across the top or down one side of the page. The buttons should be clearly marked with words that correspond to the content on your site and help customers quickly find what they’re looking for. Also consider including buttons for shipping options, FAQs and background on your company. It’s also important to click your links on a regular basis to make sure they all work, or use Google Webmaster Tools to identify any 404 errors. Broken links not only prevent shoppers from completing their orders, they can also make it appear as if you don’t care about your business.

4. An email signup box: One effective way to encourage customer loyalty is with a regular newsletter. Put a signup box on the front page of your website and offer rewards, such as a discount on a future order to anyone who submits his or her email address. Services such as Mailchimp offer simple ways of doing this.

5. Social media links: Help customers stay in touch by providing links to your social media accounts right on your front page. Use recognizable icons linked to Facebook, Twitter, Pinterest or LinkedIn. You can also use feed widgets to encourage instant follow-up as well as social media sharing.

What Makes a Good Website Homepage Design

All of the homepage designs shown here utilize a combination of the following elements. Not every page is perfect, but the best homepage designs get many of these right:

1) The design clearly answers “Who I am,” “What I do,” and/or “What can you (the visitor) do here.”

If you’re a well-known brand or company (i.e., Coca-Cola) you may be able to get away with not having to describe who you are and what you do; but the reality is, most businesses still need to answer these questions so that each visitor knows they are in the “right place.”

2) The design resonates with the target audience.

A homepage needs to be narrowly focused — speaking to the right people in their language. The best homepages avoid “corporate gobbledygook,” and eliminate the fluff.

3) The design communicates a compelling value proposition.

When a visitor arrives on your homepage, it needs to compel them to stick around. The homepage is the best place to nail your value proposition so that prospects choose to stay on your website and not navigate to your competitors’.

4) The design is optimized for multiple devices.

All the homepages listed here are highly usable, meaning they are easy to navigate and there aren’t “flashy” objects that get in the way of browsing, such as flash banners, animations, pop-ups, or overly-complicated and unnecessary elements. Many are also mobile-optimized, which is an incredibly important must-have in today’s mobile world.

5) The design includes calls-to-action (CTAs).

Every homepage listed here effectively uses primary and secondary calls-to-action to direct visitors to the next logical step. Remember, the goal of the homepage is to compel visitors to dig deeper into your website and move them further down the funnel. CTAs tell them what to do next so they don’t get overwhelmed or lost. More importantly, CTAs turn your homepage into a sales or lead-generation engine, and not just brochure-wear.

6) The design is always changing.

The best homepages aren’t always static. Some of them are constantly changing to reflect the needs, problems, and questions of their visitors. Some homepages also change from A/B testing or dynamic content.

7) The design is effective.

A well-designed page is important to building trust, communicating value, and navigating visitors to the next step. As such, these homepages effectively use layout, CTA placement, whitespace, colors, fonts, and other supporting elements.