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.
Web App Design
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:
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.
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.
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.
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:
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 is the INVOLI team that has access to all features the software provides.
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:
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
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.
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 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:
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:
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:
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.
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.
If it feels like our UI/UX design company is a good match, but you still have questions about our work process, we can give you a free 3-day trial working with one of our designers.