Challenge Overview
Welcome to "Living Progress - AgriUp - Responsive Farmer App UI Prototype Challenge". In this challenge, we need your help to create responsive HTML5 prototype for farmers where this apps will provides information/forecast/tips regarding their farming/agricultural condition that will be useful to improve their crops production and to avoid crop failures based on their location. Read more details below and Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background information
In Guatemala, 5 million farmers lack access to location-specific weather information and thus suffer major losses to their crops. Information exists but is not conveyed in the right way and time.
500 million people worldwide are smallholder farmers. They are a great asset of global agricultural economy, producing 80 % of the food consumed worldwide. However, they are living in very difficult conditions, and out of them about 400 million are among the poorest and hungriest people on the globe (half of the world's hungry people)
In many cases, such as in Guatemala, not only smallholder farmers do not produce any surplus for selling, but barely manage to sustain their families and often work another part-time job to survive.
Their crop production and their overall conditions could be drastically improved if they would have access to reliable, specific and updated information on weather and agriculture. Information about weather, for example, could help them take the right decisions and avoid heavy losses; actionable tips about agriculture could ensure they follow modern and effective techniques in agriculture, rather than relying only on traditional knowledge; information about prices could guarantee fair market conditions for their crops; nutritional advises could help them follow a more balanced diet preventing nutritional deficiencies.
Information about weather, agriculture, nutrition and market already exists, being produced by different stakeholders and sources in each country – national meteorological office, researchers, UN agencies, and NGOs. However, this information:
1) does not reach poor farmers
2) is not in a format that can be easily understood by them. In the case of weather forecasts in Guatemala, for example, only a 30 % of farmers have access to generic sources of forecasts (radio or TV), far from being actionable or specific-enough for local microclimates.
Challenge Goals
Create a user-friendly, low-bandwidth smartphone app / website providing location-specific information, including weather alerts, agricultural advice & nutrition tips
Focus Area :
Connectivity, Agriculture, Climate Services
User Case Scenario:
Farmers:
- As a farmer, I want to view weather predictions for the next 3 days in my village ("Risk of heavy rain in the next week")
- As a farmer, I want to view seasonal forecasts ("average of 25 degree for the next 3 months")
- As a farmer, I want to receive tips on what to sow and when ("Consider sowing 'maicillo' rather than maize, you have more chances to have a good production")
- As a farmer, I want to ask questions to fellow farmers or experts ("What kind of fertilizer can I use for my tomato plantation?" or "My plants have a white fungus. What can I do?")
- As a farmer, I want to answer questions from other farmers
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation errors and warnings.
- Test in all the required browsers.
Screen Requirements
00. Splash/Login Screen
Desktop Reference: 00.1_Login.jpg
Mobile Reference: 00.1_Login.jpg
- Default screen that will appear everytime farmer access the apps.
- Show this screen for several seconds before farmer being redirected to dashboard screen.
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
01. Dashboard Screen
Desktop Reference: 01.1_Dashboard.jpg, 01.2_Dashboard_with_search_location.jpg
Mobile Reference: 01.1_Dashboard.jpg, 01.2_Dashboard with navigation.jpg, 01.3_Dashboard_with_search_location.jpg
- This screen will show summary and important informations related to farmer crops such as weather information for today and for the next 3 days, daily tips, and prices for crops in the market.
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
- Farmer will be able to check another informations for different places by changing the locations via search form (01.2_Dashboard_with_search_location.jpg)
- There will be main navigation available in this screen so farmer can navigate to different pages in the apps.
02. Weather Forecast Screen
Desktop Reference:02.1_Weather_forecast_today.jpg, 02.2_Weather_forecast_weekly.jpg, 02.3_Weather_forecast_weekly_details.jpg
Mobile Reference: 02.1_Weather_forecast_today.jpg, 02.2_Weather_forecast_weekly.jpg
- Farmer can access this page via main navigation menu.
- Farmer can check weather forecast from this screen based on period of time (daily and weekly)
- There will be an alert or notification from administrator regarding today weather forecast
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
- In weekly tab, farmer will be presented with summary of informations regarding weather forecast for the entire weeks.
- In weekly tab, farmer will be able to check each weather forecast details if necessary (02.3_Weather_forecast_weekly_details.jpg), Notice that the mobile screen don't have this layout, so replicate daily weather forecast for this screen.
03. Tips Screen
Desktop Reference: 03.1_Tips.jpg, 03.2_Tips_sowing.jpg, 03.3_Tips_sowing_details.jpg.
Mobile Reference: 03.1_Tips.jpg, 03.2_Tips_sowing.jpg, 03.3_Tips_sowing_details.jpg
- Farmer can access this page via main navigation menu.
- Farmer will be provides with several main category of tips that they can browse through regarding farming activity in their area (03.1_Tips.jpg)
- Farmer can drill down to tips sub category (03.2_Tips_sowing.jpg) and then check the tips details (03.3_Tips_sowing_details.jpg)
04. Discussion Screen
Desktop Reference: 04.1_Discussion.jpg, 04.2_Discussion_with_ask_question.jpg, 04.3_Discussion_Details.jpg, 04.4_Discussion_Details_with_answer.jpg.
Mobile Reference: 04.1_Discussion.jpg, 04.2_Discussion_with_ask_question.jpg, 04.3_Discussion_Details.jpg, 04.4_Discussion_Details_with_answer.jpg
- Farmer can access this page via main navigation menu.
- If farmer needs some help or wants to discuss particular things about their crops and farming activity, they can check discussions or create new thread and ask other farmers about solution for their problem in this screen.
- By default, farmer will be presented with latest and popular discussions in this screen (04.1_Discussion.jpg)
- If farmer cannot find any discussion topic that match with their problem, they can create new discussion via clicking "New Question" button (04.2_Discussion_with_ask_question.jpg).
- If farmer find discussion topic that similar to their problem, they will be able to check the discussion details to read the discussion in order to find the solution (04.3_Discussion_Details.jpg)
- If farmer find some discussion topic that still open and they know the answer, they can participate and answer the questions from other farmers via clicking "Write Answer" button (04.4_Discussion_Details_with_answer.jpg)
05. Help Screen
Desktop Reference: 05.1_Help.jpg, 05.2_Feedback.jpg, 05.3_Feedback_with_write_feedback.jpg, 05.4_Feedback_with_rate.jpg, 05.5_Feedback_Details.jpg
Mobile Reference: 05.1_Help.jpg, 05.2_Feedback.jpg, 05.3_Feedback_with_write_feedback.jpg, 05.4_Feedback_with_rate.jpg, 05.5_Feedback_Details.jpg
- Help tab will show list of guidance and step by step instructions for farmer to be familiar and able to use the application easily.
- Feedback tab will show list of review from other farmers/testimony. In this tab, farmer user also will be able to gave their feedback via clicking "Write feedback" button.
- Farmer will be able to write feedback and rate the apps via this screen (05.3_Feedback_with_write_feedback.jpg and 05.4_Feedback_with_rate.jpg)
- Once farmer filled in the feedback form, it will be shown in feedback tab (05.2_Feedback.jpg)
06. Market Prices Screen
Desktop Reference: 06.1_Market_Prices.jpg, 06.2_Market_Prices_with_filter_popup.jpg, 06.3_Market_Prices_Goods_Details.jpg, 06.4_Market_Prices_Goods_Details_with_filter_popup.jpg
Mobile Reference: 06.1_Market_Prices.jpg, 06.2_Market_Prices_with_market_popup.jpg, 06.3_Market_Prices_with_filter_popup.jpg, 06.4_Market_Prices_Goods.jpg, 06.5_Market_Prices_Goods_Details.jpg, 06.6_Market_Prices_Goods_Details_with_filter_popup.jpg
- Farmer will be able to check crops prices in surrounding markets near their locations.
- Farmer will be able to filter and set which particular market area that they want to check.
- Farmer can check the prices in three ways:
-- Check all crops items in all markets (06.1_Market_Prices.jpg)
-- Check particular crop items in all markets (06.3_Market_Prices_Goods_Details.jpg)
-- Check all crops items prices in one particular market (07.1_Market_Details.jpg)
07. Market Details Screen
Desktop Reference: 07.1_Market_Details.jpg, 07.2_Market_Details_with_filter_popup.jpg
Mobile Reference: 07.1_Market_Details.jpg, 07.2_Market_Details_with_filter_popup.jpg
- This is a continuation screen from Market prices screen above.
- In this screen, farmer will be able to check all crop items prices in one market along with the prices fluctuation.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You can use SASS for this challenge (Recommended)
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- Storyboards and All necessary flow documents can be found in forum!
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background information
In Guatemala, 5 million farmers lack access to location-specific weather information and thus suffer major losses to their crops. Information exists but is not conveyed in the right way and time.
500 million people worldwide are smallholder farmers. They are a great asset of global agricultural economy, producing 80 % of the food consumed worldwide. However, they are living in very difficult conditions, and out of them about 400 million are among the poorest and hungriest people on the globe (half of the world's hungry people)
In many cases, such as in Guatemala, not only smallholder farmers do not produce any surplus for selling, but barely manage to sustain their families and often work another part-time job to survive.
Their crop production and their overall conditions could be drastically improved if they would have access to reliable, specific and updated information on weather and agriculture. Information about weather, for example, could help them take the right decisions and avoid heavy losses; actionable tips about agriculture could ensure they follow modern and effective techniques in agriculture, rather than relying only on traditional knowledge; information about prices could guarantee fair market conditions for their crops; nutritional advises could help them follow a more balanced diet preventing nutritional deficiencies.
Information about weather, agriculture, nutrition and market already exists, being produced by different stakeholders and sources in each country – national meteorological office, researchers, UN agencies, and NGOs. However, this information:
1) does not reach poor farmers
2) is not in a format that can be easily understood by them. In the case of weather forecasts in Guatemala, for example, only a 30 % of farmers have access to generic sources of forecasts (radio or TV), far from being actionable or specific-enough for local microclimates.
Challenge Goals
Create a user-friendly, low-bandwidth smartphone app / website providing location-specific information, including weather alerts, agricultural advice & nutrition tips
Focus Area :
Connectivity, Agriculture, Climate Services
User Case Scenario:
Farmers:
- As a farmer, I want to view weather predictions for the next 3 days in my village ("Risk of heavy rain in the next week")
- As a farmer, I want to view seasonal forecasts ("average of 25 degree for the next 3 months")
- As a farmer, I want to receive tips on what to sow and when ("Consider sowing 'maicillo' rather than maize, you have more chances to have a good production")
- As a farmer, I want to ask questions to fellow farmers or experts ("What kind of fertilizer can I use for my tomato plantation?" or "My plants have a white fungus. What can I do?")
- As a farmer, I want to answer questions from other farmers
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation errors and warnings.
- Test in all the required browsers.
Screen Requirements
00. Splash/Login Screen
Desktop Reference: 00.1_Login.jpg
Mobile Reference: 00.1_Login.jpg
- Default screen that will appear everytime farmer access the apps.
- Show this screen for several seconds before farmer being redirected to dashboard screen.
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
01. Dashboard Screen
Desktop Reference: 01.1_Dashboard.jpg, 01.2_Dashboard_with_search_location.jpg
Mobile Reference: 01.1_Dashboard.jpg, 01.2_Dashboard with navigation.jpg, 01.3_Dashboard_with_search_location.jpg
- This screen will show summary and important informations related to farmer crops such as weather information for today and for the next 3 days, daily tips, and prices for crops in the market.
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
- Farmer will be able to check another informations for different places by changing the locations via search form (01.2_Dashboard_with_search_location.jpg)
- There will be main navigation available in this screen so farmer can navigate to different pages in the apps.
02. Weather Forecast Screen
Desktop Reference:02.1_Weather_forecast_today.jpg, 02.2_Weather_forecast_weekly.jpg, 02.3_Weather_forecast_weekly_details.jpg
Mobile Reference: 02.1_Weather_forecast_today.jpg, 02.2_Weather_forecast_weekly.jpg
- Farmer can access this page via main navigation menu.
- Farmer can check weather forecast from this screen based on period of time (daily and weekly)
- There will be an alert or notification from administrator regarding today weather forecast
- Background images needs to be separated (stockphoto image + blue opacity layer), so we can replace the stockphoto images easily in the future.
- In weekly tab, farmer will be presented with summary of informations regarding weather forecast for the entire weeks.
- In weekly tab, farmer will be able to check each weather forecast details if necessary (02.3_Weather_forecast_weekly_details.jpg), Notice that the mobile screen don't have this layout, so replicate daily weather forecast for this screen.
03. Tips Screen
Desktop Reference: 03.1_Tips.jpg, 03.2_Tips_sowing.jpg, 03.3_Tips_sowing_details.jpg.
Mobile Reference: 03.1_Tips.jpg, 03.2_Tips_sowing.jpg, 03.3_Tips_sowing_details.jpg
- Farmer can access this page via main navigation menu.
- Farmer will be provides with several main category of tips that they can browse through regarding farming activity in their area (03.1_Tips.jpg)
- Farmer can drill down to tips sub category (03.2_Tips_sowing.jpg) and then check the tips details (03.3_Tips_sowing_details.jpg)
04. Discussion Screen
Desktop Reference: 04.1_Discussion.jpg, 04.2_Discussion_with_ask_question.jpg, 04.3_Discussion_Details.jpg, 04.4_Discussion_Details_with_answer.jpg.
Mobile Reference: 04.1_Discussion.jpg, 04.2_Discussion_with_ask_question.jpg, 04.3_Discussion_Details.jpg, 04.4_Discussion_Details_with_answer.jpg
- Farmer can access this page via main navigation menu.
- If farmer needs some help or wants to discuss particular things about their crops and farming activity, they can check discussions or create new thread and ask other farmers about solution for their problem in this screen.
- By default, farmer will be presented with latest and popular discussions in this screen (04.1_Discussion.jpg)
- If farmer cannot find any discussion topic that match with their problem, they can create new discussion via clicking "New Question" button (04.2_Discussion_with_ask_question.jpg).
- If farmer find discussion topic that similar to their problem, they will be able to check the discussion details to read the discussion in order to find the solution (04.3_Discussion_Details.jpg)
- If farmer find some discussion topic that still open and they know the answer, they can participate and answer the questions from other farmers via clicking "Write Answer" button (04.4_Discussion_Details_with_answer.jpg)
05. Help Screen
Desktop Reference: 05.1_Help.jpg, 05.2_Feedback.jpg, 05.3_Feedback_with_write_feedback.jpg, 05.4_Feedback_with_rate.jpg, 05.5_Feedback_Details.jpg
Mobile Reference: 05.1_Help.jpg, 05.2_Feedback.jpg, 05.3_Feedback_with_write_feedback.jpg, 05.4_Feedback_with_rate.jpg, 05.5_Feedback_Details.jpg
- Help tab will show list of guidance and step by step instructions for farmer to be familiar and able to use the application easily.
- Feedback tab will show list of review from other farmers/testimony. In this tab, farmer user also will be able to gave their feedback via clicking "Write feedback" button.
- Farmer will be able to write feedback and rate the apps via this screen (05.3_Feedback_with_write_feedback.jpg and 05.4_Feedback_with_rate.jpg)
- Once farmer filled in the feedback form, it will be shown in feedback tab (05.2_Feedback.jpg)
06. Market Prices Screen
Desktop Reference: 06.1_Market_Prices.jpg, 06.2_Market_Prices_with_filter_popup.jpg, 06.3_Market_Prices_Goods_Details.jpg, 06.4_Market_Prices_Goods_Details_with_filter_popup.jpg
Mobile Reference: 06.1_Market_Prices.jpg, 06.2_Market_Prices_with_market_popup.jpg, 06.3_Market_Prices_with_filter_popup.jpg, 06.4_Market_Prices_Goods.jpg, 06.5_Market_Prices_Goods_Details.jpg, 06.6_Market_Prices_Goods_Details_with_filter_popup.jpg
- Farmer will be able to check crops prices in surrounding markets near their locations.
- Farmer will be able to filter and set which particular market area that they want to check.
- Farmer can check the prices in three ways:
-- Check all crops items in all markets (06.1_Market_Prices.jpg)
-- Check particular crop items in all markets (06.3_Market_Prices_Goods_Details.jpg)
-- Check all crops items prices in one particular market (07.1_Market_Details.jpg)
07. Market Details Screen
Desktop Reference: 07.1_Market_Details.jpg, 07.2_Market_Details_with_filter_popup.jpg
Mobile Reference: 07.1_Market_Details.jpg, 07.2_Market_Details_with_filter_popup.jpg
- This is a continuation screen from Market prices screen above.
- In this screen, farmer will be able to check all crop items prices in one market along with the prices fluctuation.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You can use SASS for this challenge (Recommended)
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- Storyboards and All necessary flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.