Excerpting “Web Design and Marketing Solutions for Business Websites”

In: Articles

By Kevin Potts

Published on September 10, 2007

Websites have become the go-to medium for casual information gathering. Google, Wikipedia, Technorati, and other massive information harvesters offer the world near infinite information at near-instant speeds. When people hear about a company, they type in the URL. Because of this, providing as much information about the business and its offerings is a critical ingredient in successful websites and marketing in general—when content is available, people will consume it.

Few sections benefit more from building content than the products or services. Not only does it inform the audience, which is very likely the customer base, but it presents an ideal marketing platform and selling opportunity. If people are already on your site, why not push them into action?

The Products and Services pages should be built with a selling path in mind. A selling path is an easily followed, short series of actions that leads people to initiate the sales process. Ideally, this should be three tangible steps:

1. Landing page: People will find the products or services landing page, be enamored with all the wondrous things the company manufactures, sells, or consults about, and click on an item for deeper exploration.
2. Individual description: Prospects will find themselves on a singular page that describes in no uncertain detail all of the salient selling points of the product or service. This page guides them toward the final stage of the selling path: the sales process.
3. Acquisition: After readers consume everything about the product or service that catches their eye, they will effortlessly find themselves on a page that (politely) asks them to finish what they started, either by making a purchase or becoming a qualified lead by making contact with the company.

In Chapter 4, we explored the concept of goal conversion. The selling path is the second half of this; it captures a user’s attention midway through the conversion process and acts as the catalyst for achieving the goal (see Figure 7-2). Because of this, this three-step selling path should be nearly thoughtless for the user—they should find themselves moving down the conversion funnel with about as much resistance as a greased bowling ball encounters rolling across ice.

Streamlining this process is not as easy as it sounds. In fact, it requires careful design and copywriting, explored in the next section.

Figure 7-2. The selling path starts midway through the goal conversion.

Product page design

A company whose primary line of business is selling tangible products will find its catalog of items falling into three fairly distinct categories:

1. Products that can be sold on the web: Just about anything that can be shipped and delivered cost-effectively can be sold via an online shopping cart, from fruit baskets to furniture to cars. These products do not need the help of a sales force. Customers can make a purchase online without interacting with the company.
2. Products that could be sold via the web but are not: Many corporate websites describe products that could feasibly be sold online but are not because the company chooses to distribute them in other ways. Many food manufacturers do not sell their products online because they have exclusive distribution deals with grocery stores and other retail outlets.
3. Products that cannot realistically be sold through a shopping cart: These products simply can’t be delivered without a huge expense (such as a luxury fishing boat) or without intense customization (enterprise-grade software).

While they are still tangible things, the last two types of products have to be treated like services because either the customer has to seek out the product beyond the Web, or the customer and vendor have to engage in a human interaction for the sale to be made. As with services, a website can only go so far in marketing and selling these types of products, which is why this section will focus on the first category, or those that are sold over the Internet.

When designing and writing web pages for these products, you should always make the selling path prominent, because it leads customers right to the online store where they can make a purchase. It doesn’t have to overwhelm the reader—half-page, seizure inducing billboards are probably overkill—but it always has to be brainlessly accessible.

The product landing page

Most users who go through the trouble of finding a particular company are likely going to click on the Products link in the main menu. They should be rewarded with a landing page that focuses on actual product offerings, and doesn’t display large, Flash-based introductory animations, wander down tangents talking about company history, or do anything else that detracts from the carefully crafted sales message. In other words, do not deviate from the selling path.

Take advantage of the space on the landing page to promote the benefits and high-level selling points of the products. Leaving the good sales copy and design elements to individual product pages is self-defeating—that golden content can help drive customers deeper into your site. For instance, Figure 7-3 shows a product landing page for M-Audio, a company that manufacturers professional audio equipment. Notice the casual sales copy and compelling photograph at the top of the page, plus the crisp photographs and brief product highlights that help funnel users toward the product in which they are most interested.

Imagine if the product landing page were the only web page visitors could read about the products. You would want to provide them with comprehensive subject matter, creating an almost portal-like environment where they can learn everything they need to know without hopping all over your corporate domain. This focuses visitors into the selling path.

