Challenge Overview
Challenge Overview
Welcome to "GE - Pledge Tool - UI Prototype Part 3 - Admin / Email / Reporting". In this challenge, we are looking to create an HTML5 prototype that will manage our new, and inspirational Pledge Tool. This is the 3rd of a serie of challenges where we are looking to prototype this new Pledge Tool experience for GE.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
This challenge is focused on concepting the best experience for our new Admin Tool. We want our employees to be inspired and enjoy the (simple) experience of searching, managing, selecting, and organizing.
Competition Task Overview
The main task of this competition is to develop a HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Challenge Goals
- Modern experience for searching and selecting available users from huge lists, over 500,000.
- Allow admin to filters results.
- Create campaigns and assign leaders to it.
- Setup pledge amounts for campaigns.
- Setup emails templates .
- Compose and send emails directly from admin tool.
Competition Task Overview
The main task of this competition is to develop a 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.
Code Requirements
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- All JavaScript must not have a copyright by a third party.
- Create separate files if you plan to create custom functions
Image Requirements
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Test in all the required browsers.
Screen Requirements
1. Dashboard
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: “01_dashboard.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
2. Campaings
- This screen will show summary of active and inactive campaigns.
- Will have the possibility to search.
- New Campaigns will be created from this screen.
- Storyboards reference: “02_2_campaigns.png” - “02_3_campaigns.png”.
3. Create Campaigns
- This is where new campaigns will be created.
- Storyboards reference: from “03_1_admin_create_new_campaign.png” to “03_4_admin_create_new_campaign.png”.
4. Campaigns Leaders Level 1 Management
- This is our most important screen. Here users will be allowed to manage campaigns where they are leaders.
- Actions to be expected here: Manage campaign information such like benefits, Donation information, special proceed donation, search and filter users, add users, send emails.
- Storyboards reference: from “04_1_campaign_leader_lv1_manage_campaign.png” to “04_1_add_email_template.png”.
5. User Management
- User administration screen. Advanced filters and sorting is expected here.
- Storyboards reference: from “05_1_user_management.png” to “05_8_sub_menu.png”.
6. Emails
- Ability to compose emails and select templates.
- Normal emails actions are needed here.
- Storyboards reference: from “06_1_email.png” to “06_8_email.png”.
7. Reports
- Tables that will list information by campaign. Sorting is needed.
- For now “Settings” and “Export” buttons will be disabled.
- Storyboards reference: from “07_1_reports.png” to “07_3_reports.png”.
8. Dashboard - Leader Level 2
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: “08_dashboard_campaign_leader_level2.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
9. Campaigns Leaders Level 2 Management
- Basically same screen as “Campaigns Leaders Level 1 Management”, but only “users” tab will be used at this level.
- Leaders at level 2, will add campaign leaders to level 3 and hierarchy admins.
- Storyboards reference: “09_campaign_leader_lv2.png”.
10. Hierarchy Admin Dashboard
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Can create campaign leaders at level 2 and 3.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: from “10_6_hierarchy_Admin_dashboard.png” to “10_6_hierarchy_Admin_Assign_Employee_Actions.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
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
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.
Payments
Topcoder will compensate members in accordance with the payment structure of this challenge. Initial payment for the winning member will be distributed in two installments. The first payment will be made at the closure of the approval phase. The second payment will be made at the completion of the support period.
Reliability Rating and Bonus
For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.
Payments
Topcoder will compensate members in accordance with the payment structure of this challenge. Initial payment for the winning member will be distributed in two installments. The first payment will be made at the closure of the approval phase. The second payment will be made at the completion of the support period.
Reliability Rating and Bonus
For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.
Welcome to "GE - Pledge Tool - UI Prototype Part 3 - Admin / Email / Reporting". In this challenge, we are looking to create an HTML5 prototype that will manage our new, and inspirational Pledge Tool. This is the 3rd of a serie of challenges where we are looking to prototype this new Pledge Tool experience for GE.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
Background informationThis challenge is focused on concepting the best experience for our new Admin Tool. We want our employees to be inspired and enjoy the (simple) experience of searching, managing, selecting, and organizing.
Competition Task Overview
The main task of this competition is to develop a HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Challenge Goals
- Modern experience for searching and selecting available users from huge lists, over 500,000.
- Allow admin to filters results.
- Create campaigns and assign leaders to it.
- Setup pledge amounts for campaigns.
- Setup emails templates .
- Compose and send emails directly from admin tool.
Competition Task Overview
The main task of this competition is to develop a 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.
Code Requirements
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- All JavaScript must not have a copyright by a third party.
- Create separate files if you plan to create custom functions
Image Requirements
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Test in all the required browsers.
Screen Requirements
1. Dashboard
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: “01_dashboard.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
2. Campaings
- This screen will show summary of active and inactive campaigns.
- Will have the possibility to search.
- New Campaigns will be created from this screen.
- Storyboards reference: “02_2_campaigns.png” - “02_3_campaigns.png”.
3. Create Campaigns
- This is where new campaigns will be created.
- Storyboards reference: from “03_1_admin_create_new_campaign.png” to “03_4_admin_create_new_campaign.png”.
4. Campaigns Leaders Level 1 Management
- This is our most important screen. Here users will be allowed to manage campaigns where they are leaders.
- Actions to be expected here: Manage campaign information such like benefits, Donation information, special proceed donation, search and filter users, add users, send emails.
- Storyboards reference: from “04_1_campaign_leader_lv1_manage_campaign.png” to “04_1_add_email_template.png”.
5. User Management
- User administration screen. Advanced filters and sorting is expected here.
- Storyboards reference: from “05_1_user_management.png” to “05_8_sub_menu.png”.
6. Emails
- Ability to compose emails and select templates.
- Normal emails actions are needed here.
- Storyboards reference: from “06_1_email.png” to “06_8_email.png”.
7. Reports
- Tables that will list information by campaign. Sorting is needed.
- For now “Settings” and “Export” buttons will be disabled.
- Storyboards reference: from “07_1_reports.png” to “07_3_reports.png”.
8. Dashboard - Leader Level 2
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: “08_dashboard_campaign_leader_level2.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
9. Campaigns Leaders Level 2 Management
- Basically same screen as “Campaigns Leaders Level 1 Management”, but only “users” tab will be used at this level.
- Leaders at level 2, will add campaign leaders to level 3 and hierarchy admins.
- Storyboards reference: “09_campaign_leader_lv2.png”.
10. Hierarchy Admin Dashboard
- This screen will show summary and important information related to total population (users), aggregated pledge and employee participated.
- Can create campaign leaders at level 2 and 3.
- Also will handle high level of user information regarding different campaign leaders. Drill down visualization is needed here.
- Storyboards reference: from “10_6_hierarchy_Admin_dashboard.png” to “10_6_hierarchy_Admin_Assign_Employee_Actions.png”.
- Background image needs to be separated (stockphoto image), so we can replace the Stockphoto images easily in the future.
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
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.
Payments
Topcoder will compensate members in accordance with the payment structure of this challenge. Initial payment for the winning member will be distributed in two installments. The first payment will be made at the closure of the approval phase. The second payment will be made at the completion of the support period.
Reliability Rating and Bonus
For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.
Payments
Topcoder will compensate members in accordance with the payment structure of this challenge. Initial payment for the winning member will be distributed in two installments. The first payment will be made at the closure of the approval phase. The second payment will be made at the completion of the support period.
Reliability Rating and Bonus
For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.