Copywriting & UX: Why Copywriters Need Wireframes

Wireframing

Copywriting and UX go hand-in-hand.

Think about it. Design and copy add up to equal the user experience, right?

If either element falls short, so does the overall UX. So, it just makes sense that copywriters should have an understanding of UX and design basics.

That starts with wireframes.

First, what is a wireframe?

Wireframes are a visual guide to elements on a web page. They convey layout, content and functionality. They don’t touch on design elements (color, graphics, fonts, etc.) A wireframe could be anything from a drawing on a whiteboard to a detailed Balsamiq mockup…

Balsamiq Example

Wait, what does this have to do with copywriting?

If you’re a designer or a UX person, wireframes are familiar to you. Wireframes are significantly less familiar to copywriters.

This is unfortunate because, as Jeff Gothelf, author of Lean UX, once wrote, “Copywriting is the secret weapon of UX.” It’s right there in the definition, actually: “layout, content and functionality”.

Copywriters use wireframes to show how the copy they wrote should be presented to achieve the biggest conversion impact.

Why does copy dictate design?

Good design plus mediocre copy equals a bad UX, according to Jeff

I’ve become convinced that good design with poor copy is a poor experience (or worse, an unsuccessful one).

As the original conversion copywriter, Joanna Wiebe, once told me, copy comes first and then design is introduced to amplify the message.

But why? Because presentation matters.

As Joel Klettke of Business Casual Copywriting and Case Study Buddy explains, a copywriter’s job isn’t done when the copy is written, not by a long shot…

Joel KlettkeJoel Klettke, Business Casual Copywriting & Case Study Buddy:

“Copywriters need to understand how the compelling copy they write will translate to the web to avoid creating intimidating walls of text. Designers need to know how to arrange the visual elements of the page to make consuming the copy an effortless and engaging experience.

As for who should take the lead, there’s no debate: copy should dictate design — cramming copy into a pre-defined design makes it difficult to tell the best possible story.” (via HubSpot)

Leaving the presentation of copy up to designers (or, worse, clients) is a huge risk. Your messaging can change completely if it’s not properly supported with a wireframe.

Joanna of Copy Hackers and Airstory sums it up best…

Joanna WiebeJoanna Wiebe, Copy Hackers & Airstory:

Copy leads design. If you don’t believe and practice that, your copy is not going to convert as well as it could. Don’t cram copy into lines of lorem ipsum.

Don’t start with the salesroom (design). Start with the salesperson (copy).”

When design dictates copy, UX invariably suffers.

A Quick Note on Effective Wireframes

We recently wrote an entire article on wireframing processes, principles, tools, etc. I really recommend taking the time to read the entire article because effective wireframing is effective wireframing, whether you’re a copywriter or a designer.

Here are the major takeaways, though…

  1. Conduct user testing on your wireframes to uncover unexpected insights.
  2. Don’t get caught up in perfection. A sketch is not a drawing and a wireframe is not a design.
  3. Focus on clarity above all. Are you clearly visualizing the messaging?
  4. Make sure everyone is on the same page beforehand. That means other copywriters, UX and design experts, clients or stakeholders, etc.
  5. Explain that wireframes are not a substitute for design to everyone involved. Stay in grayscale to avoid design-related feedback.

The Risk of Not Using Wireframes

I’m sure this isn’t the first time you’ve read “don’t use lorem ipsum in a wireframe” or that copy should dictate design. Still, few copywriters bother with wireframes at all.

Hours upon hours of research is conducted, thousands upon thousands of words are carefully crafted… then it’s packaged into a Google Doc and sent off with fingers (and toes) crossed.

Even worse, some copywriters accept wireframes from clients and stakeholders, and craft copy accordingly.

We’ve already touched on why this is a no-no, but Joel explains just how damaging not wireframing your copy can be…

Joel KlettkeJoel Klettke, Business Casual Copywriting & Case Study Buddy:

“Oftentimes, the things that we think are succinct, the things that we think are really well written don’t translate very well when you try to actually push them live, when you try to actually work them into a design.

The other thing that can happen is – and I’m sure if any of you have written for the web, you’ve seen this – you write something that’s beautifully written, you even break it up in your Word doc. You’ve got your headline and then you’ve got your body copy and then when it goes live, you come back and you wince because they’ve done something bizarro, like taken your subhead and put it in a completely different section and it’s lost all its power, or they’ve dropped this gigantic image next to your words that doesn’t help communicate anything.

When you can wireframe, you can show designers and your clients how this might actually look live. It’s good for them to get a picture of how your copy is actually going to function, how it’s going to flow. It’s good for you to understand how the copy you’re actually creating is going to translate to the web.” (via YouTube)

