CSS frontend support
Redesign of a management UI for farmers
CSS frontend support
(3 month Project)
Developers of Bosch Software Innovations
The Bosch Smart Agriculture web app enables farmers to have an overview of their fields and sensors. The sensors deliver data about the specific field/designation like temperature, humidity and more. Each business case has its explorer and management view. The explorer view gives a quick overview and alarms the farmer when a sensor or field needs action. The management view on the other side enables the farmer to add, edit, delete and connect locations and data sources (sensors). The goal was to redesign those interfaces and to improve the user experience for the farmer.
To get a first impression of the current interface, a UX analyze was made. With this, the pain points and inefficient flows were recognized. Interviews with the developers and contact persons of the farmers enabled important user stories and led to the main interactions which have to be made in this interface.
02 Management UI
The above and following videos show the iterations of the interface up to the final version.
The interface should be simplified and intuitive with a clear visual hierarchy. Nevertheless, the user should have all the important information and actions in one view.
During the last iteration, the decision was made to discard the wizard overlay for editing and details and to instead open these views in a new window. This was made for more stable technical development and for the user to have a better overview of his editing. The interface should be simplified and intuitive with a clear visual hierarchy. Nevertheless, the user should have all the important information and actions in one view.
03 Explorer UI
In the Explorer UI, the user wants to have a quick overview of his locations and fields. He wants to see which one needs action and where alarms are triggered.
For a more stable and easier implementation, a discussion with the developers let to this interface.
During the last iteration, the decision was made to keep the interface simple and minimalistic. The user should only see the status of the location and have the option to see further details if wanted.
04 Key Learnings and Takeaway
1. Due to the short period of this project, the focus mainly laid on the UX and not on the visual UI design. The final interface was developed with Angular material and due to that a close teamwork with the development team was very important during the whole project. Due to that, we were able to achieve a productive workflow and to prevent misunderstandings.
2. Sometimes you have to decide against a beautiful visual design to achieve the best user experience.
3. CSS is a very important skill for a designer to support the developer team to achieve the desired visual design.