Using content priority wireframes to assist in copy production

As the resurgence in content strategy has continued to grow I have encountered much anecdotal evidence from my peers regarding the delay in projects due to a lack of decent copy. Copy production can often create a chicken and egg scenario where the team is unable to progress without the copy, or the design (using lorem ipsum) does not reflect the copy being produced. This article outlines how to enhance Content Priority Wireframes to help get around this chicken and egg scenario, it is not an article about the use of lorum ipsum (I recommend Karen McGrane’s article for that). I’m sure we can all relate to the scenario of an isolated team of client copy writers producing a tome greater than the complete Lord of the Rings trilogy when all we really wanted was a strapline. Whilst this is also an issue of team cohesion, it will always be an issue when working on large sites where the number of content authors starts to reach double figures. On a recent project this was exactly the scenario we found ourselves in. The client had a large team of content authors producing copy for in excess of 400 pages of content. As part of our design team we had a content manager and copy writer who were facilitating the copy production process. However, producing such a large volume of content takes time and the rest of the design and development team had to progress. Enhanced Content Priority Wireframes The project was a large responsive design and build. Early on in the design phase we had developed a system of templates and identified all of the content components that would be present on each template type. Being a responsive build, we developed high level content priority wireframes to demonstrate how content would flow at different screen widths (I recommend Stephen Hay’s excellent book on Responsive Workflow for a wider discussion on Content Priority Wireframes).

A basic content priority wireframe showing the functional blocks of the template.  For example, logo, header, or footer

  At an early stage in the project we realised that we really had two distinct work streams interested in the outputs of our early sketched designs and content priority wireframes:

  • The UX designers (including me) who had to take the content priority wireframes forward into detailed design;
  • The content team who were coordinating a large copy production job.

It occurred to me that with some minor additions to the very simple content priority wireframes we could assist all work streams in progressing their respective work efforts in parallel. For each content block in the content priority wireframes we introduced one extra piece of information: Character / word limits of copy for that particular content block.

A content priority wireframe but with maximum word limits for copy layered into appropriate blocks.  For example, related article (Maximum of 40 words excerpt)

Advantages Please note that this was still very early in the design and these priorities and word limits were not necessarily set in stone. However, these adjusted content priority wireframes did provide the team with a number of advantages:

  • They ensured that any copy requirements for each template type in our design system was captured whether that was microcopy, straplines, excerpts or large pieces of body text.
  • They provided both teams with an order of magnitude around copy. This was key in ensuring that as the designs progressed in detail the expectations around the volume of copy was matched against the design intent. Thus helping bring some level of resolution to the age old chicken and egg problem of copy production vs. design.
  •  They enabled the copy production and design work streams to work in parallel thus aiding our delivery timescales and reducing the risk of project delays caused by the lack of copy or copy that wildly differed from the design intent.
  • They were fast and “deliverable-lite” and provided considerable value to the project team.

An emerging technique There is no getting around the fact that sooner or later a large volume of copy has to be produced or edited for a site and this takes time (particularly as it so often client dependant rather than agency). Many web projects today do not operate in the luxurious timescales required to enable design to proceed with “real copy” therefore in some instances we need a method of operating in parallel. For me and my design team, these enhanced content priority wireframes fulfilled this role. I admit that it is an emerging technique and I think they fulfil a similar function to page description diagrams but perhaps in a more visual way. I welcome any thoughts on the approach or other methods that people have adopted. Thanks for reading.