Adobe Creative Cloud

Best Practices for Content Planning in UX Design

Which came first, the content or the design?

This contemporary take on the “chicken and egg” casualty dilemma represents a common frustration among content and design teams when it comes to building a new experience. Both depend on each other, but where do you begin?

“I think that too often content planning is treated as something that’s going to happen later, magically someone along the way will create amazing content, while the experience design is treated like creating the template or the framework for that content to live in without a real concern for what that content is actually going to be,” says Karen McGrane, a user experience designer and content strategist with over 15 years experience and the author of Content Strategy for Mobile and Going Responsive.

McGrane said that while it used to be that the design often came first, there’s been a “pendulum swing” and a “rallying cry” toward content first over the past few years. However, thinking in these extremes, whether you believe it is content or design that must come first, continues to be problematic.

“As with everything else in the design and development process, the work has to be iterative. It has to be something that involves collaboration and regular checkpoints among the team,” she said.

That’s why she recommends teams take the following steps to maximize the relationship between content and user experience teams.

Recognize that Content and User Experience are Symbiotic

“The entire purpose of the experience is for somebody to be able to get to you and navigate to the content,” McGrane said.

It’s not just important for designers to understand this about content, but content creators need to understand this about user experience as well. Both teams need to be aware of what the other is creating and how the two work together to deliver the ultimate product.

At this stage it is also important to discuss the narrative of the project and ask a few key questions. What story is the client trying to tell? How do they want their target audience to get there? How can the design help deliver the message? What types of pages and content are necessary to keep the audience engaged?

Content Planning, Not Content, Comes First

“Talking through a process called content modeling is a way for teams to start having discussions about what that content is without actually having to write every single word of the content,” McGrane said.

This means you’re talking about the structure of the content, the size and shape of it, what it will do, the expected audiences, how often the content will be updated and how much content there will be. Designers can then take this information and begin building designs around these early expectations even if the content is not ready. These meetings also give the client something to think about and work with.

Here is an example of a basic high-level content modeling system that illustrates the relationship between different pieces of content on a music website. This can then be used to create a more developed content model that helps designers have a better understanding of how the content will work together.

table

Image source: A List Apart

 

McGrane compared this process to magazine publishing and designing signage for an airport. Once you know the main content components, you can begin laying everything out and finalize the details later. However, she warns of the danger of thinking of the web in relation to print, noting how the web needs to be looked at as its own fluid medium with unique needs.

Design Limitations Help Inform Content

As designers work through the design, the team will gain a better understanding of the design’s limitations such as character and word counts. They can then take this information to the content team and provide them with guidelines that will help to ensure the content will fit the design.

This is especially important with responsive design projects, which McGrane argues are also content strategy projects. For starters, letting the content team know teasers are limited to 250 characters or headlines look best at 70 characters, for example, will make both the design process and the content writing process easier.

“Knowing that you’ll have something that’s the right size and shape to fit the screens you’re designing for really pays off in the long run,” McGrane said.

Work In Real Time

Once the content team breaks off to begin developing the content, it’s not uncommon for these teams to select static copy to share with the design team for prototyping purposes.

“Copying and pasting out of Word documents is so 1998,” McGrane said.

Instead, she encourages both content and design teams to take these early iterations online and recommends the implementation of APIs that allow content to automatically feed into a prototype. Designers are then working with the actual, updated content, which can help ensure the design and content support each other, while the content team can see how their content will look and feel, and adjust as necessary.

“I don’t think you can create great projects unless you have real, genuine collaboration between the people who are creating, maintaining and managing the content, and the people who are responsible for the actual design, prototyping and implementation,” she said.

For some, this information may seem obvious, but for many, collaboration between content and design teams is not even a consideration. Having the two work together will help ensure you’re developing the best content and experiences possible. After all, the two are intrinsically connected (and often one and the same) from the user’s perspective.

Experience Design (UX & UI)

Meet Project Comet, Adobe’s Complete UX and Prototyping Solution!

Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. Coming in early 2016.

SIGN UP TO STAY INFORMED

Join the discussion

  • By David Mesple' - 5:33 PM on January 29, 2016  

    The Creative Cloud is a business plan, not a design plan. I get it that pirated software is the stated reason for this rental program, but the main reason for it is simply corporate greed. No designer really wants to rent their “tools”, but the brilliance of the Creative Cloud Conspiracy is that most of us have no choices left anymore. Go Gimp!

  • By Victor - 2:55 AM on February 4, 2016  

    Very nice article!
    This clarifies also that UX is also part of the business and not just the design, something companies and clients tend to forget or not know.
    It is important that everyone is updated on the content and for it to be a consistent topic in meetings.

  • By Bob - 8:02 AM on February 10, 2016  

    Very interesting article. McGrane ‘recommends the implementation of APIs that allow content to automatically feed into a prototype.’ Where can I find out more about these APIs? As a non tecchy content writing person I’d like to recommend this at work, but need to know a little more about it and google is not being very helpful. Any pointers gratefully received.

  • By Becky - 3:28 AM on February 15, 2016  

    Couldn’t agree more with this statement: “Content Planning, Not Content, Comes First” –

    Having just moved on from an agency role where I led strategy for our client’s websites, the planning phase was so critical to the project process. For designers and copywriters alike, both parties need a clear content brief in order to perform their roles effectively and reduce reworking as much as possible.

    I would always begin with a content plan outlining purpose, audience and actions for each page/content section, follow it up with a content brief, and then outline a template for content in https://gathercontent.com/ – In here you can specify exactly the type/length of content you need and then collaborate with your teams to provide content and approve it. It already has integrations with some of the major CMSs out there, but it also has an API. Full disclosure – I work at GatherContent now but even if it I didn’t, I wouldn’t want to run a web project with out it. Highly recommend!