Challenge Overview
Welcome to "GE Renewable Energy Sourcing CIS Responsive UI Prototype Challenge". We are looking for your help to create responsive HTML prototype for Cost In Sight (CIS) application that able to provide real time visibility for all materials and inbound transportation costs of the Wind Turbines that being sold by the Onshore Renewables business and ultimately all Renewables projects. It is part of a broader effort to move towards real time pro forma financials for the business. 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 which aims to provide various views of data, reports, and analysis of data related to the material and inbound transportation cost of wind turbines. This application will serve Onshore businesses, although the specific data and reports may be tailored to the needs of each. We currently have approval for the Onshore aspects of the application. We want an application that accessible real time build and sales related costs of the direct material and other adder fees with scenario analysis capability. This apps will be available to all users with iphone, ipad or Desktop.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) on Ipads, iphones and Desktops that allow the viewer to access a specified number of reports from the existing "Greenplumb" database
- Create an interaction for basic scenario analysis functionality e.g. "what would the total year cost benefit be if a cost out idea was cut into the build plan on May 1 st"
- We are targetting desktop, tablet and mobile devices for this challenge.
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.
Screen Requirements
01. Dashboard Screen
Desktop: 01_1_dashboard_standard_cost.png to 01_3_dashboard_select_turbine.png
Tablet: 06_iPad_Dashboard.png
Mobile: 08_phone_dashboard.png and 09_phone_navigations.png
- The idea is to have a dynamic dashboard that able to show variety of data and views (OnShore/OffShore, Standard Cost/Cost Handbook) and their breakdowns.
- All graph/chart needs to be editable (it's up to you to do it, either via JSON or other approach).
- If you want to use plugin or framework to create the graph/chart, Please confirm first in forum.
- Need to provide clear indication on what data that user seen in this page (between offshore and onshore wind). All functionality would be the same, just provide a way to specify what data is being used. Note: This needs to be pretty obvious as we don't want users to be confused as to whether they are currently viewing metrics for onshore or offshore.
- In the cost by quarter analysis, we want to make sure we will also have a way to select the year that we are viewing, as we'll want to be able to look at other years as well (provide drop down value from 2016 to 2010)
- By default, show "Onshore" and "Standard Cost" as default view (01_1_dashboard_standard_cost.png)
- Provides different view for "Onshore" and "Standard Cost" (01_2_dashboard_cost_handbook.png)
- Notice the main navigation -> "Turbines" have sub-navigation where user can choose Turbine Model to navigate into turbine detail screen.
- Notice clicking the chart/graph will open modal window (similar to 02_2_turbine_detail_level.png) that show the progress tracking of the overall cost insight and status.
- In tablet area, some of the screen will be resizeable into carousel area, please make sure you capture this resize interaction in your prototype (06_iPad_Dashboard.png)
02. Turbine Detail Level Screen
Desktop: 02_1_turbine_detail_level.png to 02_2_turbine_detail_level.png
Tablet: 07_iPad_turbine_detail_level.png (For other screen, resize desktop version)
Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- While the layout looks similar with the dashboard, this screen will show different values and only count cost for one particular Turbine Model
- Notice that all drop down/selectbox should works and can be selected with other values, for ex. onshore/offshore, standard cost/cost handbook, all projects/project 1/project 2, 2016/2015/20--, etc)
- At the end of screen, there is a component related area. when viewing components we really like the ability to be able to select between each of the different major components to see only the related minor components. Note we would also want the default choice set to "All".
- Show differents component data for each category at the bottom screen (All, Head, Hub, Tower, etc).
- Notice clicking the chart/graph will open modal window (02_2_turbine_detail_level.png) that show the progress tracking of the turbine cost and status.
- Clicking any component list item in the bottom screen will bring user to Component Detail level Screen.
- In tablet area, some of the screen will be resizeable into carousel area, please make sure you capture this resize interaction in your prototype (07_iPad_turbine_detail_level.png)
03. Component Detail Level Screen
Desktop: 03_component_detail_level.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- While the layout looks similar with the dashboard and turbine, this screen will show different values and only count cost for one particular component (the cost breakdown)
- Notice that all drop down/selectbox should works and can be selected with other values, for ex. onshore/offshore, standard cost/cost handbook, all projects/project 1/project 2, 2016/2015/20--, etc)
- Notice clicking the chart/graph will open modal window (02_2_turbine_detail_level.png) that show the progress tracking of the turbine cost.
- Notice clicking the chart/graph will open modal window (similar to 02_2_turbine_detail_level.png) that show the progress tracking of the component cost and status.
04. Scenario Analysis Screen
Desktop: 04_1_scenario_analysis.png to 04_5_scenario_analysis.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- User can access this screen from analysis menu in main navigation.
- This screen will help user to simulate scenario analysis to get the best result for cost insight.
- Clicking "Add Component" button will open modal window that show all component list that user can select to start the simulation process (04_2_scenario_analysis.png).
- Notice that the component in the system can be thousand, so please put this into your consideration when built the prototype, is ther any easy way to be able manage these kind of data when user try to select them?
- User can select more than one component for the scenario analysis
- Once user finish select all the necessary component, user can start modify the cost properties (cost by percentage, modified/current cost, cut in date, impacted turbine model, quantity)
- The cut-in date would allow users to specify the date that they expect their price change on a components to start.
- The impacted turbine models would allow the user to specify which turbines a component price change would impact.
- The quantity is a field that the user can enter data into, as they should be able to set the quantity that the saving will impact for each component.
- If user want to add or remove components, they can simply click "add component" button (04_4_scenario_analysis.png)
- Notice that user can perform search/filter in the add component modal window, we want to provide real time search result feature where the result list will appear when user enter the search/filter parameter.
- If user click clear link in the add component modal window, it will clear all checkbox selection.
- Once user finalize their component selection and the cost properties, they can start the simulation by click "Simulate" button.
- The simulation result screen (04_5_scenario_analysis.png) will show the cost forecast for all components that being selected before.
- Clicking Turbine model at the bottom area of the simulation result screen will bring user to Turbine Level Scenario Analysis Screen.
05. Turbine Level Scenario Analysis Screen
Desktop: 05_scenario_analysis_turbine_level.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- This is a breakdown of simulation result screen that will show cost forecast for particular Turbine model.
- Notice that the category area for the component related section at the bottom of the screen needs to be worked and show different data for each category (All, Head, HUB, etc)
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.
Images
- 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 images look sharp for All devices
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
Documentation Provided:
- Storyboards
- Component List document
- 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 in .zip format 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.
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 which aims to provide various views of data, reports, and analysis of data related to the material and inbound transportation cost of wind turbines. This application will serve Onshore businesses, although the specific data and reports may be tailored to the needs of each. We currently have approval for the Onshore aspects of the application. We want an application that accessible real time build and sales related costs of the direct material and other adder fees with scenario analysis capability. This apps will be available to all users with iphone, ipad or Desktop.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) on Ipads, iphones and Desktops that allow the viewer to access a specified number of reports from the existing "Greenplumb" database
- Create an interaction for basic scenario analysis functionality e.g. "what would the total year cost benefit be if a cost out idea was cut into the build plan on May 1 st"
- We are targetting desktop, tablet and mobile devices for this challenge.
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.
Screen Requirements
01. Dashboard Screen
Desktop: 01_1_dashboard_standard_cost.png to 01_3_dashboard_select_turbine.png
Tablet: 06_iPad_Dashboard.png
Mobile: 08_phone_dashboard.png and 09_phone_navigations.png
- The idea is to have a dynamic dashboard that able to show variety of data and views (OnShore/OffShore, Standard Cost/Cost Handbook) and their breakdowns.
- All graph/chart needs to be editable (it's up to you to do it, either via JSON or other approach).
- If you want to use plugin or framework to create the graph/chart, Please confirm first in forum.
- Need to provide clear indication on what data that user seen in this page (between offshore and onshore wind). All functionality would be the same, just provide a way to specify what data is being used. Note: This needs to be pretty obvious as we don't want users to be confused as to whether they are currently viewing metrics for onshore or offshore.
- In the cost by quarter analysis, we want to make sure we will also have a way to select the year that we are viewing, as we'll want to be able to look at other years as well (provide drop down value from 2016 to 2010)
- By default, show "Onshore" and "Standard Cost" as default view (01_1_dashboard_standard_cost.png)
- Provides different view for "Onshore" and "Standard Cost" (01_2_dashboard_cost_handbook.png)
- Notice the main navigation -> "Turbines" have sub-navigation where user can choose Turbine Model to navigate into turbine detail screen.
- Notice clicking the chart/graph will open modal window (similar to 02_2_turbine_detail_level.png) that show the progress tracking of the overall cost insight and status.
- In tablet area, some of the screen will be resizeable into carousel area, please make sure you capture this resize interaction in your prototype (06_iPad_Dashboard.png)
02. Turbine Detail Level Screen
Desktop: 02_1_turbine_detail_level.png to 02_2_turbine_detail_level.png
Tablet: 07_iPad_turbine_detail_level.png (For other screen, resize desktop version)
Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- While the layout looks similar with the dashboard, this screen will show different values and only count cost for one particular Turbine Model
- Notice that all drop down/selectbox should works and can be selected with other values, for ex. onshore/offshore, standard cost/cost handbook, all projects/project 1/project 2, 2016/2015/20--, etc)
- At the end of screen, there is a component related area. when viewing components we really like the ability to be able to select between each of the different major components to see only the related minor components. Note we would also want the default choice set to "All".
- Show differents component data for each category at the bottom screen (All, Head, Hub, Tower, etc).
- Notice clicking the chart/graph will open modal window (02_2_turbine_detail_level.png) that show the progress tracking of the turbine cost and status.
- Clicking any component list item in the bottom screen will bring user to Component Detail level Screen.
- In tablet area, some of the screen will be resizeable into carousel area, please make sure you capture this resize interaction in your prototype (07_iPad_turbine_detail_level.png)
03. Component Detail Level Screen
Desktop: 03_component_detail_level.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- While the layout looks similar with the dashboard and turbine, this screen will show different values and only count cost for one particular component (the cost breakdown)
- Notice that all drop down/selectbox should works and can be selected with other values, for ex. onshore/offshore, standard cost/cost handbook, all projects/project 1/project 2, 2016/2015/20--, etc)
- Notice clicking the chart/graph will open modal window (02_2_turbine_detail_level.png) that show the progress tracking of the turbine cost.
- Notice clicking the chart/graph will open modal window (similar to 02_2_turbine_detail_level.png) that show the progress tracking of the component cost and status.
04. Scenario Analysis Screen
Desktop: 04_1_scenario_analysis.png to 04_5_scenario_analysis.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- User can access this screen from analysis menu in main navigation.
- This screen will help user to simulate scenario analysis to get the best result for cost insight.
- Clicking "Add Component" button will open modal window that show all component list that user can select to start the simulation process (04_2_scenario_analysis.png).
- Notice that the component in the system can be thousand, so please put this into your consideration when built the prototype, is ther any easy way to be able manage these kind of data when user try to select them?
- User can select more than one component for the scenario analysis
- Once user finish select all the necessary component, user can start modify the cost properties (cost by percentage, modified/current cost, cut in date, impacted turbine model, quantity)
- The cut-in date would allow users to specify the date that they expect their price change on a components to start.
- The impacted turbine models would allow the user to specify which turbines a component price change would impact.
- The quantity is a field that the user can enter data into, as they should be able to set the quantity that the saving will impact for each component.
- If user want to add or remove components, they can simply click "add component" button (04_4_scenario_analysis.png)
- Notice that user can perform search/filter in the add component modal window, we want to provide real time search result feature where the result list will appear when user enter the search/filter parameter.
- If user click clear link in the add component modal window, it will clear all checkbox selection.
- Once user finalize their component selection and the cost properties, they can start the simulation by click "Simulate" button.
- The simulation result screen (04_5_scenario_analysis.png) will show the cost forecast for all components that being selected before.
- Clicking Turbine model at the bottom area of the simulation result screen will bring user to Turbine Level Scenario Analysis Screen.
05. Turbine Level Scenario Analysis Screen
Desktop: 05_scenario_analysis_turbine_level.png
Tablet and Mobile: No Storyboard Reference, Resize Desktop version
- Notice that there is no references for mobile and tablet, please use desktop version as base design for your prototype and resize it accordingly
- This is a breakdown of simulation result screen that will show cost forecast for particular Turbine model.
- Notice that the category area for the component related section at the bottom of the screen needs to be worked and show different data for each category (All, Head, HUB, etc)
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.
Images
- 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 images look sharp for All devices
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
Documentation Provided:
- Storyboards
- Component List document
Final Submission Guidelines
- Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.- 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 in .zip format to the Online Review Tool.