Challenge Summary
Welcome to “Topcoder Scorecard Template Builder Design Challenge”! In this challenge, we are looking to design a scorecard template builder for our Topcoder challenges, which will be used for evaluating the submissions.
Note: in this challenge, you have to use Sketch for design.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum.
Challenge Objectives
Project Background
Workflow
A scorecard is used to evaluate submissions based on some criteria. For example, for the design track, a scorecard you often see is the General Studio Screening Scorecard from Online Review. Other scorecards that we have in Online Review are AV Scorecard, Basic Code Challenge Scorecard, Specification Review Scorecard, etc. who all work in the same way, it’s just that they have the scope not to evaluate screening mistakes, but to evaluate the specifications, or submission quality for development or marathon tracks, etc. Right now, we use a single scorecard for a specific purpose, but we would like to change that.
In the new model, a user will be able to use an existing review type or create his own scorecard template, from a collection of existing review types. You can see a screenshot of how we envision this. The example is shown for development evaluating submissions on the development track.
Note: the screenshot should be used just as reference. DO NOT COPY IT! We are looking for your original ideas on the best user experience would be.
The user can select from the left side one of the existing review types: SonarQube, Checkmarx, Community, External or he can create his own scorecard template on these review types. On this challenge, we are focusing on the creation of the Scorecard Template Builder. Once the user has created it, he will be able to see it as non-editable.
Users
The users of this application are
Screens Requirements:
1. Create New Scorecard Template
Once the general infos have been completed, comes the most important part: the scorecard template builder (the table you see on the right side of screenshot) which is build of a collection of review types.. Initially, this table will be empty and there will be an option / button/ link, etc. to add a new tool. The table can be represented as a list or any other way you see fit, but it should include the following fields:
User Scenario
Step 1: The scorecard template is empty
Step 2: The copilot adds the first review type. This can be done using a popup, flyover menu or inside the table. When adding a review type all the 5 items from above should be included: tool name, order, weight, mandatory, event. Since we will have many tools, they can be grouped or labeled by track, but the user should still be able to select different tools from different tracks as well.
Step 3: The scorecard template gets filled with customized review types (we would just like to see multiple entries listed inside)
Step 4: The user validates the scorecard: when adding multiple review types, the sum of the weights for those tools should be 100%. The user should have an option to validate this and show an error if that’s the case.
Step 5: the user saves the new scorecard template and the entire page will be shown in view mode.
2. View Scorecard Template
This page is a non-editable version of the page that was just created before. The user has the option to edit it, so this way he will go back to the previous step.
Note: we are looking for your ideas and creativity on how the custom scorecard should work. Do not copy the provided screenshot.
Key Items to Focus on
- This web application must look in brand with the current Topcoder community site.
- Create an intuitive user experience for the copilots
- Target desktop web devices with a minimum resolution of 1280px width and height can be increased if needed.
Branding
Target Audience
Topcoder copilots, challenge architects and customers.
Judging Criteria
Your submission will be judged by:
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link
Note: in this challenge, you have to use Sketch for design.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum.
Round 1
Submit the following designs for the checkpoint deadline:- Create New Scorecard Template
- View Scorecard Template
Round 2
Submit the following designs for the final deadline, updated based on checkpoint feedback:- Create New Scorecard Template
- View Scorecard Template
Challenge Objectives
- Design the interface for the application
- 1 screen at 1280px width
- Web application
Project Background
- The purpose of this project is to design a scorecard template builder
- The user will be able to customize his template by selecting multiple tools to evaluate a submission
- He can assign different weights to each tool
Workflow
A scorecard is used to evaluate submissions based on some criteria. For example, for the design track, a scorecard you often see is the General Studio Screening Scorecard from Online Review. Other scorecards that we have in Online Review are AV Scorecard, Basic Code Challenge Scorecard, Specification Review Scorecard, etc. who all work in the same way, it’s just that they have the scope not to evaluate screening mistakes, but to evaluate the specifications, or submission quality for development or marathon tracks, etc. Right now, we use a single scorecard for a specific purpose, but we would like to change that.
In the new model, a user will be able to use an existing review type or create his own scorecard template, from a collection of existing review types. You can see a screenshot of how we envision this. The example is shown for development evaluating submissions on the development track.
Note: the screenshot should be used just as reference. DO NOT COPY IT! We are looking for your original ideas on the best user experience would be.
The user can select from the left side one of the existing review types: SonarQube, Checkmarx, Community, External or he can create his own scorecard template on these review types. On this challenge, we are focusing on the creation of the Scorecard Template Builder. Once the user has created it, he will be able to see it as non-editable.
Users
The users of this application are
- Copilots
- Challenge architects
- Customers
Screens Requirements:
1. Create New Scorecard Template
On this page the user is able to:
a. See the existing review types: SonarQube, Checkmarx, Blackduck etc. and select one to go with – Custom one in this case. Please keep in mind when planning the navigation, that we will have many tools/review types listed, so think of a good way to show them all. Some of the tools will be used for specific track mostly so you could label them to show that (Design, Prototype, Code, Marathon Match, QA).
b. Add a general description for the scorecard template (what you see in the example as the “Custom Scorer: This reviewer is your own docker image that will provide a code review score when it receives a submission”
c. Add a link where the custom scorecard template will reside – like the dockerhub link in the image
d. Check a couple of options about showing the results to the submitter, to the other competitors and when
a. See the existing review types: SonarQube, Checkmarx, Blackduck etc. and select one to go with – Custom one in this case. Please keep in mind when planning the navigation, that we will have many tools/review types listed, so think of a good way to show them all. Some of the tools will be used for specific track mostly so you could label them to show that (Design, Prototype, Code, Marathon Match, QA).
b. Add a general description for the scorecard template (what you see in the example as the “Custom Scorer: This reviewer is your own docker image that will provide a code review score when it receives a submission”
c. Add a link where the custom scorecard template will reside – like the dockerhub link in the image
d. Check a couple of options about showing the results to the submitter, to the other competitors and when
Once the general infos have been completed, comes the most important part: the scorecard template builder (the table you see on the right side of screenshot) which is build of a collection of review types.. Initially, this table will be empty and there will be an option / button/ link, etc. to add a new tool. The table can be represented as a list or any other way you see fit, but it should include the following fields:
- Review type
- Order
- Weight
- Mandatory
- Event
User Scenario
Step 1: The scorecard template is empty
Step 2: The copilot adds the first review type. This can be done using a popup, flyover menu or inside the table. When adding a review type all the 5 items from above should be included: tool name, order, weight, mandatory, event. Since we will have many tools, they can be grouped or labeled by track, but the user should still be able to select different tools from different tracks as well.
Step 3: The scorecard template gets filled with customized review types (we would just like to see multiple entries listed inside)
Step 4: The user validates the scorecard: when adding multiple review types, the sum of the weights for those tools should be 100%. The user should have an option to validate this and show an error if that’s the case.
Step 5: the user saves the new scorecard template and the entire page will be shown in view mode.
2. View Scorecard Template
This page is a non-editable version of the page that was just created before. The user has the option to edit it, so this way he will go back to the previous step.
Note: we are looking for your ideas and creativity on how the custom scorecard should work. Do not copy the provided screenshot.
Key Items to Focus on
- This web application must look in brand with the current Topcoder community site.
- Create an intuitive user experience for the copilots
- Target desktop web devices with a minimum resolution of 1280px width and height can be increased if needed.
Branding
- Colors: is mandatory you follow the exact Topcoder colors from the GUI KIT
- Fonts: use Roboto font as that is the standard font we are using for the new Topcoder site and have the text only in the TC colors (shades of gray).
- Use the new navigation we have that is provided in the GUI KIT
- If there is something else you need or have questions, ask in the forums.
- Stock photos and stock icons are allowed from the approved sources.
Target Audience
Topcoder copilots, challenge architects and customers.
Judging Criteria
Your submission will be judged by:
- How appealing does the user interface looks ?
- How easy is to read the scorecard template information?
- Is the design consistent and follows the GUI designs?
- Hierarchy and organization of content
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link
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.