Challenge Summary
Welcome to IDC Dashboard Responsive Design Challenge.
We need your wise skills to redesign a responsive web application that helps user viewing and identifying the defective lot in a production line, as well as analyzing the root of causes and notifying respective user through messages. It’s a quite straight-forward design with analytic approach, jump in now!
Best of luck!
1. Plant Selector (Desktop only)
2. Yield Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Plant Selector
2. Yield Dashboard
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to redesign the look and feel of an existing desktop application. We are creating a web solution which layout fits smoothly from desktop-tablet-mobile (fluid width). This tool has for goal to view, detect, analyze and act over plant production lines through a dashboard page to help the managers take corrective actions in quick time.
Concept Goals
Main goal is to have the design solution covering the flow philosophy efficiently: View, Detect, Analyze, Act. It should allow to recognize and apply this pattern seamlessly. The ability to interact with the dashboard and analyze results will be key for the users.
We are looking forward to see a design solution that converts the user stories into real scenario:
- Display multiple screens with data to show the flow from the user stories (watch, iPad, etc not needed, just webapp).
We are open to ideas and suggestions regarding to styling, leaning towards a flat, solid and well spaced look. Consider target audience, manufacturing industry customers; eg. Caterpillar, Ford, Whirlpool, etc.
Screens Requirements
Overall
- Look to capture the user story in a mobile/desktop experience (ignore iWatch and any other mentioned devices - this challenge is focused in the web dashboard only).
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Navigation: Dashboard navigation must include logo, user profile picture, logout link and the main navigation items:
-- Yield.
-- Production.
-- Quality.
1. Plant Selector (Desktop and Phone)
Selection page the user gets to see before jumping into the dashboard (see sample reference).
- The screen marked as 1, will have tab for selecting a plant or the functionality should provide a dropdown for plant selection on the map.
- The yield value for last 7 days will be shown on the world map (Green for good yield and Red for bad yield).
- When the user clicks on the bad yield value (red), then the boxes marked as 2 appear.
- Similar to Indicator boxes we will have two boxes with Product Names (Table A) and Equipment Names (Table B) with their Yield values — See detailed values for the UI.
- The user hovers the mouse over a product, then a popup is displayed with batch yield.
- The user should be able to select any one batch for analysis or many, as listed on the pop-up.
- The user clicks on an equipment in Table B, then the Table A changes to show products manufactured on that equipment
- The user hovers the mouse over a product, then a popup is displayed with batch yield.
- The user should be able to select any one batch for analysis or many, as listed on the pop-up
- After selecting the batches and clicking submit, the user can view the 4 quadrants (dashboard).
2. Yield Dashboard (Desktop and Phone)
Main dashboard page (see sample reference). It contains four (4) quadrants/sections, layout is up to you, open to suggestions for improvements. Design them to fit in one single page. Consider a mobile responsive layout to display this information in a pleasant way within a transition that makes sense.
2.1. MIQ View (top left)
- See sample reference of the quadrant.
- See detailed values for the UI.
- The screen will have 4 tabs for selections; Plant, Product/Model, Batch and Vessel/Equipment.
- It will have Daily, Weekly and Monthly graphs.
- The user should be able to click on the yield values.
- The user should be able to hover the cursor on the Yield graph and on clicking on the plot for a particular Date/Week/Month; the actual yield value for that particular Date/Week/Month should be displayed.
- Adding select window zooming in and out on KPI trends on daily view.
- Adding time window to mark area of interest (ROI) for setting context to drill down further to process and system level analytics.
- Enhancing monthly and weekly KPI view, with overlay information of top five product contribution to drop and location context on move of cursor.
- The user should be able to change the display format of the graph from line graph to pie chart etc.
- The user should be able to print a report from the graph view.
- The user should be able to view a similar drop in the past and the action that was taken on it.
- Dropdowns from the top are not needed. Replace them with labels instead.
2.2. Process Mining (top right)
- Must design two components/tabs within this quadrant: Process Mining View and Rank List.
- The user should be able to click on any of the tabs; Process Map View or Rank List. By default a Process Map view will be displayed
- In process map view -Highlight process steps contributing to performance drop with context information of product, shift, line
- Cycle time, quantity trends overlay over bar graph view of processes and step contributing these.
- Allow the user the ability to select the way they want the data to be processed mined.
- Provide a historical trend.
- The user hovers the mouse over any values like "3/1 secs" on the process mining map; a pop up should appear which says 'no. of cases/average time for the step’.
- The user clicks on the Rank List tab, then a tabular form of rank list is displayed.
- The user hovers the mouse over Unfinished/Additional Occurrence/Missing Occurrence; a popup should appear which defines the state of the process.
2.3. Decision Tree (bottom left)
- Must design three components/tabs within this quadrant.
- User should be able to click on any of the 3 tabs; Variable Rank List (1st Tab) or Rules Table List (2nd Tab) or Decision Tree View (3rd Tab). By default the Variable Rank List view will be displayed.
- The user clicks the process variable names hyperlink on the Rules Table List and will be able to see a trend of how the variable has varied over a time period. The trend view can replace the existing space in the 3rd quadrant or come as a pop-up box.
- The user clicks on the Decision Tree View tab(3rd Tab), then a decision tree is displayed.
- KPI, cycle time, quantity trend view overlay over stage level bar graph with top 5 process and product characteristics parameters contributors.
- Docking/floating process and product characteristics parameters trend view of parameters with respect to good performance trend on moving of cursor in parameter area of bar graph mentioned in the above point.
- Highlight the process mining and yield drop for which the DT view has been presented.
2.4. Notifications (bottom right)
- Design a message/alerts notification area for the users (see sample reference).
- The user should be able to view the product no., equipment no., step at which it failed and also the range by which the parameter value has deviated.
- The time the message was sent to user.
- Status of message read. Received/delivered.
- Duration elapsed since the message has elapsed no action taken.
Branding Guidelines
- Don’t use logo.
- Colors and typography are open to suggestions (considering target audience), no preferences at all.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Manufacturing Industry; plant head, manager, planner (e.g. Caterpillar, Ford, Whirlpool).
Judging Criteria
- How interesting and engaging is your dashboard information is?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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 need your wise skills to redesign a responsive web application that helps user viewing and identifying the defective lot in a production line, as well as analyzing the root of causes and notifying respective user through messages. It’s a quite straight-forward design with analytic approach, jump in now!
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Plant Selector (Desktop only)
2. Yield Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS - desktop and phone).1. Plant Selector
2. Yield Dashboard
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to redesign the look and feel of an existing desktop application. We are creating a web solution which layout fits smoothly from desktop-tablet-mobile (fluid width). This tool has for goal to view, detect, analyze and act over plant production lines through a dashboard page to help the managers take corrective actions in quick time.
Concept Goals
Main goal is to have the design solution covering the flow philosophy efficiently: View, Detect, Analyze, Act. It should allow to recognize and apply this pattern seamlessly. The ability to interact with the dashboard and analyze results will be key for the users.
We are looking forward to see a design solution that converts the user stories into real scenario:
- Display multiple screens with data to show the flow from the user stories (watch, iPad, etc not needed, just webapp).
We are open to ideas and suggestions regarding to styling, leaning towards a flat, solid and well spaced look. Consider target audience, manufacturing industry customers; eg. Caterpillar, Ford, Whirlpool, etc.
Screens Requirements
Overall
- Look to capture the user story in a mobile/desktop experience (ignore iWatch and any other mentioned devices - this challenge is focused in the web dashboard only).
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Navigation: Dashboard navigation must include logo, user profile picture, logout link and the main navigation items:
-- Yield.
-- Production.
-- Quality.
1. Plant Selector (Desktop and Phone)
Selection page the user gets to see before jumping into the dashboard (see sample reference).
- The screen marked as 1, will have tab for selecting a plant or the functionality should provide a dropdown for plant selection on the map.
- The yield value for last 7 days will be shown on the world map (Green for good yield and Red for bad yield).
- When the user clicks on the bad yield value (red), then the boxes marked as 2 appear.
- Similar to Indicator boxes we will have two boxes with Product Names (Table A) and Equipment Names (Table B) with their Yield values — See detailed values for the UI.
- The user hovers the mouse over a product, then a popup is displayed with batch yield.
- The user should be able to select any one batch for analysis or many, as listed on the pop-up.
- The user clicks on an equipment in Table B, then the Table A changes to show products manufactured on that equipment
- The user hovers the mouse over a product, then a popup is displayed with batch yield.
- The user should be able to select any one batch for analysis or many, as listed on the pop-up
- After selecting the batches and clicking submit, the user can view the 4 quadrants (dashboard).
2. Yield Dashboard (Desktop and Phone)
Main dashboard page (see sample reference). It contains four (4) quadrants/sections, layout is up to you, open to suggestions for improvements. Design them to fit in one single page. Consider a mobile responsive layout to display this information in a pleasant way within a transition that makes sense.
2.1. MIQ View (top left)
- See sample reference of the quadrant.
- See detailed values for the UI.
- The screen will have 4 tabs for selections; Plant, Product/Model, Batch and Vessel/Equipment.
- It will have Daily, Weekly and Monthly graphs.
- The user should be able to click on the yield values.
- The user should be able to hover the cursor on the Yield graph and on clicking on the plot for a particular Date/Week/Month; the actual yield value for that particular Date/Week/Month should be displayed.
- Adding select window zooming in and out on KPI trends on daily view.
- Adding time window to mark area of interest (ROI) for setting context to drill down further to process and system level analytics.
- Enhancing monthly and weekly KPI view, with overlay information of top five product contribution to drop and location context on move of cursor.
- The user should be able to change the display format of the graph from line graph to pie chart etc.
- The user should be able to print a report from the graph view.
- The user should be able to view a similar drop in the past and the action that was taken on it.
- Dropdowns from the top are not needed. Replace them with labels instead.
2.2. Process Mining (top right)
- Must design two components/tabs within this quadrant: Process Mining View and Rank List.
- The user should be able to click on any of the tabs; Process Map View or Rank List. By default a Process Map view will be displayed
- In process map view -Highlight process steps contributing to performance drop with context information of product, shift, line
- Cycle time, quantity trends overlay over bar graph view of processes and step contributing these.
- Allow the user the ability to select the way they want the data to be processed mined.
- Provide a historical trend.
- The user hovers the mouse over any values like "3/1 secs" on the process mining map; a pop up should appear which says 'no. of cases/average time for the step’.
- The user clicks on the Rank List tab, then a tabular form of rank list is displayed.
- The user hovers the mouse over Unfinished/Additional Occurrence/Missing Occurrence; a popup should appear which defines the state of the process.
2.3. Decision Tree (bottom left)
- Must design three components/tabs within this quadrant.
- User should be able to click on any of the 3 tabs; Variable Rank List (1st Tab) or Rules Table List (2nd Tab) or Decision Tree View (3rd Tab). By default the Variable Rank List view will be displayed.
- The user clicks the process variable names hyperlink on the Rules Table List and will be able to see a trend of how the variable has varied over a time period. The trend view can replace the existing space in the 3rd quadrant or come as a pop-up box.
- The user clicks on the Decision Tree View tab(3rd Tab), then a decision tree is displayed.
- KPI, cycle time, quantity trend view overlay over stage level bar graph with top 5 process and product characteristics parameters contributors.
- Docking/floating process and product characteristics parameters trend view of parameters with respect to good performance trend on moving of cursor in parameter area of bar graph mentioned in the above point.
- Highlight the process mining and yield drop for which the DT view has been presented.
2.4. Notifications (bottom right)
- Design a message/alerts notification area for the users (see sample reference).
- The user should be able to view the product no., equipment no., step at which it failed and also the range by which the parameter value has deviated.
- The time the message was sent to user.
- Status of message read. Received/delivered.
- Duration elapsed since the message has elapsed no action taken.
Branding Guidelines
- Don’t use logo.
- Colors and typography are open to suggestions (considering target audience), no preferences at all.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Manufacturing Industry; plant head, manager, planner (e.g. Caterpillar, Ford, Whirlpool).
Judging Criteria
- How interesting and engaging is your dashboard information is?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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.