Connecting innovative data science with human interaction

About the Client

NELSON is an innovation programme within the Royal Navy. It is focused on using Artificial Intelligence and data science to build a “Ship’s Mind”, enabling better decision making. This innovation programme is part of a wider digital transformation going on within the Royal Navy.

Business Challenge

CTI used our expertise in user research, business analysis, user experience design and front-end development to bolster the core NELSON team of data and computer scientists.

We were responsible for two specific areas of the wider programme: producing a front-end development toolkit and creating a prototype based on detailed user research.

The aim of the toolkit was to enable the core NELSON team, defence contractors and agencies to rapidly create standard, highly usable interfaces. The design was targeted for specific use cases, based on the underlying NELSON data platform.

In addition, we were tasked with producing a prototype service, utilising the toolkit to meet users’ needs. These needs were identified through our research within the aviation engineering department of the new Queen Elizabeth class aircraft carriers.

Throughout this process, we worked closely with Naval Officers, civil servants and defence contractors. 

User-Centred, Agile Approach: In-Depth Discovery

The first area of our responsibility was to demonstrate how agile and user-centred design principles, set out in the Government Digital Service (GDS) service manual, could be applied to defence projects. We did this through the delivery of a system, known as the Capability Matrix, to be used by aviation engineers on the new Queen Elizabeth class aircraft carriers.

We first guided the project through a user-centred discovery process. During this, we conducted extensive interviews with potential users of the service and relevant stakeholders, to ensure that we gained an in-depth understanding of the problem at hand. We identified a number of different user types, which we captured as personas, and used the interviews to understand each persona’s goals and frustrations.

Overcoming Unique Challenges

We faced a number of challenges during this research phase. First, we had a limited pool of users, due to the highly specialist nature of the service we were designing. For some of the duration of the project, these users were at sea which made contact more difficult. This required meticulous planning and creativity in terms of who we interviewed and the research methods we used.

Due to the unique environment we were designing for, we had to undertake contextual research: there are many environments on a warship, ranging from office-like compartments to dark, intense operations rooms. We also had to understand the equipment that users may be wearing, such as flash hoods and gloves, that could cause dexterity issues.

Alpha Prototype Development

With the insights gained during discovery, we progressed to developing alpha prototypes. The first prototype was produced rapidly; we undertook user testing and gained valuable insights within only a week. We then moved on to create a more detailed second prototype, where we applied our findings to further develop the solution. Once again, we tested this second prototype with users, to gain further insight on our solutions and to identify additional user needs.

Taking this approach enabled us to mitigate the uncertainty and risk inherent in producing innovative digital services. With minimal investment, we were able to produce tangible solutions to identified requirements and quickly validate these directly with users. The learnings that came from this validation ensure future iterations will deliver value to the aviation engineering department.

Royal Navy case study mock up 2


Digital Style Guide and Front-End Toolkit

Our second major area of responsibility was to build the basis of a digital style guide and front-end toolkit, inspired by the GOV.UK Design System. The aim of this toolkit was to enable the rapid roll out of new applications, each with a consistent, web-based interface.

The style guide contains documentation about the design system used by the toolkit. It also details the components of the interface, provided by the toolkit and contains technical documentation for developers implementing the documentation. This is all accessible through the web browser within a NELSON branded application.

The toolkit itself is based on modern, industry standard web technologies, including NPM (Node Package Manager) and Vue.js. Research and development were undertaken early in the project, to compare Vue.js with React, a similar framework maintained by Facebook. Both frameworks are equally powerful, however, due to the wide range of developer skill sets using the toolkit, we decided that the shallower learning curve of Vue.js was most appropriate.


The prototype, style guide and toolkit were delivered in time for Information Warrior, which consisted of a series of trials and exercises showcasing the Navy’s progress in developing information advantage. This event involved demonstrations, showcases and engagement days, displaying both innovations on land and technology deployed on Royal Navy ships.

Our approach to delivering a solution to the needs identified in the aviation engineering department has provided a showcase within the Royal Navy. The project shows how taking a user-centred, iterative approach to producing software is able to increase the success of complex software projects, while reducing the associated costs.  

Our style guide and toolkit have provided the basis for further applications to be built upon, using the Artificial Intelligence innovations coming from NELSON. As new use cases are found, our toolkit enables the rapid, consistent roll out of new user interfaces. The groundwork we have put in place provides an extensible basis for new components to be added in the future, to build a robust style guide and front-end toolkit.

For more information, visit the Royal Navy website.