Challenge Overview
Welcome to "GE Receipt Optimization Responsive UI Prototype Challenge". We are looking for your help to create responsive HTML prototype for Receipt Optimization (ROD) application that will allow buyers and management to keep track of key dates for their materials shipments and also gain insight into whether moving the date of receipt up or down in time will have a positive, negative or neutral impact upon GE's cash flow. 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.
Additional GE Challenge Rules
- Please refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Background Overview
We want to build HTML5 web application that will allow buyers to keep track of key dates for their materials shipments (eg: wind turbine parts, blades, towers, gearboxes, etc) and also gain insight into whether moving the date of receipt up or down in time will have a positive, negative or neutral impact upon GE's cash flow.
The app should be able to forecast/highlight the dates where we are currently expected to receive material but has potential to postponed to further push out cash. This is an easy logic. Ex. (If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter.
This site will allow managers to keep track of their accounts and be alerted when there are opportunities to beneficially change the timing of their materials shipments. Users will be able to search for material shipment records and view a calendar that will display key dates and key weeks for the various shipments.
The most critical thing is to quickly and easily allow a user to search/filter for the content they need and then be able to track the results that are important to them.
Useful Background Information:
- How Shipment Timing Benefits GE Explained: The app should be able to forecast/highlight the dates where GE currently expects to receive material but have potential to postpone to further push out cash. The Logic: Ex: (If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter.
- How Shipments Are Handled: GE buyers are responsible for certain type of material. The material we typically receive are quite large and are shipped via boat or train at shipping docks. There is a separate interface where suppliers submit an invoice when the material is delivered. GE is then responsible for accepting and acknowledging the receipt of the material. They buyer is in charge of this process. Thus if a buyer will be able to communicate with the supplier that we can receive the material until a certain date as long as it doesn't impact other operations.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) that will help use to determine and forecast the best timing to receive materials.
- Create an interaction for basic scenario analysis functionality, Ex. "If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter."
- We are targetting desktop, tablet and mobile devices for this challenge (tablet will share same layout like desktop).
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.
General 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.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- Provide all hover, active state for buttons and links in desktop version.
Screen Requirements
01. Login Screen
Desktop: 00-login.png
Mobile: 01-01_Mobile_Login.png, 01-02_Mobile_Login Error.png
- User needs to login first before able to use the application
- Provide error login for wrong credential scenario
02. Dashboard Page
Desktop: 01-Dashboard-01-Default.png to 01-Dashboard-03-D-Hover-highlights-date.png
Mobile: 02-01_Mobile_Dashboard.png to 02-09_Mobile_Dashboard_Cal Click Date 2_Opportunity.png
- After successful login, user will be redirected to the dashboard screen
- This screen will show summary information about the application activity and the user's recent activity
- Goal is to optimize how/when the user should receive materials.
- Taking into account when/do user need the materials.
- User will be able to view the following informations in the dashboard:
02.1 View Summary of material status.
- Show the summmary information via chart/graph (circle graph)
- User will be able to select summary information via drop down "PO Payment Due Status" (use dummy content for the drop down value)
- The chart/graph data content should be collected via json data and not embedded in the HTML page.
02.2 User latest activity (log history)
- Show list of user and other user activity in the application in this area.
- Scrollbar can be browser based
- Ability to sort the activity via dropdown (by supplier/by buyer/by management)
- Ability to search and filter the activity data (provide simulation for this area). User can do multiple search, if they provide commas "," then wrapped their initial search criteria in grey rounded box and user can add more search criteria.
02.3 List of Material and Activity via Calendar view
- User will be able to see all shipment schedule in this section
- Clicking the blue left and right arrow button or the "1 March 2016 - 2 May 2016" will navigate user to next/prev month.
- User will be able to filter shipment schedule data from the calendar view (search box, all buyers dropdown, and all vendors)
- There are two ways to view the shipment schedule, via calendar (month) view or via timeline view
- Via Calendar:
-- Please refer to "01-Dashboard-01-Default.png until 01-Dashboard-03-D-Hover-highlights-date.png".
-- User will be able to see all active shipment schedule via calendar (01-Dashboard-01-Default.png).
-- Clicking the active shipment schedule box will highlight and expand the calendar and show the schedule of that material and activity (01-Dashboard-02-A-click-highlights-date.png).
-- depends on the schedule time, the schedule highlight will show different status:
---- Blue colors: means the schedule is optimized and show the perfect schedule for the shipment (01-Dashboard-02-A-click-highlights-date.png)
---- Red colors: means the schedule is not optimized and it is recommended for the user to move the schedule (01-Dashboard-02-B-click-highlights-date.png)
-- Clicking the "Q1" icon will show bubble message that show the payment status. (01-Dashboard-03-A-Hover-Quarter14-icon.png)
-- Clicking the green dollar "$" icon will show the opportunities bubble message that cames from the system that recommends the user to move the schedule to gain maximum saving optimization (01-Dashboard-03-B-Hover-Opportunities-icon.png)
-- Clicking the link "+2 more vendors" will show PO number status and any organization that involved in the shipment (01-Dashboard-03-C-Hover-highlights-date.png)
-- If the shipment schedule have "$" icon in it, when user click the link "+2 more vendors", it will show the opportunities recommendation to moved the schedule (01-Dashboard-03-D-Hover-highlights-date.png)
- Via Timeline:
-- Please refer to "00-Desktop_Calendar-Timeline.png" to get the layout for timeline view in the dashboard.
-- User will be able to view the shipment schedule by scrolling the data.
-- By default, the timeline will show data from old to newest date.
-- User will be able to filter the data that they want to look for, either by provide search criteria via texts box, by buyers (All buyers) and by vendors (All vendors).
-- User will be able to view the timeline monthly and will be able to navigate to see other months via dropdown (March 2016)
02.4 Insight/Forecast about some material and their impact to the company?
- The application will simulated all data in the application and check the best way for company to gain maximum saving.
- It will show information about activity or materials that can be optimized by moving out the shipment schedule to particular dates.
- Clicking the "view in calendar" will bring user to Calendar view page that showing the shipment schedule that can be optimized.
03. Advance Filter Page / PO Reports Page
Desktop: 03-Advance-Filter-Screen-02-Filtered.png, 03-Advance-Filter-Screen-03-Filtered.png, 03-Advance-Filter-Screen-04-Column-view-options.png
Mobile: 03-01_Mobile__Open PO.png, 03-02_Mobile_Open PO_Colapse.png, 03-03_Mobile__Open PO_Filter.png, 03-04_Mobile_Open PO_Filter Result.png
- While user can search for any data easily in the apps from dashboard, there should be a way where user can search for some specific data with more specific criteria.
- User should be able to search/filter any data from the apps using the following criteria (03-Advance-Filter-Screen-02-Filtered.png):
-- Critical Dates
-- Buyer
-- Vendor/Supplier Name
-- Materials
-- The priority is a user should be able to select their name and see the suppliers only related to them.
- The search result should be real time, so when user finish apply one filter, the result will automatically triggered (since we don't have action button to execute the filter)
- User will be able to see and select what kind of data that needs to be shown for the result (03-Advance-Filter-Screen-04-Column-view-options.png)
- Make the "Showing 72 Result" as a link that will navigate user to Calendar View page.
04. Calendar View page
Desktop: 04-calendar-01-Default.png to 04-calendar-04-Expand-critical-date.png, 00-Desktop_Calendar-Timeline.png
Mobile: 04-01_Mobile_Calendar View_Month.png, 04-02_Mobile_Calendar View_Open Filter.png, 04-03_Mobile_Calendar View_Filter Result.png, 04-05_Mobile_Calendar View_Timeline.png
- Once user click search or filter the data and click the result summary link, user will be navigated to calendar view page.
- The calendar and timeline view will have same basic function like the calendar view in dashboard, but this time the size much more bigger than the dashboard version
- The left side area is the place where user can track any data of shipment activity and material, and the right side area will show the details of the shipment.
- As an additional features, when user click any shipment schedule in the calendar or timeline view, it will highlight the connected data on the right side (04-calendar-03-01A-click-on-highlight-date.png and 04-calendar-03-01B-click-on-Critical-date-listing.png).
- On the right side, user can open and expand the details data (04-calendar-04-Expand-critical-date.png)
05. Detail Result Page
Desktop: 05-Materials-suppliers-01-Default.png, 05-Materials-suppliers-02-view-supplier.png, 05-Materials-suppliers-03-view-table-options.png
Mobile: 05-01_Mobile_Material List.png
- User will be able to see details information about the material here.
- Basic information like material content, stock, supplier, etc can be added in the top area
- There is a content differences between desktop and mobile version, please use desktop version for the table content in all devices and please put the 4 mobile top content (MSD, Indirect, Services and Suppliers) on the desktop and tablet.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 or AngularJS for this challenge.
- For Calendar/Timeline framework/plugin, please confirm first in forum.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet will share same design like desktop
Documentation Provided:
- Storyboards
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: 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.
Additional GE Challenge Rules
- Please refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Background Overview
We want to build HTML5 web application that will allow buyers to keep track of key dates for their materials shipments (eg: wind turbine parts, blades, towers, gearboxes, etc) and also gain insight into whether moving the date of receipt up or down in time will have a positive, negative or neutral impact upon GE's cash flow.
The app should be able to forecast/highlight the dates where we are currently expected to receive material but has potential to postponed to further push out cash. This is an easy logic. Ex. (If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter.
This site will allow managers to keep track of their accounts and be alerted when there are opportunities to beneficially change the timing of their materials shipments. Users will be able to search for material shipment records and view a calendar that will display key dates and key weeks for the various shipments.
The most critical thing is to quickly and easily allow a user to search/filter for the content they need and then be able to track the results that are important to them.
Useful Background Information:
- How Shipment Timing Benefits GE Explained: The app should be able to forecast/highlight the dates where GE currently expects to receive material but have potential to postpone to further push out cash. The Logic: Ex: (If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter.
- How Shipments Are Handled: GE buyers are responsible for certain type of material. The material we typically receive are quite large and are shipped via boat or train at shipping docks. There is a separate interface where suppliers submit an invoice when the material is delivered. GE is then responsible for accepting and acknowledging the receipt of the material. They buyer is in charge of this process. Thus if a buyer will be able to communicate with the supplier that we can receive the material until a certain date as long as it doesn't impact other operations.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) that will help use to determine and forecast the best timing to receive materials.
- Create an interaction for basic scenario analysis functionality, Ex. "If a supplier has 30 day terms. When GE received material from them we have 30 days to pay the supplier) So if we expect material on 3/1/2016 we will have to pay on 3/31/2016, This would be a cash payment in the 1st quarter. However if we were to accept the material on 3/2/2016 we will have to pay on 4/1/2016 which will push the cash out from the 1st quarter to the 2nd quarter."
- We are targetting desktop, tablet and mobile devices for this challenge (tablet will share same layout like desktop).
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.
General 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.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- Provide all hover, active state for buttons and links in desktop version.
Screen Requirements
01. Login Screen
Desktop: 00-login.png
Mobile: 01-01_Mobile_Login.png, 01-02_Mobile_Login Error.png
- User needs to login first before able to use the application
- Provide error login for wrong credential scenario
02. Dashboard Page
Desktop: 01-Dashboard-01-Default.png to 01-Dashboard-03-D-Hover-highlights-date.png
Mobile: 02-01_Mobile_Dashboard.png to 02-09_Mobile_Dashboard_Cal Click Date 2_Opportunity.png
- After successful login, user will be redirected to the dashboard screen
- This screen will show summary information about the application activity and the user's recent activity
- Goal is to optimize how/when the user should receive materials.
- Taking into account when/do user need the materials.
- User will be able to view the following informations in the dashboard:
02.1 View Summary of material status.
- Show the summmary information via chart/graph (circle graph)
- User will be able to select summary information via drop down "PO Payment Due Status" (use dummy content for the drop down value)
- The chart/graph data content should be collected via json data and not embedded in the HTML page.
02.2 User latest activity (log history)
- Show list of user and other user activity in the application in this area.
- Scrollbar can be browser based
- Ability to sort the activity via dropdown (by supplier/by buyer/by management)
- Ability to search and filter the activity data (provide simulation for this area). User can do multiple search, if they provide commas "," then wrapped their initial search criteria in grey rounded box and user can add more search criteria.
02.3 List of Material and Activity via Calendar view
- User will be able to see all shipment schedule in this section
- Clicking the blue left and right arrow button or the "1 March 2016 - 2 May 2016" will navigate user to next/prev month.
- User will be able to filter shipment schedule data from the calendar view (search box, all buyers dropdown, and all vendors)
- There are two ways to view the shipment schedule, via calendar (month) view or via timeline view
- Via Calendar:
-- Please refer to "01-Dashboard-01-Default.png until 01-Dashboard-03-D-Hover-highlights-date.png".
-- User will be able to see all active shipment schedule via calendar (01-Dashboard-01-Default.png).
-- Clicking the active shipment schedule box will highlight and expand the calendar and show the schedule of that material and activity (01-Dashboard-02-A-click-highlights-date.png).
-- depends on the schedule time, the schedule highlight will show different status:
---- Blue colors: means the schedule is optimized and show the perfect schedule for the shipment (01-Dashboard-02-A-click-highlights-date.png)
---- Red colors: means the schedule is not optimized and it is recommended for the user to move the schedule (01-Dashboard-02-B-click-highlights-date.png)
-- Clicking the "Q1" icon will show bubble message that show the payment status. (01-Dashboard-03-A-Hover-Quarter14-icon.png)
-- Clicking the green dollar "$" icon will show the opportunities bubble message that cames from the system that recommends the user to move the schedule to gain maximum saving optimization (01-Dashboard-03-B-Hover-Opportunities-icon.png)
-- Clicking the link "+2 more vendors" will show PO number status and any organization that involved in the shipment (01-Dashboard-03-C-Hover-highlights-date.png)
-- If the shipment schedule have "$" icon in it, when user click the link "+2 more vendors", it will show the opportunities recommendation to moved the schedule (01-Dashboard-03-D-Hover-highlights-date.png)
- Via Timeline:
-- Please refer to "00-Desktop_Calendar-Timeline.png" to get the layout for timeline view in the dashboard.
-- User will be able to view the shipment schedule by scrolling the data.
-- By default, the timeline will show data from old to newest date.
-- User will be able to filter the data that they want to look for, either by provide search criteria via texts box, by buyers (All buyers) and by vendors (All vendors).
-- User will be able to view the timeline monthly and will be able to navigate to see other months via dropdown (March 2016)
02.4 Insight/Forecast about some material and their impact to the company?
- The application will simulated all data in the application and check the best way for company to gain maximum saving.
- It will show information about activity or materials that can be optimized by moving out the shipment schedule to particular dates.
- Clicking the "view in calendar" will bring user to Calendar view page that showing the shipment schedule that can be optimized.
03. Advance Filter Page / PO Reports Page
Desktop: 03-Advance-Filter-Screen-02-Filtered.png, 03-Advance-Filter-Screen-03-Filtered.png, 03-Advance-Filter-Screen-04-Column-view-options.png
Mobile: 03-01_Mobile__Open PO.png, 03-02_Mobile_Open PO_Colapse.png, 03-03_Mobile__Open PO_Filter.png, 03-04_Mobile_Open PO_Filter Result.png
- While user can search for any data easily in the apps from dashboard, there should be a way where user can search for some specific data with more specific criteria.
- User should be able to search/filter any data from the apps using the following criteria (03-Advance-Filter-Screen-02-Filtered.png):
-- Critical Dates
-- Buyer
-- Vendor/Supplier Name
-- Materials
-- The priority is a user should be able to select their name and see the suppliers only related to them.
- The search result should be real time, so when user finish apply one filter, the result will automatically triggered (since we don't have action button to execute the filter)
- User will be able to see and select what kind of data that needs to be shown for the result (03-Advance-Filter-Screen-04-Column-view-options.png)
- Make the "Showing 72 Result" as a link that will navigate user to Calendar View page.
04. Calendar View page
Desktop: 04-calendar-01-Default.png to 04-calendar-04-Expand-critical-date.png, 00-Desktop_Calendar-Timeline.png
Mobile: 04-01_Mobile_Calendar View_Month.png, 04-02_Mobile_Calendar View_Open Filter.png, 04-03_Mobile_Calendar View_Filter Result.png, 04-05_Mobile_Calendar View_Timeline.png
- Once user click search or filter the data and click the result summary link, user will be navigated to calendar view page.
- The calendar and timeline view will have same basic function like the calendar view in dashboard, but this time the size much more bigger than the dashboard version
- The left side area is the place where user can track any data of shipment activity and material, and the right side area will show the details of the shipment.
- As an additional features, when user click any shipment schedule in the calendar or timeline view, it will highlight the connected data on the right side (04-calendar-03-01A-click-on-highlight-date.png and 04-calendar-03-01B-click-on-Critical-date-listing.png).
- On the right side, user can open and expand the details data (04-calendar-04-Expand-critical-date.png)
05. Detail Result Page
Desktop: 05-Materials-suppliers-01-Default.png, 05-Materials-suppliers-02-view-supplier.png, 05-Materials-suppliers-03-view-table-options.png
Mobile: 05-01_Mobile_Material List.png
- User will be able to see details information about the material here.
- Basic information like material content, stock, supplier, etc can be added in the top area
- There is a content differences between desktop and mobile version, please use desktop version for the table content in all devices and please put the 4 mobile top content (MSD, Indirect, Services and Suppliers) on the desktop and tablet.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 or AngularJS for this challenge.
- For Calendar/Timeline framework/plugin, please confirm first in forum.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet will share same design like desktop
Documentation Provided:
- Storyboards
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool