Challenge Overview
Welcome to GE Transportation Command Center UI Demo Challenge
The GE team and Topcoder has spent the last few weeks work shopping ideas and creating this great GE Transportation Command Center Experience. We are now looking to create the "Demo" that we can showcase at an upcoming event. We have a tight deadline as we need to deliver the demo for the event by next Friday the 26th.
We just completed design challenge with the result of modern, and futuristic storyboard screens.
We need your help to build UI Prototype/Demo based on the provided Storyboard design and specification below.
We are mostly focused on creating a great "Prototype/Demo" that looks and works great on Desktop and iPad Pro screens! We are not focused as must on "perfect prototype code" as must as how well this presents and captures how a user will interact with the map and sliders!
Storyboard.zip - Use this storyboard design when building the Demo
Invision Prototype: https://invis.io/JU8B1FXB4
Important!
- We will be presenting this on a large TV screen, Desktop and iPad Pro's
- Our priority need this prototype to look good and sharp on iPad Pro (2048px x 2732px)
- But, also need look good on Desktop screen size (1920px x 1080px)
- There is no storyboard provided for the iPad Pro size, you must recreate the retina graphic from provided storyboard
- You can use Bootstrap to build the layout or whatever HTML5 solution works for you.
- You will need to create the retina size of some icon/graphics based on existing Desktop storyboard.
- As possible all buttons and links should link/connect within the demo. If a page does not exist the button can be a dead link.
UI Prototype Details
Demo Focus
- We are looking to create a great "Demo" that works great on Desktop and iPad Pro's.
- The priority item on this prototype is the "Heat Map" and "Slider" and how the slider will show future versions of the heat map.
- The user is able to log into the application.
- 1-Problem_found.jpg: The first thing they will see the the map view and any "heat map" items that will draw their attention. - The user is able to open the right or bottom "drawers" to see additional information.
- 2-Problem_get_worse.jpg: The user is able to adjust the slider to see "future" views of the map (where there might be potential conflicts).
- The user is able to turn on/off map filters (top left corner) and also to switch from the "heat map" view to the "flat route" view.
- 5-Zooming_in_on_the_problem.jpg: The user can zoom and click into the heatmap/Yard and see the "Train Yard" view.
- 6-Resolving_the_problem-drag_drop.jpg: The user is able to click into the yard to view conflicts and take action on those conflicts
General Dashboard Layout:
- Where possible create transparency through CSS. For speed you can use images if needed.
- For iPad Pro screen size (2048px x 2732px), graphics will need to look sharp with Retina Sizes and without showing the browser scrollbar
- The page needs to adapt to 1920px x 1080px screen size without showing the browser scrollbar
- Lock orientation to Landscape View for iPad Pro.
Left Sidebar
- Left sidebar can use fixed width
- GE and Command Center logo placed on top
- There is an arrow to collapse/expand, disable for now
- User thumbnail wrapped with white colored circle border
- Match icons for each menu navigation
- Dashboard menu displaying the current active page
- “I’m Listening” buttons always placed on the bottom of left sidebar.
Main content area
- This area included Header, Map, Right sidebar and Bottom Bar
- This area must be fluid width
- When user resizes the browser, every items need adjusted in proper sizes
Header
- Toggle/filter buttons placed on the left side.
- Click each button need change toggle styling
- Slider placed centered of the main content area
- Change slider will reflect different situations on map. Read more detail below.
- Search input placed on the right side
Map area
- The Map Background should cover the browser screen and can be image based
- Interactions explained below
RIght Sidebar
- There are number indicators placed on top of each icons
- Click the white colored bar need expand into full version
Bottom bar
- On the left side there’s a view option buttons for Heat Map/Mesh and Rail Line View
- On center, Floating bar for Outcome Trends must placed horizontally of Main content area
- Click the white colored bar, need expand the bottom bar. More information below.
- On the right side there’s + and - button. They can be dead links
For this UI Prototype submission you need build this required flow/story:
1). Problem Found
Screenshot: 1-Problem Found.jpg
- This is default dashboard screen look after user logged in
- Mesh view selected by default, notice the map is tilted
- Mesh area can be transparent image based.
- There are some buttons above the mesh
- The map should change based on the slider
2). Problem Get Worse
Screenshot: 2-Problem Get Worse.jpg
- When user drags the slider they will see more conflicts "more heat map/mesh" items on the map.
- The story/demo shows the slider when it is moved to 48 hours in the future
3). Rail View
Screenshot: 3-A New View Of The Problem.jpg
- User see this view after click the Rail View toggle on the bottom left of screen
- Map is flat for this view
- The Rail map can be separate image but each dot needs to show tooltips when clicked on it.
- Tooltips need use related color based on density of one dot.
- Click on each dots need take to Detail yard screen explained below
- Click the bottom bar need load the Outcome Trends (Screenshot: 4-Quantifiying The Problem.jpg)
- There are 2 charts for Outcome Trends. No need build actual chart just use image based for both chart
- Also, there are alert box on below the toggle button
- Click X button will hide the box
- Only the Bottom bar or Right sidebar displayed one at a time
- Click the white bar on the right sidebar need hide the bottom bar and load full version of right sidebar (Screenshot: 4-Quantifiying The Problem-Bottom Drawer.jpg)
- On the right side, there are 2 separate sections for Alerts and Key Performance Indicators
- If possible create animation for the progress bar and numbers when the right sidebar shows up
4). Detail Yard
Screenshot: 5-Zooming In On The Problem.jpg
- This is Detail Yard look
- The colorful lines and background can be separate image based
- Hover on lines need load the tooltips
- Tooltips need display different color based on density level
- Click the line need load the Recommendation Modal Window
5). Recommendation Modal Window
Screenshot: 6-Resolving The Problem.jpg
- Modal Window need placed centered of the browser screen
- User is able to drag and drop each rows (Screenshot: 6-Resolving The Problem-Drag Drop.jpg)
- Screenshot displaying style of the row when being dragged
- Velocity legend placed on the right side
- There are affected yard information as button format on the bottom
- Re-Route Trains will load another window
6). Send Strategy Report
- Modal Window is placed centered of the browser screen
- On top of modal there are information step for Action, Justification and Action
- Notify upstream Yards, user need able to scroll the options
- Notify Yard button loads the Outcomes Modal window
7). Outcomes
Screenshot: 7-Outcomes.jpg
- This is the Outcomes modal window
- 3 icons displayed centered
- Save Detailed Report button can be dead link
- Back to Dashboard will take the user to the next screen
8). Resolved
Screenshot: 7-Resolved.jpg
- When this screen shows up you need displayed message status on top of map.
Client Priorities (The items that are considered highest prototype priorities)
- Browser priority is iPad Pro but still need look good on Desktop screen
- Creating quality and efficient "Demo" - smoothness, sharpness of graphics and the key items that can be captured and demo'd
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- 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
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all stylings, avoid image usage.
- 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
- 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.
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 Standard (Desktop) and Retina (iPad Pro)
Browsers Requirements
- Safari iPad Pro
- Chrome Latest Browser
The GE team and Topcoder has spent the last few weeks work shopping ideas and creating this great GE Transportation Command Center Experience. We are now looking to create the "Demo" that we can showcase at an upcoming event. We have a tight deadline as we need to deliver the demo for the event by next Friday the 26th.
We just completed design challenge with the result of modern, and futuristic storyboard screens.
We need your help to build UI Prototype/Demo based on the provided Storyboard design and specification below.
We are mostly focused on creating a great "Prototype/Demo" that looks and works great on Desktop and iPad Pro screens! We are not focused as must on "perfect prototype code" as must as how well this presents and captures how a user will interact with the map and sliders!
Final Submission Guidelines
Downloadable Files:Storyboard.zip - Use this storyboard design when building the Demo
Invision Prototype: https://invis.io/JU8B1FXB4
Important!
- We will be presenting this on a large TV screen, Desktop and iPad Pro's
- Our priority need this prototype to look good and sharp on iPad Pro (2048px x 2732px)
- But, also need look good on Desktop screen size (1920px x 1080px)
- There is no storyboard provided for the iPad Pro size, you must recreate the retina graphic from provided storyboard
- You can use Bootstrap to build the layout or whatever HTML5 solution works for you.
- You will need to create the retina size of some icon/graphics based on existing Desktop storyboard.
- As possible all buttons and links should link/connect within the demo. If a page does not exist the button can be a dead link.
UI Prototype Details
Demo Focus
- We are looking to create a great "Demo" that works great on Desktop and iPad Pro's.
- The priority item on this prototype is the "Heat Map" and "Slider" and how the slider will show future versions of the heat map.
- The user is able to log into the application.
- 1-Problem_found.jpg: The first thing they will see the the map view and any "heat map" items that will draw their attention. - The user is able to open the right or bottom "drawers" to see additional information.
- 2-Problem_get_worse.jpg: The user is able to adjust the slider to see "future" views of the map (where there might be potential conflicts).
- The user is able to turn on/off map filters (top left corner) and also to switch from the "heat map" view to the "flat route" view.
- 5-Zooming_in_on_the_problem.jpg: The user can zoom and click into the heatmap/Yard and see the "Train Yard" view.
- 6-Resolving_the_problem-drag_drop.jpg: The user is able to click into the yard to view conflicts and take action on those conflicts
General Dashboard Layout:
- Where possible create transparency through CSS. For speed you can use images if needed.
- For iPad Pro screen size (2048px x 2732px), graphics will need to look sharp with Retina Sizes and without showing the browser scrollbar
- The page needs to adapt to 1920px x 1080px screen size without showing the browser scrollbar
- Lock orientation to Landscape View for iPad Pro.
Left Sidebar
- Left sidebar can use fixed width
- GE and Command Center logo placed on top
- There is an arrow to collapse/expand, disable for now
- User thumbnail wrapped with white colored circle border
- Match icons for each menu navigation
- Dashboard menu displaying the current active page
- “I’m Listening” buttons always placed on the bottom of left sidebar.
Main content area
- This area included Header, Map, Right sidebar and Bottom Bar
- This area must be fluid width
- When user resizes the browser, every items need adjusted in proper sizes
Header
- Toggle/filter buttons placed on the left side.
- Click each button need change toggle styling
- Slider placed centered of the main content area
- Change slider will reflect different situations on map. Read more detail below.
- Search input placed on the right side
Map area
- The Map Background should cover the browser screen and can be image based
- Interactions explained below
RIght Sidebar
- There are number indicators placed on top of each icons
- Click the white colored bar need expand into full version
Bottom bar
- On the left side there’s a view option buttons for Heat Map/Mesh and Rail Line View
- On center, Floating bar for Outcome Trends must placed horizontally of Main content area
- Click the white colored bar, need expand the bottom bar. More information below.
- On the right side there’s + and - button. They can be dead links
For this UI Prototype submission you need build this required flow/story:
1). Problem Found
Screenshot: 1-Problem Found.jpg
- This is default dashboard screen look after user logged in
- Mesh view selected by default, notice the map is tilted
- Mesh area can be transparent image based.
- There are some buttons above the mesh
- The map should change based on the slider
2). Problem Get Worse
Screenshot: 2-Problem Get Worse.jpg
- When user drags the slider they will see more conflicts "more heat map/mesh" items on the map.
- The story/demo shows the slider when it is moved to 48 hours in the future
3). Rail View
Screenshot: 3-A New View Of The Problem.jpg
- User see this view after click the Rail View toggle on the bottom left of screen
- Map is flat for this view
- The Rail map can be separate image but each dot needs to show tooltips when clicked on it.
- Tooltips need use related color based on density of one dot.
- Click on each dots need take to Detail yard screen explained below
- Click the bottom bar need load the Outcome Trends (Screenshot: 4-Quantifiying The Problem.jpg)
- There are 2 charts for Outcome Trends. No need build actual chart just use image based for both chart
- Also, there are alert box on below the toggle button
- Click X button will hide the box
- Only the Bottom bar or Right sidebar displayed one at a time
- Click the white bar on the right sidebar need hide the bottom bar and load full version of right sidebar (Screenshot: 4-Quantifiying The Problem-Bottom Drawer.jpg)
- On the right side, there are 2 separate sections for Alerts and Key Performance Indicators
- If possible create animation for the progress bar and numbers when the right sidebar shows up
4). Detail Yard
Screenshot: 5-Zooming In On The Problem.jpg
- This is Detail Yard look
- The colorful lines and background can be separate image based
- Hover on lines need load the tooltips
- Tooltips need display different color based on density level
- Click the line need load the Recommendation Modal Window
5). Recommendation Modal Window
Screenshot: 6-Resolving The Problem.jpg
- Modal Window need placed centered of the browser screen
- User is able to drag and drop each rows (Screenshot: 6-Resolving The Problem-Drag Drop.jpg)
- Screenshot displaying style of the row when being dragged
- Velocity legend placed on the right side
- There are affected yard information as button format on the bottom
- Re-Route Trains will load another window
6). Send Strategy Report
- Modal Window is placed centered of the browser screen
- On top of modal there are information step for Action, Justification and Action
- Notify upstream Yards, user need able to scroll the options
- Notify Yard button loads the Outcomes Modal window
7). Outcomes
Screenshot: 7-Outcomes.jpg
- This is the Outcomes modal window
- 3 icons displayed centered
- Save Detailed Report button can be dead link
- Back to Dashboard will take the user to the next screen
8). Resolved
Screenshot: 7-Resolved.jpg
- When this screen shows up you need displayed message status on top of map.
Client Priorities (The items that are considered highest prototype priorities)
- Browser priority is iPad Pro but still need look good on Desktop screen
- Creating quality and efficient "Demo" - smoothness, sharpness of graphics and the key items that can be captured and demo'd
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- 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
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all stylings, avoid image usage.
- 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
- 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.
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 Standard (Desktop) and Retina (iPad Pro)
Browsers Requirements
- Safari iPad Pro
- Chrome Latest Browser