The biggest mistake in web design

in Blog, Connect, Create, LocalNa8ion.com, Small Business Marketing, Web Design, Wordpress This article was originally published by Julian Seery Gude on The Remarkable Blog from exceler8.com
Great web design isn't just about being original, it's about connecting with your website audience

Great web design isn't just about being original, it's about connecting with your website audience

How small business owners can chose a great web design for their company

The biggest mistake in web design is letting your own design taste get in the way of choosing a really great web design. This is especially true for small businesses where one person is the sole decision maker on the design. This post talks about what makes a business web design great and shares some simple steps on how you can avoid this trap while still achieving a design you love.

There are many elements that go into a great business web design. Things like originality, usability and the marketing content itself which include elements like your logo, website colors, marketing copy (text) and images. The business website must communicate the essence of your company (your brand) and lay out a convincing case for how doing business with you is better than your competition (differentiation). It can be a daunting challenge.

Let’s get something clear as to what I mean when I say great web design.

I don’t mean a work of art that wins a design award or feeds your ego. I mean a website design that motivates a large percentage of your target audience to take action, such as call, email or visit your business. That’s the kind of great design I’m talking about.

Now that we have a common understanding about what I’m defining as good design let’s talk about how to avoid your design bias overwhelming your primary goal of getting more leads from your website.

Here’s the secret?

Process.

Don’t beat your head on your keyboard just yet, I know that sounds dull. Don’t fret, because this process is really good at helping you create or select a great web design.

Web Design Process

  • Identify your customer
  • Make a list of your website requirements
  • Make a rough sketch or example of your desired layout (called a website wireframe)
  • Use representative placeholder text and images to agree on layout and overall design
  • Write headlines, marketing copy (text) and calls-to-action
  • Apply the skin of our new design last, after you have your layout, wireframe, text and images sorted
  • Get feedback on the design from a small number of real customers

Let’s break each of these down and then you’ll be ready to put the process in place with selecting your next web design.

Identify your Customer

Remember how earlier I talked about how web design isn’t just the pretty face thet greets your web visitor? Here’s what your design should be about: communicating to your customer and incenting them to take action. Therefore wouldn’t it be nice if our design was customer centric rather than business owner centric? Say yes. Good job, you’re getting the hang of this process already.

Make a list of your website requirements

This is about what you want the website to do and what content you think you should include on your website. These requirements start out high level and then you get more specific until you have enough clarity to make them actionable.  For example, a high level requirement might be:

  • Include email newsletter signup widget

The more specific version could be:

  • Place email newsletter signup widget on home page and right sidebar of all pages and blog

Requirements insure your website actually has all the right parts needed to address your target customers’s needs.

Create a wireframe

a website wireframe helps you and your web designer to visualize your design and agree on layout

Click to expand. A website wireframe helps you and your web designer visualize your design and agree on layout with no fisticuffs

Ever doodled a graphical idea on the back of a napkin so you could communicate what you mean to someone? Even if you don’t have the slightest design skill you can make rectangles, circles and scribbles that look like text. Today we do this when we make websites but we borrow an engineering process for it and call it a wireframe. What you’re doing is identifying a web design layout that you can apply your actual design and content to. Like we would apply wood or stucco to a house frame. How does this help? We don’t get emotionally invested in wireframes. We see the layout and can more quickly determine the right overall shape and flow you’re looking for. They let both you and your designer agree on a key aspect of the design with cool, calm precision. Don’t worry, there’s still time for mental anguish and hand wringing in the last two steps.

Use representative placeholder text and images

Ever seen a print mockup or website mockup of a design and it was full of text like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat ligula sed enim pharetra cursus. Praesent posuere faucibus metus in aliquet. Sed egestas erat at nulla imperdiet a rutrum mauris ultricies. Suspendisse varius nisl ut quam pretium nec aliquet nibh tincidunt.

Just like the wireframe, placeholder text and images help you narrow down your design look and feel without being distracted by the specific elements of your final design. When we use real copy on a design it’s impossible not to jump in and start wordsmithing your new marketing copy. We all do this. So don’t fight this urge, just don’t give yourself a chance to have the fight. Copywriting has a place in your new web design and it needs to get done before your designer starts to apply hair and makeup to your design (color, imagery).

