Challenge Summary
The TopCoder Scorecard tool is used to create and maintain the scorecards that are used by the various contest types. The current tool, which is restricted to TC staff, no longer works. We are in the process of rebuilding the tool, adding some additional functionality, and expanding the user-base to include copilots.
The goal of this contest to design the screens of the new scorecard tool.
Round 1
At the end of Round 1, TopCoder will choose three (3) Round 1 winners, each will win $75 and a design review.
Submit the Create/Edit scorecard page for the first milestone. See below for details on this page.
Round 2
Round 2 will start with the announcement of the three (3) $75 Round 1 winners and their review.
Your final submission must include all the pages listed in requirement below. You can add more pages to enhance the page flow and usability. You must include the review feedback from Round One in your final design.
Your submission must include at least the pages listed below. You can add more pages to enhance the page flow and usability.
- Login Page
- Find Scorecard page
- View Scorecard page
- Create/Edit scorecard page
Look and feel of the page must follow the color scheme and general look-and-feel of TopCoder Direct (www.topcoder.com/direct). Also follow Direct's page width. We anticipate that this tool will be integrated into Direct at some point in the future.
All pages will be AJAX driven. Search results, edits, saves, etc will all happen via AJAX calls.
Login Page - This is a trivial page that requires users to login using their handle and password. When the scorecard tool is later integrated into Direct this page will be removed.
Find Scorecard Page - This page allows the user to search for scorecards. Design the search widget that will support the following search criteria:
- Scorecard name - find scorecards by partial name match.
- Contest name - find contests by partial name match and display the scorecards that were used by those contests.
- Scorecard usage frequency - filter out scorecards that were used either 0 or only 1 time.
- Project type - filter by any combination of project types (these are Component, Application, and Studio).
- Category - filter by any combination of related categories. Categories are defined by the chosen project type.
- Scorecard Type - filter by scorecard type. For example, Review, or Post-Mortem.
- Technology - Technology keyword search to find matching scorecards.
- Active/Inactive - Filter by if the scorecard is flagged as active/inactive.
The result grid will display the scorecard name, type, category, version, and active flag. Columns are sortable by clicking on them. The scorecard name is a link to the View Scorecard page.
View Scorecard Page - This page will function essentially identically to the view scorecard page in the old scorecard tool. See the screenshot in the attached files. Update the page to conform to the desired look and feel, and make any other design improvements to improve readability.
Create/Edit Page - This page allows users to create new scorecards and edit existing scorecards. New Sections / Groups / Questions will be added or deleted form the scorecard dynamically using Javascript/AJAX. Questions will be draggable from section to section, and also for reordering. Sections will be draggable from group to group and also for reordering. Sections will be draggable for reordering.
Additionally, this page will have two important widgets that you need to design. (You may choose to implement these widgets as their own pages if that makes sense from a design/usability standpoint.)
- Widget 1 - Create questions from requirements: Design a widget on the page where a copilot or a PM can paste in a list of functional requirements, where each requirement is on its own line. The copilot/PM will select an existing Group and specify a question type. When executed, the widget will convert each functional requirement to a new scorecard question within the group.
- Widget 2 - Find existing Sections/Groups/Questions in other Scorecads: The widget should reuse the search functionality described for the "Find Scorecard" page and allow a user to browse the matching scorecards. The user can then copy Sections/Groups/Questions from one or more existing scorecards into the scorecard he is editing. Note if this isn't practical to implement as a widget, it may be done as a workflow that reuses the Find and View pages. This is the most complex piece of frontend functionality, so your design ideas are critical here.
Target Audience
Contest holders using TopCoder Direct.
Branding Guidelines:
- Please follow the general look/feel of TopCoder Direct.
- Please use the attached TopCoder logo
Judging Criteria
Your submission will be judged on the following:
Creativity -The design should be easy-to-use, uncluttered and clean
Execution -The quality of the design and how well you followed the provided guidelines
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot from your submission within it.
Submission File
All Requested contest requirements as JPG or PNG files for each screen.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop (or equivalent) and saved as layered PSD files.
Final Fixes
As part of final fixes you may be asked to modify your graphics, source files, 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.