Figure 7-3. The product landing page for M-Audio uses simple copy and a clean design to help users find the product most closely matching their interests.

To accomplish this, there are several key pieces of content that should appear in a product listing. Depending on the complexity of a company’s offerings, some of these might be more feasible than others, but all will add value to the customer experience:

• Retain a specific description of the displayed product line: If a page describes only one product line, ensure that the content discusses what is being shown on the page, not the greater family of products.
• Include a product-specific search feature: If the catalog is deep or old, or contains many variations of pieces, it will help users find the perfect product faster if you give them a dedicated search feature where they can query model numbers, dimensions, keywords, and more. Traversing even the most elegantly designed hierarchy is slower than the type-click-find speed of a search engine.
• Make sure the depth of the section’s architecture is accurately demonstrated: In other words, make sure all product categories are represented and any subcategories are within easy clicking distance.
• Include a way of highlighting particular products: These products might be on sale, or recently released, or coming soon, but users love “featured products” because they often take the guesswork out of where to go from the landing page.

As with the corporate website’s homepage, these elements have to be carefully arranged to help users find their way around the product catalog. The goal is to direct users. If done well, visitors will rely on the design and copy of the product landing page to guide them.

The individual product page

Once your reader has found your website and navigated through the product landing page, they will arrive on a singular web page dedicated to the product in which they are (hopefully) most interested. This is where web design and copywriting skills come into full play, and where simple marketing messages have to work in tandem with technical descriptions.

An individual product page should offer a comprehensive overview of the product, including photos, testimonials and reviews, dimensions, availability, and technical specifications. Anything and everything about that specific product should be present and accounted for. The last thing your visitors want is information about the product scattered around the site, so make sure every detail is centralized, focused, and accessible.

Figure 7-3 showed the product landing page for M-Audio. Figure 7-4 shows an individual product page with plenty of detail. Following are some key attributes that should be included in a product page.

Description. The length of a product description is subject to just about every marketing variable out there: how much there is to actually say, how many vice presidents of marketing are involved, how long the marketing people want the description, how far the writer can then condense the text for easier web viewing, how much technical information to mix in with the sales copy, how old the coffee is in the coffee maker, and whether there’s a full lunar eclipse this month.

Many companies have printed brochures that describe their products at great length with copious, flowery detail. While it’s simple to grab the brochure copy and duplicate it inside HTML, this path of least resistance is usually not appropriate. Text is not consumed equally between the mediums. Marketing web copy thrives in brevity and punctual statements—bullets and two-sentence paragraphs are the norm; long-winded prose is ostracized.

Some product descriptions take only a paragraph. Others require pages. The description of the product should be as long as it needs to be, and no more. As long as the text follows best practices in writing for the Web, people will consume what they want before making a decision.

Figure 7-4. M-Audio does a great job aggregating content into individual product pages.

Photos, images, and diagrams. People love pictures. It doesn’t matter if they’re professional photos or poorly lit Polaroids, glossy diagrams or low-resolution screenshots—when people shop online, they want to see some substantial evidence that the product that has caught their interest actually exists. Smart companies understand this, and put their best marketing foot forward to make available the best images possible. As you can see in Figure 7-4, M-Audio understands that their audience wants to see every nook and cranny of their devices. They make sure that their product pages contain high-resolution, professional images that give a very good sense of the products’ look and feel. (They also allow users to click on an image to bring up another screen with even bigger images and more detail.)

At a minimum, users should see a thumbnail of the product. This does not have to be elaborate. To avoid forcing users to squint, make sure that the image is at least 150 pixels wide. Providing a larger image when the thumbnail is clicked is almost always a good idea. This higher-resolution version should appear in a new browser window, not because this constitutes better usability (which it really doesn’t), but because people expect and accept this functionality that has been perpetuated by thousands of websites. This window can be loaded several different ways:

1. The simplest method involves adding the target attribute to the anchor tag, such as
   <a href="/images/tractor-engine_large.jpg" title="View a higher resolution photo" target="_blank"><img src="/images/tractor-engine_thumbnail.jpg alt="tractor engine" /></a>. This technique avoids JavaScript, which might be disabled; the disadvantage is that the target attribute is deprecated in XHTML 1.0 and beyond, and if included, will prevent the page’s markup from passing the W3C validator.
