Challenge Overview
Challenge Overview
Welcome to "GE - Responsive Pledge Tool UI Prototype Challenge". In this challenge, we are looking to create a responsive HTML5 prototype for our new, and inspirational Pledge Tool. This is the first of 2 challenges where we are looking to prototype the Pledge Tool experience.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background information
This challenge is focused on concepting our initial Responsive experience (Phone and Desktop). We want employees to be inspired and enjoy the (simple) experience of searching, selecting and giving.
This is the first of 2 challenges to prototype the Pledge Tool. This challenge is only focused on Desktop experience. Immediately following this contest, we will launch another UI prototype to take the pledge UI design for mobile, and update the desktop source code to be responsive and have a mobile UI.
Challenge Goals
- Modern experience for searching and selecting available charities (think of marketplaces)
The high-level pledge steps are:
- Choose pay-type and amount
- Choose charity/charities (default suggestion is the local United Way that is aligned with the employee’s work zip code)
- Internal/External Release & Recognition questions (and auto-renew, if you give by payroll))
- Review
- Confirm/Submits
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
1. Dashboard
- This screen will show summary and important informations related to pledges amounts and Charity Organizations.
- Storyboards reference: “FF_01...png” serie
- Background images needs to be separated (stockphoto image + opacity layer), so we can replace the Stockphoto images easily in the future.
2. Pledge Details + Steps
- A Step by Step wizard that will guide users through the entire pledge process.
- Choose charity/charities (default suggestion is the local United Way that is aligned with the employee's work zip code)
- Charities that an employee could select would be from a subscription to a Federal list of Active 501(c)3 non-profit agencies.
- Choose pay type and amount
- Donor Information
- Review
- Complete
- Storyboards references: “FF_02...png”, “FF_03...png”, “FF_04...png”, “FF_05...png”, “FF_06...png”, series.
3. Profile / User Dashboard
- This screen will show summary and important informations related to pledges amounts and Charity Organizations to the current/logged user.
- Storyboards references: “FF_07...png”, “FF_08...png” series.
- Background images needs to be separated (stockphoto image + opacity layer), so we can replace the Stockphoto images easily in the future.
Resources Screens (Storyboards and Fonts)
Google Drive
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 encouraged 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!
- Platforms:
-- HTML
- Technologies:
-- CSS
-- HTML
-- HTML5
-- JavaScript
-- Angular.JS
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.
Welcome to "GE - Responsive Pledge Tool UI Prototype Challenge". In this challenge, we are looking to create a responsive HTML5 prototype for our new, and inspirational Pledge Tool. This is the first of 2 challenges where we are looking to prototype the Pledge Tool experience.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background information
This challenge is focused on concepting our initial Responsive experience (Phone and Desktop). We want employees to be inspired and enjoy the (simple) experience of searching, selecting and giving.
This is the first of 2 challenges to prototype the Pledge Tool. This challenge is only focused on Desktop experience. Immediately following this contest, we will launch another UI prototype to take the pledge UI design for mobile, and update the desktop source code to be responsive and have a mobile UI.
Challenge Goals
- Modern experience for searching and selecting available charities (think of marketplaces)
The high-level pledge steps are:
- Choose pay-type and amount
- Choose charity/charities (default suggestion is the local United Way that is aligned with the employee’s work zip code)
- Internal/External Release & Recognition questions (and auto-renew, if you give by payroll))
- Review
- Confirm/Submits
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
1. Dashboard
- This screen will show summary and important informations related to pledges amounts and Charity Organizations.
- Storyboards reference: “FF_01...png” serie
- Background images needs to be separated (stockphoto image + opacity layer), so we can replace the Stockphoto images easily in the future.
2. Pledge Details + Steps
- A Step by Step wizard that will guide users through the entire pledge process.
- Choose charity/charities (default suggestion is the local United Way that is aligned with the employee's work zip code)
- Charities that an employee could select would be from a subscription to a Federal list of Active 501(c)3 non-profit agencies.
- Choose pay type and amount
- Donor Information
- Review
- Complete
- Storyboards references: “FF_02...png”, “FF_03...png”, “FF_04...png”, “FF_05...png”, “FF_06...png”, series.
3. Profile / User Dashboard
- This screen will show summary and important informations related to pledges amounts and Charity Organizations to the current/logged user.
- Storyboards references: “FF_07...png”, “FF_08...png” series.
- Background images needs to be separated (stockphoto image + opacity layer), so we can replace the Stockphoto images easily in the future.
Resources Screens (Storyboards and Fonts)
Google Drive
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 encouraged 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!
- Platforms:
-- HTML
- Technologies:
-- CSS
-- HTML
-- HTML5
-- JavaScript
-- Angular.JS
Final Submission Guidelines
- 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.