SERGE. SERious Gaming, Evolved

At a Glance
Domain Simulation - Wargaming - Defense
Type UX research (15%), UX design (85%)
Skills User flow, information architecture, wireframes, prototypes, workshop
Tools AdobeXD (1st phase), Figma (2nd phase)
Duration 1+ year (on-going)

Serge is a browser-based war-gaming tool used by the British Navy.


  • Provide a platform for game designers to create any type of wargame scenarios
  • Design a user-friendly web interface for players to interact
  • Record every in-game move and interaction for future analysis

Player UI - communication channels

Target Users:

  • Wargame designers and analysts
  • Navy trainees to high-rank officers


  • Only one interface to support multiple functions: mapping, communications and admin
  • Multiple displays: touch table, interactive whiteboard, laptop screen and large monitor
  • Capabilities need to be as close to reality as possible: this is used for training or simulation purposes, not for fun.

Team members

Core Team

  • Product owner & developer (PO)
  • Lead developer (LD)
  • UX designer (UX - me)

Plus: additional developers (up to 3), graphic designer (as needed)


First phase: basic framework & communication channels

I worked closely with the product owner on the first steps:

- User flows for game designer, player, umpire

- Game admin architecture

Game designer UI - wireframe

Game designer UI

- Layout of player & umpire UI: 2 different and flexible options

2 options for general layout

- Low-fidelity wireframes of communication channels

Player UI - wireframe

Both PO and lead developer developped the back-end and front-end. A graphic designer suggested different high-fidelity designs before we settled on a version of a material design dark theme.

The first release was tested during a wargame in July 2019. PO and LD could attend thanks to their security clearance (I could not unfortunately). They were able to observe the game in real-time and identify additional needs as well as the pain points users were facing.

Player UI - communication channels

Second phase (on-going): mapping capabilities & task groups

A first workshop allowed us to review the way players and designers interact with a map and to discuss the best options to implement digital mapping.

A very quick implementation (one month) followed by testing with trainees gave us valuable feedback to refine the mapping features. We are now working on adding task groups.

Umpire UI - Map view of all forces - Mockup

Umpire UI - Map view - Web interface - work in progress