Kira Hug, a conversion copywriter, goes so far as to say that without a wireframe, copywriters are essentially throwing their copy out the window…

Kira HugKira Hug, Conversion Copywriter

“A copywriter’s job is to protect the words, so that the words have the best chance of converting. When you hand over copy to a client without any direction, a guide or a wireframe, you’re basically throwing your copy out the window.

It’s our job to highlight what should go where, what should be accentuated and how to communicate the copy, visually, so that it can do its job and sell.

Every copywriter should understand how to lay out a wireframe and lead the initial layout of a page. It doesn’t mean you need to design every detail (that’s not your job), but you need to understand how best to highlight the copy within a design.”

This is too big of a risk to take, whether you’re an in-house copywriter or a freelance copywriter. Protect the words or let your carefully crafted work (and the resulting UX) suffer.

Let Your Research Dictate Your Copy

Copy dictates design, but what dictates copy? Research, always research.

Here is an example research process, pieced together largely from what I’ve learned from Joel and Joanna over the years, that you can copy to inform your wireframe.

Every research process is different and hopefully you’re already familiar with most of these steps, so consider this merely a quick refresher.

Step 1: Stages of Awareness

How aware is the visitor of the problem? Are they experiencing the pain you solve heavily, not at all or somewhere in-between? How aware is the visitor of the solution? Your specific solution? Have they heard of your company before? Are they excited to give you a try or feeling “meh”?

The stages of awareness are just one part of the overall buyer’s journey…

The Buyer's Journey
Image Source

…but they’re key to understanding the argument that needs to be made and how to present it.

For example, you wouldn’t send someone still trying to diagnose herself to the same landing page as someone searching for your specific medical solution, would you?

Joanna has written an entire article on the awareness stages, which I recommend reading.

Step 2: Internal Interviews and Copy Audits

As sites grow, especially if that growth is rapid, it’s easy for copy inconsistencies to creep in. Before you start thinking about new copy, go through the existing copy to identify problem areas (voice inconsistency, messaging inconsistency, style inconsistency, etc.)

It helps to chart these problem areas…

Problem Areas

…to understand how the copy has evolved over time before you begin writing the new copy.

You’ll also want to conduct internal interviews with the support team, the sales team and perhaps even the product team. No one knows the product, visitor / customer questions, visitor hesitations, visitor / customer pains and frustrations, or visitor objections better than they do.

Compare what you learn from internal interviews with the message(s) the copy is currently conveying. This can help you understand gaps, inconsistencies and inaccuracies that could be bringing conversion rates down.

Step 3: Segments and Customer Interviews

Now it’s time to segment your audience based on the insights you’re looking to uncover.

For example…

  1. If you want to know about the buying experience, you need to talk to someone who has recently purchased from you for the first time (with no previous relationship).
  2. If you want to know more about retention and why people go looking elsewhere, you need to talk to someone who recently canceled your services or been inactive.
  3. If you want to know about the friction that exists pre-purchase, you need to talk to leads who score high for intent.

You get the idea, right?

You can then segment further, depending on your unique needs. For example, at CXL Institute, we might then segment by role: in-house and agency / freelance. Or segment by size: enterprise or SMB. Or segment by purchase: live course, certification program, or all access.

Once you know who you’re going to talk to and why, it’s time to consider how.

As Joanna explains, surveys and interviews are a good place to start…

Joanna WiebeJoanna Wiebe, Copy Hackers & Airstory:

“In my experience, you must run surveys and do one-on-one interviews with current customers, former customers and prospective customers. Open-ended questions are more helpful for copywriting than Y/N questions. You need to not only hear about who they are and what they want and need but also to find the words they use to express those things. (We’ll want to swipe their language when it comes time to write.)

My absolute favorite question to ask because it reveals so much is this:

What was going on in your life that compelled you to 
come looking for a solution like ours?

We’ve written on customer surveys and customer interviews extensively, so I’ll leave the tactical details out this time.

Note that you can explore third-party review sites for insights as well. What are people saying about you and your competitors? You’ll find objections, anxieties, motivations, etc. hidden here. Plus, the reviews are unsolicited, so they may end up being a little less bias than survey and interview responses.

Step 4: Themes, Patterns and Commonalities

The approach you take here is up to you, but remember…

  • Don’t insert your own assumptions or opinions unknowingly.
  • Don’t just summarize everything you’ve gathered… put it to work.
  • Look for themes, patterns and commonalities among words and phrases.
  • Look for themes, patterns and commonalities among objections, anxieties, frustrations, questions, etc.
  • Look for themes, patterns and commonalities among benefits, motivations, features, etc.
  • Keep an eye out for quotes that you can use for voice of customer copy.

