Archive for the ‘Web Design Guide’ Category

Building a Better B to B Website

Thursday, September 10th, 2009

To Build a Better Website, Think Like Your Website Visitors

Had the opportunity recently to meet with a very strong local firm doing business throughout the Midwest regarding the new website they were planning.   Even with all of The Net Impact’s experience in building International B to B sites (examples: KMT Waterjets, TricorBraun, Bausch and Lomb Storz) the first meeting with a prospect is always filled with some surprise.  This is especially true in a group meeting.

Usually, someone at the table is almost solely interested in appearance.  Someone is interested in upkeep.  Functionality, search engine optimization, hosting, “cool” features and of course…cost, are all out there for discussion. In the end though, everyone has the same goal, a website they can be proud of.

What I have found is that many times these meetings need a reset.  Instead of jumping right into the discussion of what the new website will look like, act like or be built in, why not discuss what the website is supposed to do?  If you are like most of our clients, you want your B to B site to accomplish three big goals.  1) Represent and further the brand experience online  2) Make it easy for your team and your current customers to interact online 3) Generate new business.

In order to accomplish these goals, let’s discuss some elements of a better B to B site.  Let’s break it down to “Brand” elements, “Visitor and Return Visitor” elements, “Business” elements and finally the “Please the User” elements.  Some basics:

The “Brand” elements

  • Establish credibility
  • Display expertise
  • Promote your team
  • Display your relationships and testimonials
  • Trophy case of awards, relationships and merit
  • Show your values
  • Promote the activities of business

The “New Visitor” elements

  • Easy 411 on home page
  • FAQ area that is written by customer service
  • One click information access to products and services
  • Case studies related to their industry
  • Short and easy request forms for follow-up
  • Demos that are easy to find and understand.  (Interesting also helps right?)
  • Supportive documents and information for “doers” (those that need your product)
  • Supportive documents and information for  “buyers” ( those that sign-off on the order)

The additional “Returning Visitor” elements

  • Customer portal with purchase history
  • Project or shipping updates for current clients
  • Easy reorder capability
  • Announcements for any specials or new product releases
  • Online service access or service request tracker

The “Business” elements

  • Easy to find and fill out “Contact Us” forms, “Request a Quote” forms and phone numbers
  • Online RFP support may be good for your industry
  • “Sign-up” for newsletter, product updates, trade show activities or industry news
  • Lead nurturing and follow-up plan, maybe beginning with integration into your CRM
  • Multiple ways to contact the company or their representative
  • Analytics throughout for planning site changes and improvements.  Yes you will have some.
  • Search engine optimized landing pages  to generate traffic (of course)
  • A page testing plan to improve conversion (Google Optimizer is pretty cool)
  • Coordination plan for “offsite” and “onsite” marketing efforts with supporting landing pages

The “Please the User” elements

  • Flash, video and major graphic features are fine but…do they serve the user and improve their experience?
  • Easy navigation.  (We call this a Traffic Based Design)  Get the visitor what they want in no more than three clicks. Which means..
  • Planned path though the site to goal pages with “calls to action” by visitor type
  • Product tables where required with easy search and sort
  • Easy to find contact info, site search capability and site map

Planning out your new website elements is well worth the effort.  As you do, remember to “think like your visitors” in order to better promote your business online, generate traffic and generate leads.

Preplanning for Your New Website.

Tuesday, June 23rd, 2009

Plan first.  Design later.

This weekend I was primarily an observer, yet a little bit of a participant, in a running email conversation between different parties engaged in creating a new website.  There were people with very specific ideas about what the site should do based upon how they personally surfed the web.  Then there was a designer engaged in the talk with a very pointed approach as to what the layout should look like.  And there was me, who fearlessly stated that I had “no idea” yet about how to design the web site.  I said that because we have yet to have a functionality and target visitor discussion.  It was just too early to rule anything out or make assumptions.  This weekend’s email conversation about this upcoming website made me decide to post a part of the dialogue, my response to the question, “How specifically would you design our website?”  My answer was, “I don’t know.”

Why I don’t know.

I don’t know because we have the cart before the horse or the design before the navigation and functionality.  I don’t know because we haven’t figured out who we want to come to the site and what we want them to do.  I don’t know because, well, we don’t know.   Below is a modified portion of my email (modified to protect the innocent).

