“Copy leads design.”

I say it all the time. I believe in it. You could say it’s my mantra.

When I say that “copy leads design”, what do I mean? Simply that you should first organize your messages (i.e., your copy) on the page, and then let the visual design come in to amplify your messages.

Copy first. UI design second.

Now, when I say that, people get this idea that I don’t believe in visual design. Or that I think UI designers are slaves to copywriters.

I don’t. I don’t think that at all.

Visual design is critical to converting visitors. (Tweetable! Tweet it out)

In fact, I won’t work with a client if they:

  1. Don’t have a competent visual designer on staff,
  2. Don’t have a competent outsourced visual designer or design agency, or
  3. Won’t let me find a competent design firm to do their UI work

Visual design is as critical to converting visitors as copy is. (…It’s just that copy should lead the way, not get “lorem ipsumed” into some wireframe, mockup or prototype.)

Great design can give you instant credibility. And it can improve the sense of trust a visitor has for your site and product. It can imply things that a message can only hope to communicate believably, like your security, your stability as a startup, your belief in making things simple for customers.

Most importantly, perhaps, great design can help with a social schema / cognitive bias called “framing”, which is uber-important when you’re trying to convert visitors.

[highlight]FRAMING:
Creating context to encourage certain behaviors and discourage others[/highlight]

Consumers favor certain behaviors because of the way they’re presented.

When you walk into Tiffany’s, you feel something very different from what you feel when you walk into a grocery store.

When you walk into a grocery store, you feel something very different from when you walk into the Ferrari factory.

When you walk into the Ferrari factory, you feel something very different from when you walk into a Starbucks.

…In each of those cases, you’ve been “framed”.

That is, you’ve been put into an environment designed to encourage one behavior and discourage another.

  • Tiffany’s invites you to speak in a low voice, browse, square your shoulders, and be wooed while pretending price isn’t an object
  • The grocery store [barely] invites you to run in, let your kids chatter loudly as they sit in the cart, throw things in carts, and move as quickly or slowly as you want to while looking for coupons and big “Sale” placards
  • The Ferrari factory invites you to gape and grin ear-to-ear

Every environment creates context. Every environment frames your shopping experience.

Same goes on the web.

When you visit Amazon.com, you feel something very different from when you visit Apple.com.

More About Context Online…

Check out my guest blog post on the topic of context effect on “I love split testing”, the VWO blog. Read it here >>

…That’s not by accident.

You know it’s not by accident… and yet when it comes time to optimize your site, do you think about the context your UI and UX are going to create and what that will mean for converting visitors – or do you just say you want to look like Apple or 37signals? When you make it easier to find your free trial — even though you have no monetization strategy — but harder to find your subscription version, are you thinking about the context you’ve just created and what that will mean for your conversion rate? When you make everything sleek and black like a Chanel handbag, even though you’re offering daily deals on pulp fiction ebooks, are you strategically framing your visitors’ shopping experience to optimize your conversion rate?

Visual design creates context.

Visual design builds your online storefront and sets the environment for your online salesperson (i.e., your copy) to sell your unique products to your unique customers.

Visual design frames.

(NB: Copy can help with framing. But in the absence of appropriate visual design, no amount of messaging will create the context you want. If it looks like your site was originally designed by Geocities, forget all about optimizing your copy.)

~

Convert More Visitors: The Psychology Behind Framing

Like with most human decision-making behaviors, framing is based on a need to transform complex issues into simple ones we can manage. It holds that people respond differently to the same information when that information is presented in different ways, the most common of which is negative vs positive.

Framing as we know it today is based on studies done in the early 80s by Tversky & Kahneman, from which marketers have gleaned the following insights:

  • Negative messages carry negative associations, and positive messages carry positive associations
  • Losses are more painful than gains are gratifying (i.e., “loss aversion”)
  • Small gains on small investments are more gratifying than equivalent large gains on large investments (e.g., “Save $2 when you spend $10” is better than “Save $1000 when you spend $5000”)
  • A sure win is preferable to a possible win (i.e., “certainty effect”)
  • A possible loss is preferable to a definite loss (i.e., “pseudocertainty effect”)

If you’ve read the book Nudge by Thaler and Sunstein, you’ll recognize framing effect as closely tied – if not the basis of – what the authors call “choice architecture”.

And if you’ve read anything by Cialdini or the multitude of psychologists who’ve figured out how people buy / sell / influence, you’ll recognize this as “contrast effect”. (I’ve written about Neuromarketing before. Highly recommended quick read!)

