TC Direct Rebranding UI Prototype

Project Overview

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

As you all know, topcoder is now part of Appirio and we have a brand new design for the topcoder community site. In order to bring consistent experience to uses we want to update topcoder direct with new design too.

Competition Task Overview

For this contest, we want to apply new design to the prototype which will mostly be colors/icons updates. There will be NO updates to page structure/layouts.

Key Requirements

• Update the pages listed below to match the new design. Note this is basically just re-branding of the pages, so same technologies/libraries should be used, and browser compatibility should be the same as the old prototype too.
• Test in all the required browsers.
• Replicate the design of the approved Storyboards (PSD Files) for all listed pages.
• Your pages must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure your submission is clear of HTML and CSS Validation error and warning.

Additional Requirements

• Document all the new files / files to be replaced and changes.
• If there is any missing design for the page re-skin, please ask the in the contest forum ASAP. We have noticed some missing design elements and we'll get them done in parallel with this contest, we're expecting to get these integrated in final fixes.

Detailed Requirements

The following pages are in scope of this contest.

1) Dashboard

1-1) Enterprise Dashboard
enterpriseDashboard-overview.html
enterpriseDashboard-activeContests.html
enterpriseDashboard-analysis.html

2) Project

1-1) Start new project
createNewProject.html

1-2) All Projects
allProjects.html

1-3) Project Dashboard (for a specific project)
projectOverview.html
projectMilestoneListView.html
ProjectJsGanttGamePlanView.html
projectContestsListView.html
batchDraftContestsEdit.html
editProject.html
projectTask.html

3) Challenge

3-1) Launch New Challenge
launchNewContest.html

3-2) Challenge Management
contestDetail.html
softwareFinalSubmissions.html
studioFinalsubmissions.html

4) Copilot

1-1) Create new copilot posting
createCopilotPosting.html

1-2) Copilot Posting management
compareCopilots.html
listCopilotContestSubmissionsGrid.html

5) Reporting
dashboardPipelineReportResult.html

6) Admin
permissions.html

7) Asset
asset.html

Specific HTML/CSS/JavaScript Requirements

• You MUST follow the same HTML/CSS standards used in the old prototype
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

• You should use the same libraries currently used in the provided prototype.

Browser Requirements

• IE8+
• FF 7+
• Safari 5
• Chrome Latest
• Basically same browser requriements as the old prototype

Documentation Provided

Register to download documents from contest forum.

Final Submission Guidelines

Submission Deliverables

• Complete prototype with all the listed pages updated to match the new design.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and other required files into Online Review.