INVOLI

UI/UX Redesign for Drone Management Platform

When talking about air traffic, most of us would probably think of planes that serve tourist purposes first. However, there’s a much wider range of use cases for flying vehicles such as airplanes, helicopters, and drones.

They can be used to extinguish fire, conduct military or rescue operations, transport medicine, monitor yield growth, inspect powerlines, and much more.

Still, the operations mentioned above require a complex safety portfolio. Aircraft and drone operators need to provide strategic and tactical mitigations of ground risk, air risk, and surveillance. It’s essential for them to have complete traffic awareness.

INVOLI’s product vision is innovative, and that’s why they wanted their app’s look to be. Our task was to completely rethink the user interface of the web-based application, but use the old app structure as a basis.

Additionally, we had to create UI/UX designs for a new piece of functionality.

The redesign had to make a product more attractive to new users without alienating existing ones. Therefore, the INVOLI team needed UI prototypes to gather internal and external customer feedback and see how people would react to the updates.

Services

Web App design
UI/UX design

Air traffic informationasa-service

Overhaul the UI to make the app look modern and intuitive

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.

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.

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.

INVOLI.Live

A web-based interface that allows users to view all cooperative air traffic and drones in one place, establish restricted areas, and get warnings for threats and intrusions.

INVOLI.API

Integrates air traffic information directly into users’ operations tools.

INVOLI.Analytics

Provides users with on-demand surveillance data analytics which they can use to assess air risks.

Besides, INVOLI offers a robust cloud-based solution that visualizes data obtained through receivers and trackers, allowing to monitor and manage drones, and assess air risks.

To ensure we make the right design decisions, we had to get a deep understanding of the existing product and its users.

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.

Product analysis

Admin is the INVOLI team that has access to all features the software provides.

Admin

Defining the user personas allowed us to understand the path each user type takes to complete a job they hired INVOLI for, so that we could build the app structure with all the necessary screens and features.

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:

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.

Authorities are those who accept or deny requests from the drone operators and may create no-fly zones. However, we didn’t work on functionality for this user type.

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

Authorities

Wireframes

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

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 need software access 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

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 use prototyping to capture both the look and feel of the software so that our client can then test the new interface on real users.

Here is how we redesigned the platform and visualized it with prototypes:

In the old software version, only admins had access to receivers, so we needed to create an interface that would let the infrastructure managers easily monitor their devices.

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.

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.

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.

Building routes

Showing receivers status

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.

Prototyping

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.

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

Building routes

Depicting receivers’ coverage

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”

Red is for “error”

Gray is for “disabled”

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.

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.

Visual language

The result

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.

Being deeply invested in understanding the business and the current solution enabled our designer to come up with interesting and actionable ideas on how to improve the look and feel of INVOLI.

Thanks to the final UI prototypes the INVOLI team got a big picture of their refurbished product. It allowed them to understand their further scope of work - what features to add, and what functions are better to dismiss at all. And most importantly, by showing the prototypes to existing customers and stakeholders, the INVOLI team received valuable feedback that helped them define a further direction for improvement.

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.

Raphael Zugg
CTO of INVOLI

The UI prototypes by Eleken have been a significant help in gathering internal and external customer feedback. The team has stayed on track by effectively utilizing communication tools for daily interaction. They have also provided valuable suggestions for the company's further improvement.

Let us know if you need help in creating a design that breath for your SaaS product as we’re Pros in this field.