Our user-centred design (UCD) team consists of:
Our aim is to put the user at the centre of design and development by using data, evidence and insight to understand how to meet their needs.
Prototyping is an essential part of our workflow. It allows us to show and test a concept or process before allocating any resources to build it. We’ll test and iterate a prototype until we’re confident it meets our users’ needs.
How we prototype
We use a mix of prototyping methods when testing our journeys with users. Designs start as ideas and low-fidelity sketches. We then move these ideas to design software like Figma. Now many of us are working remotely, we move to digital prototypes more quickly as they help us to work collaboratively.
Depending on the work we’re doing, we might use:
- Figma’s prototyping function to gather insights on high-level concepts or processes
- the GOV.UK Prototype Kit to create high-fidelity prototypes for detailed designs which are almost identical to a real service
Why content designers wanted to develop their skills
Content designers at HMCTS have different experiences and skills in prototyping, depending on the work they do. For example, content designers work across different teams including:
- HMCTS services – working in multi-disciplinary teams across civil, family and tribunal jurisdictions
- the paper forms workstream – working to improve the content and usability of over 1,200 paper forms
- GOV.UK content – creating and improving HMCTS guidance
Although interaction designers do not rely on content designers being able to use the GOV.UK Prototype Kit, we recognised that upskilling would benefit both disciplines by:
- increasing collaboration
- saving time
- working more flexibly
- enabling content designers to become ‘practitioners’ in prototyping, creating a variety of prototypes from paper sketches to coded prototypes
It would also help content designers to better support each other across different teams, working on coded prototypes where needed.
Training content designers
Before the session, we talked about what the content designers needed to know about prototyping. Many had past experience of coding so we ran a refresher on the basics of HTML, as well as introducing the kit and how to work collaboratively. We agreed that content designers would usually need to edit an existing prototype created by interaction designers on their team.
We introduced how the kit works – from running a prototype locally on the command line and making changes to the prototype using a text editor, to finally sharing your code via Github and hosting it on the web.
When planning the training, we based the structure on a course Ros attended in 2019, run by Joe Lanman at the Government Digital Service (GDS). We followed Joe’s lead in introducing HTML, covering the basics of tags, attributes, nesting and indentation. One of the most important lessons of all being to close your tags!
We then moved on to a rite of passage for any government designer – the Apply for a juggling licence tutorial. The tutorial is a great introduction to the kit, where you learn basic prototyping skills like creating pages and linking them together, before moving on to more advanced techniques like branching and passing data.
After completing the tutorial, we talked about the more specific details of prototyping at HMCTS, how we use Github and how the content designers could get access to existing repos.
We then ended with a discussion about coding collaboratively which covered:
- how to access existing prototypes
- the importance of working in branches
- how to raise pull requests and merge to the main branch
- how the changes you’ve made can be automatically deployed to where the prototype is hosted
At the end of the session, the interaction designers shared some additional resources for content designers to further upskill their coding skills. We also provided a cheat sheet with basic commands and coding snippets, so content designers could get started right away.
What content designers learnt
Here are some of the top takeaways from the training session.
Coding is not as scary as you first think
We all had some experience of coding, usually dating back to when we had to use code to publish content in old content management systems. So, it was more a case of refreshing our memories than learning new code.
Stealing code is not a crime
Reusing code is not a crime. It’s actually a really helpful way to teach yourself how to code. We’ll rarely need to create a prototype from scratch, as components are likely to have been made before.
Hiding code is really helpful
We make several iterations to prototypes, for example after user research. Learning how to hide code will be incredibly useful for us, as it means we do not have to delete it and can refer back to it where needed.
You can work on and release changes with colleagues in a secure way
Learning about the workflow and how to clone prototypes gave us reassurance. We can easily keep track of changes and merge changes to the main branch once we’re ready.
Next steps
We’ve already started putting our skills into practice, which is great. To make sure we build on what we’ve already learnt, we’ll be having another training session soon. We’re also making prototyping training part of our onboarding process as we expand our interaction and content design teams.
You may also be interested in:
2 comments
Comment by Nik Howard posted on
I'm pretty sure the GOV.UK style guide says you only use numbered lists when there's an order to the content, and there isn't an order of things, and we don't usually add numbered lists in headings?
Comment by Ellis Davies posted on
Hi Nik, thanks for your comment. You're right. We've removed the numbers from the subheadings. Thanks!