Start designing services at HMRC

What you will need

Designers need the right hardware, software and accounts to start designing HMRC services. Check that you have access to the following tools:

Hardware

• A computer that you have admin access to and can install software on

Software/systems/accounts

• GOV.UK Prototype Toolkit
• A code editor such as Visual Studio (VS) Code
• Google Suite
• Pseudo PID + Office 365
• VPN access
• GitHub

If you need access to items on this list, speak to your manager/project lead, who will contact P&UCD Ops to set you up.

Patterns, components and styles

All designs for HMRC services must follow GOV.UK principles and use HMRC design patterns and GOV.UK design principles.

If a pattern exists in both HMRC and GOV.UK design libraries use the HMRC version, as it will have been created to meet specific needs and context within HMRC.

Designers should use these libraries for internal services where possible. When prototyping services for internal users, or services not on GOV.UK, designers should follow the relevant brand and typography guidance for their platform.

Get support

Designers can get support with HMRC-specific patterns from the HMRC Design Resources team on HMRC Slack at #team-design-system. Service patterns also have a link to the discussions on HMRC Github issues.

For wider government patterns and components, the GOV.UK Design System Team is available on cross-government Slack at #team-design-system.

Using prototypes

At HMRC we use a mix of high and low-fidelity prototypes to explain and test our design ideas.

Prototypes usually get more detailed as the service progresses through delivery phases.

Low-fidelity prototypes are typically used in discovery and alpha, with high-fidelity prototyping being more common from alpha to live.

Low-fidelity prototypes

HMRC’s preferred approach is to design using low-fidelity prototypes in early project stages.

Designers can use low-fidelity prototypes to explore ideas quickly and cheaply before creating ‘high-fidelity’ prototypes that look more like the final product. Low-fidelity prototypes should be used in addition to high-fidelity prototypes - not instead of them.

Designers should help teams and stakeholders understand how low-fidelity prototypes help projects quickly and cheaply explore design ideas.

Low-fidelity prototyping tools

Sketches

Sketched prototypes, using pen and paper, are the easiest way to start exploring design ideas.

Sketches are cheap and easy to produce and can be discarded if they don’t meet your needs. This makes them perfect for the early stages of designing a service or product.

Google Suite

Designers with access to Google Suite have a range of tools available for creating journey maps, flow diagrams, quick sketches, and forms.

Mural

Mural is available for use on HMRC devices and we recommend using it for creating flow diagrams, journey maps, sketching out design ideas and creating simple screens.

Full licences may not be available for every designer, please speak to the design leadership in your programme or P&UCD Ops to find out what is available for you.

Mural templates for low-fidelity prototyping:

• Flow diagrams for GOV.UK services
• GOV.UK elements in Mural

High-fidelity prototypes

High-fidelity prototypes are detailed, coded prototypes that mimic the behaviour of ‘finished’ services. High-fidelity prototypes will help you to perform user testing and demonstrate the service to stakeholders.

HMRC’s preferred approach is to use the GOV.UK Prototype Kit. You will need a device, such as a MacBook, that isn’t managed by HMRC so you can install the necessary software.

You can follow instructions in the GOV.UK Design System to get the kit running on your unmanaged device.

Prototype support

The GOV.UK Prototype Kit is used across governments and there is a significant amount of community support available if you get stuck or need help.

Inside HMRC you can reach out in our #community-prototype Slack channel or speak to members of HMRC’s Design Resources Team. Support is also available on the cross-government Slack in the #govuk-prototype-kit channel.

You can also find out more in our prototyping club. We have a range of videos covering common tasks, like getting set up, routing and session data available on Google Drive.

Hosting and sharing prototypes

You will need a GitHub account, which you can create, and a digital HMRC login which can be set up for you by your team lead. Once you have set up your account you can use the ‘automatic prototype creation tool’.

If you are working on a new service or a new prototype follow the guidance on Confluence to create a new prototype repository. If you are working on a service where a prototype already exists, speak to the senior interaction designer on your programme or reach out on HMRC Slack #community-prototype.

You can use an existing GitHub account if you have one or you can create a new one. Full guidance on setting up your account and being added to the HMRC organisation is available in the MDTP handbook.

Remember that a GitHub account is a public profile, linking you to HMRC.

Other tools to support design and prototyping

Pattern Checker

Pattern Checker is an automated pattern and accessibility checker for government services that use GOV.UK and HMRC design patterns.

Unauthorised tools

The following tools are not authorised for use for use by service teams:

• Figma
• Miro
• Sketch

If you have a question about any of these tools please speak to the head of your profession.