“Sometimes a good way to layout the functionality of a landing page (not specifically design) is to define who will be visiting the page and what behavior you will be trying to influence through “calls to action.”  Many people use a website for 411.  It is easier than pulling out a business card, opening their wallet, finding a key fob or certainly pulling out a phonebook.  For those people, having a phone number (posted on the home page) for enrollment, customer service or other services may be very appropriate.

Also important, navigation and use are critical to understand (prior to design).  Here are some points to consider:

1. determining/anticipating who will visit each landing page on the site (public vs. private as well)

2. defining what actions they (targeted visitors)  may be looking to perform on those pages

3. defining what actions or opportunities you would like them to engage in

4. creating specific “calls to action” for each (visitor type) taking into consideration how different personality types (humanistic, impulsive, aggressive…) and users will engage with the site

5. installing web analytics for activity tracking and providing test results

6. review of performance analytics to see what actions are being taken (and inferring which ones may be missing)

7. ongoing testing of new pathways for visitors through calls to action (this is easy with Google Optimizer)

8. refining, over time, how to offer the calls to action by how they take those actions historically (example: search box used for brand, product type or zip code) and testing against other manners (most popular searches become image links on their entry page)

9. dynamic personalization of individual shopping practices by creating individual service and shopping calls to action (“www.MY.website.com” home page with “my preferences” may be an evolution from this)

10. ongoing site enhancement through cooperation with vendors, service partners, visitor feedback and stakeholders

Start with the definition, the methodology of how vendors, partners, institutions and customers will interact with the site.  This will be a key component for success and usage. ”

Making certain that all viable best practice options are being presented to the design team is the goal of this exercise.  Even, perhaps, a series of focus groups or Q and A sessions with prospective site users would help determine the starting point for navigation and design.  Offline and online marketing are very commonly combined in this early “user interaction” development stage of a website.

Design is critical for a website.  But design without purpose can create a pretty expensive gallery.

Related articles:

Planning Your New Website, Smash Media 2005

Planning a Useable Website: A Three Step Guide, Web Credible 2004

Web Marketing; What Do Visitors Want From Your Site?,  EIOBA 2006

City Websites Getting Hip

Monday, June 1st, 2009

Want to Friend Your Municipality?

Over the past few weeks, we have had the opportunity to meet with several municipalities regarding new websites or improvements to their current site.   Do you think of your municipality as living a pretty boring online existence?  Do you think the city really wants increased traffic counts and conversion?  If you are one of the many citizens in your community yet to check out the old local.gov site, you might be surprised.  City sites are getting hip!   

In our meetings with the teams dedicated to redesigning a municipality website, we have taken the usual approach of creating a list of goals and online features that are the core of the project. Can you guess at the top features on the request list? Sure you would expect safety and evacuation information.  School information, check.  How about online traffic ticket payments, building codes, elected official bios, park and recreation hours, trash pick-up schedules and RFP bid management? Sure, those are all the basics.  What’s surprising is that the list grows from there to include some pretty hip social marketing features.  Here are the top 2.0 requests.

  • FaceBook link and supportive muni site on FB
  • Twitter setup and link from home page
  • Streaming video for online broadcast of meetings and city events
  • YouTube and Flickr setup for community sharing
  • Online photo galleries showing recent events 
  • Emailed newsletters
  • Ability for citizens to request alerts when new information comes online
  • Online news center and press release archive
  • Online activity calendar for city events
  • Polls and survey tools

In addition to the desire to stay in touch with citizens using 2.0, there is an awareness that the .gov site needs to be maintained and freshened on a consistent basis.  Our myimpactCMS system is great for enabling that kind of easy online content development and updating by non-IT staff members.  The city sees the need to be current and up-to-date online in a way that benefits the visitors. 

So, the next time you see your city mayor at the local festival, look carefully.  He or she may be tweating about the pie eating contest going on in tent three and you could be missing out!

What is a “Traffic Based Design?”

Wednesday, May 13th, 2009

“Why can’t I use all of my keywords on my homepage?”

SEO 101, check your university course catalog, will teach you that creating a page for a visitor means making it specific and exact to a topic.  In other words, if they are looking for ice cream, don’t also make the page content heavy on hot dogs just because you offer those too. 

This is the simple fundamental behind our trademarked Traffic Based Design theory.  The goal is to build great pages that attract and inform visitors in a way that focuses on the topic, uses only related keywords and delivers good traffic to the page.  This is THE cornerstone for a good SEO effort.

