Background
The FADST (Fungicide Application Decision Support Tool) project is a collaborative research initiative led by Assiniboine Community College (ACC) in partnership with the Manitoba Pulse & Soybean Growers (MPSG) and supported by the Canadian Agricultural Partnership (CAP) Ag Action Manitoba Program. The project aims to address the serious threat of white mould to dry beans, a key crop in Manitoba’s agricultural landscape.
White Mould is a serious fungal disease of legumes and pulse crops in Manitoba, caused by a highly destructive soil-borne pathogen (Sclerotinia sclerotiorum), which is difficult to manage, causing thousands of dollars in revenue loss annually. Currently, only fungicide applications are able to manage the disease, largely controlled by weather conditions, agronomic practices, and choice of dry bean varieties.
For this project, I joined the team to serve as a web developer and graphic designer with the purpose of enhancing the visual appeal of the website, adding additional functionality, improving the user experience, and meeting the college’s branding style guide.
Visual Branding
When I was brought onto the FADST development team, the first thing I noted was that the site was not displaying responsively to the device dimensions. This caused much of the website’s content to overlap, making it illegible on many devices.
I began by conducting a complete overhaul of the site’s visuals, making the site responsive to different device dimension including tablet and mobile phones.
Before:
↓
After:
I implemented a hamburger menu for small device sizes, like mobile phones.
I was also provided the college’s visual branding guidelines which I followed to visually tie FADST to the college’s existing brand image. This included using the college’s rules for use of specific fonts, colours, and layout.
I also took photographs of dry beans, canola, and peas, using a DSLR camera in the field to improve the quality on larger device displays.
Extending API Functionality
The FADST site used an API called Leaflet to display an interactive map. This map geolocates the user’s positions, allowing them to pinpoint their location on the map. It also provides a basic user interface allowing them to zoom in/out and see weather and other details for their area.
Before:
↓
After:
By reading through the API’s documentation, I was able to include a “Reset View” button. This allows the user to lerp back to the original view, in case they lost their bearings or scrolled the map out of view.
Additionally, I improved the visual hierarchy of the pop-up text to make the information easier to digest and save on screen real-estate.
Survey Results Emailing System
The “White Mould Survey” portion of the FADST website serves as a way to gather in-field information from farmers across multiple pages. Once the survey is complete, a copy is send to both the college’s email and also to the user. This allows the farmer to see fungicide application recommendations based on their crop type and survey inputs.
Using PHP and AJAX, I set up script which gathers all of the user’s survey inputs and compiles them into an email which is sent to the college and user. I set up the PHP in such a way that it calculated the risk of disease and highlights a corresponding fungicide application recommendation based off of their inputs.
A map of all the survey results for the entire year is also presented to the farmer after the survey is complete so they can see which areas of the province the disease is concentrated in. It also allows the user to view other farmers inputs to gain a holistic view of the white mould problem across the province.
Development
A real-time weather-based FADST was developed using the leaflet platform, based on the integration of weather data collected from 108 MB Ag. weather stations across the province and a disease severity model adopted from the University of Nebraska-Lincoln. The FADST will predict a municipality-scale disease risk using weather data in real-time processed for a 7-day weekly rolling average and disease severity values (DSV) of related weather parameters such as rainfall and temperature.
Enhancement
I focused a lot of my efforts on recreating much of the existing visuals using Adobe Photoshop. This helped to clean up pixel aliasing issues present in the original imagery.
Before:
↓
After:
Collapsible Menus
An alternative municipality selection menu existed on the site for users who might have trouble with the interactive map.
I strengthened the usability of this menu by creating a alphabet selector paired with an accordion menu. By clicking on a letter of the alphabet, the screen automatically scrolls to the respective section of the menu and expands that section. This allows the user to be brought directly to the municipality they are searching for without being overloaded by extraneous information.
Before:
↓
After:
Final Solution
Background
The FADST (Fungicide Application Decision Support Tool) project is a collaborative research initiative led by Assiniboine Community College (ACC) in partnership with the Manitoba Pulse & Soybean Growers (MPSG) and supported by the Canadian Agricultural Partnership (CAP) Ag Action Manitoba Program. The project aims to address the serious threat of white mould to dry beans, a key crop in Manitoba’s agricultural landscape.
White Mould is a serious fungal disease of legumes and pulse crops in Manitoba, caused by a highly destructive soil-borne pathogen (Sclerotinia sclerotiorum), which is difficult to manage, causing thousands of dollars in revenue loss annually. Currently, only fungicide applications are able to manage the disease, largely controlled by weather conditions, agronomic practices, and choice of dry bean varieties.
For this project, I joined the team to serve as a web developer and graphic designer with the purpose of enhancing the visual appeal of the website, adding additional functionality, improving the user experience, and meeting the college’s branding style guide.
Development
A real-time weather-based FADST was developed using the leaflet platform, based on the integration of weather data collected from 108 MB Ag. weather stations across the province and a disease severity model adopted from the University of Nebraska-Lincoln. The FADST will predict a municipality-scale disease risk using weather data in real-time processed for a 7-day weekly rolling average and disease severity values (DSV) of related weather parameters such as rainfall and temperature.
Responsiveness and Visual Branding
When I was brought onto the FADST development team, the first thing I noted was that the site was not displaying responsively to the device dimensions. This caused much of the website’s content to overlap, making it illegible on many devices.
I began by conducting a complete overhaul of the site’s visuals, making the site responsive to different device dimension including tablet and mobile phones.
Before:
↓
After:
I implemented a hamburger menu for small device sizes, like mobile phones.
I was also provided the college’s visual branding guidelines which I followed to visually tie FADST to the college’s existing brand image. This included using the college’s rules for use of specific fonts, colours, and layout.
I also took photographs of dry beans, canola, and peas, using a DSLR camera in the field to improve the quality on larger device displays.
Visual Enhancements
I focused a lot of my efforts on recreating much of the existing visuals using Adobe Photoshop. This helped to clean up pixel aliasing issues present in the original imagery.
Before:
↓
After:
Extending API Functionality
The FADST site used an API called Leaflet to display an interactive map. This map geolocates the user’s positions, allowing them to pinpoint their location on the map. It also provides a basic user interface allowing them to zoom in/out and see weather and other details for their area.
Before:
↓
After:
By reading through the API’s documentation, I was able to include a “Reset View” button. This allows the user to lerp back to the original view, in case they lost their bearings or scrolled the map out of view.
Additionally, I improved the visual hierarchy of the pop-up text to make the information easier to digest and save on screen real-estate.
Collapsible Menus
An alternative municipality selection menu existed on the site for users who might have trouble with the interactive map.
I strengthened the usability of this menu by creating a alphabet selector paired with an accordion menu. By clicking on a letter of the alphabet, the screen automatically scrolls to the respective section of the menu and expands that section. This allows the user to be brought directly to the municipality they are searching for without being overloaded by extraneous information.
Before:
↓
After:
Survey Results Emailing System
The “White Mould Survey” portion of the FADST website serves as a way to gather in-field information from farmers across multiple pages. Once the survey is complete, a copy is send to both the college’s email and also to the user. This allows the farmer to see fungicide application recommendations based on their crop type and survey inputs.
Using PHP and AJAX, I set up script which gathers all of the user’s survey inputs and compiles them into an email which is sent to the college and user. I set up the PHP in such a way that it calculated the risk of disease and highlights a corresponding fungicide application recommendation based off of their inputs.
A map of all the survey results for the entire year is also presented to the farmer after the survey is complete so they can see which areas of the province the disease is concentrated in. It also allows the user to view other farmers inputs to gain a holistic view of the white mould problem across the province.
Final Solution