BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "RWS - Responsive Reporting Dashboard Design Concept Challenge". This challenge goal is to create responsive reporting dashboard that able to visualize graphical data in real time for the user. The application dashboard will use set of widgets to visualize data that can be moved and edited by user preference. 

At the end of this challenge, we are looking for a modern, clean and a responsive design that captures the possible interactions a user might have with controlling and managing the widgets in the dashboard. Join us NOW!!

Round 1

Submit your design for client review and checkpoint feedback
- Dashboard Screen and it's interactions
- Widget Setting Screen and it's interactions

Round 2

All requirements as stated in challenge details with checkpoint feedback applied


Project Brief
Our client wants to build a reporting dashboard visualizer - Responsive widgets that can be moved and edited by user preference. The dashboard will be used for the visualization and reporting of  existing data.  You should consider data to refresh in near real time. We would like to get everything the user needs all in one place and the application UI/UX should be touch tap responsive.

In this challenge we are asking you to focus on a couple of screens but to also try and capture what the possible user interactions might be. The user has a dashboard of widgets and the ability to move them around and manage different preferences for each widget. Think of modern UX design and how cool this dashboard could look and work.

Design Consideration
- The dashboard design UI/UX should be touch tap responsive.
- The dashboard must need look consistent but cleverly adapted layout screen for each required devices.
- Be creative, there are a lot of information needs to be presented in the widget, reporting data, comments, drill down data details, show us the effective ways to arrange this huge amount information in the widget content (via tab? icons? etc)

Screen Requirements
General Requirements / Interaction
- The screens needs to be responsive on Desktop, Tablet  and Mobile. In mobile view, the widgets and Charts will be static - so the controls to edit the widgets will only be show on the Desktop and Tablet view.
- Widgets should be auto-positioned on the dashboard to fit the grid in the most aesthetic layout (isotope style)
- Users should be able to re-arrange the widgets position in the dashboard, show us the design interaction for this behavior.
- Users can change the size of the widgets (based on the grid ratio preferences, for ex, 1x1, 1x2, 2x1, 2x2, etc) 
- Users can drag and drop widgets (Desktop and Tablet view)
- User can change the type of chart that is shown on the widget.
- How does the user edit/change content inside the widgets? (Is it via modal window? pop-up? - what is a good modern interaction for this?)
- The grid width is up to your judgement. At least 1x1 grid ratio should be applied to mobile device, tablet and desktop can be vary.

Dashboard Screen
- The dashboard screen is a full page where the user see's their data in specific widgets type.
- Review screenshot in example folder for an example of the dashboard appearance, treat the screenshot as your references only, do not copy the layout styles!
- Each widget in the dashboard can have a varying size, the grid width is determine by designer, but it should have ratio 1x1, 1x2, 2x1 or 2x2 based on pre-defined grid, so show us variation of widget appearance in the dashboard. The user can change the widget size ratio.
- The dashboard would have the ability to add/edit/delete and select particular widgets to be shown in the dashboard. (The idea of Dashboard preferences and Widget preferences)
- Widget content elements should be different from each other, content and chart examples for the widget can be found on this link http://www.fusioncharts.com/explore/charts/. There are many chart designs that can be shown in the dashboard, however, we will need only the FusionCharts XT (contains 11 basic chart design, please create the chart design).
- The dashboard will needs to be responsive, reducing widget size down to 1x1 on smartphones in a vertical layout (portrait).
- Mobile layout will be read only.
- Widgets will need to be dynamic - there may be roll-over dialogs to show more details (Show how this might look)
- There should be some ability to add comments to a particular chart in each widget so others can see why the chart is a certain way or what happened during a particular day to make the chart look this way.  (personal comments that all other users can see)
- Would like to be able to create filters and have the filters stick/save by user, some initial configurable parameter example would be :
* Plant (Pick Specific Facility)
* All plants (Pick All Facilities)
* Shifts (pick Shift or all Shifts i.e. first shift, day shift, night shift)
- Needs to provides the following widgets content in the dashboard in different size variation :
* Rework (Rework vs goal)
* Factory Seconds (factory seconds vs goal)
* Scrap Dollars (scrap vs goal)
* Production (Actual vs Scheduled)
* Plant Efficiency (Efficiency vs Goal)
* Plant Deficiencies
* Back Orders
* All in Efficiency, each Efficiency Report could be configurable based on timeframes and each compared to a goal.  (Show overall efficiency by week compared to goal, or by day compared to goal, etc) 
* Dummy content.
- Each Widget/Report will allow the user the ability to drill into the data - for example reasons as to why the number are what they are, reason codes, what line is having a problem, possibly drilling down to employee
- Example of chart content can be found in sample-data.zip.
- At least 12 widgets creation needs to be put in the dashboard, for any widget that don't have actual content, use dummy content inside.
Note: - IF you decide to use chart design from FusionCharts XT and not create it by your self, you must give them credit in your chart image (label it: http://www.fusioncharts.com/) small in the bottom corner

Widget Setting Screen
- The widget configuration will be based upon widget type (I.e. From a pre-defined list of widgets style available in the apps).
- As part of the widget configuration, selecting the widget type will ask the user to determine other settings that should be applicable for the widget.
- Create an intuitive transition design between the display of the widget and the configuration of the widget.
- There should be some ability to preview the widget during configuration before save it. It would be beneficial.
- Sample Widget Settings:
Title: [input box] (insert widget title)
Chart Type: [select box] ex: Pie Chart
Render as: [select box] ex: Percentage
Item Number: [input box]
Buttons: Refresh, Return (what makes sense?)
* This is an example - think about the fields you might need - each widget might have different controls.

Branding Guidelines
- Font : Opent to designer
- Color : check branding-guidelines.zip.
- Size :
* Desktop : 1024px width with height adjust accordingly
* Tablet : 768px width with height adjust accordingly
* Mobile : 320px width with height adjust accordingly
- Tablet and Mobile Orientation : Portrait.

Target Audience
This application will be use by plant management, operations managers.

Judging Criteria
- How well your dashboard design fit in responsive layout?
- Cleanliness of your graphics and design (very important!)
- User Experience!

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Please upload JPG/PNG images in a zip file with all requested contest requirements stated above.

Source File
All original source files of the submitted design. Files should be created in Adobe Photoshop or Adobe Illustrator and saved as layered PSD or AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2015 topcoder Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30046042