Within its cardboard goodness contained four titles from the good people at HOW. I took advantage of one of their incredible sales. I strongly recommend signing on to their email list.

Anyway, one of the titles that I purchased was The Essential Principles of Graphic Design by Debbie Millman. The title is somewhat misleading; it is a compilation of case studies by some great designers and strategists. They write about projects and give insight into their process which is always welcome information. On the whole, it’s a fantastic book, even better at only $9. She’s aces in my book; her favorite design color is orange.

One of the contributors, Hillman Curtis, wrote about his process for creating the design for the  New York Metropolitan Opera website. One of the points that he made was to design/wireframe the sub pages first and  do the home page last. His reasoning is that through small design changes on the sub pages, the character of more important pages will be more clearly defined. He has a point and I am expanding my rationale for doing so.

I am now a convert because I’d like to devote more design and strategic energy to the pages that people actually use. When those pages are perfected, then the kicking it up a notch for landing/home pages will be much easier as the personality of the site has already been established through the sub pages; color schemes, font usage, proportions, etc. will tend to reveal themselves.

Another benefit of this “reverse engineering” is to create a site where content is paramount. Pages are designed to fit their content, not to fit a style established by a  tricked-out home page. Secondly, the home page design will reflect the actual content and the navigation can be built with that consideration in mind, not just the  aesthetic.

If anyone designs this way or adopts this method, I’d love to hear from you.

Now we have been working with some pretty traditional stuff but giving it a whole new twist with Facebook’s ability to mircotarget audiences and drill down to that set of people that will really respond to the marketing message. But now that we have the audience and they are ready to follow the call to action, what do we do with them then?

As I mentioned in the last post, we’re looking for conversions. And in this scenario, the conversion occurs when the user clicks to read an excerpt from Cal’s book. The hope is that the reader will then continue down the funnel and choose to purchase a book. When I started tracking the conversion rates, the numbers were fairly low. We needed a way to get people to perform the call to action.

Enter design and usability!

One of the things that I noticed first was that when users got to the landing page, that they were going straight for the top-level navigation. Under normal circumstances, that would be a good thing, but I wanted them to click a button further down the page. The client didn’t have the budget to build a dedicated landing page, so a page within the site would have to be modified.

Here is the landing page:

One little design element can make all the difference!

You’ve seen this before in my last post. What is new from the other version is the large badge in the bottom right corner of the first read image.

Chances are, the user will be attracted to the image first. Remembering the lessons in usablity from the web, I placed the badge in the lower right corner, where people tend to look for calls to action. The badge tell them “Right here! This is what you’re looking for!”

So far, conversions are up nearly 50% from a 14.29% goal completion rate just last week to a 24.19% goal completion rate today. Just from one little badge.

Sales are up, too. The numbers are still small, yes, but there was a whopping 850% increase in sales from the week before the change to the week after. Can’t argue with those facts. I’ll keep monitoring the stats and report back.

So when you are looking for a creative provider, make sure that they understand those tenets of usability, task-oriented design and the analytic that drive strategic creative decisions.

I have many small business clients that cannot afford to stage shoots or purchase original images from the artist. Some rights-managed images can amount to thousands of dollars on a website or medium-sized direct mail job. So I turn to stock image vendors. There are a zillion of them, but I happen to like iStockphoto and Veer for images and Thought Equity for video.

The key to good use of stock photography is to find images that support the content; those that help move the story along. My techniques is to use the same keywords for image research as I do for SEO and see what comes up. I refine the results based on color, size, subject matter, the visual story, etc.

So now I will get theoretical on you and give you some guidelines on how properly used stock photo helps a design:

The image is demonstrative. The image shows the typical use of the product or service being used. Imagine a woman using a facial cream or a couple sitting down at a third person’s desk getting home buying/insurance/estate planning advice.

The image is atmospheric. The image conveys some sort of mood that jibes with the tone of the site. Think of a beach scene for a travel site or the Andes for a hiking shoe company.

The image is aspirational. The image conveys an imagined result of following the call to action. Imagine a man in a hammock sipping lemonade for a financial planning website.

The image is illustrative. The image is a visual representation of a key selling point or value proposition. These can be tricky and where many people can get sidetracked because the meaning of an image can be misinterpreted. Imagine an image of a well-decorated room for an interior design service or furniture company.