Remember from previous posts that a well designed web architecture will bring more organic and link driven traffic to your site from deep searches to interior pages.  Search is just not for the home page.  You may also recall from our writings that the home page of your site is really designed for visitors who already know you or at least know your name.  Well thought out and “funnel to goal” designed interior pages represent your best opportunities for landing traffic from raw searches for terms describing your goods or services.  So, what does a good Traffic Based Design site look like?   Try this:

Seven Step Traffic Based Design Exercise

  1. Determine “who” (visitors) you want to find your site.
  2. Determine “what” information, goods or services they may be looking for from you.
  3. Research what search terms they are using today from your site analytics.
  4. Determine through keyword research if those are the right, best and most popular terms to attract and inform your visitors.
  5. Create a landing page strategy for delivering those visitors with those specific terms (remember ice cream vs. hot dogs) to a single page. 
  6. Don’t crowd up the page to “squeeze” other or repetitive keywords in where they don’t belong.  Don’t forget tags, titles, headers, etc… are critical.
  7. Test, publish, review and change as indicated.

Remember this is very basic and really only the first step in the journey.  The goal with a Traffic Based Design is to get people TO your site.  Your landing page strategy should also determine ways to get visitors THROUGH the site to your conversion goal page.  The right calls to action, a good testing strategy and great content are all required to even get to first base.  And, no, first base is not the same as page one.

Home Page Pointers

Monday, April 27th, 2009

Five Helpful Tips for Above the Fold


Artistic Sensations Quality Kids Furniture

Artistic Sensations Quality Kids and Teen Room Decor

Every once in while it’s good to review the basics for conversion like, “What is working on my Home Page?” For this conversation, I selected a small but mighty retailer of teen and kids furniture, Artistic Sensations.  The Net Impact is currently running several Google Optimizer tests on this site including several to improve conversion.  Yes, you always want to improve conversion. Many of the elements on the current home page for Artistic Sensations are the results of previous tests.  What did we learn and how does it relate to this Home Page Pointers post?  Here are a few quick and easy take-aways:

After the tests
What works

Let’s start with the arrows:

Red Arrow:  Artistic Sensations deals a lot with parents and grandparents that would rather pick up the phone and have a live person assist them with their purchase.  The prominent toll free number provides a genuine invitation for this customer.

Blue Arrow: Note the Authorize.net badge of security.  Again, with parents and grandparents, as well as other clients purchasing big ticket items online, displaying security provides a big advantage in the battle to gain trust from new customers.
Black Arrow: The simple easy to read on any browser shopping links are a terrific aid to customers; these are heavily used and stand out from item images that provide graphic calls to action.
Purple Arrow: Yeah, the search box gets good use.
Time for the boxes:
Red Box: The two “big” divisions of products, “Kids” and “Teen”, are called out in a very prominent and clear manner.  We are going to further test ways to increase traffic to the store from here as this buyer can be looking for entire room makeovers and is clearly looking for a specific type of product for a specific age.
Purple Box: Image driven calls to action are a big plus for spontaneous and gift shopping.  Putting new, test and top selling products right up-front increases traffic to the store area.
What we didn’t mention yet:
Branding with a strong name and logo element lets the customer know where they are immediately.  Constant testing of  ideas like the Baseball Themed bedrooms, the visibility of sales and promotions and the top of page easy access to shopping cart and account information are all proven.  Grouping, look carefully at the way calls to action are grouped together.  Remember, people scan a site in a blur but really focus in on parts of the page in small parcels.  If you do not group related areas together, (Contact Us and phone proximity as an example) they may not see them.
Top Five Take-Aways for Above the Fold
  1. Provide an easy brand identity and 411.  Display a prominent logo, phone number and easy to find contact us for both shopping and customer service.
  2. Design for your customer.  For Artistic Sensations, the toll free number and a knowledgeable representative to talk to are real positives to the parents and grandparents making purchases.
  3. Badges and Trophy Case items.  Autorize.net, BBB, etc. whatever you possess provides additional measures of security for the customer when they pick you before they pick product.
  4. Different options for different visitors. Visually graphic calls to action with images for returning shoppers and those interested in new ideas, buttons indicating big divisions in shopping patterns for those on a mission, same with the easy to shop links on the right (red box), the search box for the “in a hurry” shopper.  Remember, each type of shopper should be considered in designing your entry points to shopping.
  5. Keep your site current.  Seasonal products and new information are absolutely expected by the customer.  Make that obvious to your visitor.

Finally, keep testing and making changes.  All we know is that this version of your site is what the customer likes today.  As for tomorrow?

Web Design Guide: Easy ASP.net Options

Monday, May 19th, 2008

