Challenge Summary
Welcome to the storyboard contest TopCoder Cockpit Project Dashboard - Edit Project Design
We are adding the idea of "Project Dashboard" into the new TopCoder Cockpit. For the project dashboard, we have added a lot of new information to be associated with the topcoder project such as project budget, project SVN address, project JIRA address, project technologies etc. Now we want to add the edit project feature to be able to add / update / delete the project related data. In this contest, you will design the edit project section for the TopCoder Cockpit. See the following sections for the requirement 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.
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 edit project will be added to the current project section, but we are not sure the best place to put it, it can be either a new tab adding to the current 4 tabs, or a new edit button at the right of the project name title, or you have a more elegant way/design to add edit project section? Time to show your creativity!
Edit Project Detailed Requirements
In the edit project section, user will be able to edit the following project information:
- Project name
- Project Description
- Project metadata
- Project Status
- Project Private Flag
See the following for detailed requirements on different information.
Project Name
The name of the project can be edit and updated. The project name should not exceed 60 characters. Current project name should be shown.
Project Description
The name of the project can be edit and updated. The project name should not exceed 300 characters. Current project description should be shown.
Project metadata
Project metadata is the key-value pair used to store project related information, such as project planned Duration, project budget, project svn address etc. For example, for project budget, the key is "Project Budget" and the value "323" days. For each project, we have a standard set of project metadata keys which every projects will have. For some of the project metadata key, multiple values are allowed, while for others only a single value is allow. For example, for the project metadata key "Project Manager handles", multiple values can be added, because one project can have multiple project managers, while for the project metadata key "Project Budget", a single value is allowed because one project will have one budget. See the below for the standard set of project metadata keys
- Client Manager Handles (Multiple Values allowed)
- Project Manager Handles (Multiple Values allowed)
- Project Budget (Single Value )
- Project SVN address (Single Value )
- Project JIRA address (Single Value )
- Planned Duration (Single Value )
- Project Type (Single Value )
- Project Technologies (Multiple Values allowed) - Please note that for project technologies, the values are predefined, user needs to choose values from a list of predefine ones.
In the edit project - project metadata section, user should be able to
1. Add values to the standard set of project metdata keys
User needs to be able to add values to the standard set of the project metadata mentioned above. Please note that if the key only allows single value and the value already exits for the project, user can only update/delete it but not add.
2. Edit/Delete existing project metadata values
For the existing project metadata values, user should be able to edit(update)/delete them.
3. Add a new project metadata key
Besides the standard set of project metadata key, user can add a custom project metadata key in edit project section. To add a custom metdata key, user needs to specify:
- Project Metadata Key Name
- Project Metadata Key Description
- Used for Grouping: Flag - yes or no
- Single or multiple values
We have a demo page deployed to test the TopCoder Cockpit Project Metadata Service, you can visit it to get familar with the idea of project metadata. But please do NOT copy any of the design there, the page is only used for demonstration, the user interaction and the design are bad. The page is available at https://107.22.17.141/direct/metadata/projectMetadata. Username is 'heffan', the password is 'password'.
Project Status
User needs to update the current project status, the project has 4 status: - Active - Archived - Deleted - Completed Current status of the project should be displayed too.
Project Private Flag
User needs to able to check or uncheck a flag to represent whether the project is private.
User interactions requirements
When design the edit project section, please take user interactions and user experience into consideration, we expect this section to be easy to use by the unexperienced user such as new customers. And we will use AJAX for the client to server request so also keep this in mind.
DESIGN REQUIREMENT
- We may add more data for edit project in the furture, so if your design is flexible to accomodate furture adding, it would be great.
- Meaningful icons should be used to enhance the design, especially for the standard set of project metadata
- Easy user interaction is important
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 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.
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.