The MVP design concept for a data science product for defense and intelligence services

Great Power Influence product is a data science-powered, web-based application for the US defense enterprise and intelligence community

The clients came to us with just an idea, and the design concept was built from scratch. The task was to create an interface that would demonstrate how a pair of states interact along the DIME (Diplomatic, Informational, Military, and Economic) vectors of influence.

One designer was working on the project for two months with almost unlimited freedom in terms of visual style. The clients wanted the design to be modern, clean, and simple, or, as they say, “dumb enough for a general to understand”.

This is what we call a perfect designer-client collaboration: when the designer gets to talk with different team members, and not just the product owner.

From the client’s side, there were also researchers and engineers on the meetings. They explained to the designer all the theory behind the product.

Deep Q-learning, DDPG, Proximal Policy Optimization, Dimensionality Reduction/ Preprocessing, Gaussian Mixtures… These are just some of the terms from the FigJam board where we were brainstorming about the information architecture of the product.

From there, we went on with the fundamentals of the application: the site map. The application was split into sections, which were global, diplomatic, informational, military, economic, and also the block of user pages such as setting, help, and so on.

Next, we started working on the user flow. Clients already knew their users' profiles well, so, for the first user flow, people go from login to Global page and then look at statistics of influence between two countries.

The basic start screen shows a grey monochrome map. The countries of interest get a colourful highlight. Only the two most important numbers are shown on the side. Too filters are available to adjust the dataset.

To learn more details, the user has to click on a country or one of the icons on the left bar. When they hover over it, they can see the meaning behind each icon. When folded, the names are hidden to save space for the big map.

Green and red arrows are used to draw attention to growth or decline dynamics in certain indicators.

Client wanted us to make a small onboarding in a form of a walkthrough that would get users started. It had to be based on a key user story: an expert preparing a presentation on Russia-Ukraine political dynamics for their boss.

We used pop-up messages that engage users. When you ask users to make an action instead of just showing how the app works, they learn faster.

Even though defense niche is new to us, we had been working with a number of data-heavy products before. So we know some tricks that help users to easily make sense of a large amount of numbers.

To make data comfortable to use for different people, we made three different types of visualizations for economic statistics:

As the number of export items is big, it wouldn’t make sense to assign a different color to each of them: they would be hard to recognize.

Using gradation of the same color, as often seen on choropleth maps, would have the same effect. That is why a limited palette of pastel colors was chosen: they are easily distinguishable and don’t have strong associations with particular items, as clean bright colors do.

The same palette is used throughout the app. Here is a bar chart on the Informational statistics page.

At the same time, we wanted to keep pages less colorful whenever it was not needed. There are also minimal one-color graphs that are not less informative and draw the attention to the dynamics of the indicator over time.

When you are the first design professional working on a product, you have the responsibility of setting the general rules, because the ones who come after will inevitably refer to your design. That is why it is important to make it consistent and understandable.