UI/UX redesign for drone management platform

INVOLI is an expert in low-altitude air traffic information and surveillance that provides hardware and software tools for air traffic detection and visualization, drone remote identification, and live drone tracking to make the flights safe and secure.

Among INVOLI’s hardware products are:

Air traffic receivers. A ground-based device that allows users to detect all cooperative air traffic.

Remote ID trackers. A small device that users attach to their drones to track flights and broadcast Remote ID information.

The idea of INVOLI was brought to life in 2017, and, as it often happens with mature businesses that have been on the market for quite some time, by 2022 the INVOLI team understood that their SaaS platform’s design became outdated and confusing, and required a complete redesign. That’s where our dedicated UI/UX designer joined INVOLI.

Product analysis

Our primary objective in product redesign is to add more value to the client’s software so that it can better serve their users. To rethink INVOLI’s design and make it meet the consumers' expectations, we started our work by analyzing the existing product which included:

Communicating with INVOLI’s CTO to better understand the product’s purpose, its features, design and legal restrictions, stakeholders’ expectations, and so on.

Analyzing the software on our own to understand how customers use it, what works well and what doesn’t, and consequently come up with possible ways for improvement.

As a result, we were able to define that there are four main types of users within the app, each requiring a different user interface design.

Infrastructure manager

Infrastructure managers are usually farmers, private property owners, or small airports. This category of users buys air traffic receivers from INVOLI and has them installed. Infrastructure managers need the app to: 

Monitor the state of their receivers and see their serviceability

See where they are installed and manage them

See what area the receivers cover

Drone operators

These are people who own drones. This user type may have various goals (depending on what they use drones for). such as monitoring the state of crops in fields, delivering medicine, inspecting oil pipelines, and so on.

Drone operators need software access to

Plan the save route for their drone/s

Track their flights in real-time

See the no-fly zones

Get the approval for the flight from the authorities

Though our primary task was to create a new UI for the software using the old structure, a thorough product analysis allowed us to identify some flaws in the user experience as well, so our next step was to visualize the improved app structure with the help of wireframing.

One of the issues we defined and improved was the process of building and booking routes for drones. Previously, to create a new flight, a drone operator had to fill in a long and confusing form. Our designer offered to simplify it by breaking it into three parts with the help of Wizard - an effective design pattern used to make complex processes easy. 

At the time we were designing the form, the INVOLI team couldn’t tell us exactly what information they would need to collect from users so we left the minimum number of required fields to make the new form creation process as easy as possible.

We’ve already mentioned that to create a new flight, users have to fill in the form that consists of three screens. The last step of this form asks you to actually build the route for the drone on the map and we had to come up with the best way to visualize the route. This task was especially interesting for us, so here’s how we designed it:

There are three ways a user can “draw” the drone’s track: line, circle, and polygon.

The thing is that there are some zones in each country where drone flights are forbidden (or require a special request from authorities to enter) and zones that have already been booked by other drones. Thus, we had to find a clear way to show users the restricted and booked areas.

From several offered options, we chose the following: 

When laying the route using the line, it turns red if the route is booked and the user can’t enter the zone.

Showing receivers status

Previously the status and last update time were shown in a separate panel, but the receivers on the map all looked the same. So it was difficult for users to comprehend the map.

We wanted users to instantly discern the information from the map and get a quick understanding of which of their devices are active, disabled, or have an issue. We chose to visually differentiate receivers’ status using icons of different colors.

Now there are four groups of receivers on the map:

Green is for “working”

Yellow is for “selected”

Gray is for “disabled”

Red is for “error”

Besides using color to differentiate receivers’ status, all four groups have their unique icons. This way, people with low visual acuity or colorblindness can also distinguish receivers with different statuses. 

In case, a user wants to manage a certain specific receiver, they can use a left bar for more options.

As well, with a new interface, infrastructure managers can select several receivers and create groups for more effective management.

Depicting receivers’ coverage

Each receiver is able to detect air traffic within a limited distance. The further the aircraft from the receiver is, the weaker the signal. Our client wanted his users to clearly understand what their receivers' coverage is.

We chose to depict the area the cluster of receivers’ cover zones with the heatmap.

As well, users can use Layers to set map details and see receivers, traffic, or both on the map.

Additionally, infrastructure managers can use the “Show Detection” feature to see what specific aircraft are detected by each receiver.

Once the redesign was complete, we wanted to ensure that INVOLI can scale quickly and efficiently. For that purpose, we created a UI kit - a library of elements that we used to create a new interface for INVOLI (like colors, fonts, icons, inputs, and more). The product team can use it to avoid the time-consuming process that goes into creating a design from scratch.

So, next time INVOLI wants to add a new feature, they can use the UI kit to develop a design that harmoniously fits the whole product.