Cockpit Enterprise Dashboard Update

TopCoder has recently introduced TopCoder Cockpit, which allows customers, as well as staff, copilots, etc., to directly engage with the TopCoder platform and community.

It gives users the ability to do things such as:

• Launch and Monitor Contests
• View Submissions
• Choose Winners for Studio Competitions
• Pay for and Download Finished Products
• Monitor project and contest health
• See my enterprises usage of the platform

...and generally manage a project within the TopCoder platform.

In other words, TopCoder Cockpit is the bridge between the Client and the TopCoder Community that gives a customer the ability to build software and complete design projects of any size or scope through competition.

Part of the site is an Enterprise Dashboard view that makes it easier for users to understand current status at various aggregated levels and make decisions based on the current state of events. In this competition, we are looking to make some additions and changes to the Enterprise Dashboard page.

This competition focuses on creating storyboards for the updated dashboard.

Round 1

At the end of Round 1, we will choose milestone winners and post design reviews. These winners and any member who had a passing submission in round one will be eligible to compete in Round 2 for the additional prizes.

 

 

Round 2

Round 2 will start with the announcement of the Round 1 winners and their design review.

Please read the contest specification carefully and watch the forums for any questions or feedback concerning this contest. 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.

Description

The goal of this contest is to produce storyboards for the TopCoder Cockpit Enterprise Dashboard page.  You should start with the existing design and add your updates.

Details

We will start from the attached storyboard.  You can also see the live app at www.topcoder.com/cockpit, but you need to have contests setup to see data.   We've also attached the full UI Prototype while is a good working demo of the current site.  Please think about how a customer will work with the chart.  What would you find useful?  You are open to use your design ability and provide ideas into how the requirements below should be implemented.

 

There are 2 main requirements for this contest:

 

1.  Update the current filters

We need to keep all of the current filters, but the design/layout of them needs to be cleaned up.  Here is some feedback for the current filter design:

• It looks unfinished
• It would be nice to have the date filter work like the slider control that is used on Google Finance charts like this one:  http://www.google.com/finance?q=goog
• The filter panel takes up too much space. Can we try something that can be shown/hidden on demand.  http://www.google.com/finance?q=goog also does something similar to change "Settings" on the chart.

 

2.  Add a "Table View" and "Drill" feature

2.1 Table View:

We want the chart design to support different types of displays.  The basic idea is that we want to be able to display the data for the chart in a tabular form if the user wants to see the details of the data.  The data should be displayed in a chart similar to a spreadsheet with multiple rows and columns.  The columns need to be sortable.  Each row of the table will represent a contest.  The columns will be

• Date - the date of the contest
• Contest Name - the full name of the contest (note, this can be long so the design should support long names)
• Fulfillment - this will be either 0% or 100%
• Cost - example: $4,386
• Duration - number of days (example, 11.5)

To toggle between different views, we'd like to see icons that the user can click to switch between the chart and table views.  In the future, we will add more views (for example, views for performance, comparative, etc.) so your design should support up to 5 different views.

2.2 Drill: 

The drill feature will allow the user to quickly see the data associated to a specific data point.  This should be done in 2 ways at least:

1. When the user hovers over a data point in the chart it should display a short summary of the data point.  For example, "Cost = $4,388".
2. When the user clicks on a data point, a table of data should be made visible (maybe it drops in below the chart) that displays the detailed data that comprises the data point.  For example, a single data point might consist of the avergage of 5 contests.  The detailed "drill" will show a table of 5 contests with the associated stats.  The table data should be the same as the "Table View", except there will be less rows.

 

Design Concepts

• Stay within the provided design! (the referenced storyboard - your new pages will fit within this existing storyboard)
• We are not just looking for "Updates" but your design input into the User Experience
• Update or fix anything you feel would work better for the user
• We're using the Google Charts API, so keep that in mind when designing.

Please remember to submit UNIQUE designs - do not simply make minor modifications and resubmit.

Target Users

When a user comes to our application, they may be:

• Potential Customer
• Current Customer (workers and executives)
• Co-Pilots

 

Judging Criteria

 
You will be judged on the following:

• Quality of your design and did you continue the desired look and feel appropriately
• How the design met the above requirements and considerations
• User Experience

 

Submission and Source Files

 Preview Image

Please 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. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.

Submission File:

All Requested Contest Submission Requirements stated above.
 

Source Files:

All original source files of the submitted design. Files should be created in Adobe Photoshop, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files.

Final Fixes

 As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.