Previously, we looked at several open source content management systems that are widely used. Those are great options unless you have a Microsoft server. If that is the case, what are your options?

Here are two options for you to look into:

Dot Net Nuke

Dot Net Nuke is an open source dot net content management system, and like the other content managements systems, has some nice add-ons. Dot Net Nuke has an easy-to-use interface, but it can be buggy when you try to implement your own custom design. Still, it is extremely popular and has lots of ability if you are constrained by or are sticking to the benefits of a dot net machine. The most current release of this freeware like many others is sometimes referred to as the “bleeding edge”. Tackling new releases is not for the unskilled or time constrained developer.

Master Pages

My limited personal knowledge of the technology that goes into master pages, server side includes and the like prevents me from going into further detail about how these technologies work in that respect. We can always engage the tech team here at TNI for that dialog. The point is that implementing master pages is an easy way to save yourself a headache in the future.

The overriding concept and purpose behind master pages is simple: Create one “master page” that controls the border of your web page and only fill-in the middle, content portion of the page individually. Content management systems allow you to do much of the same thing, but with master pages you have the ability to edit actual static page files. For any web site with more than a few pages, this is a great option.

The rate of change required for a website to be considered “current” continues to dictate a shorter and shorter refresh cycle. Because of the need for fresh content and in other ways, up-to-date site features, more and more businesses of all sizes are looking to web solutions like the two above in order to allow new information, graphics and even pages to be created by someone other than the IT team or Webmaster that will still reflect the same brand strategy and maintain the standards in place throughout the rest of the site. Making website updates with relatively the same ease as a blog post looks like a highly desired attribute that businesses will increasingly have on their checklist.

Significant contribution to this post by S Trachtman.

Web Design Guide: Ad Placement

Thursday, March 20th, 2008

Back in the early days of the Internet, banner ads and pop-ups were all the rage.  In fact, companies would spend outlandish amounts of money on these sorts of ads. 

Banner ads are still popular, but advertisers are using better judgment in the prices they pay, as well as the creative and marketing messages that they are conveying.  Banner placement and size, in particular, is more advanced and well thought out than ever before.

While the trend in the early days was top and side ads, now the 300×250 medium rectangle ad is king.  300x250This ad, as seen here from a Google AdWords sample, fits in well with content.  At the same time, it is unobtrusive within the content compared to other ad sizes.  The price of these banners can be as much as double that of the top banner ads on a web site. 

Why?  Simply put, readers are more likely to click on these ads since they blend in with the content.  Therefore, this is a premium positions that advertisers and those web sites selling advertising covet.

If your web site is advertisement based and you have not implemented these 300×250 ads, it is certainly a good idea to do so.

Web Design Guide: Open Source Content Management Systems

Tuesday, March 11th, 2008

For those that need the functionality of a content management system but don’t have the budget, the last few years have created the revolution known as the open source content management system.

There are several extremely popular open source content management systems that provide a nice balance of features, customization and ease of use.  I can only speak for the content management systems that I have experience using, and even in that case the experience is limited.  Still, perhaps my experiences with these open source content management systems will have some benefit for you looking ahead if you are faced with the decision of using an open source CMS or having something custom built.

Drupal

Admittedly, my experience with this CMS is quite limited.  What I do know: Most experts claim that Drupal provides the most customization and tools of any content management system.  There are seemingly a limitless number of plugins for Drupal, and I have also run into more than a few very nice looking web sites with outstanding functionality built on this platform.  The downside?  I installed Drupal on my own host account, and I had no clue where to even begin with it.  That seems to be the consensus from what my own discussions with experts.  There is a big learning curve with Drupal, so if you want to get something launched quickly, there are probably better options.

Joomla/Mambo

Joomla and Mambo are two separate content managment systems which forked from the same CMS.  For the purposes of this discussion, we will look at them as the same.  Each provides lots of modules and plugins like Drupal, and there are also some very cool features that would otherwise seem to be custom-based such as Facebook-like community building.  The claim by many experts is that this content management system is more limited in functionality than Drupal, but it is also easier to use and get off the ground.  Take that statement for what it is worth.

WebGUI

I was introduced to this content management system by a friend.  It is not nearly as popular as the latter two open source content management systems, but it is probably the easiest to use of the bunch.  WebGUI is actually designed for people without much technical experience, making it the lowest learning curve if you are hoping to get something up quickly.

Other

