<- Back to all posts

How to design content-first in a product-driven world

Emma Aldington, eBay
|
January 14, 2025

What is content-first design?

Content-first design is writing out a narrative, structure of information or even the purpose of a page before choosing the visual design components. It means using real content to inform the right design layout, rather than filling in copy after you’ve mocked up the design.

Essentially it’s this: choosing the right sized boxes once you know what’s going in them.

When designing a page, many designers start drawing out the layout of pages using placeholder copy, like lorem ipsum, to signal what content might go there.

But this can often mean you’re not really considering what users actually need from the page. You might end up with an entire design and then have to fit some mediocre copy into pre-agreed spaces, which can make it difficult to get the right message across. 

A wireframe using “Lorem Ipsum” and guessing the space needed, versus a wireframe using realistic content

Content writers might struggle with this. Ever been handed a finished design and tried to get the right message across? It’s not easy. You might feel constrained to dilute your message into one line, when it actually needs 3 lines. Sometimes it’s the other way round. A designer might create space for a paragraph of text to explain a feature, when it can actually be described in a sentence – and you could actually go with a more minimal design.

There are loads of great resources on content-first design within big public sector organisations and agency-led website creation. 

Here are some of my favourites:

But today, I want to explore content-first design in the SaaS space, why we need it, and how you can try it out for yourself.

What’s good about it?

Content-first design can save you time. It can reduce the amount of back-and-forths it takes to get a design right. This is because a design might need to look different once the content is added (longer, shorter, a different format), so why not reverse the steps and get to the end result quicker?

It can save your user testing or research resources. Testing designs without real content baked in often results in participants being unnecessarily confused. This can reduce the effectiveness of the actual usability or comprehension testing.

It can improve your metrics. Content-first ultimately means helping users find the information they need quicker, so they can complete their goals. Find me a product manager who wouldn’t love that.

It can improve your skills as a designer. Sometimes we focus on the visuals because it’s what we’re good at and that’s okay. But learning to think content-first can make you stand out against other product designers.

"In the current product world, to not work content-first feels like not doing the job properly. You have seconds to make a product work for people and content is the only variable to make you stand out, have a personality and make an impression. Trying to make words fit components is a really out-dated model. Content designers should be front and centre in the design process." –– Ray Mosely, Senior Design Manager @ eBay

I don’t have that much ownership over what we do… is this for me?

I hear you. I have pretty much only worked in a ‘product’ context in all my career, owning small parts of a bigger user experience, taking direction from product managers and working closely with product designers. So I know what it's like to feel constrained by budgets, timelines, ownership and stakeholders. I’ve rarely had the opportunity to audit an entire site and create the foundations.

Let’s be honest: most product and content designers aren’t responsible for an entire experience. So how do you apply those content-first principles to individual journeys or even screens and interactions?

That’s why I like to focus on how we can use the methods in smaller, more constrained experiences. Content-first was born out of good information architecture practice for large-scale websites, but it can be just as beneficial to use in product design and SaaS contexts. On a smaller scale, you can make tiny tweaks to your design process to be more content-first and feel the benefits.

––––––

Here’s an example from a previous job. I only had control over a very small section of a user journey: a loan calculator to work out how much it might cost you to get a new car on finance.

With the original design of the deposit section, conversion was not where we wanted and drop-off rates were higher than anywhere else in the journey. There was also a lot of complex logic behind the yes/no questions.

I was asked if I could “tweak the copy” to make it easier for people to understand. When I looked at the data, almost 97% of people were selecting “yes” to add their part-exchange. It seemed like we were overcomplicating the interaction for the sake of an edge case.

I created a content wireframe where I simply listed out all the bits of information a user needed at this point. It looked a little like this:

  • Part-exchange amount (can be removed)
  • Deposit amount (they can choose)
  • The amount they can enter

I realised we could combine those things into 2 input fields. I also reframed into statements, rather than questions. So instead of asking if they want to add more deposit, we simply position the field as optional. This takes away decision-making and clicks for the user, making the UI much cleaner and quicker to get through.

We released the new version. Conversion increased and drop-off rates declined. It showed a lot of people in the team that we should have been working this way all along. Writing out the actual required information and basing the design on that would have saved us time (and money).

How to get started

