UI/UX redesign for drone management platform

Air traffic information-as-a-service

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.

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.

• INVOLI.Live is 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.

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.

Overhaul the UI to make the app look modern and intuitive

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.

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

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.

Admin

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

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

Authorities

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.

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.

Wireframes

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.

Prototyping

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:

Building routes

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.

• When people pick a circle or a polygon to create a flight and hit the restricted zone that is part of the route (not the whole chosen area) the no-fly zone is highlighted in red, so that the user can lay an alternative route.

Visualizing receivers

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.

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.

Visual language

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.

The result

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.

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.

Raphael Zugg, CTO /