The image is representative. Here, the image is an archetype of the target market. Attractive singles for a dating site, perhaps.

Some images may be more than one type, but only in rare circumstances should an image be used more than once in any given project.

Avoid overlap. Do your homework! One of the most distracting things about a stock image in digital or print creative is if it has appeared somewhere else. Istock will indicate how popular a photo is, so try to avoid the very popular images to prevent that happening to you. Veer tends to have more exclusive images, so you should be fairly safe there. To be absolutely safe, Google images with the same search terms that you used on your stock image site(s) and see if they pop up on sites other than the stock site.

If push comes to shove, then try/ask your creative to apply a treatment to the image(s) to make it less ordinary.

NEVER mislead the user. if your stock image creates an expectation that your product cannot fulfill, then you have done more damage than if you had no image at all.

Used properly, stock images and graphics can be a creative’s (and their client’s) best friend.

Yes, that’s Montel Williams. I’ll save him for another post. Right now I’d like to pick this site apart and show you why this is a great design. And I want to state for the record that this is an objective observation that I am making about this site. There is no judgement cast upon anyone other than the exploitative company and its spokesperson.

First, let’s take into account the audience. They are people that first and foremost consider the terms of Money Mutual’s services to be reasonable.

Second, they likely saw the commercial on TV and are now acting on the call to action. So we can gather that this is a decision that is made in relative haste.

Third, we can likely conclude that the target audience is not the savviest of web users.

Fourth, this audience is likely to be an African-American female. Thus Montel is the spokesperson. Before you flame me, Montel’s show was very popular with black women. So nyahh.

So okay, we have determined our target audience. Onto the site.

Blue is a color most associated with trust, dignity, authority, intelligence, masculinity and professionalism. Many financial institutions use the color blue in their brands to evoke those sentiments in their audiences. So Money Mutual’s color scheme and, if you look closely, their logo are designed to resemble a bank’s.

Montel Williams is a television personality that they have seen before and probably has high numbers in name recognition and trustworthiness in the target market. He has lent his name to other products aimed at this particular market. So we have his photo prominently displayed in the first read.

Okay, so through color choices, they have gained the user’s trust. Good. I mean bad.

Let’s look at the big, honking, APPLY NOW.

It drowns out every other design element on that page in importance other than Montel’s face. That face didn’t have to be Montel’s; we are biologically trained to recognize and focus on human faces. So those that are in a hurry and need the product that Money Mutual is selling will find it easy to complete the task that Money Mutual has set for the user: apply now and enter into an agreement. The large green button at the bottom of the form tells the user that they are on the right track. Go for the green!

Notice that the other navigation elements are tiny in comparison and are in such low contrast that they fade into the background. We don’t want people poking around and finding information such as the interest rates that make usury seem like a back rub. Oops, there I go judging again.

Should the user have any questions, they are off to the right and will take you to answers that are on the same page. Why? Because the site’s architects don’t want the user to leave the page with the big APPLY NOW. Moreover, we tend to file pages that we have been to as past activity, so it is too easy for someone to drop off if and go to another site or just give up altogether if they actually leave the page.

Lastly, let’s look at the content. The target market has questions and the one that is top of mind is “Can I do this?” The answer is front and center, just under the big APPLY NOW call to action. In the green panel to the right of the call to action is a listing of the benefits that using this product will provide the user. If you read them closely, they are a listing of things to fear: embarrassment, penalties, late charges, bounced checks, etc.

According to CNN Money, in 2009, just 10% of consumers paid 90% of overdraft fees. So this is a very real concern for this target market. Kudos to them for developing the content that will resonate with this target market and get them to act now before it is too late.

In sum, despite my opposition to the product and its predatory nature, it is well presented to it’s intended audience and is masterfully designed from a UX standpoint:

• They understand who their target market is and what motivates them
• They created an interface that makes it extremely easy for the user to complete the call to action
• They used design to convey a subconscious message.

I try to get my small business clients to develop that kind of understanding of their target market so that they can provide their creative consultants with the information and insight to create a site that is as effective as I imagine this one to be.

Too harsh a title?

So it got me thinking and spelunking on the web. But the answer was in one of my Evernote folders. The author of an article that I clipped spoke about the user experience and echoed something that I have been speaking about all along: the designer and the brand must take into account what the user’s expectations are when landing on the site.

