Empowering Defence teams to create exceptional digital services

Overview

We were appointed to collaborate with the Ministry of Defence on the Service Manual project. Our role as Interaction Designers involved focusing on the design and development of this essential product.

We worked closely with a Content Designer, User Researcher, Project Manager, and Product Owner to create the Defence Service Manual. This product empowers teams within Defence to design and deliver exceptional digital services while ensuring compliance with service standards.

Preparing the foundations

To launch the Defence Service Manual efficiently, we extended the GOV Frontend and customised it to align with the Ministry of Defence branding. We designed new components and patterns to present information in a visually digestible format, moving beyond simple content presentation.

One notable example is our “dos and don’ts” list component, inspired by NHS Digital. This component was created to help users clearly understand what actions they should or should not take. We also collaborated on this component with Dean Vipond, the former head of design at NHS Digital, who is now part of a different team at the Ministry of Defence.

Technology choices

The primary focus of the service is content and guidance material, making its configuration essential for non-technical content designers to publish content more efficiently and comfortably.

We selected Eleventy (11ty) as the static site generator for this project, as it perfectly suited our needs and aligns with previous projects we have undertaken. 11ty is highly customisable, fast, well-documented, and user-friendly, making it a pleasure to work with.

To streamline content management for non-technical designers, we configured 11ty to utilise Markdown, an easy-to-read and easy-to-write plain text format that eliminates the need for HTML or Nunjucks.

We implemented a combination of GitHub and Netlify for our workflow. GitHub was used for storing, managing, and tracking code changes, while Netlify managed the build and development cycle. Additionally, we integrated Netlify’s highly configurable form-handling technology to effectively manage all feedback forms.

User testing and insights

We conducted extensive testing with a diverse group of users, including User Researchers, Content Designers, and Interaction Designers from the Ministry of Defence and the Royal Navy. This research provided vital insights that enabled us to design a service that is usable across all teams and areas of expertise.

We also implemented methods for collecting user feedback, which we are currently analysing to make necessary adjustments to meet user needs and requirements. Additionally, we introduced Google Analytics and Microsoft Clarity as tools for gathering actionable data to improve the service.

One of our favorite tools, Microsoft Clarity, allows us to observe user interactions with the service, including click patterns and site navigation. Watching anonymous users engage with the service provided valuable insights, and having this data readily available for the team to review was incredibly beneficial. We highly recommend integrating Microsoft Clarity into your service for enhanced user interaction analysis and data collection.

Going above and beyond

Mia, our content designer, crafted a blog post to promote the Defence Service Manual on the Digital Defence Blog. To enhance the post, we needed an appealing photograph to showcase the service, along with some hand-drawn illustrations to demonstrate user interactions with the service. The team set the scene, and both the photograph and illustrations were created by us.

The results

We designed and developed a service manual tailored to the Defence sector, drawing inspiration from the Government service manual. The product was successfully launched in less than four months, and we continue to iterate on the offering to enhance the experience for all users.