Now that you have your requirements and design layout chosen you’re ready to start applying your marketing copy or text to the website. Hey, go crazy with your wordsmithing and headline writing. The tighter this stuff is the better the final design. You might wonder why we make text before we apply the last layer of lipstick to our design. It’s critical since your marketing copy is descrbing both your product/service and how you differentiate your business – all summed up to capture your company’s essence (or in marketing lingo your brand). This written description paints a mental picture in the mind of the reader. That’s good because that’s what your designer should have in mind before they design! Give this text to your designer to help them conjure up all sorts of images, colors, and ultimately a design that visually depicts what you’ve described in text.

Apply the skin of your design (hair, makeup, etc.)

With every other part of your design in place from your content, layout and navigation it’s finally the moment of truth. The designer has to bring all this together in a way that pleases your customer. And at the very least the design has to be something you believe in, even if it’s not to your exact taste.

The good news is that by going through this process you’ve already given your designer tons of feedback on what you need. Because of this your web designer often ‘nails’ a design on the first attempt and produces a design that knocks your socks off and more importantly those socks on your customer!

If you don’t like the design you’ll have already agreed on many aspects of overall design so you really hone in on what’s not working about the design. It makes this step less confrontational and faster to get through.

Get feedback on the design from a small number of real customers

Before you select a final design or throw your designers ideas out the window get feedback from 4-8 actual customers. It’s not hard to do – just get creative. People are happy to help out and no one has a hard time expressing their opinion when asked! You can ask your customer the obvious question: “how do you like the design of our new website?” but don’t worry about negative feedback unless it represents the majority opinion. Remember, just like you your customers have a design bias. So ask less subjective questions like ‘would this website address your questions and give you a reason to contact us?’. Use this real world customer feedback to tweak your design. Fixing design issues are typically small tweaks that can make a big difference like using a different picture or headline.

Wrap up

The process we’ve outlined is one that an interactive web agency like we have here at LOCAL Na8ion can do for you (including the actual design) but it can also feel too process heavy for small business and sounds expensive. It doesn’t have to be either of those things.

It’s true that this process (like any) can turn into a runaway. But you can avoid that by sticking to your goals and keeping your time and business size in mind. A website requirements list for Bank of America can be 50 pages long. Yours should fit on one. The entire process could take a big company six months to get through but you can follow each step in this process quickly and be done in a week. That’s a good investment in time given that your new web design will be around a few years.

Most designs made for small business don’t follow any process at all and the results are similarly hit and miss. You often feel you’ve accomplished your goal when you’ve selected a web design that you like. Don’t measure success by your design bias. Let the results of your web design be judged by the effect it has on producing new customers leads. Thinking this way will redefine your small business marketing in more ways than just your web design. It can be applied to all your marketing decisions.

Last Word

Can this process work with inexpensive design templates and WordPress themes? You bet!

Custom design can be expensive. A minimal design might set you back between $1000 and $8,000. That’s just the design, don’t forget you may need to budget for marketing strategy (identifying your customer and figuring out how to best connect with them), search engine optimization, social media optimization and copywriting. Great designers design stuff. Don’t ask them to perform SEO or develop a marketing strategy.

One of our specialties here at LOCAL Na8ion is the use of design templates for projects (we specifically use WordPress to power all of our business website projects). We believe in design templates so much that we used a design template on our original website and our recently ‘re-designed’ website. You’re looking at it and it cost me $70. It met my website requirements and it also looked much like the wireframe I made before I got into the hair and makeup phase of the design. Using templates for our client projects allows us to focus on providing services to small businesses that normally couldn’t afford them like local search engine optimization, training on how to use Facebook or online video to market your business.

Your website is just one part of an online marketing strategy to get your business new customers. Building your new design using this process gives your offline and online marketing a platform that can connect the missing dots in turning shoppers into buyers while saving you precious time and money along the way. Oh, and chances are pretty decent that you’ll end up liking your new web design, especially the results part where you make more money. 🙂

Julian Seery Gude, ed LOCAL Na8ion

2 Responses to "The biggest mistake in web design"
  1. Marcia Coffey says:

    Hi,

    I’m just a local Genesis WordPress web designer, enjoying your article. But, I can’t read the font very well. Sorry. It is Myriad Pro? Too light and faded. Just thought you would want to know …
    Marcia Coffey

Comments are closed.