Dynamic legend

Developing a customized feature for oil & gas companies to sort and filter data directly on the map within certain projects using color map legend.

*Feature request. Holistic solution.

Back home

Problem 01

Oil & gas companies have issues to reference the overview map pins based on the data within a single project.

Problem 02

Letting users assign their own pin colors will defeat the purpose of the feature when data is being filtered and sorted.

Jobs to be done 01

When... I'm on the map, I have to see which oil wells are on the same stage.

I want to... have a map that colors oil wells based on their status.

So that... I don't have go over advanced filtering in the data tables.

Jobs to be done 02

When... I'm on the map, I need to quickly jump to the project that I'm looking for.

I want to... have a map that filters oil wells based on my query.

So that... I can see where the oil wells with same statuses are located.

Research

Based on the requirements, we need to find as many colors as we can so that user still will be able to quickly scan & distinguish projects with ease.

Step 1

Come up with an accessible color palette that holds all the colors (RGB) and map them from the darkest (1) to the brightest (12). In total, 264 colors to select from.

Step 2

Let's avoid any close colors that can complicate users quick scanning (avoid adjacent columns) and pick only 2 shades of the same color. Totaling: 22 colors * 2 shades each = 44 colors to choose from.

Step 3

Even withing the same column colors are too close to each other. In order to avoid this situation, we can thin out the columns by picking only every second color vertically. Totaling: 44 colors / 2 to eliminate similar colors of the shades = 22 colors.

Step 4

Color palette start looking much better. However 4 colors left that still can confuse users, let's leave only 2 of them that will be included in the Dynamic legend. Other 2 in darker column also similar, however, in this case we may want to switch the shade of the same color to keep them in. Totaling: 22 colors - 2 lookalikes = 20 colors left.

Step 5

From 264 colors in the initial map, we've extracted only 20 colors that work good on different types of map without overlapping each other. The platform itself is using IBM Carbon design System with own set of bold colors (5 colors) that can also be included in our system without interrupting the extracted ones. Totaling: 20 extracted colors + 5 bold IBM Carbon Design System colors = 25.

Prototyping solution

In the example below, dynamic legend is showing all projects on the map which status equals to "Active", "On hold", "In progress" and "New" and assigns 4 available colors.

Back home