The technology behind the app includes a robust IoT system using Node.js, Next.js, MQTT for communication, and tools like Google Maps and Leaflet for real-time field visualization. The design prioritizes mobile-first usability and scalability.
When we met in autumn 2020, FarmDroids were used by farmers wishing to reduce the cost of sowing and weeding crops in an eco-friendly way. Putting customer satisfaction first, the company kept looking for ways to improve the robots’ usability and increase their value from the end-users’ perspective. That’s how the client came up with the idea of developing software that would enable remote management of the robots and improve communication between farmers, distributors, and FarmDroid’s support team.
With app development lying outside FarmDroid ApS’s core competencies, the client decided to partner up with Merixstudio. Over the last two years, we collaborated twice: first to create the MVP and then to improve the app according to user feedback and enrich it with new features.
Knowing their users’ pain points and desires, FarmDroid ApS approached us with well-defined expectations regarding the MVP’s features. To make the most of the client’s insights, we conducted a scoping session, during which we:
To deliver the functional MVP before the sowing season starts, we prioritized the features, adopted an iterative approach to their delivery, and kept balancing the scope against the time. As the backend core of the web app, we chose Node.js, which offers fast time-to-market and scalability. On the frontend, we went for Next.js and Redux. The former proved perfect for creating an application for multiple users with varying access rights and implementing a functional admin panel. Having a boilerplate that handles things like routing or data fetching for both frontend solutions significantly sped up the development time.
The tech stack choices here were determined not only by time and budget constraints, but also by the fact that we were dealing with an IoT project, whereby the web app communicates with the FarmDroids via an MQTT protocol. Having that in mind, we made a frontend wrapper that talked with FarmDroid’s hardware and used React hooks for fetching and sending data in real-time. The IoT nature of the project influenced our QA efforts as well. Because of that – and the product’s seasonality – software testing relied on data manipulation and simulation of the droid’s actions with MQTT.
The main value of the app lies in the remote management of the droid and its path, which is why we paid close attention to the map-related aspects of the software. We went for Google Maps, which offers satellite views, and matched it with Leaflet and PixiJS for drawing the field on canvas. Calculating the coordinates of the droid and overlaying canvas elements on the map proved to be a challenge on its own because the droids record the data on a 2D plane – the app rose to it thanks to the client providing us with complex equations.
Since the farmers would use the app outside, we created a mobile-first design with contrasting colors. On the tech part, we settled on AntDesign. On the one hand, its out-of-the-box features like buttons, checkboxes, or form validation gave us the time advantage; on the other, it was easily customizable to match the client’s branding.
A few months after the MVP’s release, FarmDroid ApS returned to work on the next major release of the web app. Before the kick-off workshop, the client shared a backlog of use cases with user stories, feedback, and some wireframes. This helped us identify areas for development and design improvement and prioritize new features that would make it to V2.
Knowing what bothers users the most, we started with a frontend refactor. First, we updated the tech stack with TypeScript and improved the app’s architecture. Then, we took care of the map module. At the MVP stage, it was reported to crash the app sometimes if it’s been running for too long. After the rewrite, its performance improved significantly, which was reflected in the users’ positive comments.
The UX/UI work focused on coherence. First, we examined the MVP’s interface and tweaked it to improve the user experience, e.g., by redesigning the login screen. Then, we set it against the design needs brought about by the introduction of new features, such as new statuses, tabs, filters, or improved droid pass visualization. Paying careful attention to consistency across the entire app, we minimized the design debt, thus increasing the software’s usability.
The core of this project and our collaboration with FarmDroid ApS is user-centricity. So far, every new feature has been focused on delivering additional value to farmers, from improved map views to the recently introduced event overview, which gives insight into the obstacles the droid came across and the resulting errors. Without a doubt, FarmDroids and its software make a change.
Users can see the robot’s position on the field, track its current movements, and remotely manage the path it follows, e.g., by configuring corner points and obstacles or switching certain passess on and off.
Users can go through the list of obstacles the droid came across and learn more about the details of the resulting errors.
Depending on the internet connection, users have access to still pictures or live streaming of what the robot’s doing at the moment.
Distributors can view the list of their droids with information about the devices’ status, ownership, and service package, as well as filter them by these criteria.
Farmers can quickly communicate with support and add service tickets.
.svg)
