Design flows with GOV.Flow

I made a free kit to help designers create user flows in an easy and consistent way. Keep reading for download link.

Charles Reynolds-Talbot
Design + Sketch
Published in
3 min readJan 30, 2018

--

by Charles Reynolds-Talbot

I’ve worked as an interaction designer in a couple of UK government departments (currently Home Office). One of the first things I do with new teams is create user flows of the product or service.

Every time I created a new user flow in Sketch, I would start by repurposing the last one I did. This always felt quicker than starting from scratch, but still required a lot of hacking to get it right. I figured there must be an easier way, so I made a design kit for user flows, to solve my own reoccurring problem.

If it helps anyone else — bonus!

Example created using GOV.Flow

What are flows?

Flows are made out of individual interactions a user makes and are just as important as individual screens.

Screens are made up of interactions — often several — the user chooses one, and the state/screen changes.

Flows illustrate this by highlighting what the user sees, and what the user does.

Why are they good?

Flows are fast to sketch, and a good way of communicating the foundation for what needs to happen as part of your design strategy.

Having an end-to-end view of your design from the users perspective, helps highlight what works and what doesn’t.

How might they help?

Flows help designers facilitate conversations with teams — focussing on the tasks a user needs to carry out, to accomplish their goal — without getting distracted by what the content should be, or what things should look like.

Download the kit

If you like it, give it a clap 👏 on medium to share with others.

I have uploaded it to a Github repo for easy access, version control and the ability for people to raise issues and contribute.

I am symbolising everything for easy customisation through Sketch overrides.

I made this kit to create user flows for GOV.UK design and therefore the initial screens reflect repeatable templates we use. Please feel free to add to this as necessary, or repurpose for your own design needs outside of government.

The kit is free to use, share and adapt — released under the creative commons licence — https://creativecommons.org/licenses/by-nc/4.0/

Comments, feedback, issues and contributions all welcome.

Saying thanks ☕️

I design in the open as much as I can and encourage others to do the same. A credit to me on Twitter and link back to the Github repo are greatly appreciated.

--

--