The difference is that, while choice architecture and contrast effect can be applied to the design of a single page on your site, framing doesn’t happen only on your site.

Framing happens in your many brand impressions.

And framing happens when a visitor reads the copy in your PPC ad. And reads the body of your newsletter. And lands on your page. And ignores your banner ad.

You are always framing.

You are always creating the environment in which your prospect will consider your offering.

Every time your brand is exposed to someone, it frames their experience with you and, in turn, whether or not they will buy from you.

…Which means that you need to be cognizant of the experience you’re architecting at every step… and how that will impact your conversion rate.

Examples of Framing at Work in Visual Design Today

CRAIGSLIST UI

Wanna keep expectations low? Scrap an investment in a UI entirely. It works in the “classifieds” space for Craigslist – so far. Is this a space worth disrupting with really amazing visual design? To answer that question, you’d need to understand the biases of users of services like this. What sort of environment is their ideal classifieds-browsing environment?

~

Unforgiven Movie Poster
Okay, admittedly, this isn’t a very contemporary example of how design frames experiences, but the movie’s not that old (relatively speaking) – and it’s an awesome movie, so it makes the list. Most importantly, this movie poster is a stellar example of stripping back everything and allowing visual cues – like the cowboy hat and the dark, ominous shading – to set the context in which to consider paying $15 to see this movie.

~

Copy Hackers Book Cover Design
The Copy Hackers book covers create the context in which to take in the content – content that is designed to make it easy to write your own copy. If they’d looked more serious or academic, would they have been believable as texts for copy “hackers”?

~

FAB.com UI
A site designed for “designer types” should look like it! Framing is about creating the environment in which your messages can be best understood – with as little friction as possible. Even if a usability expert were to recommend adding “Buy Now” buttons to each of these products – to reduce friction – such a change might not result in an increase in conversion… if the site is intended to let designer-types enjoy exploring before buying. Not every environment will benefit from a bigger, brighter call to action!

~

Now, when it comes to your website, ask yourself this question:

Does my visual design create an environment that most closely matches the biases/expectations of the visitors I’d most like to convert (i.e., the 20 to 35%)?

If it doesn’t, you may find that your copy tweaks and split-tests aren’t performing as well as you’d like. Because the biggest issue could simply be that your site look-and-feel doesn’t reflect the expectations of your visitors. You’re creating the wrong environment. You’re presenting the appearance of a grocery store when you’re selling a product that should be sold in a Tiffany’s environment.

Framing at Work: A Before-and-After

I am very, very lucky to work with a client called EMEX Power / Energy Market Exchange. The guys there are awesome – and I’ve frequently tossed around the idea of turning them into a case study on How to Be the Perfect Client. They’re awesome.

When they first engaged me to lead the redesign of their website EnergyMarketExchange.com, I started as I always do by asking questions about their customers/prospects and site visitors. They explained that, with a product that facilitated online commercial energy auctions, their primary target market was mayors and administrators… with C-levels at businesses not far behind.

I knew that one of the biggest opportunities for this ultra-smart tech startup in the energy business was going to be framing their brand experience. After all, they were helping towns & businesses save major coin with insanely fast, smart tech… and yet they were presenting that value to people who are used to finer presentations in a UI that looked like this:

The visual design was creating a disconnect – after all, how could a mayor believe that this product was credible enough to share with her councillors? Could this really be the site of a high-tech company that was profitable? Were they going to sell her town’s energy usage info to a bunch of brokers that would bombard her?

The UI was causing friction.

It was presenting EMEX’s messages in a way that made them feel less credible.

I immediately recommended we work with a design agency that could interpret the EMEX brand in such a way that the messages I would write would be appropriately framed. After all, I could write the best possible value prop imaginable for EMEX… but if I positioned it in a site that appeared to be from 2001, would anyone even believe it? Hellz no!

Even CRO copy doesn’t work like it should in a poor environment.

Copy needs to be framed by the visual design that presents it.

Yes, copy is a big part of framing… but it’s freakin’ weak without strong visual design.

So, after working with the geniuses at Worry Free Labs, we launched the new EnergyMarketExchange.com, where the closing rate is approx 90%:

The onus is on you now.

Be real with yourself about your UI design. Could your conversion rate be improved by optimizing the copy and the visual design?

Now, I know we can’t all afford to drop cash on amazing visual designers — although doing so is a smart investment — so why not be a “design hacker” just like you’re a copy hacker? Here are some resources for optimizing your UI on your own:

Until next time,
happy copy hacking,
Joanna