UI overhaul for
a data analysis platform
When Gamaya turned to us they already had a prototype of this solution, but they wanted to improve it using the best UX design practices.
Gamaya is a Swiss company that produces technology for agricultural data processing and analysis allowing farmers to optimize agriculture operations, increase crop production, and monitor crop growth.
Gamaya collects agricultural data from open-source satellite data sources and drone images. Drones that Gamaya uses have integrated HSI cameras. These cameras are designed specifically for SenseFly eBee Plus drones, but they can be integrated into almost any fixed-wing or multi-rotor drone platform.
Web App design
To process and analyze data, Gamaya uses its proprietory AI modeling system that produces detailed phenological and physiological crop traits. As a data intelligence provider, they have an API that allows for integrating their data analytics system to any farm management platform.
However, they are also working on their own data visualization solution that lets farmers monitor fields and analyze specific agronomic issues such as nutrient deficiencies, pest, and weed infestations through a convenient user interface.
We adapted our design to this library
To redesign the Gamaya's app and at the same time reduce the time and effort of web developers, we found a solution in technology.
Gamaya's app is built on React, one of the best frontend tools for building web user interfaces. It has a component-based architecture, which means developers can create reusable components and assemble existing ones in various combinations.
This strategy reduces software development time, making it faster and more affordable to release a web application.
When we looked at the prototype of Gamaya, we, like any designer, wanted a complete overhaul. The user interface was a bit clunky and confusing. Too many options, a variety of information, complex navigation – every step the user took would add to their cognitive load.
We wanted to minimize the interactions and clean up the user interface so as to help the user handle the needed information comfortably.
To help developers implement needed design components using Ant Design, we prepared a UI kit and taught developers how to use it.
We wrote a small guide with links to the Ant's components and ran a demo session where we explained how to implement complex components. We even tried to implement some of them ourselves to make sure it's feasible.
To implement some of our design decisions, developers would have to write custom code. This would add up to the overall project costs and become a burden for the Gamaya's team that lacked technical resources.
We decided to give up custom elements in favor of rapid development.
Ant Design is a ready-made React UI library similar to Angular's Material Design. It offers a set of high-quality React components that developers can use to implement the design in record time.
This way we saved Gamaya's development team the time and hassle of making changes in development.
As we already mentioned, Gamaya uses two types of data sources to give customers knowledge about their crops:
Drones with digital imaging capabilities that give farmers a richer picture of their fields in a specific location.
Open source NASA remote sensing satellite data.
When the data from drones get uploaded to the system, Gamaya analyses the photos and glues them together in the right order.
A user can choose what data they want to see: open-source data or images taken by drones. We made these options accessible through Layers.
Users can also track information across different fields in various locations using tables:
Farmers can order drones to monitor their fields through the app. We designed a special calendar that reflects the information on where the drone must fly, and when and what they need to check during their flight mission.
For example, a tobacco company or a sugarcane producer can use Gamaya to track plant growth stages and observe the impact of viruses or drought on the plants in real-time.
The images taken from drones show planting gaps (highlighted red on the screenshot below):
A manager then can analyze the scout's images through the Gamaya's user interface:
Other than open-source data and drone images, farmers can also get the information about their fields by employing scouts who inspect fields and record weed, insect, disease and other observations by uploading photo footage to the system.
We made a convenient user interface for the scout that allows them to upload photos and comment on the problems they found.
To spread the product to a new market, the Gamaya team came up with an idea to create a small product for golf clubs. Using the data from drones that get uploaded on the Gamaya platform, golf club owners can have a bird’s-eye view of their entire golf course and study its health.
They can analyze the irrigation and identify problems across the entire golf course. Being able to know which areas require more maintenance than others allows the golf course managers to deploy resources appropriately.
Reusing materials to create a brand new product
To design this product we used the main platform as a basis. We cut unnecessary elements keeping a large part of the design unchanged. This way our client's team saved a great amount of time, costs, and resources. They basically built two products at the cost of one.
During our three-month engagement, we overhauled the user interface making it cleaner and more pleasant to work with. We changed the UI using ready-made components that led to minimum work on the developer's side. This way we helped the Gamaya team reduce the cost of software development.
Head Of Software
The designs met the requirements and expectations of the internal team. Eleken responds quickly to inquiries and is willing to adapt where necessary. The team is hard-working and collaborative, facilitating a smooth workflow.