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.
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.
Many of these applications have not been updated to take advantage of modern technology and do not address current user needs.
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.
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.
2. Making our resources easy to access for everyone
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
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.