We're proud to launch 2 products that will help the Ministry of Defence (MOD) create consistent digital products and services.
As the product manager on the Frontend team, I can't wait to see designers and developers use MOD.UK Frontend and the Design Library to:
- save time
- help users
- collaborate
MOD.UK Frontend
MOD.UK Frontend is a collection of 30 components and their associated code.
Components are reusable parts of the user interface - a bit like building blocks.
Frontend developers will be able to use our thoroughly tested components to build products and services.
Our components are closely based on GOV.UK Design System components - we've updated them with MOD branding, so they're suitable for users in Defence. We've changed the component:
- colours
- fonts
- logo
Reusable components will save MOD digital project teams time. Why waste money creating new radio buttons for your product when we've got an accessible and tested component for you to use?
Design Library
We've built the Design Library in Figma, a widely used online design app.
The Design Library has the same components as MOD.UK Frontend. By adding the components to Figma, we've made it easy for designers to prototype and test designs.
We've also included additional experimental components - teams will need to test these with users. If you use them in your project, please share your research.
We're planning a Figma account for Defence users that will help teams update their designs when we update our components.
Why align to the GOV.UK Design System?
One of our biggest challenges has been deciding what approach to follow. We've conducted extensive research with teams across MOD to find out how they work and what they and their users need.
We chose to align to the GOV.UK Design System, which uses HTML and Nunjucks code snippets, because:
- GOV.UK components are thoroughly tested and widely used - designers and developers can be confident that their products will be accessible to a wide range of users
- MOD (like all government departments) must follow the government Service Standard - aligning to GOV.UK supports this requirement
- our user research shows almost everyone is familiar with GOV.UK style, particularly as many have used online government services during the coronavirus (COVID-19) pandemic
- many Defence products and services do not require complex user interaction - I plan to write about progressive enhancement in a future blog post
- products such as the Defence Service Manual, service pages and other internal services were already aligning to GOV.UK styles
- we'll benefit from future improvements and changes to GOV.UK designs
Building a foundation for reuse
I'm confident the MOD.UK Frontend and Design Library provide a firm foundation for designers and developers to build on.
However, our research shows that MOD users also need designs and components not in the GOV.UK Design System - and by extension, our first release.
We've started with a simple approach and created the basic building blocks. Now we can add new reusable components over the coming months that meet specific needs of MOD users. As we add components, we will ensure we meet the standards that MOD products and services will be assessed against.
We need your feedback and engagement
We're inviting designers, developers and other user-centred design professionals to use MOD.UK Frontend and the Design Library.
We'll be working closely with Foundry teams to support early adoption, but we welcome the opportunity to engage with anyone who wants to use our products.
Please contact the Frontend team to share your feedback.
We're keen to prioritise the next most important things to do beyond the products we've delivered to realise the benefits of reuse in design and development.
MOD.UK Frontend and the Design Library are an important step towards a more consistent and accessible experience for Defence service users. We look forward to working with users and stakeholders to build on this foundation.