TC Cockpit - Project Milestones Management Storyboard

Graphical User InterfaceAjaxPSD FilesStoryboardingColor ModesAdobe Photoshop

BONUS: 4‌ CHECKPOINTS AWARDED WORTH ‌$80‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the storyboard contest TC Cockpit - Project Milestone Management Storyboard

We are adding the idea of "Project Dashboard" into the new TopCoder Cockpit. One of major feature of the new project dashboard is Project Milestone which is used to track the major stages and critical path of the whole process of a topcoder project. In this contest, you will design the pages for viewing project milestones in list and calendar view and project milestone management. The application requirement specification and reference document will be provided as inputs.

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 $80 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.


Primary Goals
A new section needs to added to the Project Section of TopCoder Cockpit. Currently, the project section contains 4 tabs to show different project information.

  • Overview: shows the general information of the project including project health, project copilots, project forum, project activities, project statistics.
  • Contests: shows the contest related statistics and all the contests of the project
  • Game Plan: shows the game plan of the project in a gantt chart
  • Issue Tracking: shows the issues / bug races of the project

We have provided the full screenshot of the 4 tabs so you get a clear view of what our current project section looks like. The Project Milestone will be added to the current project section as a new tab, currently we have 4 tabs. The tab should be named as "Milestone" and should be put after the "Contests" tab.

Project Milestone Section Requirements
In the project milestone section, the following features need to be designed 

  1. View Project Milestones in List (See Application Requirement Specification section 2.1)
  2. View Project Milestones in Calendar (See Application Requirement Specification section 2.2)
  3. Add Project Milestones (See Application Requirement Specification section 2.3)
  4. Edit Project Milestones (See Application Requirement Specification section 2.5)
  5. Remove Project Milestones (See Application Requirement Specification section 2.6)
  6. Mark Project Milestone as completed / uncompleted (See Application Requirement Specification section 2.8)

Please note that the Use Case 2.3 & 2.7 are out of the scope, they are features of future releases.

See the following for detailed requirements

View Project Milestones (With management of project milestone)
When user clicks the "Milestone" tab added, the project milestones will be presented to the user. The project milestones will be presented in two views:

  • List View (2.1)
  • Calendar View (2.2)

In List View, user should be able to edit the listed project milestones, mark project milestones as completed / uncompleted and delete project milestones. All the operations against project milestones will be done via AJAX in the List View page, so take this into account when designing. Removing the project milestone needs a confirmation first.
In Calendar View, it's a read-only view. All the operations against project milestones are only done in List View.

Add Project Milestone
In the List View & Calendar view mentioned above, a button should be designed and positioned to allow user to create a new project milestone. For single project milestone creation, it's recommended to popout a modal window for input and save.

Besides creating a single project milestone, a page should be designed to allow batch creation of mutiple project miletones and save them all at one time. A button or link should be added in List View & Calendar View to enter the page for batch creation.

Read ARS section 2.1 and 2.4 for details of what inputs are required for creation of project milestone.


DESIGN REQUIREMENT

  • The design should be neat, clean and professional.
  • The project milestone views should be clear and intuitive to user.
  • Meaningful icons should be used to enhance the design, especially for the standard set of project metadata
  • The design should take AJAX operations into consideration. The edit, removal and mark feature in List View and creation of project milestone should all be AJAX based.

REFERENCE PROVIDED

  • A reference list of famouse online project management tools, so you can get ideas of what project milestone is.
  • Screenshots of current project section pages.
  • An inline ajax indicator which can be used for notify user when ajax is process in the backend, just for reference.


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.
- All text must be editable and non-graphical.
- You must provide us how every screens looks in 1024px width and more wider screens.
- Check Cockpit GUI Kit PSD(Cockpit_GUI_Kit_PSD.zip) to get more familiar with Cockpit.

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

Judging Criteria
- How well the different views of project milestones are designed to allow user clear see what happenned within the project progress.
- How well the design takes user experience and easy interaction into account to allow new user to use the project milestone features easily.
- How well the added pages(s) fit into the project section - 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.

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:

2012 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: 30023412