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.
"It's critical for colleges and universities to create seamless pathways for their students to find the programs and services that are right for them. Folks have to see that you have what they want, and then they need an easy pathway to get to it. Dynamic, personalized content can enable you to keep a streamlined design while bringing the information that is directly relevant to the specific website visitor to the forefront."
As the name suggests, the content comes first to ensure that:
The message is effective on its own
And that the design elements make it even more impactful
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:
Leave out valuable aspects of the message because there’s no space for them within the design
Shorten or change the content in ways that will make the message less powerful
Spend extra time and resources redesigning web pages so that they do complement the content
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.
Why design content-first?
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.
Four steps to getting started with content-first design
Using a content-first approach works best when teams have a strategic workflow to make it successful. What does that process include?
1. Define your strategy and process
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.”
2. Define your process
Once you have the answers to those questions, you’ll also need to define your content creation process. That includes:
Setting deadlines that work for both content creators and designers
And it also doesn’t hurt to outline how stakeholders will collaborate during the design process.
3. Map and test the message
With the high-level content strategy in place and housekeeping tasks like processes taken care of, you can start developing the message. That includes:
Setting a more specific purpose for each page depending on where it will fall in the customer and user journeys
Determining what main messages need to be conveyed
Creating page outlines and initial content based on the above
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.
4. Finalize the content, then finalize the design
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.
Three ways to get proto-content early on
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.
Placeholder text, although it fills space, doesn’t provide any helpful context (Source)
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.
1. Design with the current site’s content
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.
2. Roll your own content
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.
An example of proto-content development
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.
Example 1 (left): No real content, placeholder text
Example 2 (middle): Real content, typical case
Example 3 (right): Real content, worst case
Three variations of proto-content ranging from non-informative to highly informative
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:
Showing the building and campus name is long. Perhaps it would be better to show the campus and reveal the building on the actual event profile page.
How are we going to handle the UX for multi-day events? Could get tricky!
Promo panels need to handle reasonably long titles of 7+ words. If we have fewer panels with more space, which panels do we lose on the HP?
The extracts of ~30 words might be overkill for a promo panel. Consider just showing the title in the promo.
What’s the best date and time format to use?
Do we feature upcoming events on the HP that have already started but haven’t ended?
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.
3. Design with competitor content
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.
Don't wait for signed-off content (it will be too late)
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.
GatherContent provides visibility into what progress is being made with content creation
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.
Design the UX with content insights
I believe UX designers would benefit from thinking a bit more like content strategists. Here are a couple of examples.
Embrace the power of the content audit
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:
What content types currently exist (and are likely to continue existing)?
Where is content feeding from (e.g., non-CMS sources), and what constraints and opportunities does that present?
How much content will the new navigation need to handle?
Has the existing team been able to maintain what they already have?
What content has been popular or unpopular?
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!
Back to the university site scenario
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.
Try proto-content in your UX work
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.
"It's critical for colleges and universities to create seamless pathways for their students to find the programs and services that are right for them. Folks have to see that you have what they want, and then they need an easy pathway to get to it. Dynamic, personalized content can enable you to keep a streamlined design while bringing the information that is directly relevant to the specific website visitor to the forefront."
As the name suggests, the content comes first to ensure that:
The message is effective on its own
And that the design elements make it even more impactful
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:
Leave out valuable aspects of the message because there’s no space for them within the design
Shorten or change the content in ways that will make the message less powerful
Spend extra time and resources redesigning web pages so that they do complement the content
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.
Why design content-first?
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.
Four steps to getting started with content-first design
Using a content-first approach works best when teams have a strategic workflow to make it successful. What does that process include?
1. Define your strategy and process
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.”
2. Define your process
Once you have the answers to those questions, you’ll also need to define your content creation process. That includes:
Setting deadlines that work for both content creators and designers
And it also doesn’t hurt to outline how stakeholders will collaborate during the design process.
3. Map and test the message
With the high-level content strategy in place and housekeeping tasks like processes taken care of, you can start developing the message. That includes:
Setting a more specific purpose for each page depending on where it will fall in the customer and user journeys
Determining what main messages need to be conveyed
Creating page outlines and initial content based on the above
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.
4. Finalize the content, then finalize the design
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.
Three ways to get proto-content early on
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.
Placeholder text, although it fills space, doesn’t provide any helpful context (Source)
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.
1. Design with the current site’s content
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.
2. Roll your own content
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.
An example of proto-content development
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.
Example 1 (left): No real content, placeholder text
Example 2 (middle): Real content, typical case
Example 3 (right): Real content, worst case
Three variations of proto-content ranging from non-informative to highly informative
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:
Showing the building and campus name is long. Perhaps it would be better to show the campus and reveal the building on the actual event profile page.
How are we going to handle the UX for multi-day events? Could get tricky!
Promo panels need to handle reasonably long titles of 7+ words. If we have fewer panels with more space, which panels do we lose on the HP?
The extracts of ~30 words might be overkill for a promo panel. Consider just showing the title in the promo.
What’s the best date and time format to use?
Do we feature upcoming events on the HP that have already started but haven’t ended?
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.
3. Design with competitor content
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.
Don't wait for signed-off content (it will be too late)
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.
GatherContent provides visibility into what progress is being made with content creation
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.
Design the UX with content insights
I believe UX designers would benefit from thinking a bit more like content strategists. Here are a couple of examples.
Embrace the power of the content audit
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:
What content types currently exist (and are likely to continue existing)?
Where is content feeding from (e.g., non-CMS sources), and what constraints and opportunities does that present?
How much content will the new navigation need to handle?
Has the existing team been able to maintain what they already have?
What content has been popular or unpopular?
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!
Back to the university site scenario
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.
Try proto-content in your UX work
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.
Share on Facebook
Share on Twitter
Share on LinkedIn
Share with email
