In the second part of their post, content designer Laura Parker and senior interaction designer Daniel Da Silveira show how they used a content-first approach to design features for the Defra form designer.
In the first part of our blog post we talked about what content-first design is and how you can do it.
The Defra form designer was well established before we trialled a content-first design approach, so we adapted the process slightly. Page layouts were defined by the GOV.UK design system so we worked within existing boundaries while applying the new approach.
What we did
- Agree goals for each step in the journey
- Decide content structure
- Organise a crit
- User research
Agree goals for each step in the journey
Goal of the work: Allow users to set up a question with radio and checkbox answers.
Before doing any design work, the team mapped out steps in a rough user journey. For each step we agreed:
- what the user needs to know
- what the user needs to do
Decide content structure
We decided to draft the content in a Word document before wireframing. This way, the team could see a content-only version of the structure. Since no UI design had started yet, we got feedback and made edits quickly.
Once the team were happy with the structure, we jumped into Mural to start wireframing.
Organise a crit
We invited the full Defra Forms team to attend a crit once we had the content structure and wireframe for the journey mapped out.
User research
We tested improvements to the list and checkbox question, focusing on:
- setting up a question before adding list items
- adding list items sequentially on one page
Participants: 5 content designers from Defra business as usual (BaU) content team.
Method: Remote usability testing with think-aloud protocol.
Key findings
- Moving question text before options improved logic and usability.
- Users appreciated entering all options on one page.
- Some confusion remained around hint text and short descriptions.
- Tool design felt clean, spacious, and intuitive after one use (“It feels like it's really intuitive and the design feels really clean”).
How this feature works today
On the left, the journey is focused entirely on defining the content for a question in a form, including:
- the question text
- hint text
- short description (for error messages and the ‘check your answers’ page)
- the component (checkboxes)
- the answer options
On the right, a live preview shows how a question will look to users. The preview updates in real time. Users of our tool can see what they’re doing without hitting a ‘preview’ link and jumping to a new page.
The page works if JavaScript is disabled and supports screen reader users.
Wrapping up
The whole team got behind content-first design which made a big difference.
Working on the content first did not mean I worked alone. It was a shared effort across design, research and development. We had strong attendance at crits and feedback sessions and people were happy to help when asked.
We also had to show the approach worked, but the results spoke for themselves. While this feature was not the quickest we have created and shipped, we managed to reduce the number of amends required in development.
Thank you to the Defra Forms team for supporting the user centred design team to trial a content-first design approach during a busy period.
More information
Like what you’ve read? Why not leave Laura and Daniel a comment sharing your thoughts on the Defra form designer.
You can also find Daniel on LinkedIn.
And check out our LinkedIn page for all the latest news, stories and job openings. While you're there, why not give us a follow?
Leave a comment