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

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to TopCoder Cockpit UX Design and Brand Update Contest
In this contest we need you to think about the user experience and look to simplify and redesign the TopCoder Cockpit Dashboard view. We are looking for a simple and modern style. We are providing the new TopCoder Storyboard UX as reference of what we are looking for, simple, modern, flat design trend.

We have a presentation on Friday - the Checkpoint will be FAST

Round 1

Your initial submission for checkpoint feedback:
- Pages 1 - 4.

- Any notes for the client explaining your design concept.
- Number your screens 01, 02, 03, 04 etc.

Round 2

All final screens with checkpoint feedback applied.
- Any notes for the client explaining your design concept.
- Number your screens 01, 02, 03, 04 etc.


Primary Goal:
TopCoder Cockpit is the web application platform we use to help copilots and clients manage their projects, contests and the community. 

In this contest we want you to review the user experience (UX) and look to improve the application - this is our next step/future user interface! This contest is focused on the "Dashboard View". These new pages should follow the new style of our website (see TC-CS storyboard provided). Your new design does not need to be an exact copy of style, but it should be obvious that it's the same BRAND with the new TC-CS website. 

Overall, when designing these new pages, we want you to keep in mind that:
- the page(s) should simplify the user experience of managing a project.
- the most important and most used info should be more accessible to the user. 
- Everything should be easy to use and undertand. 

Design Consideration:
- Please use the provided storyboard as your reference. We want the new Cockpit pages have the same brand with this new site.
- These pages should clean and simple.
- Please keep things consistent. 
- Follow the flat design theme in the storyboard and please consider great use of white space.
- Feel free to updated the icons icons or any other elements for the new pages to make the design more standout where you think appropriate. 
- Make sure your submission images name are arranged properly (i.e 01_Member_Profile.png, 03_a_Login_Error.png)

Required screen:
1. Project Dashboard - Overview page.
- See this page :
http://www.topcoder.com/preview/projectdashboard/projectOverview.html
- This page should show some general information of a project.
- We need you to create a new view of this page. You are free to re-arrange the layout of this page. Focused on how to easily see/track the task/contests that is going on. 
- We need you to add a chat functionality somewhere on this page. Think of it more like Facebook messages, where chat and email is basically the same thing. We are looking for a more integrated view of project discussions (chatter and forum type conversations).
- Include a project "burn down" view. It should be something that helps a user understand how much time and money is left to complete the current milestone as well as the project. It's like a % compete view/gauge. ("burn down" is a "Agile" methodology term if you want to research it)

2. Milestones page
- Project Milestones give a high level overview of what needs to be done in the project.  They allow you to follow the progress with the entire project, instead of competition by competition.  These milestones can be anything — checkpoints within your project, beta releases, an internal sign off or approval that needs to be given, etc…
- There are two views for this page:
a. List View

http://www.topcoder.com/preview/projectdashboard/projectMilestoneListView.html?formData.projectId=60011&formData.viewType=list
b. Calendar View
http://www.topcoder.com/preview/projectdashboard/projectMilestoneCalendarView.html?formData.projectId=60011&formData.viewType=calendar
- Please show some examples on the calendar view.

3. Game Plan Page
- see this page:
http://www.topcoder.com/preview/projectdashboard/ProjectJsGanttGamePlanView.html
This page will defines project timeline and cost. It provides a break down of the project into the different contests that would have to be executed in order to meet the project’s goals. Each contest has an associated timeline and cost.
-- The left table view is cut off on this page, so please use Game_Plan_left_panel.png to see the exact content to be shown on this left panel.

4. Issue Tracking Page
- see this page:
http://www.topcoder.com/preview/projectdashboard/projectIssueTracking.html
This page will show list of issues (Bugrace/Final Fix/additional tasks) related to the project.

5. Assets Page
- See this page :
http://www.topcoder.com/preview/projectdashboard/asset/asset.html
This page will allow user to easily access the latest deliverables and assets for the project.

6. Tasks Page
- see this page:
http://www.topcoder.com/preview/projectdashboard/projectTask.html
- On this page, people that working on a project can create tasks list and task under project and assign the task to other people. This allows for better project collaboration and tracking.

7. VM Management Page
- see
VM Management Tab.png
- There should be another tab after Task in the navigation. Use the content from the screenshot.
VM stands for Virtual Machine. Project managers or the Copilot will set up the environments for competitors. The competitors can use the credentials provided to access the VM. Competitors can use their VMs code, debug and finally check-in the solutions. After all competitors check-in their solutions, the VM will test each of the solutions.

IMPORTANT:
-
On the right side of the pages, there is a sidebar that can be expandable. Please include this in your design.
- Feel free to put any concept or ideas you have to the pages where you think appropriate. But keep in mind to focus on the user experience. User should easily understand and use your new design.

 
Branding Guidelines:
Font: Open to the designer.
Color: Open to the designer, but keep in mind we want this new cockpit view has the same brand with the provided storyboard.
Size: Use Standard 1024 px witdth.

Target Audience:
- TC Cockpit User (Client, PM, and Copilots)
- Potential clients/customers.

Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard to make it has the same brand.
- Simplicity and Cleanliness of your graphics and design
- Design consistency.
- How well your design think about user experience.

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 image files based on contest submission requirements stated above.

Source Files 
All original source files. Original source files should be saved as layered Photoshop PSD files.

Final Fixes 
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

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:

2014 TopCoder(R) 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

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30036444