2. To open a new window while keeping the page valid, many developers use JavaScript. A basic version would look like this: <a href="/images/tractor-engine_large.jpg" onclick="window.open(this.href); return false;"><img src="/images/tractor-engine_thumbnail.jpg" alt="tractor engine" /></a>.
3. The previous JavaScript examples only load the images in a new window, but the language also has the power to dictate the design of the browser window, such as the width and height, whether the navigation items are visible, and whether the window is resizable. Building off the previous example, a simple version might look like <a href="/images/tractor-engine_large.jpg" onclick="window.open (this.href, 'popupwindow', 'width=300,height=400,scrollbars,resizable'); return false;"><img src="/images/tractor-engine_thumbnail.jpg alt="tractor engine" /<>/a<.
4. There are also many external scripts that handle this functionality as well. Roger Johansson, author of the web design site 456 Berea Street, wrote a simple script that loads any link with a rel="external" attribute in a new window, relegating the behavior to an external file¹. Lightbox, another good option covered later, is a piece of JavaScript that loads images into a <div> that overlaps the main page. Both of these prevent the JavaScript from being embedded in the HTML, so the page size is kept small and the HTML remains semantically strong.

Generally, opening links in new windows is regarded as bad usability and accessibility practice, but in this case, users expect a thumbnail to open a new window with a larger image. The one and only concrete rule about this entire discussion is to never make a thumbnail link to an image that is not bigger. If a higher-resolution version with increased detail is unavailable, do not link the thumbnail.

Occasionally readers are provided more than one high-resolution image. If you are providing an individual link to each, the anchor text of the links must be explicit, so readers know what they are clicking to. (You might even provide miniature thumbnails next to each, but make sure actual text accompanies the small images, otherwise the audience will just see a group of ambiguous pictures.) In our example layout in Figure 7-5, you can see links designed with increasing complexity.

Figure 7-5. Showing additional high-resolution images can be done with different levels of complexity.

Images can also be clustered into a slideshow for increased efficiency. The slideshow should launch in a new browser window as if it were a singular picture, but provide Forward and Next links so that users can browse through the images quickly. Ideally, the design of the pop-up should also show the number of pictures and allow users to click to one directly. This functionality can be built with a series of regular, minimal HTML pages that link to one another linearly inside the smaller browser window, or with more advanced web software. There are two very popular scripts for managing slideshows:

1. SlideShowPro is a Flash component that uses an XML back-end and a Flash interface to elegantly present clusters of photos. It offers full visual customization to fit any site design, and can be coupled with a back-end tool for easy administration. It is available from www.slideshowpro.net.
2. Lightbox JS is a JavaScript-powered slideshow tool that is free and very easy to use. Images on an HTML page are given a common rel attribute, and when clicked, load a semitransparent window that flips through the different pictures. Version 2 is available as of this writing and is available from www.huddletogether.com/projects/lightbox2/.

In addition to static photography, many product pages contain interactive demos or 360-degree QuickTime videos. Designers and marketers should work together in crafting the best possible product presentation within budget, time, and resource constraints. Obviously, bigger products benefit from more elaborate site designs (e.g., the website of any major car manufacturer). But it’s important to design the mundane catalog items’ illustrations and photography well, because the small touches of good design and usability can dramatically amplify the clarity of information and can be a major contributor in converting casual browsers into new customers.

Supporting content. While just about every product has a description, and most have a picture or two, it is often worth supplementing that core content with material that might be of interest to the reader. Ideally, an individual product page should contain everything a reader could possibly want to know about the item, including the following:

• Case studies or testimonials: We’ll cover third-party validation later in the book, but this is a perfect place to include some words from satisfied customers.
• News items: This might include press releases issued by the company, independent write-ups and reviews of the product itself, or interviews with key corporate figures.
• Technical documents: Whitepapers, technical specifications, best-practice documents, or anything else that might appear to a narrower segment of the readership could be added as well. These are typically in PDF or Microsoft Word format, but could also be converted to HTML.
• Marketing collateral: These are the two-page datasheets of multi-page booklets that serve to market the product in the physical world. While these can complement the page’s primary marketing copy, be careful of overly redundant messaging.
• Related products: If a particular product is part of a greater portfolio, or if it’s designed to work in tandem with other independent programs (like the main applications that comprise Microsoft Office), it would be helpful to link to them right from the relevant product page so the reader can understand the context of the item they are reviewing.

