Getting prototypes in front of users early is an important part of how we work in Home Office Digital (HOD). It means we can test our assumptions with real users and make improvements based on the findings. But how do you prototype without the technical skills of a designer or developer?
On a recent content project, my team wanted to test content with users quickly, but didn’t have a designer to create a prototype. Not being familiar enough with HTML to create a prototype quickly, we had to improvise. Fortunately, one of HOD’s designers knew of some tools to create clickable prototypes without using HTML.
Not just for pranks
Although billed as a way to prank your friends, Page Editor is a great way to see how your content will look on a live page. It can be a bit fiddly, but allows you to make text changes right on the page. Just turn the extension on, click where you want to edit and start typing. Once you’ve written your new content, turn it off, take a screenshot and presto! Your new content is ‘on’ GOV.UK (at least untill you refresh the page).
Page Editor does have some downsides - you can’t format the layout that much, so it’s best used for content changes. And there’s no way to save drafts, so remember to take a screenshot when you have the page how you want it.
Turning static images into a prototype
Once you’ve mocked up your new pages, you can drop them into Invision - a free prototyping app. Invision let’s you turn static images into a clickable prototype; just highlight what should be a link and select where you want it to go. You can even link to a live page, eg if you want to test a new start page on an existing service.
Again, Invision is not without drawbacks - you can’t enter data on forms, so if you want to see how users complete a form, it’s probably not the tool for you.
Test and demo your content
Using Page Editor and Invision together meant we could:
- test real-looking content with users
- share and demo content with stakeholders (Invision also has a comment function, which is handy for feedback)
- make quick changes based on research
Obviously, these tools aren’t a replacement for an HTML prototype - in fact I’m on a GDS design course to brush up on my HTML prototyping right now. But, if you’re after a fast, non-technical prototyping kit - these tools are well worth considering.
Let's share
I’d love to know how other teams have tackled this problem. Do you prototype with paper? Google docs? Interpretive dance? Let us know on Twitter or in the comments below.
Leave a comment