Making our design system a useful tool for teams
A diagram showing instructions for designers.
We have created the Home Office Design System to supplement the GOV.UK Design System. Our design system allows us to provide reusable components and patterns for both internal and public-facing Home Office services. Recently, we've made lots of improvements to our design system so we wanted to share some of the biggest changes.
Clear guidance on styles
While the GOV.UK Design System helps to make public Government services consistent, we can’t use certain elements, such as the logo and font, for services that don’t sit on GOV.UK. Instead, we use our own design style with a different font, logo and colours.
We’ve added clear guidance on when to use these different page styles. This means that teams are able to pick up the appropriate styles and use them with as little effort as possible.
New design resources
We’ve developed design assets such as wireframing kits and user flows to help our designers. Our community has recently added to this by creating storyboarding and workshop templates to help teams work more effectively.
An example of one of our storyboards: Getting a lateral flow Covid test.
Our Accessibility and Digital Inclusion team have created a suite of new guidance to help teams understand and meet our accessibility standards. This includes topics from language to links to audio and video considerations. We are adding to this new accessibility section over time, so watch this space.
Originally we only defined our components in HTML and CSS code. They were only intended for use by designers when prototyping.
But this meant that our development teams were forced to reimplement the components when building real services. Often some features of the design would be missed, especially around accessibility.
To prevent this and to bridge the gap between design and development we decided to provide production-ready implementations in React.
This new codebase builds upon the code in the GOV.UK Design System. This commonality:
- allows us to take advantage of a lot of useful functionality, to support responsiveness and accessibility
- provides us with a way to easily absorb upstream changes
- makes our work more useful for other departments (reducing wasted effort across Government)
We've also created a new prototype generator for internal products and services.
In the future this may double up as an application generator or dev-kit. This would allow us to build user interfaces more quickly as well as provide a way of sharing bespoke components between projects. This bringing together of prototyping and production technology will allow designers and developers to work more closely together and so speed up iteration.
Previously a tool primarily for designers, we have now transformed our design system into something that provides broader help and support for delivery teams in the Home Office. This translates into our ability to build internal and public-facing services designed for everyone in mind.
Contact us at firstname.lastname@example.org if you’d like to get involved or know more.
You may also be interested in:
- Running our first remote design crit
- Developing accessible services: 'It's a team sport'
- Establishing the Home Office User Research Ethics Board
Latest News from
Spiking of university students to be tackled24/05/2022 15:17:00
Department for Education and Home Office launch a new working group dedicated to tackling the number of spiking attacks against students.
Places of Worship Protective Security Fund open for applications23/05/2022 11:10:00
Mosques and Muslim faith schools given access to £24.5 million for security measures to protect their places of worship and schools.
Home Secretary meeting with Rwandan Minister Dr Vincent Biruta19/05/2022 11:10:00
Priti Patel and Rwandan Minister Dr Vincent Biruta met in London to update each other on progress on the new partnership agreed between the UK and Rwanda.
Home Secretary unveils ambitious plans for fire reform18/05/2022 14:05:00
Robust reforms to fire safety introduced to strengthen fire and rescue services, putting the majority of the Grenfell Tower Inquiry recommendations into law
Home Secretary backs police to increase stop and search16/05/2022 15:20:00
Police will have greater powers to prevent knife crime and tackle serious violence.
Bahrain and Saudi Arabia get UK electronic visa waiver status13/05/2022 11:10:00
Bahrain and Saudi Arabia to join other Gulf Cooperation Council countries with electronic visa waiver status for UK travel.
Smuggling gang sentenced after locking migrants into wardrobe 'hides'12/05/2022 11:10:00
Five people smugglers have been sentenced for locking migrants into purpose-built 'hides' made from wardrobes and secured with screws.
First Illegal migrants told of impending removal to Rwanda11/05/2022 11:10:00
Government takes first steps to operationalise the Migration and Economic Development Partnership.