Content or design first?

This is the first in our new UX Writing series on the blog, exploring how we – as designers or copywriters – can write better, smarter, more effective copy for our digital products.

The age-old question: Should design or content come first?

Despite all the talk of teamwork in our industry, creative departments still work mostly in isolation. We may gather for a grand strategy meeting at the beginning of a project or schedule weekly standup meetings to check items off a list. We might swing by someone’s desk to answer a question or give feedback on a specific problem. This doesn’t necessarily amount to collaboration.

We all know designers and copywriters should not work in silos. We know design and copy should inform each other, rather than one being retrofitted to the other. This is especially true for UX writing, which must work in tandem with design to do its job well. Effective collaboration between design and content, however, is easier said than done.

Despite our best efforts, content always seems to come last. We mock up designs with Lorem Ipsum. We build pages with placeholders, the same headline copy & pasted for every section. Sometimes we go so far as to do QA on a site with filler copy.

It’s only later we realize the layout doesn’t quite work. The section breaks when the real headline is in place. The final content from the copywriter is much longer than the space we allotted for it. The page and the message feels disjointed. So we make revisions, passing it back and forth between teams. Each time we get new content from the copywriter, we plug it in and hit send, having mentally checked out of this project at the design handoff weeks ago.

The project finally launches. The team does a post mortem and finds the design and content phases blew way past their budget. We see the final site and cringe. This doesn’t look as nice as the pretty Lorem Ipsum-filled pages we designed. User testing reveals a problematic experience: people are confused about what they need to do and how they need to do it. The copywriter throws their hands up. They were just filling in the blanks they were given. Everyone shakes their head and moves onto the next project.

Of course, this is a hyperbolic example. But if you’ve worked on even a few team projects as a creative, it's a familiar story.

Let’s get one thing out of the way right now: If it comes down to one or the other, copy should come first. It’s almost always helpful as a designer to work with real content. Not only is it easier than blindly mocking up a meaningless layout, but it gives context for the goals and story we need to tell.

But in a perfect world, a designer and copywriter should be working closely on a project together, from strategy to concept to final product. Of course, in the typical fast-paced environment of our industry, it’s difficult to make that a standard part of the process. So how do we start giving content, specifically UX copy, its proper place in a web project? How do we stop talking about collaboration and actually do it?

1. Stop using placeholder copy

From the beginning, real copy should be included in the design. But as we all know, it's not realistic to have final content at the start of every project. This means designers must play a role in copy creation.

Designers are communicators, and the content is as much a part of our work as the visuals. If you don’t have content provided for you, write the copy to the best of your ability based on the goal of the project. It doesn’t have to be perfect. This just gives your copywriter a point to work from. It more properly accounts for the correct space for content in your layout. It makes your intended UX more clear to your audience, be that your creative team or your client. It sets the project up for success the whole way around.

2. Share every design draft with your copywriter

Whether or not copy has been provided, the copywriter should see the designs as early as possible (assuming you have one on the team). This allows you to refine the story together, rather than rushing it at the beginning or end of the project.

Collaboration is as easy as sharing the link to your Figma file with your copywriter as you work on it. If a writer sees your first draft, they can say, “This headline would work perfectly with that image” or “The introduction won’t be nearly that long. Let’s do this instead.” It saves you and the client from getting hooked on a design that won’t work. And it allows the copywriter to write content that actually fits the design.

“Writing is designing with words. Designing is writing without them.” - Robert Hoekman Jr.

3. Respect your deadlines

We start every project with bright eyes and hard deadlines, then quickly let them slide. Yes, some of it is outside our control. But if we’re striving for collaboration, we must give ourselves time for it. If you don’t meet your design deadline, it sets other team members or project phases behind. This can result in rushed copy (whether you are writing it or someone else is) that doesn’t do its job well. Respecting deadlines leaves more room for creative, strategic thinking between teams.

4. Don’t depend on the copywriter to fix design problems

We’ve all done it: brushed off a design problem saying it will be fixed when content is in place. The reality is that even good copy can’t fix bad design. Bringing real content into the picture from the start will help avoid these issues. But even then, we have to recognize and admit when the root of the problem is its design. If you or your copywriter find yourself working too hard on the content for a specific part of your project, it’s a sign there’s likely something wrong with the design. There are times when the copy has to do the heavy lifting, but more often the two should work naturally together.

5. Leave ego out of it

Especially in an agency setting, we tend to take the defense, blaming the other team for whatever is wrong at any given time. This is not collaboration, and it doesn’t result in effective design. The best way to avoid ego getting in the way is to seek an objective audience. Together with your copywriter, run your work by a couple members on your team who aren’t working directly on the project. They may validate a pain point you were questioning, or notice something you overlooked altogether.

_

The truth is that no matter how admirable a team’s intentions, we will not always be working closely together on every project. There will inevitably be times when we are filling in the blanks. It’s not ideal, but it’s fine. It’s this fast and loose nature of web design that we enjoy anyway, right? Besides, all is not lost.

The beauty and curse of digital is that nothing is ever finished. This means that while the designs may appear final, may be approved, may seem polished and pixel-perfect, they can still be changed if there’s a better way. It’s possible, no matter how much your creative director, client or developer says otherwise. When we’re writing UX copy (whether we're the designer or an official copywriter), it’s our job to not only consider the design but also see beyond it. 

Just because that headline fits the design perfectly doesn’t mean it’s the perfect headline. Just because it's approved doesn't mean it can't be changed. This may seem obvious now, but when we’re working against a deadline or working with an existing design, it's easy to forget. We can become so focused on what's in front of us, on getting the job done, that we forget to do what’s right for the experience. Writing a longer headline may mess up that design a bit. It’s going to piss off your designer, whether that’s you or someone else. But if it’s the right copy, it will be worth it. Good copy makes good designs better. Bad copy, copy meant just to fit boxes and fill spaces, only makes for a pretty mockup.