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.
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.
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 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:
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).
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.
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.
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:
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:
This works for interaction and page level, so no excuses!
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
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.
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.
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!