What came first: The chicken or the egg? We’ve all heard that question (and arguments for both sides of the coin). Likewise, we’ve probably all heard a similar debate going on in the marketing world. Namely, what comes first: The content or the design?
While there are arguments for design-first, today we’ll talk about the content-first design approach—what it is, why it’s a beneficial approach, and how to make a success of it. I’ll cover some of the content strategy thinking and methods I’ve applied to my user experience (UX) design work to help me design content-first.
Matt Post, Co-Founder of WCAG Pros, explains:
As the name suggests, the content comes first to ensure that:
What happens when we do things the other way around, though? When we try to fit content into a design that we’ve already invested tons of resources into, we may be forced to:
So, as you can see, the content-first approach has benefits in the short-term (e.g., efficiency) and in the long-term (e.g., greater ROI). Let’s look at another one of those benefits—user experience.
Content is UX.
If the primary purpose of websites is to deliver valuable content to an audience, we should be designing content-first for the best possible UX.
But we frequently miss the opportunity to validate and iterate our UX designs with content insights...instead waiting until the final stages to unite signed-off content and design.
When we design content-first, we’re thrusting the content center stage in the design process. And ensuring that we respect and consider the opportunities, constraints, and implications of content on our designs. That’s when good UX design takes the delivery and communication of a site’s content to the next level of experience.
Using a content-first approach works best when teams have a strategic workflow to make it successful. What does that process include?
Content strategy should be based not only on your organization’s goals but also on user needs. Matt Post, mentioned earlier, shared some important questions content strategists, content, copywriters, and even designers should ask when getting started with content-first design.
Matt said,
“You have to put yourself in your user’s shoes. What do they need to know? What do they want to know? What do you want them to know? Ask yourself these questions and create content that strikes a fine balance between the three. Only after you’ve determined this can you start thinking about the design elements that would make the message you just crafted pop out.”
Once you have the answers to those questions, you’ll also need to define your content creation process. That includes:
And it also doesn’t hurt to outline how stakeholders will collaborate during the design process.
With the high-level content strategy in place and housekeeping tasks like processes taken care of, you can start developing the message. That includes:
i.e., create a content brief, outline, and first draft. Additionally, test the messaging. And not just by doing an internal review with stakeholders but by putting it in front of your target audience. Getting their feedback at this stage will cut down on trial and error later.
Once you’ve decided on the page layouts and messages for each page, you can create the final content. The design can also be finalized.
But beyond this process, let’s gain some insight into other practices that can make this approach effective.
Why do we use Lorem Ipsum, Bacon Ipsum, Zondo Ipsum (our leaving present to an old colleague), or other Ipsum in our wireframes and prototypes?
Because it quickly plugs the gaps in our emerging designs and lets us crack on with the next feature or page template. We’ve all done it.
Yet, the problem with Lorem Ipsum is it conveniently fills the available space like an expanding gas. Unfortunately, it is inert, meaningless, and lacks context, revealing very little about the relationship between the design and the content.
We get hung up on the idea that content needs to be perfected and final before it’s added to the interface so, in the meantime, we stuff our designs with placeholder text.
But with a shift towards skipping lo-fi wireframes docs and hi-fi Photoshop mockups and quickly moving to HTML + CSS prototypes (straight in the browser), the fidelity of content in the UX design process needs to keep up.
We don’t need perfect content in imperfect prototypes, but we do need something better than gibberish. So here are some ways to get your hands on some juicy proto-content early.
If you're redesigning a site then you have a pile of existing content hanging around. Use it. Use existing pieces of content in your wireframes and prototypes and see what it teaches you about the content experience.
It probably won’t be perfect and will be due for a rewrite as part of the project. But a staff profile, news article, or about page (et al.) is not going to be so radically different from one version of the site to the next that you can't temporarily use the incumbent content to gain insights and improve your design.
There’s been an ongoing debate about whether UX designers should code enough to prototype and validate ideas. I think UX designers should also write copy well enough to prototype and validate ideas.
If you don’t have suitable content to hand, simply write your proto-content. You’re not aiming for perfection; the skilled copywriter will worry about that later. You’re aiming for insights and validation.
It obviously takes longer to write a few paragraphs of content than to dump and tweak a block of Lorem Ipsum, but the insights and validation far outweigh the effort.
You’re working on the UX design for a university’s international student website, which will showcase their events. The events are nothing out of the ordinary; they have a title, a summary extract, time details, location details, etc. The client wants to promote upcoming events on the homepage.
Let’s try and write some imperfect proto-content based on some educated assumptions.
When we use real content (Examples 2 and 3) in the Upcoming Events panel on our homepage wireframe, we get some immediate insights that we don’t get from the Lorem Ipsum example:
Yes, these events don’t exist. But based on research and a bit of domain knowledge, they’re perfectly plausible examples to get things rolling and immediately reveal a bunch of insights to influence and iterate the UX design.
If you don’t have existing site content and are still resistant to writing your own proto-content, then it’s time to steal some.
Returning to the previous scenario: Head over to the international student sites of other universities. What events are they promoting? Copy and paste a few examples and tweak the names and venues accordingly.
Honestly, what is going to be so different about their events? You’ll not only get some quick-win proto-content to use, but you’ll also be able to reflect on how they’ve designed for the same problem.
Content for a new site never comes quickly. There’s usually a long wait between turning the content production tap and getting the first drops of signed-off content. But you don’t need to wait that long.
As soon as the writers have started to draft or rewrite content for the new site, get a copy and update your prototypes with it. Ensure you have access to their content production tools (like GatherContent) to easily get hold of the latest content.
That draft content is simply an early iteration of what will eventually be reviewed, revise, and signed off on as it works through the editorial workflow. It won't be wildly different from the final version, so make use of it early.
Disclaimer: Add clear disclaimers to your prototypes and stakeholder communication about the indicative status of your proto-content. Avoid any confusion.
I believe UX designers would benefit from thinking a bit more like content strategists. Here are a couple of examples.
This isn't the post to get into the merits of content audits (I'm hoping that argument has already been won). But it is important that UX designers are receptive to the insights screaming out from good audits:
A good UX designer reflects on these content insights and folds that thinking into their work.
Especially if you have loads of content, you could benefit from a simple tool for keeping organized. Check out GatherContent’s Content Audit Spreadsheet!
The client says they must have a permanent, latest news slot on their new international student site homepage. But the audit reveals that only four news items were published in the previous 12 months on the current site (hardly a steady flow of the latest news).
The UX designer compromises with the client to design a homepage template with the logic to only show the latest news items younger than 30 days old. Otherwise, the template closes the space and shows nothing.
Acting on current content insights reduces the risk of jeopardizing the users’ experience by, in this case, showing them old “latest” news. And it also removes pressure on the site’s owners to produce more news stories. Win-win.
Next time you’re knocking out those wireframes or prototypes, see if you can’t get some proto-content in there to validate your thinking and help you iterate towards better UX and usability.
While you can borrow from existing live content and even competitor content, the ideal solution is to have access to strategists’ outlines and writers’ drafts. After all, these are the beginnings of the actual content that will eventually be merged with your design. So you’ll save yourself some work by using this info as your proto-content.
Why not explore GatherContent as a tool for transparency and collaboration? Not only will it allow you to view and track the progress of content, but it will also allow you to share your input with creators in situ, making it more actionable. Start your free trial today and take it for a spin!
What came first: The chicken or the egg? We’ve all heard that question (and arguments for both sides of the coin). Likewise, we’ve probably all heard a similar debate going on in the marketing world. Namely, what comes first: The content or the design?
While there are arguments for design-first, today we’ll talk about the content-first design approach—what it is, why it’s a beneficial approach, and how to make a success of it. I’ll cover some of the content strategy thinking and methods I’ve applied to my user experience (UX) design work to help me design content-first.
Matt Post, Co-Founder of WCAG Pros, explains:
As the name suggests, the content comes first to ensure that:
What happens when we do things the other way around, though? When we try to fit content into a design that we’ve already invested tons of resources into, we may be forced to:
So, as you can see, the content-first approach has benefits in the short-term (e.g., efficiency) and in the long-term (e.g., greater ROI). Let’s look at another one of those benefits—user experience.
Content is UX.
If the primary purpose of websites is to deliver valuable content to an audience, we should be designing content-first for the best possible UX.
But we frequently miss the opportunity to validate and iterate our UX designs with content insights...instead waiting until the final stages to unite signed-off content and design.
When we design content-first, we’re thrusting the content center stage in the design process. And ensuring that we respect and consider the opportunities, constraints, and implications of content on our designs. That’s when good UX design takes the delivery and communication of a site’s content to the next level of experience.
Using a content-first approach works best when teams have a strategic workflow to make it successful. What does that process include?
Content strategy should be based not only on your organization’s goals but also on user needs. Matt Post, mentioned earlier, shared some important questions content strategists, content, copywriters, and even designers should ask when getting started with content-first design.
Matt said,
“You have to put yourself in your user’s shoes. What do they need to know? What do they want to know? What do you want them to know? Ask yourself these questions and create content that strikes a fine balance between the three. Only after you’ve determined this can you start thinking about the design elements that would make the message you just crafted pop out.”
Once you have the answers to those questions, you’ll also need to define your content creation process. That includes:
And it also doesn’t hurt to outline how stakeholders will collaborate during the design process.
With the high-level content strategy in place and housekeeping tasks like processes taken care of, you can start developing the message. That includes:
i.e., create a content brief, outline, and first draft. Additionally, test the messaging. And not just by doing an internal review with stakeholders but by putting it in front of your target audience. Getting their feedback at this stage will cut down on trial and error later.
Once you’ve decided on the page layouts and messages for each page, you can create the final content. The design can also be finalized.
But beyond this process, let’s gain some insight into other practices that can make this approach effective.
Why do we use Lorem Ipsum, Bacon Ipsum, Zondo Ipsum (our leaving present to an old colleague), or other Ipsum in our wireframes and prototypes?
Because it quickly plugs the gaps in our emerging designs and lets us crack on with the next feature or page template. We’ve all done it.
Yet, the problem with Lorem Ipsum is it conveniently fills the available space like an expanding gas. Unfortunately, it is inert, meaningless, and lacks context, revealing very little about the relationship between the design and the content.
We get hung up on the idea that content needs to be perfected and final before it’s added to the interface so, in the meantime, we stuff our designs with placeholder text.
But with a shift towards skipping lo-fi wireframes docs and hi-fi Photoshop mockups and quickly moving to HTML + CSS prototypes (straight in the browser), the fidelity of content in the UX design process needs to keep up.
We don’t need perfect content in imperfect prototypes, but we do need something better than gibberish. So here are some ways to get your hands on some juicy proto-content early.
If you're redesigning a site then you have a pile of existing content hanging around. Use it. Use existing pieces of content in your wireframes and prototypes and see what it teaches you about the content experience.
It probably won’t be perfect and will be due for a rewrite as part of the project. But a staff profile, news article, or about page (et al.) is not going to be so radically different from one version of the site to the next that you can't temporarily use the incumbent content to gain insights and improve your design.
There’s been an ongoing debate about whether UX designers should code enough to prototype and validate ideas. I think UX designers should also write copy well enough to prototype and validate ideas.
If you don’t have suitable content to hand, simply write your proto-content. You’re not aiming for perfection; the skilled copywriter will worry about that later. You’re aiming for insights and validation.
It obviously takes longer to write a few paragraphs of content than to dump and tweak a block of Lorem Ipsum, but the insights and validation far outweigh the effort.
You’re working on the UX design for a university’s international student website, which will showcase their events. The events are nothing out of the ordinary; they have a title, a summary extract, time details, location details, etc. The client wants to promote upcoming events on the homepage.
Let’s try and write some imperfect proto-content based on some educated assumptions.
When we use real content (Examples 2 and 3) in the Upcoming Events panel on our homepage wireframe, we get some immediate insights that we don’t get from the Lorem Ipsum example:
Yes, these events don’t exist. But based on research and a bit of domain knowledge, they’re perfectly plausible examples to get things rolling and immediately reveal a bunch of insights to influence and iterate the UX design.
If you don’t have existing site content and are still resistant to writing your own proto-content, then it’s time to steal some.
Returning to the previous scenario: Head over to the international student sites of other universities. What events are they promoting? Copy and paste a few examples and tweak the names and venues accordingly.
Honestly, what is going to be so different about their events? You’ll not only get some quick-win proto-content to use, but you’ll also be able to reflect on how they’ve designed for the same problem.
Content for a new site never comes quickly. There’s usually a long wait between turning the content production tap and getting the first drops of signed-off content. But you don’t need to wait that long.
As soon as the writers have started to draft or rewrite content for the new site, get a copy and update your prototypes with it. Ensure you have access to their content production tools (like GatherContent) to easily get hold of the latest content.
That draft content is simply an early iteration of what will eventually be reviewed, revise, and signed off on as it works through the editorial workflow. It won't be wildly different from the final version, so make use of it early.
Disclaimer: Add clear disclaimers to your prototypes and stakeholder communication about the indicative status of your proto-content. Avoid any confusion.
I believe UX designers would benefit from thinking a bit more like content strategists. Here are a couple of examples.
This isn't the post to get into the merits of content audits (I'm hoping that argument has already been won). But it is important that UX designers are receptive to the insights screaming out from good audits:
A good UX designer reflects on these content insights and folds that thinking into their work.
Especially if you have loads of content, you could benefit from a simple tool for keeping organized. Check out GatherContent’s Content Audit Spreadsheet!
The client says they must have a permanent, latest news slot on their new international student site homepage. But the audit reveals that only four news items were published in the previous 12 months on the current site (hardly a steady flow of the latest news).
The UX designer compromises with the client to design a homepage template with the logic to only show the latest news items younger than 30 days old. Otherwise, the template closes the space and shows nothing.
Acting on current content insights reduces the risk of jeopardizing the users’ experience by, in this case, showing them old “latest” news. And it also removes pressure on the site’s owners to produce more news stories. Win-win.
Next time you’re knocking out those wireframes or prototypes, see if you can’t get some proto-content in there to validate your thinking and help you iterate towards better UX and usability.
While you can borrow from existing live content and even competitor content, the ideal solution is to have access to strategists’ outlines and writers’ drafts. After all, these are the beginnings of the actual content that will eventually be merged with your design. So you’ll save yourself some work by using this info as your proto-content.
Why not explore GatherContent as a tool for transparency and collaboration? Not only will it allow you to view and track the progress of content, but it will also allow you to share your input with creators in situ, making it more actionable. Start your free trial today and take it for a spin!
Liam is Founder of Lagom Strategy, a UK consultancy specialising in digital user research and sustainable content strategy.
With over 15 years of content production and strategy experience in the UK and Australia, Liam has built up a wealth of practical knowledge on how to put content back at the heart of web projects.
He has led content strategy work for many organisations including the Royal Air Force, Health Education England, University of New South Wales, University of Technology Sydney, UK Department of Health and Social Care, UK Parliament, and the UK Foreign Office.
Liam also has a Master's degree in Web Journalism.