Challenge Overview
Challenge Overview
Welcome to "GE - Pledge Tool - UI Prototype Part 3 - Mobile Pledge Screens". In this challenge, we are looking to create a mobile HTML5 prototype for our new, and inspirational Pledge Tool. This is the second 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 mobile experience (Phone and Tablet). We want employees to be inspired and enjoy the (simple) experience of searching, selecting and giving.
This is the second of 2 challenges to prototype the Pledge Tool. This challenge is only focused on Mobile (Phone and Tablet) experience. You will work directly with a previous UI prototype developed for desktop. The key is to take 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 take and update the desktop source code to be responsive and have a mobile UI.
Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
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.
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
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
- Prototype reference: “dashboard.html”
- 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.
- Prototype reference: “pledge-details.html” flow.
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.
- Prototype reference: “repeat-donator-dashboard-your-pledge.html”
Code 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:
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- PSD files for mobile version - Here
- Desktop Prototype from previous challenge.
Platforms
- HTML
Technologies
- CSS
- HTML
- HTML5
- JavaScript
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.
Welcome to "GE - Pledge Tool - UI Prototype Part 3 - Mobile Pledge Screens". In this challenge, we are looking to create a mobile HTML5 prototype for our new, and inspirational Pledge Tool. This is the second 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 mobile experience (Phone and Tablet). We want employees to be inspired and enjoy the (simple) experience of searching, selecting and giving.
This is the second of 2 challenges to prototype the Pledge Tool. This challenge is only focused on Mobile (Phone and Tablet) experience. You will work directly with a previous UI prototype developed for desktop. The key is to take 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 take and update the desktop source code to be responsive and have a mobile UI.
Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
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.
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
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
- Prototype reference: “dashboard.html”
- 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.
- Prototype reference: “pledge-details.html” flow.
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.
- Prototype reference: “repeat-donator-dashboard-your-pledge.html”
Code 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:
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- PSD files for mobile version - Here
- Desktop Prototype from previous challenge.
Platforms
- HTML
Technologies
- CSS
- HTML
- HTML5
- JavaScript
Final Submission Guidelines
Final Submission GuidelinesSubmission 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.