Saturday, October 13, 2012

StoryTelling: How Website Design Tells Stories

1in9.org First Free Internet Marketing Consulting Saturdays

During a great meeting this week with Kevin Rutherford, head of 1in9.org, I promised to share feedback on the nonprofit's website. I'm using my first Free Internet Marketing Consulting Saturdays offer to help 1in9.org. The site's new design is a vast improvement on what was there before, but there are conversion issues such as:
  • Doctor as first image of the roll is confusing. 
  • Call To Action buttons are below the fold.
  • The design is misaligned to 1in9's mission. 

How Website Design Tells Stories

Your website design communicates in planned and unplanned ways. When 1in9 opens their web site's conversation with a WebMD-like white coated doctor the message is misaligned to the nonprofits mission. 1in9 is dedicated to helping cancer patients, so the lead should be about how a patient was helped.

Opening the design with a white coated doctor is confusing. The site feels like it is about cancer research. The doctor and the search for the cure is an important idea, but not a lead idea. 1in9 helps breast cancer patients in financial need get to their treatment, so that story should lead.

Nonverbal Subconscious Blink Website Communication

Researches such as the brilliant Amy Africa speak about the logical and dinosaur brain. The dinosaur brain is limbic system, a system tuned to keep humans from becoming dinner back in the day, asks simple and immediate questions. Will this thing I see but don't yet know kill and eat me? Can I kill and eat it? Is this thing critical to reproduction or can I reproduce with it?


Your website has seconds, a Gladwellian blink, before it is weighed, measured, categorized and understood or misunderstood. The current 1in9.org sends confusing signals frustrating the dinosaur brain's desire to understand.

The image above is all my browser sees above the fold. Website design is difficult because when users add things like add ons for SEO the viewable area of your site is reduced. If most Internet marketers did one thing, improve the positioning of key Call To Action buttons, traffic would convert significantly better. 1in9.org's placement of key Call To Action buttons such as Volunteer, Donate and Shop low on the page means a significant number of browsers may not see them.

Design Edits To Increase Conversion

Every design decision you make either moves visitors closer to conversion or pushes them away from it. Conversion, in this context, is when a visitor does any one of the 3 things you want. Three is the OUTSIDE number of actions any design can support. During a "Work With Seth Godin" boot camp the master of Internet marketing explained conversion like this, "Getting customers to take one action is hard, getting some to take one and not the other is difficult, getting visitors to take three actions is impossible."

I've conducted hours and hour of patterned web design research across many websites and different business verticals. Without fail 10% of the number of links on a home page account for 90% of the clicks supporting Godin's application of Occam's Razor where less is always more.

1in9's navigation, their taxonomy, is pretty straightforward if not very keyword rich. "Stories", for example, is much more generic than Cancer Stories or Cancer Survivor Stories. Keep in mind that the way you write a link on a page and how that link appears to search engine spiders can be different. You might keep "stories" on the page and rewrite the URL as Cancer Survivor Stories. I like to practice the way I want to play, so I tend to include more keywords in navigation than most.

There is a fine line between SEO keyword density and user engagement. In our new post Panda and Penguin Google times vote for better engagement. Keep in mind engagement is better when it a website is clear and not confusing.

"Stories" is generic and so we are forced to supplement context. Read Don't Make Me Think by Krug to understand why forcing visitors to figure things out lowers conversion. Stories should be Cancer Survivor Stories to make it instantly clear.

1in9 Design Website Design Ideas

Regular readers of ScentTrail Marketing or my Posts on Atlantic BT's blog know I am a former E-commerce director. I am NOT a graphic designer, but I like to paint with rectangles before handing my unsophisticated attempts to a talented artist to continue the interpretation. I focus on conversion because conversion pays the bills.

I was asked once if I would prefer a pretty website that DID NOT convert over one that DOES. That was an easy answer. NO! The website is in service of an organization's goals and no pretty picture can trump having visitors convert, having visitors join your mailing list, contribute content, share your website with friends or buy something.

I refocused the design around 1in9's core mission. Stories are a form of currency for nonprofits. Stories touch hearts and minds and open checkbooks. Stories are key. My first draft had stories on the left, but it was strange to have the store's white backgrounds in the middle.

With the store in the middle the design became unbalanced. Here is where a talented designer could silhouette the talking heads and make all of the tease graphics look similar.

This is a pretty basic 3 column e-commerce design. It is possible, once you begin "painting with rectangles", to create a version of the old site such as this:

This design could keep the roll though I am NOT a big fan of rolls despite how common they've become. Researches such as Amy Africa point out that every roll creates a recalculation by the limbic system. Our brains shuffle through the "eat me or I eat it" all over again due to the roll. The costs for most rolls is higher than the benefit, something more websites would discover if they tested with and without the role.

The "HERO" is Internet marketing speak for the largest image on the page. The Call-To-Action or CTA area is a great place to ask for donations or volunteers, to ask for something significant, a conversion point. Keep in mind that visitors can't answer questions you don't ask. If you don't ask visitors to join your mailing list they won't. If you don't ask for donations above the fold many won't know you are asking.

Conversion Advantages

Every website design action encourages or discourages conversion. There is no neural design act. Website designs create immediate and subconscious reactions. Conversion is improved when communication is clear and simple. Confused customers do many things, conversion is rarely one of them.

Your website design creates conversion advantage when:
  • Overt and covert messages are consistent with the nonprofit or company mission.
  • Navigation is simple and intuitive utilizing keywords.
  • Choices are limited and presented with graphics and text.
  • Hot Spots are tuned and tested.
The last bullet, hot spots, could have a complete post of its own. The 30,000 foot summary is any image is HOT since images draw the eye. Immediately to the right and below images is Very Hot, so use those areas wisely. Remember people like to click images, so put a link behind most of your graphics.

My closing advice for 1in9 and other nonprofits wanting to increase conversion from their website is to sell the click and no more. Many people want to include everything on an image roll, in menus or on the homepage. Where most would be satisfied with 5 to 7 links they want twice that.

Evidence from years of testings says 10% of your links are going to receive 90% of the traffic, so keep it simple, don't make your visitors THINK (read Krug's book). Focus on one primary action, maybe two and at the outside three and you will convert "traffic" to friends and supporters.

Find out how your Internet marketing problem can be included in Free Internet Marketing Consulting Saturdays,



3 comments:

iram akrm said...

I like you post it to much helpful A good web designer will ensure that they use design techniques to lead the user around the screen and site. Clearly differentiated sub-sections and even a site map can ensure a concise, easy to follow navigation route, while good use of position, colour, contrast and size can all help focus the eye. Stick to one main navigation menu, remain consistent throughout the site, use sub-navigation and keep it uncluttered by avoiding drop down menus.Website Design Company Melbourne

Martin W. Smith said...

Iram makes good points. I hate clutter too. There is some confusion around the use of menus. I like macro navigation top and horizontal and always present with micro navigation, if needed, left and within the section that it applies to.

Thanks for the comment Iram. Marty

Colleen Fisher said...

I do agree with you that the design of a website can tell the visitor a lot of things. Basically, it is the face of the business in the World Wide Web. With one look, people should be able to know what the business is all about through the website. For a non-profit organization website, on the other hand, your website has to be able to reach out to them and communicate your cause.