TopCoder Cockpit Project Overview Page - General Project Information Design

Welcome to the design contest - TopCoder Cockpit Project Overview Page - General Project Information Design. In this contest, you will be required to add a new section (or more) to display general project information in the project overview page. The general project information includes Project Type, Project Description, Handles of Project Managers and Client Managers, Project SVN URL etc. See the following section for details.

Round 1

For milestone review, you must submit a full solution which addreses all the requirements with the 1024 px and wider screens. We will choose 4 milestone winners, each one will get $50 milestone prize and provide general feedbacks to all submission and specific feedback to each milestone winner submission.

Round 2

In the final round, you will submit the full submission with the 1024 px and wider screens which is improved and revised based on the provided feedbacks in round one.

Contest Details

We are adding more and more information into the TopCoder Cockpit Project Overview page. In the previous design contest, we add the project forum and project copilot(s) information. Now we are moving forward to add more general project information like Project Description, Project type, Project SVN URL etc. This will allow client / project manager to have a central view of all the project information in one page.
The following are the details of required general project information to display

• Project Description - Project Description is the text paragraph added by user when creating a project. It's generally the description of the project, you can assume the description text will be less than 300 characters.
• Project Type - Project Type is the type of the project the user chosen during creating the project. User chooses a project type like Web Application, Presentation, Mobile application first, then chooses a sub project type like for mobile application - iPhone application, Android Application, Windows Phone application etc. So the project type displayed on the project overview page should be like "top project type - sub project type". For example, Mobile application - Android application.
• Project Status - The status of the project. The project has 4 status right now: 1) Active 2) Archived 3) Deleted 4) Completed. It's recommended to use meaningful and good looking icon and text to show the project status apparently.
• Handles of client managers - We want to display the handles of client managers so everybody working on the project can know what handles are from the client side.
• Handles of topcoder project managers - We want to display the handles of topcoder project managers so everybody working on the project can know what handles are topcoder managers.
• Project Budget - The project budget can be set by the user when creating the project, it should be a amount of money (dollars) like "$8,500,000"
• Project SVN address - Generally a project will have a project SVN address to store all the project codes, project contest deliverable. For example the svn for TopCoder Cockpit Project is https://coder.topcoder.com/tcs/clients/cronos/applications/direct/
• Project Bug Tracker (JIRA) - Project will also have a JIRA project set up in TopCoder Bug Tracker which is used to track tickets and bugs of the project. For example, the JIRA project for TopCoder Cockpit Project is https://apps.topcoder.com/bugs/browse/TCCC
• Planned Duration - The planned duration of the project. The planned duration of the project, represents in days. For example, "325 days".
• Actual Duration - The actual duration of the project, represents in days. For example, "110 days".
• Project technologies - The project technologies used, it will be a list of keywords describing the project technologies used. For example, if the project type is "Web application - Java based web application". The project technologies could be "Struts2, Spring, JBoss, EJB3"

DESIGN REQUIREMENT

• In the above mentioned general information, only "project description", "project status", and "Actual Duration" can be assumed existing for every project, all the other information are optional - i.e. they may not exist for a project. So your design should be flexible enough to suite the cases that some project information is not available.
• You can add one or more section into the existing project overview page design to display the required project information. You can adjust the layout of existing page if needed.
• Meaningful icons can be used to enhance the design.

IMPORTANT
- Keep simple and clean design! And have great user experience.
- Group/package each graphics in its own folder layer with appropriate names/titles.
- Keep things consistent. This means all graphics styles should work together.
- All of the graphic should have a similar feel and general aesthetic appearance.
- Make sure your design use Windows standard fonts (arial, tahoma, etc)
- All text must be editable and non-graphical.
- You must provide us how every screens looks in 1024px width and more wider screens.
- Before you redesign the PSD, please click around on attached prototype existing project overview page(project_overview_page_prototype.zip) and Cockpit GUI Kit PSD(Cockpit_GUI_Kit_PSD.zip) to get more familiar with Cockpit Project Overview Page.

Target Audience
- New Customers - Non expert Customers
- TopCoder Existing Customers
- TopCoder Project Managers
- TopCoder Copilots


Judging Criteria
- How well the general information are added to the existing project overview page
- Whether the added information is readable and easy to understand at the first glance.
- How well the added section(s) fit into the current layout of the project overview page - Whether it matches current look & feel of the TopCoder Cockpit site

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
All Requested Contest Submission Requirements stated above.

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

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