Content Strategy

Designing Content-First for a Better UX

Why design content-first?

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 go content-first we are thrusting the content centre stage in the design process and ensuring we respect and consider the opportunities, constraints and implications of content on our designs.

And that’s when good UX design takes the delivery and communication of a site’s content to the next level of experience.

In this blog I will cover some of the content strategy thinking and methods I’ve applied to my UX design work to help me design content-first.

Design with proto-content (as early as possible)

Why do we use Lorem Ipsum, Bacon Ipsum, Zondo Ipsum (our leaving present to an old colleague), or any 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.

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.

Yet we get hung up on the idea that content needs to be perfected and final before it is added to the interface, so in the meantime we stuff our designs with Lorem Ipsum.

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:

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 it 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, about page (et al) are 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.

Roll your own content

There is a current debate about whether UX Designers should be able to code (enough to prototype and validate ideas). Well I think UX Designers should also be able to copywrite (enough to prototype and validate ideas).

If you don’t have suitable content to hand, simply write your own 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 dump and tweak a block of Lorem Ipsum, but the insights and validation far outweigh the effort.

Example scenario

You are working on the UX design for a university’s international student website which will showcase their events.

The events are nothing out 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, placehold text

Example 2 (middle) – real content, typical case

Example 3 (right) – real content, worst case

When we drop real content (examples 2&3) into 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 just 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 less 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 is 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 are perfectly plausible examples to get things rolling and immediately reveal a bunch of insights to influence and iterate the UX design.

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 not only get some quick-win proto-content to use, you will reflect on how they have 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.

That draft content is simply an early iteration of what will eventually be reviewed, revised and signed off as it works through the editorial workflow. It won’t be wildly different from the final version, so make use of it early.

Disclaimer: my disclaimer is you 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 few 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 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 / unpopular?

A good UX Designer reflects on these content insights and folds that thinking into their work.

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 latest news).

The UX Designer compromises with the client to design a homepage template with the logic to only show latest news items younger than 30 days old, otherwise the template closes the space and shows nothing.

Acting on this current content insight both reduces the risk of jeopardising the users’ experience by showing them old “latest” news and also removes pressure on the site’s owners to produce more news stories. Win win.

Try proto-content in your UX work

So the 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 to iterate towards a better UX.

We would love to hear how do you think content strategy thinking and can improve the work of UX designers? How do you approach content in your UX design work?

Free Online Masterclass

Content Strategy & Delivery

Anyone who struggles with content consistency and efficiency—and who doesn't?—will greatly benefit from this course. If you want to get smarter about content planning, creation and delivery, start here.

About the Author

Liam King

Founder, Lagom Strategy

Liam is Founder of Lagom Strategy, a UK consultancy specialising in UX and sustainable content strategy.

With over a decade 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.

Liam was previously Senior UX Architect / Content Strategist with Sydney agency, Digital Eskimo, where he introduced and led the agency’s successful content strategy services. Before heading to Australia in 2009, Liam was a Web Producer at the UK Parliament and the Senior Web Editor at the UK Foreign Office.