Above all, keep things organized and efficient.

Maybe you’ll borrow Joel’s spreadsheet for memorable quotes…

Memorable Quotes

(Grab the template here.)

Or borrow the table Joanna uses to determine messaging hierarchy…

Problems, Benefits, Frequency
Image Source

Or perhaps you’ll borrow from both and customize them to suit your needs. Whatever you choose, just be sure you’re making it easy to…

  • Identify patterns.
  • Collaborate with other copywriters involved.
  • Return to source documents (interview transcripts, survey responses, etc.)

What you’ll end up with is a full blown research report.

Step 5: Pulling Everything Together

Now you’ve got all of the information you need to understand what’s driving conversions and what’s not. Time to pull it all together, write your copy and create a wireframe.

I’ll assume you’ve got the whole “pull it all together, write your copy” part down.

When it comes to the wireframe, Lianna Patch of Punchline Conversion Copywriting suggests starting on paper…

“LiannaLianna Patch, Punchline Conversion Copywriting:

“One thing that helps me cut down on time spent in Balsamiq is sketching a few potential layouts on paper first. Nothing special—just tape together 5-10 sheets of printer paper and go to town with a marker.

It’s quicker, low-pressure, and also helps you get a sense of what will best support the messaging.”

Copy Cat

From there, you might end up with something like this…

Example Wireframe
Image Source

Which then transforms into something like this…

Billionaire Balloon Wireframe
Image Source

(Joel did an entire webinar on how to use Balsamiq to create awesome wireframes. Please, please watch it before you create your first wireframe.)

Just be sure you’re consistently referring back to your research.

Getting Design and Copy to Work Together

So, the wireframe is done and sent off to stakeholders. Now what?

It depends on your business and how you’ve structured your team.

If you’re a freelance copywriter or run a copywriting agency, chances are the client will then have their in-house designers transform your wireframe into a living, breathing web page.

If you’re in-house, it often comes down to the size of the company…

  • At large enterprises, there’s often at least one dedicated copywriter on the UX team.
  • At SMBs, there needs to be open dialogue between the design team and copywriter throughout the entire process.

Marcin Treder of UXPin agrees, adding that at even smaller companies, the burden is instead on the UX team to understand copywriting…

Marcin TrederMarcin Treder, UXPin

“Back in my UX Manager times I was dreaming about having dedicated, professional copywriter on my UX team. We never found the right person, however I still think it’s the best solution for large organizations.

For smaller companies the only option is to encourage UX Designers to learn basics of copywriting, which really should be part of our skills.” (via UXPin)

Get buy-in from stakeholders early on. It’s your job to convince them that copywriting and wireframing go hand-in-hand. The more the two sides work together, the better the UX.

If you’re up against resistance from the UX or design team, emphasize your intent to collaborate on the content presentation for the sake of the user experience. And, of course, your understanding that a wireframe is not a design.

Conclusion

To be a good copywriter, you need to know how to conduct proper research and craft compelling messages. To be a great copywriter, you need to know how to present your copy in a wireframe.

Here’s what you need to remember…

  • Research dictates copy and copy dictates design.
  • Know wireframing best practices. A good wireframe is a good wireframe, regardless of your job function.
  • Not using a wireframe opens you, your message and the user experience up to a lot of unnecessary risk.
  • The steps to effective copy research are:
    • Defining the stage of awareness.
    • Conducting internal interviews and copy audits.
    • Segmenting and conducting customer interviews.
    • Identifying themes, patterns and commonalities.
  • Getting designers and copywriters to work together seamlessly depends on your business and how you’ve structured your team, but it’s essential.

Join the Conversation Add Your Comment

  1. Another great article chock full of valuable info.
    Thanks Shanelle!

    Reply
    1. Shanelle Mullin

      Thanks a lot, Jacob! I appreciate it. Glad you liked it.

  2. Lots of valuable info, I love wireframing in Xd then into Ai if it’s print or for a Logo or element then Muse if it’s web. Been trying to write web copy for 15yrs, I find it best to oversee and edit, and it’s a two-way compromise between copy and design. Sometimes adding two more words to a top nav UVP can cause a design shuffle. I’m lucky cause I get to make that decision and do it, on the spot.

    Reply
    1. Shanelle Mullin

      Thanks for chiming in, Paul. I really appreciate the perspective. Any advice for those who are perhaps not quite as lucky?

Leave a Reply

Your email address will not be published. Required fields are marked *

Current article:

Copywriting & UX: Why Copywriters Need Wireframes