In a literal sense, even Wordpress (the software that runs The Net Impact Roadmap) is a content management system.  All we do is plug the blog into an online interface, and off it goes to cyberspace.  However, it is not known literally as a content management system since the overall capabilities are limited for the most part.  Rumor has it that this idea will change within the next few years and Wordpress will develop far more CMS ability, but that is something we will just have to wait on.

There are plenty of quality content management systems that are on the internet and even available to be installed automatically from your host.  The above list is certainly not the end all in the open source CMS game, and you are likely to find some other content management systems that you like if you have time to look around.

Our next look at web design and development tools will be a look at a couple tools that are ASP.net based.

Web Design Guide: Photoshop and Other Artistic Wonders of the World

Friday, March 7th, 2008

Adobe Photoshop is widely known as the standard for graphic design.  In fact, it has become part of pop culture and our daily vernacular.  How many times have you heard, “That was Photoshopped”?  It is really no coincidence.  Photoshop really is an incredible tool for creating and editing photos and graphics.

Other extremely popular graphic design programs include Adobe Photoshop Elements, Adobe Illustrator, CorelDRAW, Paint Shop Pro, and of course, the timeless Microsoft Paint.

Those are the popular graphic design programmers, but there are also some lesser known gems.  We profile those below:

The GIMP

The open source revolution is upon us.  The GIMP is one of the leading graphic design alternatives for Adobe Photoshop, and it happens to be 100 percent free.  The program allows you to do many of the same things that were previously only completed on Photoshop such as creating PSD files, editing photos easily and creating quality-looking text.  Like Photoshop, there are also some nice mods for The GIMP that make it a more useful tool.  Of course, Photoshop does have far more overall capability, but The GIMP is a nice alternative if you don’t want to shell out the money for Photoshop.

Paint.NET

From an interface standpoint, Paint.NET looks more like Microsoft Paint than it does Photoshop.  That layout means that it is very simple.  Like Photoshop and The GIMP, Paint.NET includes layers, neat graphic effects for photos and other graphic adjustment tools.  The interface does take some getting used to if you are more familiar with Photoshop, but some of the features are unique and very useful for editing photos.

Picasa

Picasa, from Google, is more for editing and organizing photos than it is creating and editing graphics like the tools listed above.  Even so, Picasa is a wonderful tool for editing photos and, in fact, has some advantages for photo editing over those more advanced tools.  For one, the simplicity of Picasa allows someone of any technical skill level to quickly and easily adjust photos to their liking.

MS Paint

We save the best for last, of course.  Windows has changed throughout the years, but thank goodness Bill Gates and company have kept MS Paint the same – or similar, at the very least.  The uses of Paint compared to the programs listed above is limited.  However, everyone with Microsoft Windows has Paint, and everyone has probably used it at one time or another.  So even while the uses of the program are so limited, it gets my seal of approval.

Web Design Guide: The Role of Color in Web Design

Monday, February 4th, 2008

Today we are going to discuss color and how it relates to designing web sites.  Granted, I am hardly qualified to provide an art lesson, as my colleagues can attest.   However, color choice goes well beyond “what looks good” when you are designing a web site and have revenue on the line. 

The right or wrong color choices can make a difference in revenue for your web site.  This is a well-known idea for restaurants and stores, with such businesses spending thousands of dollars on design experts to help design interiors and providing customers with a certain atmospheric “feeling” due to the color.  Below is an outline of color meaning, as explained by About.com:

Blue: Calming, cool, importance, confidence, intelligence, stability, unity, conservatism, corporate

Green: Life, nature, growth, renewal, balance, harmony, stability

Silver: Sleek, modern, glamourous, distinguished, elegant, earthy

Red: Hot, anger, power, danger, emergency, attention

Pink: Physical weakness, delicate, feminine

Yellow: Happiness, joy, deceit, cheerful

Gold: Wealth, prosperity

Orange: Stimulant, vibrant, energy, warmth, attention

Purple: Royalty, nobility, spirituality, moodiness

Black: Conservative, mysterious, elegance

White: Purity, cleanliness, innocence

Brown: Wholesome, earthy, simplicity, friendliness

So what does any of this mean when designing your web site?  It can be important to keep in mind the nonverbal meaning of the colors you use on your web design and logo as you build your brand identity.  Certainly, a quality product and/or marketing campaign can override choosing the wrong color for your logo or web design, but your color choice does often have a quantifiable impact.  This is just one more thing to think about among the millions of considerations when starting a web site.

Seth Trachtman is a Web Marketing Account Manager for The Net Impact Web Design St. Louis.