Skip to main content

https://defencedigital.blog.gov.uk/2019/12/18/nelson-standards-creating-royal-navy-apps-with-a-consistent-look-and-feel/

The NELSON Standards - A design system for the Royal Navy

Posted by: , Posted on: - Categories: NELSON Standards, Royal Navy's NELSON
Vice Admiral Kohler his team watch Richard Brantingham's presentation
Richard Brantingham presents the NELSON Standards to the US Deputy Chief of Naval Operations for Information Warfare (IW) and Director of Naval Intelligence, Vice Admiral Kohler. October 2019.

Creating Royal Navy applications with a consistent look and feel

The Royal Navy’s NELSON is made up of user researchers, designers, engineers and scientists, from the military, Civil Service and industry.

We help teams in the Royal Navy to create intelligent digital services that meet user needs and support the Royal Navy’s digital transformation. 

The NELSON Standards

We are creating a design system and a web component library called The NELSON Standards to help other digital teams to deliver applications that can be used by the Royal Navy and we’re doing it in the open.

Here is an excellent post from Government Digital Services (GDS) that talks about some of the benefits of coding in the open. 

We build user interfaces that look and feel very different

There are currently hundreds of user interfaces in the Royal Navy. The following pictures show just three of these: the user interface from the Joint Personnel Administration application (JPA), one used in event reconstruction and another used by pilots. 

A screen shot of the JPA user interface
The user interface from the Joint Personnel Administration application (JPA). Source: https://www.whiteensign.co.uk/how-can-we-help/employment-services/articles/guide-to-submitting-an-application-for-immediate-benefits-pen1

 

A user interface in the Royal Navy used in event reconstruction
A user interface for event reconstruction. Source: http://tms2013.co.uk/

 

A photo of just one of the many user interfaces used in the Royal Navy by pilots
A user interface for pilots. Source: https://www.savetheroyalnavy.org/royal-navy-begins-initiative-to-maintain-its-anti-submarine-edge/

Why does the Royal Navy need its own design system?

Like many organisations, the Royal Navy is dependent on hundreds of software applications that were produced without the luxury of today’s user interface (UI) design and development practices, tools and libraries. 

Problem #1:

Many of these applications have not been updated to take advantage of modern technology and do not address current user needs.

Problem #2:

Most of these applications look and feel very different and lack consistency in design. Brad Frost, author of Atomic Design talked about inconsistency and said that it puts the burden on him, the user, to figure out what, where and how, to interpret separate interface elements. He summed this problem up to be confusing, requiring time and the mental effort, to switch between applications.

In some instances this problem might be trivial, but where users have to make mission- or safety-critical-decisions in extreme conditions, the inconsistency of design and functionality of these applications, introduces unnecessary stress for the user. 

Happy users and happy digital teams

In our User Interface Standards team, we are establishing a consistency in UI design for Royal Navy users. We want to help navy users to enjoy using software applications as part of their working lives.

But it doesn’t stop there. We’re also making it quick and easy for other digital teams to deliver great applications that are consistent with others in the Royal Navy and we’re doing that in 3 ways:

1. Creating web application building blocks

We’re creating a library of interactive components which digital teams can use to build web applications. The components we’re building are based on user research by other navy digital teams, other component libraries, and the principles and classifications of Atomic Design

This idea of building once and re-using is common in software development because it is cost effective and makes software easier to adopt and maintain. Below are examples of the basic components in our library: switch, dropdown and table.

NELSON Standards Switch component
A switch component

 

A picture of the NELSON Standards drown down component
The anatomy of a dropdown component.

 

The NELSON Standards table component
The anatomy of a table component.

We’re also building common patterns; collections of components to help other designers and developers build views that are often needed in Royal Navy applications.

For example, the image below illustrates an early prototype of a scheduling/timeline pattern which is being developed to help digital teams easily address scheduling needs in their application.

In the coming months, we will be building this scheduling pattern as well as ones that visualise geospatial and numerical data. We’ll research the needs and re-use existing standards, code and best practices, where possible.

A screenshot of the NELSON Standards schedule pattern
An early prototype contributing to our scheduling pattern.

2. Making our resources easy to access for everyone 

NELSON Standards docsite
The NELSON Standards docsite

We make everything we create easy to access for other designers and developers. We’ve built a documentation site at https://docs.royalnavy.io, our source code is publicly available on Github and our packaged software is available on the world’s largest software registry, called npm. Our component backlog is also publicly available on Github issues and we plan to share our Roadmap via Github Projects soon.

In August 2019, we tested the documentation site with external designers and developers which helped us to identify several bugs and unmet needs which are now in our backlog.

One front-end developer, a user of the design system and someone who will take our design system and build an application from it for Royal Navy users, gave us some feedback:

“Overall I found the kit easy to use and integrate into a React app and it looks like a great project to have worked on!”

However, we’re not quite there yet because we haven’t invested enough time in making our site and components accessible for all, but we plan to do so in the new year. 

3. Making it all work in military environments

To help digital delivery teams build great applications for Royal Navy users, we’ve done research on browsers, devices and network constraints.

We’re also starting to understand research done by Dstl and others, into UI design for the military and for people who have to work in adverse conditions (so that we can understand how tiredness, physical movement and low light impacts users).

We’re championing upgrades to browsers that are not able to support modern web applications and we’re starting to think about how to work with legacy applications or instances where React.js is not an option. 

"Addressing these factors and making it all work in the context of the Royal Navy is the minimum requirement. Success for us is giving our users a sense of ownership for the applications that we help to build."

We’re also working with the newly formed Defence Digital Service and other teams in the Army to help us to adapt what we’ve built into a Defence Design System that works across all military services.

How we work

Our team includes a full-time interaction designer, 2 full-time front-end developers, a part-time apprentice front-end developer, a delivery manager and a product owner.

We also work closely with other front-end developers and designers in NELSON through more informal relationships and design crits (explained well here).

We’re also supported by a team of highly experienced user researchers who help us with testing and to fully understand Royal Navy user needs. 

Using Agile methods

We subscribe to Agile principles, but use different delivery approaches depending on the type of work we’re doing. We’ve found scrum works well especially where the team is focused on a single theme, but Kanban gives us a leaner way of ensuring we’re working on the right tasks. Whether we’re using scrum or Kanban, we participate in a daily stand up, fortnightly retrospectives, and also experiment with our methods and tools frequently.       

Beyond user interfaces

In the coming months, the team’s skills and responsibilities may broaden, so that we can guide digital teams on Agile delivery (building on the service manual) and help them to build, deploy and test, server-side technology. 

Our enduring aim is to make it easy for others to build great applications for Royal Navy users, so that they can focus on addressing their unmet needs.

If you want to use, contribute to, or provide feedback, on the component library, please have a look at our documentation site or our Github repo.

For more information please leave a comment below or get in touch with us at navyiw-nelson@mod.gov.uk or visit our Twitter for our latest news

 

 

 

Sharing and comments

Share this page

1 comment

  1. Comment by za cc posted on

    The absence of fossil fuels onboard also frees up much more room for missiles and bombs.
    Nuclear electric energy provides catapults and sensors with more energy than fossil fuels.
    Most <a href="https://pickytop.com/largest-navy-in-the-world/">Large Navies</a> (like the US navy) prefer nuclear powered engines.
    Hope the new port for the Queen Elizabeth Aircraft Carrier is ample enough to accommodate the non-nuclear fossil-based Aircraft Carrier.

    Reply

Leave a comment

We only ask for your email address so we know you're a real person

By submitting a comment you understand it may be published on this public website. Please read our privacy notice to see how the GOV.UK blogging platform handles your information.