Create digital content directly in wireframes and prototypes for more intentional, engaging experiences

Create digital content directly in wireframes and prototypes for more intentional, engaging experiences

No matter what a digital product or service has been created to achieve, our audiences are always looking to absorb information, learn, research, carry out tasks, or just entertain themselves - all through our digital content.

Largely, unless you are one of the rare image-only experiences like Pinterest, it is our written content that people need to interact with most.

This is one of those well-understood truths about building for digital spaces: content matters. It's king/queen/all-important everything. In a very real way, the way we communicate via words in digital spaces makes the difference between an experience that is easy and enjoyable or frustrating enough to throw a whole computer out of a window.

It is incredible, then, that most teams go about writing digital content in ways that would make you think the words did not matter at all. This leads to experiences that are not even half as good as they could be, which means the site or app or whatever it is does not accomplish even half of the goals it was created to help with.

Unfortunate yet typical approaches to digital content

Most teams approach digital content writing for their interfaces in one of two misguided ways:

1. Words fill in gaps on designed, and often even developed, screens. These gaps are full of lorem ipsum because no one has decided or perhaps even thought about what the screen must actually communicate or help people do. These content placeholders are decided upon without the help of a content professional, divorced from most interactions a customer needs to perform, and are often based on how the words make the screen look rather than their purpose.

1. Content professionals write digital, interactive content in a Word document. Often these documents are called copy decks or content templates. They separate digital content entirely from the context where it will appear. The only help the content creator and subsequent developer decoding the document get are inscrutable section headings that attempt to describe layout in words like "gray box title" or "promo summary top."

Both of these approaches have something in common: They leave no room for digital content to be an integrated, supporting part of the experience until after visual design and layout have been decided upon. Worse, in almost every case, the language meant to support the experience is written entirely outside of the reality of the experience itself.

An uncomfortable fit

By the time your project gets to finished wireframes and especially full-blown visual design, a lot has happened. Decisions have been made and set in stone. When teams wait that long to think about the presentation, wording, and messaging of written digital content, it is too late for content professionals to do anything but try to force the right words into the wrong gaps. This approach leaves very little chance to create an experience that is useful, engaging, or even very actionable.

This is a major reason why our sites, apps, and other experiences so often do not bring the level of engagement and online business we might expect. Fix this problem, and you will not be able to help but create experiences that do everything you hoped they would, and perhaps more.

Write digital content in context

If you start projects with a wireframe, write real words in the wireframe. When you create a prototype, make sure the real words are in the prototype. This means that you will start creating written content the same moment you start creating your interface. That way content happens at the same time as design or even before.

This is how you know precisely what your screen must communicate, help people do, or make understandable. This is how digital content gets to where it truly supports the overall experience and paves the wave for a design that makes it all work together. This is how you make your digital experiences compete with the best of the best.

An evolution of wireframes: content the old way

Let's look at the difference between the traditional approaches that do not work so well and this new approach of creating digital content in the context of your wireframes or prototypes.

Screen definition without content thought

You might be pretty familiar with screens that look something like the following. It is how layout is usually delivered to content professionals in the typical approach to digital content creation.

The wireframe layout above has nothing to do with the actual content the page might need to communicate or how that information would be best communicated. Instead, it provides multiple assigned places a content professional needs to squeeze in some words. And what a lot of words it will need to be.

The real words don't fit

What happens when content needs are quite a bit slimmer than what is been prescribed? Typically, a content professional will do their best to fill the gaps even when there is nothing to say, often resulting in diluting the point and adding noise to the screen. And that makes some sense, because the following is what it would look like if they didn't.

Well, this is not working very well. Now what? Usually, content professionals are asked to populate the remaining gaps with superfluous words and unnecessary information to fill out the page for the sake of the layout.

It gets even worse if there is a content need that was not considered, like a major call to action or a whole extra point that does not fit in the prescribed layout. And this is often the case.

This is not how stellar experiences are born.

The new way forward: Content provides intention and message in context

What if this same content had been part of the layout and early design process from the very beginning? What if a content professional, or someone who knows what the content needs to be, was involved with the definition for this screen from the very start?

It would be a complete game changer.

The above is what happens when content creation happens in context of how the experience will appear to your audience. This content work is not design or even pre-design or even necessarily a finalized layout. Instead, it performs a critical task that is overlooked in other content creation processes: It communicates in context what content needs to be presented on this screen - its order, hierarchy, interactions, and even approximate length. This approach takes the guesswork out of what the purpose and message of this screen will be. From the very beginning, content sets out intention and the strategy in context of the interface.

If your team starts here, by creating content in context and letting that inform design direction, you will not be able to help but create experiences that are more directed at your audience's needs and are therefore more engaging and better for business.

Helping your team create content in context

Adopting a creation-in-context approach to your digital content is not complicated, but it does require a change in process from the very first steps of wireframe definition. Implement these three new practices to get your team thinking about creating digital content in wireframes or prototypes and to prevent everyone from falling back to the old, less effective methods of content creation.

1. Get your content professionals software licenses. They need to work alongside the rest of the team in order to create content in the same space that interface definition is happening. If your content creators don't have access to your wireframe or prototyping software, you automatically create a barrier between content and the rest of your digital experience.
2. Ban lorem ipsum. I'm very serious. Use real words only in every wireframe and prototype from now on. Set a new rule that lorem ipsum is not allowed in any interface at any point during the definition and creation process. If at any time your team feels they have to use lorem ipsum, that's a sure sign that you're lacking content thought - it is time to bring in a content colleague to create real content directly in context.
3. Bring content in first. It is really tempting to jump right into design, but that is the path back to the old ways that are keeping your experiences from soaring success. Let content have the first pass at every screen and interaction to show, in context, what information or actions are needed, in what order and prominence, and what the real words might be. Their work may not be anywhere close to a final layout or design but by having that content defined in context, you can better collaborate as a full team to create next-level digital experiences.

Try it for your own team

Next time you start a new project, adjust your approach to how digital content makes its way into your interface. Start content definition in the context of your wireframe or prototype at the same time or even before you would normally start layout or design definition. Let your content creators into the wireframe or prototype software to set up what needs to be communicated and how.

And, a final parting word, your content creators are not necessarily visual people. That is okay. Let the initial content in context be the ugly, structural, bones of the experience at first. If you start from those bones, you will find the beautiful whole that you create from them engages and delights and assists in a way you have not seen from your digital experiences before.

Public link

Please use the above public link if you want to share this noodl on another website.