Challenge Overview
Welcome to GE - Risk Assessment Dashboard Prototype Challenge!
The Risk Assessment Tool will help our customer to manage and control possible risks that happen around the business. The application is very simple, one shared dashboard among a group of users. The application will be used in desktop and tablet browsers.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular. You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
* IMPORTANT* 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.
About GE Risks Assessment Tool
This application is being built with the intention of creating a conversation about risks a business can face and the controls in place to manage those risks. This app will allow users to collaborate on how likely a risk is to occur, by assigning it a position on a scatterplot graph. Other users can propose moving that risk to a different position on a scatterplot along with comments on why they think it should be elsewhere.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Login
- See 01_1_Login.jpg, 01_2_Login-Filled-In.jpg, 01_3_Login-Error.jpg.
- Provide error scenarios and proper styling.
- Remove Register Now link from login. Not needed.
2. Dashboard
Dashboard shows graphs organized by hierarchy display layers for different types of users. For this prototype, you’re working with the owner user, who has access to all the features of the application.
Graphs will be developed in another challenge. Use image placeholder for the graphs and nodes. EXCEPT for the UI elements on the top right and left within the graph. Grids checkbox and dropdowns used among the graphs must be developed on this challenge.
Export, Print and Email buttons are dead links.
2.1. Company Rollups
- Summary view of all average weights of nodes from all graphs - 02_1_1_Dashboard-Corporate-CompanyRollups.jpg.
- Show nodes list on the left. In the center the graph.
- Clicking View T1 Rollup button goes to 02_1_2_Dashboard-Corporate-T1Rollups.jpg (same target as T1 Level Reporting in the main navigation).
2.2. T1 Rollups
- Summary view all average weights of nodes composed by sibling charts from T1 layer - 02_1_2_Dashboard-Corporate-T1Rollups.jpg.
- Clicking View T2 Rollsup opens 02_1_3_Dashboard-Corporate.jpg.
2.3. T1 Rollup - Power
- Detailed view of user group called Power - 02_1_3_Dashboard-Corporate.jpg.
- Clicking View T2 Rollup opens 02_1_4_0_Dashboard-Corporate-T2Rollups.jpg.
2.4. T2 Rollups
- Summary view of all average weights of nodes composed by sibling charts from T2 layer - 02_1_4_0_Dashboard-Corporate-T2Rollups.jpg.
- Graphs shouldn’t have "View T2 Rollups" button at the bottom, ignore/remove them.
- It’s at this hierarchy level corporate user can create new graphs.
2.5. Add new Graph
- Create the modal - 02_1_4_1_Dashboard-Corporate-AddGraph.jpg.
- After creating a new graph, a blank chart is displayed. The user can place nodes. This functionality is out of scope. The information is provided for your information, so you have a sense of how the app works - 02_1_5_0_Dashboard-Corporate.jpg. Again, use an image placeholder for graphs.
- The T1 layer dropdown options are (for screen 02_1_4_1_Dashboard-Corporate-AddGraph.jpg):
-- Power.
-- T1 Group A.
-- T1 Group B.
2.6. T2 Rollup - Gas
- Node options appear on clicking the three vertical dots - 02_1_5_1_Dashboard-Corporate.jpg.
- User can edit nodes information - 02_1_5_2_Dashboard-Corporate-Edit.jpg. Editing nodes provides a color picker, make sure to include it - 02_1_6_10_Dashboard-Corporate-ViewChildren-Edit.jpg.
- User can add comments from node options - 02_1_5_3_Dashboard-Corporate-Comment.jpg.
- On hovering a node in the left panel, you can see an arrow icon (within a circle). Clicking on it, provides a brief description of the node - 02_1_6_5_Dashboard-Corporate-ViewChildren-Expand.jpg, 02_1_6_6_Dashboard-Corporate-ViewChildren-Expand.jpg. Notice that “Key Controls”, “Assurance”, “Improvement” and “Priority” titles are color coded and tied to the same color of the node (vertical colored bar left to the node name).
- Moving nodes functionality is out of scope.
- History:
-- Show the history modal, 02_1_5_4_Dashboard-Corporate-History1.jpg.
-- Use an image placeholder for the graph BUT create the proper dropdown and checkbox on the top side.
-- Also, create the comment hover component 02_1_5_5_Dashboard-Corporate-History2.jpg. The interaction doesn’t need to be coded, just display the overlay somewhere inside the image placeholder. We’ll take care of this functionality in another dev phase.
2.7. T2 Level 2 - IPP
- Some nodes can have children nodes, such as IPP - 02_1_6_0_Dashboard-Corporate-ViewChildren.jpg.
- Notice how the nodes on the left are different items on this page.
Out of scope screens
The following screens are definitely out of scope, they're there just to help showing the workflow but you don't have to present them in your prototype.
- From Desktop folder: 02_1_6_2_Dashboard-Corporate-ViewChildren-Clicked.jpg, 02_1_6_3_Dashboard-Corporate-ViewChildren-Moved.jpg.
- From Tablet folder: 02_1_6_1_Dashboard-Corporate-ViewChildren-Tap.jpg, 02_1_6_2_Dashboard-Corporate-ViewChildren-Moved.jpg.
Breadcrubms sense
Breadcrumbs don't make much sense in the design right now. They should be as described:
- At 02_1_1: Company Rollups.
- At 02_1_2: T1 Rollups.
- At 02_1_3: T1 Rollups > Power
- At 02_1_4_0: T1 Rollups > Power > T2 Rollups
- At 02_1_5_*: T1 Rollups > Power > T2 Rollups > Gas
- At 02_1_6_*: T1 Rollups > Power > T2 Rollups > Gas > IPP
- Tablet version doesn't show breadcrumbs.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a 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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop and tablet views (browser).
- Must support retina.
- Desktop: 1280px min width. Height as much as needed.
- Tablet: 768px width. Height as much as needed. Notice the provided design is under 1536px but is for retina support purposes.
- In spite mobile is not supported at this stage, consider making your CSS code flexible enough to add support for lower resolutions (fluid grid system).
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Android and Safari Browsers.
- Provide all your files within a zip container.
The Risk Assessment Tool will help our customer to manage and control possible risks that happen around the business. The application is very simple, one shared dashboard among a group of users. The application will be used in desktop and tablet browsers.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular. You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
* IMPORTANT* 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.
About GE Risks Assessment Tool
This application is being built with the intention of creating a conversation about risks a business can face and the controls in place to manage those risks. This app will allow users to collaborate on how likely a risk is to occur, by assigning it a position on a scatterplot graph. Other users can propose moving that risk to a different position on a scatterplot along with comments on why they think it should be elsewhere.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Login
- See 01_1_Login.jpg, 01_2_Login-Filled-In.jpg, 01_3_Login-Error.jpg.
- Provide error scenarios and proper styling.
- Remove Register Now link from login. Not needed.
2. Dashboard
Dashboard shows graphs organized by hierarchy display layers for different types of users. For this prototype, you’re working with the owner user, who has access to all the features of the application.
Graphs will be developed in another challenge. Use image placeholder for the graphs and nodes. EXCEPT for the UI elements on the top right and left within the graph. Grids checkbox and dropdowns used among the graphs must be developed on this challenge.
Export, Print and Email buttons are dead links.
2.1. Company Rollups
- Summary view of all average weights of nodes from all graphs - 02_1_1_Dashboard-Corporate-CompanyRollups.jpg.
- Show nodes list on the left. In the center the graph.
- Clicking View T1 Rollup button goes to 02_1_2_Dashboard-Corporate-T1Rollups.jpg (same target as T1 Level Reporting in the main navigation).
2.2. T1 Rollups
- Summary view all average weights of nodes composed by sibling charts from T1 layer - 02_1_2_Dashboard-Corporate-T1Rollups.jpg.
- Clicking View T2 Rollsup opens 02_1_3_Dashboard-Corporate.jpg.
2.3. T1 Rollup - Power
- Detailed view of user group called Power - 02_1_3_Dashboard-Corporate.jpg.
- Clicking View T2 Rollup opens 02_1_4_0_Dashboard-Corporate-T2Rollups.jpg.
2.4. T2 Rollups
- Summary view of all average weights of nodes composed by sibling charts from T2 layer - 02_1_4_0_Dashboard-Corporate-T2Rollups.jpg.
- Graphs shouldn’t have "View T2 Rollups" button at the bottom, ignore/remove them.
- It’s at this hierarchy level corporate user can create new graphs.
2.5. Add new Graph
- Create the modal - 02_1_4_1_Dashboard-Corporate-AddGraph.jpg.
- After creating a new graph, a blank chart is displayed. The user can place nodes. This functionality is out of scope. The information is provided for your information, so you have a sense of how the app works - 02_1_5_0_Dashboard-Corporate.jpg. Again, use an image placeholder for graphs.
- The T1 layer dropdown options are (for screen 02_1_4_1_Dashboard-Corporate-AddGraph.jpg):
-- Power.
-- T1 Group A.
-- T1 Group B.
2.6. T2 Rollup - Gas
- Node options appear on clicking the three vertical dots - 02_1_5_1_Dashboard-Corporate.jpg.
- User can edit nodes information - 02_1_5_2_Dashboard-Corporate-Edit.jpg. Editing nodes provides a color picker, make sure to include it - 02_1_6_10_Dashboard-Corporate-ViewChildren-Edit.jpg.
- User can add comments from node options - 02_1_5_3_Dashboard-Corporate-Comment.jpg.
- On hovering a node in the left panel, you can see an arrow icon (within a circle). Clicking on it, provides a brief description of the node - 02_1_6_5_Dashboard-Corporate-ViewChildren-Expand.jpg, 02_1_6_6_Dashboard-Corporate-ViewChildren-Expand.jpg. Notice that “Key Controls”, “Assurance”, “Improvement” and “Priority” titles are color coded and tied to the same color of the node (vertical colored bar left to the node name).
- Moving nodes functionality is out of scope.
- History:
-- Show the history modal, 02_1_5_4_Dashboard-Corporate-History1.jpg.
-- Use an image placeholder for the graph BUT create the proper dropdown and checkbox on the top side.
-- Also, create the comment hover component 02_1_5_5_Dashboard-Corporate-History2.jpg. The interaction doesn’t need to be coded, just display the overlay somewhere inside the image placeholder. We’ll take care of this functionality in another dev phase.
2.7. T2 Level 2 - IPP
- Some nodes can have children nodes, such as IPP - 02_1_6_0_Dashboard-Corporate-ViewChildren.jpg.
- Notice how the nodes on the left are different items on this page.
Out of scope screens
The following screens are definitely out of scope, they're there just to help showing the workflow but you don't have to present them in your prototype.
- From Desktop folder: 02_1_6_2_Dashboard-Corporate-ViewChildren-Clicked.jpg, 02_1_6_3_Dashboard-Corporate-ViewChildren-Moved.jpg.
- From Tablet folder: 02_1_6_1_Dashboard-Corporate-ViewChildren-Tap.jpg, 02_1_6_2_Dashboard-Corporate-ViewChildren-Moved.jpg.
Breadcrubms sense
Breadcrumbs don't make much sense in the design right now. They should be as described:
- At 02_1_1: Company Rollups.
- At 02_1_2: T1 Rollups.
- At 02_1_3: T1 Rollups > Power
- At 02_1_4_0: T1 Rollups > Power > T2 Rollups
- At 02_1_5_*: T1 Rollups > Power > T2 Rollups > Gas
- At 02_1_6_*: T1 Rollups > Power > T2 Rollups > Gas > IPP
- Tablet version doesn't show breadcrumbs.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a 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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop and tablet views (browser).
- Must support retina.
- Desktop: 1280px min width. Height as much as needed.
- Tablet: 768px width. Height as much as needed. Notice the provided design is under 1536px but is for retina support purposes.
- In spite mobile is not supported at this stage, consider making your CSS code flexible enough to add support for lower resolutions (fluid grid system).
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Android and Safari Browsers.
Final Submission Guidelines
- Include both source & prebuilt/minified.- Provide all your files within a zip container.