This user expectation is what drives Google and other search engines. When I search for something, I expect that the page that I land on will give me (some of ) the information that I am looking for. If it doesn’t, then I bounce and am off to the next option.

Trust me, I am going somewhere with this. So let’s say that you have a touch point with a prospective customer. And let’s say for example that this touch point is not a digital channel. You handed them a card, a flyer or they saw your ad on TV. What do you think that their expectation would be once they got to your site?

Of course you know the answer. They expect to recognize something in the web space that they saw or experienced in that other channel. If they don’t that is a disconnect (shock) and that is bad, because users usually react negatively to shocks online (aww).

But even if you have everything aligned and symmetrical between your channels? Well, you still have this: The New Room Effect.

As you might expect, the New Room Effect is derived from the experience from entering a room that you have never been in before. The momentary confusion when confronting something new (and let’s not forget that confusion = fear and hesitation) is alleviated when one locates familiar objects. Ah, that’s actually a window. Oh, the toilet is over HERE. Anticipating and compensating for this confusion is the essence of UX and UI design. Here is a snippet from the article by Shawn Borsky for Anthem Design Group:

The main focus of interfaces should not be avoid all confusion, because that’s not practical. Its too easy to confuse a user. It is much better focus on how to handle confusion or hesitation. Consider this situation. When you walk into a room or building in which you have never been, you will be initially confused.

Why? Naturally, you must become familiar with the new information before you can interact with it. I like to call this the “New Room” effect. Your main focus as a designer should be to anticipate this stage of analysis and confusion and then dispel it quickly by creating familiar cues, anticipated guides, and goal oriented design.

So okay. When you are asking people to perform a task, say, BUY NOW!, this is not the time to make your user spend valuable time and cognitive energy trying to determine if this object is or isn’t the proper button to click. Not to make too dramatic a point, NOTHING should stand in the way of your user accomplishing the goal you’ve set for them and you should do whatever you can to help them decide that your goal is their goal. That’s digital’s contribution to a solid, cross-channel, brand-nourishing, customer-centric creative strategy.

More from Shawn Borsky:

What does this mean for usability designers? Our goal should not be to make something simple or clean, those approaches will come later. We should first make sure to help our users form the right expectations, be comfortable with the results, and become familiar with the process.

This of course, takes a keen understanding of your audience and your business objectives. Take time to evaluate them both and how those two usually competing objectives will interact so that everyone feels satisfied.

Creatives and clients, ask yourself and your team: what would the average user expect to see when they land on this page? Why is the user here? What barriers can I remove for the user? When you answer those questions, make sure that you have created enough expected creative/content/brand elements that reduce the time that it takes for your users to figure out that they are in the right place and that it’s actually easy to accomplish their (your) desired task.

SHAMELESS PLUG:
We’re UX, UI, and IA experts at M19 MEDIA, and we answer those questions with every site that we build. Give us a call if we can help you.

One of the themes that I have found in my spelunking is that creatives found it frustrating that clients don’t /can’t buy in to their perfect design. And I realized that that clients (especially small business clients who have no filter) didn’t buy in because the design came as a shock to them because (surprise!) they didn’t effectively communicate their vision for the end product. We all know, unless it pops out of our favorite cake with a wad of hundreds, people generally don’t like shocks.

As a matter of course creatives and small business clients should demand that a creative brief be drafted and perfected so that each party can know what to expect from each other from a creative standpoint and minimize those end product surprises. That said, a significant problem with creative briefs is that they are prose documents and don’t give the client an idea of the look and feel of the finished product.

So how to manage that? Enter the mood board.

The mood board outlines the color palette, images, typography and other design criteria in a visual manner that the creative brief cannot.

The mood board is a way to get clients to buy into the visual aspect of the design project and can reduce the number of iterations before approval. So, especially when it comes to a project where M19 MEDIA is developing a new brand, style guide or critical design project, we will employ a mood board as part of our creative brief.

As a small business client (hell, as any client) you should ask for a mood board from your creative vendor. Creatives? Get the client buy in on the mood board. It will save you time and effort. Below, you will find a mood board for a current client. And yes, I was listening to Robert Plant while I wrote this post.

This is actually a time-saver. The mood board serves as the visual bible for any creative project and defines the sandbox in which the creative team can play. It is also a critical client buy-in checkpoint and should be a part of every designer's creative process.