As we discussed, the bigger the product, the more budget and resources are dedicated to that product’s marketing. In addition, more resources are pumped into products that are not lost in a sea of other offerings; if a software company produces only a few titles, then they are going to focus their efforts into designing the heck out of the product pages since revenue is reliant upon fewer avenues of revenue. In Figure 7-6, you can see an example of a well-designed product page from Extensis. In addition to the core content in the central column, case studies and technical documents enable customers to read about a complex piece of technology, and hopefully aid the customer in making an informed purchase.

Figure 7-6. Extensis provides plenty of supporting content on this product page. Case studies, technical documents, and detailed specs round out the description in the center.

Shopping cart link. Your site is going to either have e-commerce capability or not. If it doesn’t, but your company relies on a network of distributors, you should point people to the place where they can find a dealer or reseller (such as in the left column of Figure 7-6).

If your site does have e-commerce—meaning that people can fill out a shopping cart and pay for the items without leaving the domain—it’s imperative to provide users the ability to add items to their cart with a single click from the context of the individual product page. Try at all costs to avoid a separate shopping area, where users have to search for the products all over again in order to make a purchase.

In creating a link or button to the shopping cart, a user can never have too much information. If the link is driving them to a third-party site to capture the purchase (such as Google Checkout or PayPal), tell them where they are going. Also, state the price of the product right on its page. Revealing the cost up front will lead to fewer abandoned shopping carts.

Services page design

Almost all the design and content guidelines from products are just as applicable to services. A company’s service landing page needs to be sexy and marketing-savvy, and not just list the services, but provide an introduction that generates interest in the reader even before they commit a click.

Like product pages, individual service pages should have a thorough description, supporting information, and as many images as possible to help convey the weight of the marketing message. Testimonials, case studies, and other pieces of independent validation play a big role in pushing users into fulfilling the call to action (discussed in the following section).

Because users cannot make a spontaneous buying decision, this supporting content becomes all the more critical, which is why services pages can be long and saturated with detail. Also, most companies will offer fewer services than products; managing a few hundred products in an online catalog is relatively easy compared to the nightmare of managing more than a dozen unique services. Clients will deliberate forever before purchasing a service, and many of them will consume every word of supplemental text available.

Redefining the call to action

The lack of the shopping cart, which is the key ingredient to impulse buying, also forces a company to consider their call to action more carefully. A call to action (also called a “call to forward” in some circles) is a directive you provide the prospect—it presents to them the next step you would like them to take. They are most commonly found in pure advertising such as e-mail marketing where you are trying to make a hard sell, such as “Buy now and save 20 percent off your purchase!”

For a shopping cart≠based site, calls to action are easy: add the products to your cart and then buy them. For service-based companies, calls to action have to be more marketing and less sales in nature. The language and suggested steps are more subtle; you can’t push people to buy a service on the spot, so you have to ask them to take another iterative step. Some examples include the following:

• Ask the readers to make contact with you: By pushing them to your contact page (or providing an e-mail link or miniature contact form right on the product page itself), you are receiving permission to contact them directly. Make sure you capture their vital information: name, e-mail, phone, and areas of interest.
• Offer the opportunity to download additional marketing materials: This might be technical whitepapers, case studies, or full product brochures—as long as it’s relevant and valuable to the reader. For particularly significant content such as long, technical whitepapers or third-party ROI studies, you may want to ask the reader to give their name and e-mail address in exchange.
• Provide a means for readers to stay up to date about the service: The simplest way is an e-mail mailing list or an RSS feed, but you may also offer a traditional mailing list as well, depending on the nature of the business.

In all cases, you want to capture the reader’s information, because even a name and e-mail address can be leveraged into targeted, customized marketing campaigns.

