Challenge Summary
Welcome to GE - Risk Assessment Tool Responsive Design Challenge!
We are pleased to bring another GE project to the community. The Risk Assessment Tool will help our customer to manage and control possible risks that happen around the business. The application is very simple, we require your skills and imagination to represent data the best way possible.
Best of luck!
1. Login (desktop view ONLY)
2. Dashboard (desktop and tablet views) - provide all screens for corporate user only (2.1).
- If you have time please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Login (desktop and tablet views)
2. Dashboard (desktop and tablet views)
2.1. Corporate user view
2.2. T1 user view
2.3. T2 user view
2.4. CRB user view
- If you have time please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to create the look and feel of the Risk Assessment Tool responsive web application for GE.
We recently developed wireframes for this application in another challenge. You are provided with these as reference. You must create your design solution based on the wireframes by applying your own creative process and GE branding.
* 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. 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.
Design Problem
It’s a simple application that takes advantage of a dashboard to provide graphic guidance about risks. It’s quite simple, it uses scatterplot graphs (with 4 quadrants) to display risk data, however, it’s very important the way you display data, it’s a very sensitive issue.
We need you to think in possible ways to display this data in an efficient way, easy to understand at first sight, considering the history and amount of nodes a chart can contain.
Users
1. Corporate User (creates charts, places nodes - the only user who can perform these mentioned actions).
2. T1 Business User (makes edits to node locations, adds comments, cannot create charts neither add nodes).
3. T2 Business User (makes edits to node locations, adds comments, cannot create charts neither add nodes). Has an order participation difference in comparison with T1. See more below in the workflow.
4. CRB - Compliance Review Board. Compliance team shares status updates on the state of the program with the leadership teams within their businesses (view only role).
User Workflow
- Corporate users create the intial scatterplots.
- T1 Users log in and see what corporate created. They move things around with comments.
- T2 Users log in, and see the combination of data from corporate and T1. They can see if something moved and the comments. They can move again and add comments of their own.
- Corporate logs back in and can see how things ended up after others have edited and commented.
Screens Requirements
Overall
- Follow the provided wireframes for data and visual reference. However, DO NOT SIMPLY SKIN THEM to look good. Add your own thoughts and creative process to the flow of the application. You’re encouraged to propose improvements.
- Show hover/active states for buttons, dropdowns, elements with interaction, etc.
- Provide error scenarios, validation and consider giving the application a real use to come up with more cases to display states for.
- Consider creating pagination and handling scenarios of real data, multiple amount of elements, and so on. Explore the options beyond the wireframe.
- Your design must cover and display all user roles:
-- Corporate user
-- T1 user
-- T2 user
-- CRB user
1. Login
See Login in wireframes.
- Provide error and validation states.
2. Dashboard
Users land on this page after login. It’s where the main activity is taken care of. Users get to see the charts, create new ones, add nodes, depending on the user role.
Each risk graph must handle the following (actions depend on the user role):
- Title
- Nodes (dots in the graph). At the same time, nodes handle the following:
-- Title: name to display if expanded (details view).
-- Label: short title to be used in the graph.
-- Position: initially parent nodes are added manually by the corporate user. If adding a child node in a child graph, user should be warned that the location of the parent will be auto-calculated based on the children nodes.
-- Comments: added to a node or to a movement. If there is a user who moves/changes the position of the node, there must be a tied comment to explain the reason of this change.
There are several reporting/display layers of charts. T1 users can move nodes on all charts below it in the hierarchy. T2 users can only move nodes in the specific chart they are assigned to. For example, if a T1 user is in the Power group, he can edit both Steam and Gas charts, because they are children of Power. A user assigned to Gas group can only edit the Chart for Gas.
User management (roles, user groups) will be handled by an external application. Not in scope for this challenge.
The available nodes are already defined in the application, the corporate user can place them in the graph. T1/T2 users can move their position and comment. Notice users CANNOT actually create nodes.
Whenever you see “Drag and drop the node into the chart to add a new node” ignore that feature, it’s not necessary.
All available nodes are defined (name - label). You’ll use the following in the Add new Graph page:
- Cyber Security and Privacy - CSP
- Competition Law - CL
- Joint Ventures - JV
- Consortia / EPCs - EPC
- Customs - C
- FEP - FEP
- Conflicts of Interest - COI
- Petty Cash / Check books - PC
- Open reporting - OR
- Training - T
- Anti-Money Laundering - AML
- Working with Governments - WG
- Intellectual Property - IP
- ITC - ITC (this node has as child):
-- Customers - CC
- Improper payments - IPP (this node has as children):
-- ITPs - ITP
-- ASPs - ASP
-- Business Courtesies - BC
-- Suppliers - S
-- Cash/Disbursements - CD
- Your solution must cover all user role features from wireframes. We want to see your solution distributed by role. It will be repetitive but it will help visualize each user actions better for the development process. Deliver the following below.
2.1. Dashboard - Corporate User
Include from wireframes the following views (organized and displayed by your suggestions):
- Company Rollups
-- Summary view of all average weights of nodes from all graphs.
-- It’s an important view. The graph/chart should be prominent and easy to understand.
- T1 Rollups
-- Summary view all average weights of nodes composed by sibling charts from T1 layer.
- T1 Rollup - Power
-- Detailed view of user group called Power.
- T2 Rollups
-- Summary view of all average weights of nodes composed by sibling charts from T2 layer.
-- It’s at this hierarchy level corporate user can create new graphs.
- Add new Graph
-- When creating the graph, besides the title, there must be a dropdown to choose the T1 layer this chart will be related to (it's not in the wireframes, you must add it).
-- Show screens for placing and moving a node (with comment request after positioning). When a user creates the graphs ALL available nodes should be in place inside the graph, including the children nodes (see above the complete list). They will have a default position, the same every time a new graph is created. This position is up to you for now (will be adjusted in development process).
-- Show Edit node. Note that color can be changed, but choices should be limited and node colors will be the same across all charts (if IPP is changed to green, then all IPPs in all charts will be green).
-- Show how to add and view comments to a node.
-- Show node history.
-- Ignore “remove node”. Nodes can not be removed.
-- Ignore “add children” - not in scope.
- T2 Rollup - Gas
-- Some nodes can have children nodes (e.g. IPP and ITC).
-- The app should handle node hierarchy and auto-positioning: not a data to show per se, a capability. A node can have N amount of node children and ability to drill-down deep to each detail view of node, which is basically another nested scatterplot with more nodes. Once you add a child node underneath a parent, its position should then be calculated from those children. If there are five children nodes, the parents position on its chart would be based on the average position of the five child nodes. Click on IPP node > View Children, to see the sample.
-- Clicking on the “R” icon over IPP node shows the recent movement history, a quick view.
- T2 Level 2 - IPP
-- Ignore “Add Children” page
-- When viewing a child graph node, its parent node should be highlighted inside the same chart somehow (displayed as a faded node maybe?). We’d like to have this representation to show relationship. You can suggest something else, of course. Just keep in mind the importance of showing the node child-parent relationship.
2.2. Dashboard - T1 User
- Power group
- T2 Rollups
- T2 Rollup - Gas
- T2 Level 2 - IPP
2.3. Dashboard - T2 User
- Gas
- T2 Level 2 - IPP
2.4. Dashboard - CRB User
Overall, this user has access to the same areas as Corporate user, however, only for viewing comments, history and exporting features (share, email, etc).
- Company Rollups
- T1 Rollups
- T1 Rollup - Power
- T2 Rollups
- T2 Rollups - Gas
- T2 Level 2 - IPP
Branding Guidelines
- Download and follow the GE Branding Guidelines.
- Use the logo, colors, fonts and the IIDX Template files (Visual Design Guidance).
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Must support desktop and tablet views.
- Desktop: 1280px min width. Height as much as needed.
- Tablet: 1536px width. Height as much as needed.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Target User
- Internal users who report and manage operational risks.
- Stakeholders who would view data input by the internal users.
Judging Criteria
- Interpretation and adherence to the GE Branding Guidelines.
- Interpretation of the user experience.
- Is the application easy to use?
- Completeness and accuracy of the designs based on our wireframes.
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
We are pleased to bring another GE project to the community. The Risk Assessment Tool will help our customer to manage and control possible risks that happen around the business. The application is very simple, we require your skills and imagination to represent data the best way possible.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Login (desktop view ONLY)
2. Dashboard (desktop and tablet views) - provide all screens for corporate user only (2.1).
- If you have time please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Login (desktop and tablet views)
2. Dashboard (desktop and tablet views)
2.1. Corporate user view
2.2. T1 user view
2.3. T2 user view
2.4. CRB user view
- If you have time please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to create the look and feel of the Risk Assessment Tool responsive web application for GE.
We recently developed wireframes for this application in another challenge. You are provided with these as reference. You must create your design solution based on the wireframes by applying your own creative process and GE branding.
* 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. 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.
Design Problem
It’s a simple application that takes advantage of a dashboard to provide graphic guidance about risks. It’s quite simple, it uses scatterplot graphs (with 4 quadrants) to display risk data, however, it’s very important the way you display data, it’s a very sensitive issue.
We need you to think in possible ways to display this data in an efficient way, easy to understand at first sight, considering the history and amount of nodes a chart can contain.
Users
1. Corporate User (creates charts, places nodes - the only user who can perform these mentioned actions).
2. T1 Business User (makes edits to node locations, adds comments, cannot create charts neither add nodes).
3. T2 Business User (makes edits to node locations, adds comments, cannot create charts neither add nodes). Has an order participation difference in comparison with T1. See more below in the workflow.
4. CRB - Compliance Review Board. Compliance team shares status updates on the state of the program with the leadership teams within their businesses (view only role).
User Workflow
- Corporate users create the intial scatterplots.
- T1 Users log in and see what corporate created. They move things around with comments.
- T2 Users log in, and see the combination of data from corporate and T1. They can see if something moved and the comments. They can move again and add comments of their own.
- Corporate logs back in and can see how things ended up after others have edited and commented.
Screens Requirements
Overall
- Follow the provided wireframes for data and visual reference. However, DO NOT SIMPLY SKIN THEM to look good. Add your own thoughts and creative process to the flow of the application. You’re encouraged to propose improvements.
- Show hover/active states for buttons, dropdowns, elements with interaction, etc.
- Provide error scenarios, validation and consider giving the application a real use to come up with more cases to display states for.
- Consider creating pagination and handling scenarios of real data, multiple amount of elements, and so on. Explore the options beyond the wireframe.
- Your design must cover and display all user roles:
-- Corporate user
-- T1 user
-- T2 user
-- CRB user
1. Login
See Login in wireframes.
- Provide error and validation states.
2. Dashboard
Users land on this page after login. It’s where the main activity is taken care of. Users get to see the charts, create new ones, add nodes, depending on the user role.
Each risk graph must handle the following (actions depend on the user role):
- Title
- Nodes (dots in the graph). At the same time, nodes handle the following:
-- Title: name to display if expanded (details view).
-- Label: short title to be used in the graph.
-- Position: initially parent nodes are added manually by the corporate user. If adding a child node in a child graph, user should be warned that the location of the parent will be auto-calculated based on the children nodes.
-- Comments: added to a node or to a movement. If there is a user who moves/changes the position of the node, there must be a tied comment to explain the reason of this change.
There are several reporting/display layers of charts. T1 users can move nodes on all charts below it in the hierarchy. T2 users can only move nodes in the specific chart they are assigned to. For example, if a T1 user is in the Power group, he can edit both Steam and Gas charts, because they are children of Power. A user assigned to Gas group can only edit the Chart for Gas.
User management (roles, user groups) will be handled by an external application. Not in scope for this challenge.
The available nodes are already defined in the application, the corporate user can place them in the graph. T1/T2 users can move their position and comment. Notice users CANNOT actually create nodes.
Whenever you see “Drag and drop the node into the chart to add a new node” ignore that feature, it’s not necessary.
All available nodes are defined (name - label). You’ll use the following in the Add new Graph page:
- Cyber Security and Privacy - CSP
- Competition Law - CL
- Joint Ventures - JV
- Consortia / EPCs - EPC
- Customs - C
- FEP - FEP
- Conflicts of Interest - COI
- Petty Cash / Check books - PC
- Open reporting - OR
- Training - T
- Anti-Money Laundering - AML
- Working with Governments - WG
- Intellectual Property - IP
- ITC - ITC (this node has as child):
-- Customers - CC
- Improper payments - IPP (this node has as children):
-- ITPs - ITP
-- ASPs - ASP
-- Business Courtesies - BC
-- Suppliers - S
-- Cash/Disbursements - CD
- Your solution must cover all user role features from wireframes. We want to see your solution distributed by role. It will be repetitive but it will help visualize each user actions better for the development process. Deliver the following below.
2.1. Dashboard - Corporate User
Include from wireframes the following views (organized and displayed by your suggestions):
- Company Rollups
-- Summary view of all average weights of nodes from all graphs.
-- It’s an important view. The graph/chart should be prominent and easy to understand.
- T1 Rollups
-- Summary view all average weights of nodes composed by sibling charts from T1 layer.
- T1 Rollup - Power
-- Detailed view of user group called Power.
- T2 Rollups
-- Summary view of all average weights of nodes composed by sibling charts from T2 layer.
-- It’s at this hierarchy level corporate user can create new graphs.
- Add new Graph
-- When creating the graph, besides the title, there must be a dropdown to choose the T1 layer this chart will be related to (it's not in the wireframes, you must add it).
-- Show screens for placing and moving a node (with comment request after positioning). When a user creates the graphs ALL available nodes should be in place inside the graph, including the children nodes (see above the complete list). They will have a default position, the same every time a new graph is created. This position is up to you for now (will be adjusted in development process).
-- Show Edit node. Note that color can be changed, but choices should be limited and node colors will be the same across all charts (if IPP is changed to green, then all IPPs in all charts will be green).
-- Show how to add and view comments to a node.
-- Show node history.
-- Ignore “remove node”. Nodes can not be removed.
-- Ignore “add children” - not in scope.
- T2 Rollup - Gas
-- Some nodes can have children nodes (e.g. IPP and ITC).
-- The app should handle node hierarchy and auto-positioning: not a data to show per se, a capability. A node can have N amount of node children and ability to drill-down deep to each detail view of node, which is basically another nested scatterplot with more nodes. Once you add a child node underneath a parent, its position should then be calculated from those children. If there are five children nodes, the parents position on its chart would be based on the average position of the five child nodes. Click on IPP node > View Children, to see the sample.
-- Clicking on the “R” icon over IPP node shows the recent movement history, a quick view.
- T2 Level 2 - IPP
-- Ignore “Add Children” page
-- When viewing a child graph node, its parent node should be highlighted inside the same chart somehow (displayed as a faded node maybe?). We’d like to have this representation to show relationship. You can suggest something else, of course. Just keep in mind the importance of showing the node child-parent relationship.
2.2. Dashboard - T1 User
- Power group
- T2 Rollups
- T2 Rollup - Gas
- T2 Level 2 - IPP
2.3. Dashboard - T2 User
- Gas
- T2 Level 2 - IPP
2.4. Dashboard - CRB User
Overall, this user has access to the same areas as Corporate user, however, only for viewing comments, history and exporting features (share, email, etc).
- Company Rollups
- T1 Rollups
- T1 Rollup - Power
- T2 Rollups
- T2 Rollups - Gas
- T2 Level 2 - IPP
Branding Guidelines
- Download and follow the GE Branding Guidelines.
- Use the logo, colors, fonts and the IIDX Template files (Visual Design Guidance).
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Must support desktop and tablet views.
- Desktop: 1280px min width. Height as much as needed.
- Tablet: 1536px width. Height as much as needed.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Target User
- Internal users who report and manage operational risks.
- Stakeholders who would view data input by the internal users.
Judging Criteria
- Interpretation and adherence to the GE Branding Guidelines.
- Interpretation of the user experience.
- Is the application easy to use?
- Completeness and accuracy of the designs based on our wireframes.
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.