There are lots of content-first methods out there but these are some of my favourites. You can do this as a designer working solo, but it works best as a joint effort between product design and content design.

Map out the steps

If you’re designing a full user journey, map out each step using post-its or pen and paper. Describe the overall goal of the journey. You can write out a mini goal for each step too, if it’s relevant.

Then, draft what kind of content you might need to present on each step to achieve the goals. It could be straight-up copy, but it might also be things like buttons, links or images.

From there, you can choose the appropriate components to communicate what you want a user to know and do.

It’s going to be a lot quicker to spot how to mock up the screens when you have a rough idea of what each step needs to do and say. When we jump to designing the screens of a journey too quickly, we can sometimes be reluctant to change what’s not working because it feels like too much effort. Pen and paper gives us more freedom to be honest about improvements.

Try a content wireframe

This is sometimes known as a content wireframe, or content skeleton. It’s drafting out the page or interaction but using words instead of boxes. 

Try answering these questions to start your content wireframe:

  • “What do users need to know?”
  • “What do users need to do?”

These questions make sense when you think of UX content as simply information and actions.

Information is what users need to know, actions are what they need to do. And you can represent all of these in a wireframe by simply writing out the heading, body copy and calls-to-action.

Why ‘words instead of boxes’ can help:

  • How can you know how many buttons or links are there before writing out the actions you want a user to take?
  • How can you design space for a single line of text before users may need a longer description?
  • Saving space with an icon button might be detrimental if your users would benefit from a traditional button with a text label
  • It’s quicker to rewrite the words in a content wireframe than it is to shuffle around autolayout and pre-set components
  • You can then choose the best components to represent the content you need, instead of trying to come up content to fill the components

This works for interaction and page level, so no excuses!

The content wireframe example I showed earlier versus a minimal content wireframe for a smaller interaction

Use content testing methods

Yes, you can test the comprehension of a user experience before you even start to hook up a prototype. Welcome to content testing methods! 

My favourites are highlighter tests or cloze tests. They can really help with identifying opportunities for improving existing journeys, as well as setting the right message for new ones.

Instead of presenting the UI to users, write out all the information into a document like a narrative or story. Then, get them to highlight ‘green’ for things they understand and ‘red’ for things they don’t. You’ll get a colour-coded heatmap to identify where you need to improve your content, and what’s working well.

A cloze test is similar. Present all your information on a page, but erase some of the words and ask users to fill them in with their own guesses. This helps to measure how well a participant understands your overall narrative and the surrounding context. It can also give you ideas for the language your users might naturally use.

More about content testing methods from UserTesting

But we have design systems now…

Design systems are great, but they were never intended to skip out the wireframing and IA steps. They were intended to make design to development handoffs easier and more accurate. They can also help us produce more consistent designs across large orgs, and quickly mock-up screens and prototypes for testing, presentations and pitch work.

But, just as dragging pre-made components into your design file speeds up the high-fidelity work…thinking content-first speeds up the low-fidelity work so the high-fidelity designs make more sense.

If you’ve fallen into the habit of mocking up a screen with components before setting out the overall information and narrative, don’t worry. Try one of the methods above first before you do it next time, and see if it helps. All that’s different is you’re choosing components once you know the content needs, instead of choosing components first and then trying to fit in some content.

Remember, content-first design isn’t replacing product design. It’s a way to help different specialist designers work better together, and speed up the product design process overall.

Is this just for designers?

Content designers thrive when given the space to work in a content-first style. Product designers can save time figuring out the right components to use and prevent re-working high-fidelity designs later down the line. 

But content-first design isn’t just for product or content designers! Anyone who is responsible for creating and managing websites, pages or interactions can try it.

Screenshots of how I roughly mapped out the narrative of a recent presentation before ever opening up a blank slide deck.

It can also be pretty useful for anyone creating any kind of workshop or presentation. I know researchers who have used this method to map out their playbacks, and create a more cohesive narrative.

We all benefit from a content-first approach – and no one more than your users.

––––––

This is part one of a two-part series on content-first design. Stay tuned for part two, coming soon, where I dive into specific content-first design practices we use on my team at eBay!

Success! 🥳 Look forward to Ditto updates in your inbox.
Oh no — something went wrong while submitting the form. Please try again!