Language and design. The language and design of the call to action is important. The verbiage has to be action-oriented, specific, short, and bordering on bossy. You’re not out to beg; you’re out to clearly indicate the next task the reader should take. Let’s take our preceding examples. Instead of saying “Please fill out our contact form so we have your information on file and can let you know when we have our next demo scheduled,” be direct: “Contact us to schedule a one-on-one demo with a company representative.” For the newsletter, you can be just as direct. “Submit your e-mail to stay up to date about our service” is better than “If you give us your name and e-mail address, we’ll periodically send you an update about our services.”

Choose words that incite action: submit, contact, register, watch, learn, download, click, get, view, and so forth. While in truth you are asking for users to give up their contact information, you want to be politely demanding in order to spur action.

The visual language of the call to action is just as important. Like the words you choose, the design reflects the need to take action. At its most basic, the link will be just that: an HTML link. But a plain-text link is passive. There are billions all over the web, and none of them look much more clickable than any other. Inciting action requires a little more design flare.

Buttons are popular because they have a more corporeal feel, and feel as if they’ll do something important when clicked. (And from a pure usability standpoint, buttons have a larger click area—it’s easier to target a beefy rectangle than a small string of words.) In addition, visual cues can also bring attention to the call to action. Bolder colors, arrows, drop shadows, and larger fonts all indicate that the reader’s attention is required.

Figure 7-7 shows a well-designed product landing page from Joyent. In addition to a testimonial and good marketing copy, there is a large call-to-action button that is clearly designed to be clicked. In addition, every product page on the site has a contact form at the bottom to drive users to make contact while they are on the relevant page.

Figure 7-7. Joyent’s product page for Accelerator is a good example of a page for products that have to be sold without a shopping cart. The page features plenty of contextual information as well as a contact form and a large call-to-action button.

Unique selling story

Whether you have a product, service, or both, there is almost always something that makes you unique, some part of your sales story that sets you apart from your competition, and gives you a leverage point when marketing. It could range from a mundane but important fact (“all of our products use domestic, grain-fed beef”) to an outrageous story (“our founder came up with the idea for this product will hang-gliding naked through the Himalaya mountains”). This story is part of your sales process, and should be integrated into the website. Sometimes it’s significant enough to warrant its own section, but most of the time, it nestles in with your products and services because it helps give context and supporting information to readers. Consider the following examples:

• Many microbreweries have a page dedicated to their long tradition of only using the best hops and other ingredients in their beer, and how they retain the recipes passed down from generation to generation. The quaint story isn’t going to sell any beer by itself, but it helps build brand value, which in turn helps the beer perform better in the market. Figure 7-8 shows an example of this type of page.
• A technology company might have a page dedicated to their patents and major technology breakthroughs. This doesn’t have to try and sell anything, but it gives readers perspective on the company’s innovative attitude and its achievements.
• A website for a professional speaker might contain a long bio on why the person is unique, and what life experiences qualify that person as someone worth paying to address a large audience.

The unique selling story is primarily a brand-building initiative. Its value is difficult to quantify because it does not directly lead to sales, but rather reinforces the marketing messages that support sales. It is designed to build interest in the company (or individual) and their products and services; it should be offered as contextual, reinforcing content when the reader is on the actual product or service page. The unique selling story should not be confused with a unique selling proposition, which essentially describes to prospects what makes a company’s product or service stronger than the competition, and is most prevalent in traditional advertising.

Figure 7-8. Many websites for microbreweries discuss tradition, recipes, integrity, and a commitment to quality.

Summary

Like most things in web design, there is no hard-and-fast formula that works all the time. In fact, a corporation’s Products and Services section is one of the least likely to fall into any convention—because there are so many possible things to sell, and because there are so many ways to present the offerings, no two sections are alike. An investment in high quality content and design are going to be absolutely key in this section, as they directly influence the perception of the material, and thus the success of the company’s products or services in the marketplace.

Excerpted with permission from Web Design and Marketing Solutions for Business Websites by Kevin Potts. Copyright (c) 2007. Published by Friends of ED.

Footnotes

¹ 456 Berea Street ~ Opening new windows with JavaScript, version 1.2

Related Topics: Web Design, Information Design, Client Management, Business