Doing content-first design at Defra – part one

In the first of a two-part post, content designer Laura Parker and senior interaction designer Daniel Da Silveira explain how and why they took a content-first approach to creating a form building tool.

The Defra Forms team created the Defra Form Designer (DFD), a no-code form building tool that allows Defra staff to build and publish forms on GOV.UK.

As we’re a busy team, we were looking for ways to speed up the prototyping process for new features and minimise the number of iterations in development.

Inspired by a blog post on content-first design, we decided to give it a go.

Defining content-first design

Emma Aldington, staff content designer at eBay said it best:

“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.”

 When content comes first, content designers can:

attend important meetings demo their work (in its raw form) save time reworking content build the service around the content instead of filling in boxes design for screen reader users first Why we put words in boxes

It’s tempting to start with a visual layout of an interface with placeholder text before knowing what the message is.

You can spin up a wireframe easily without content using software like Mural and Figma. Even design systems, although we love them, dictate what the content will be sometimes.

A wireframe is an acceptable design format but can provide the illusion of a finished product. No matter how carefully you explain to stakeholders that a wireframe is a prototyping tool people get attached to the thing you show them.

Showing only content (like on a Word document) can be confusing or unexpected. People expect to see something that looks like a screen.

And sometimes you need a visual design to get the ball rolling or conversation started.

With prototyping tools at your disposal, it may feel like a waste of time focusing on content as a first step. But using only words helped our team to understand the purpose of each interaction.

What changes when we do content-first design? The content drives the user experience

We stop talking about ‘what words go here’ and talk about the purpose of content instead. When content leads, you design for understanding first by testing the message with users before designing the interface.

Content designers get more strategic

We can make changes on a larger scale instead of jumping into a wireframe or prototype and searching for a specific component to edit. Information architecture, content audits and style guides get easier to manage if content is in one place like a Word document. 

The old ways of working change

It opens the door to work differently. Instead of asking a content designer to update screens in Figma, the whole team can work on the content together agnostic of a design tool. People get to see the inner workings of the content design process. How we think, draft and edit our work.

Sharing text with stakeholders outside the team is easier too (no login and permission restrictions).

Choosing when to do content-first design

Make content-first design a priority if you are starting from scratch. See how far you can get without Figma or the prototype kit. You can create a prototype using MS Word alone.

Show smaller bits of copy like emails, text messages or in-app messages to users in a Word document (outside of boxes), if you’re not sure it will work for you.

It might feel like it’s too late to start doing content-first design if you’re working on a mature service, but there will be opportunities to try it.For example, the page hierarchy and design for the Defra Form Designer was well established before we trialled a content-first design approach. But we made it work within these boundaries.

Designing the content first helps interaction design

Content-first design does not replace interaction design. It’s a way for teams to design work together and speed up the process.

Content-first design helps interaction designers by:

sharing the workload more evenly across content and design increasing the level of confidence in the work saving time choosing the right components to use preventing reworking high fidelity prototypes making it easier to design accessible screens (content structure matches the Document Object Model (DOM) that browsers and assistive technologies use) A process for doing content-first design

There are a few ways to do content-first design but here’s a good start.

Step 1: Start with a clear goal or problem you want to solve.

Step 2: Prioritise content (consider using a priority guide or the step, goal, content method).

Step 3: Organise a crit or co-design session. Agree the priority order before doing anything else.

Step 4: Write the content as if you were speaking to someone about it (like a narrative or story). Try not to think about existing design or design system components at this stage. Each page should aim to answer 2 questions:

What a user needs to know What a user needs to do

Step 5: Organise a content crit and get feedback on the words only.

Step 6: Do a first round of user research. It is possible to show Word documents to users.

Step 7: Build the UI around the content. No more guessing about what components to use or how much space to leave.

Step 8: Do a second round of user research with a more established design – see how it flows now it looks more like an online journey.

In part two, Laura and Daniel will show how they implemented this approach for specific features in the form designer.

More information

Like what you’ve read? Why not leave Laura and Daniel a comment sharing your thoughts on the Defra Form Designer.

Check out our LinkedIn page for all the latest news, stories and job openings. While you're there, why not give us a follow?

https://defradigital.blog.gov.uk/2026/03/17/doing-content-first-design-at-defra-part-one/

seen at 15:09, 17 March in Defra digital, data and technology.