It must happen on thousands of video conferences every hour around the world. A UX design project is in the late stages when the client begins to question the content. The way things are said, or even worse, the order of key page sections.
And every time that happens, the progress grinds to a halt. And then more things happen. The project leaders swoop in to avert crisis. Long meetings take place involving said project leaders, racking up hours, and costs. And those meetings are about making decisions that should have been locked down much earlier in the process.
Enter copyframes. Wireframes’ more literal cousin.
Instead of greek text, with copyframes, you’re working out first-drafts of the most critical navigation elements on the page: headlines, body copy, and CTAs.
If you’ve read the most excellent UX writing book ‘Writing is Designing’, the authors point to work done by Mig Reyes demonstrating how text is the navigation bedrock of a user experience. Take a typical web page and first, remove all the graphic elements. Then, all the text elements. Most interfaces remain usable with just text, while visual elements alone can range from slower (i.e., greater cognitiveload) to completely unusable. (Check out ‘Image 1’ for a visual that illustrates that point.)
Image 1
As a result, the traditional wireframing approach, while possibly delivering a smoother UI transition, often diverts into a bottleneck of content revisions. Tweaking visual late-stage layouts based on copy modifications eats up valuable time.
It’s about more than time and money
Strategy usually lives in text – briefs, user stories, etc. Copyframes better bridge this natural gap between strategy and execution. It’s a more direct translation of the strategy into interface.
And this clarity creates a feedback loop into the time and money issue. When clients comment on the actual words taking shape, the crucial feedback insights arrive earlier in the process.
So copy matters. Or at least, it should. Copyframes offer the fastest, most direct route to translating crucial strategic ideas into tangible page structures. Think of it like prioritizing the big rocks in that task management jar we all know and (sometimes) love. Copy is undoubtedly one of those big rocks in the UX process.
But what do copyframes look like?
After what I’ve described so far, it’s probably not a stretch of your imagination to conjure up an image of a copyframe. That said, I’ve used them at various levels of fidelity. (And using fidelity to describe a copyframe could be considered egregious.)
So regarding tools, it’s a lot like the line about the best camera being the one you have with you. Copyframes are about capturing the gist of something vs artful finesse (I admit to having done them in Powerpoint). It’s about whatever helps you most easily communicate the flow of messaging, from first view of the experience through to the final CTA.
Below is an example (Image 2) of copyframe examples; the first done in FigJam, the next two in Figma, one rough and one using a page template. (I used the Door Dash page again to illustrate what what different copyframes approaches might look like.)
Image 2
It wouldn’t be a blog post without mentioning AI
Beyond the present advantages of time, cost, and accuracy, copyframes offer a giant leap forward: copyframes are perfectly positioned to leverage the power of artificial intelligence.
The text-centric nature of copyframes means that today’s sophisticated Large Language Models (LLMs) can be reliably employed to generate compelling and on-brand copy with the right prompting and agent design.
Furthermore, AI agents can be used to create the initial creative brief and page content outlines, leveraging copyframes to further expedite the process. The link between copyframes and AI is a match made in digital heaven, promising more relevant, faster, efficient, and utlimately more impactful UX design workflows.
So, ditch the late-stage content chaos and embrace the clarity and efficiency of copyframes. Your team, your clients, and your bottom line will thank you. It’s time to put words first and build truly meaningful digital experiences, one well-designed sentence at a time.
Put another way: Use your words.