Topcoder Submission Review Integration Design Challenge

Welcome to the “Topcoder Submission Review Integration Design Challenge". The goal is to integrate “manage my submission” feature from Submission Review App into Community Challenge page so it will be available for members who submitted to the challenge. Members can manage and track their submission easily without leaving Community Challenge page.

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 your initial designs for checkpoint feedback (Web and Mobile Responsive)
01) Design - My Submission Tab
02) Design - Submission Screening Details
03) Development - My Submission Tab
05) Data Science -  My Submission Tab 
06) Data Science - Submission Details

• As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented (Web and Mobile Responsive)
01) Design Track - My Submission Tab
02) Design Track - Submission Screening Details
03) Development - My Submission Tab
04) Development - Submission Details
05) Data Science - My Submission Tab 
06) Data Science - Submission Details
07) QA - My Submission Tab
08) QA - Submission Details

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

BACKGROUND OVERVIEW

• We have built a separate Submission Review App which allows submitters to review and manage their submission.
• We have THREE main issues regarding the Submission Review App:
  • 1st: Since this is a new app, most of the members are not aware of this app.
  • 2nd: In order to use the app members need to know the URL.
  • 3rd: It takes the members off of the Community App/Community Challenge Page.
• For this challenge, we need your help on how to integrate Submission Review App into Community App so members can view and manage their submission without leaving Community App.
• The flow should be the same across all tracks and challenges types (if possible).

CHALLENGE OBJECTIVES

• The objective is to design an implemented “Submission Review App” in “Challenge Details Page” which will be available after they submit.
• Show how some feature from the Submission Review App will be integrated in the Community Challenge Page
• Cover the flow to review and manage my submission as a Submitter on all challenge track: 
  • Design
  • Development
  • Data Science (formerly Marathon Match)
  • QA (Quality Assurance)

TARGET AUDIENCE

• Topcoder members

DESIGN CONSIDERATION

• Modern, simple and clean look & feel.
• Following Topcoder GUI Kit.
• Make sure your design follows the web accessibility.
• Easier for members to filter the challenge based on their participation and challenge status.
• Reduce the number of clicks required from members as much as possible

CHALLENGE FORUM

• If you have any questions regarding challenge requirements, please ask in the forum challenge.

SCREEN REQUIREMENTS

01) Design - My Submission Tab

• Scenario: Members submit to the challenge and my submission accessible after they submit, challenge still open
• In the Design track, my submission tab is available after members submit to the challenge.
• 
• We have previously exploring this concept which can be found from this marvel link and use this a guide to make your work easier. We need some edit from the exploration to make it align with how challenge listing page and details look now (with blue button):
  • My Submission tab will located next to the Registrant tab on the challenge details page.
  • Remove preview and thumbnail from the list.
  • Remove delete feature (trash icon)
  • Show long submission number instead of 6 digit number (eg: 2abf26a4-3ac9-450c-a873-3eac8e393875)
  • Submission Status. This will be contextual based on challenge state, show in separate screen for each challenge state:
    • Screening: not yet performed, pass, pass with warning, and failed, and show an arrow to expand screening details if failed.
    • Checkpoint and Final round review: Completed or not completed.
    • Checkpoint review end: checkpoint review score, awarded prize, 
    • Final review end: placement and prize, if none show review score.
  • Below my submission table, members can add other submissions.

02) Design - Submission Screening Details

• Scenario: when members click on the submission id or arrow, they can view submission details
• Submission screening details will be contextual based on screening result, shown in separate screen for each screening result:
  • Screening not yet performed: no information to show.
  • Passed screening: no information to show.
  • Passed with warning: show warnings from screener that must be fixed in round 2.
  • Failed screening: show reason why the submission is failed screening and notice that members CAN NOT participate in round 2.
  • 

03) Development - My Submission Tab

• Scenario: Members submit to the challenge and my submission accessible after they submit, challenge still open
• In the Development track, my submission tab will be available after member submit to the challenge and located after Submission Tab. You need to design the My Submission tab in TABLE view which contains:
  • Order of submission, submission id (eg: 2abf26a4-3ac9-450c-a873-3eac8e393875), Review Date, Review Score, and arrow to expand the submission details.
  • 
  • At the bottom of the table, member can add another submission.

04) Development - Submission Details

• Scenario: when members click on the submission id or arrow, they can view submission details
• Instead of moving to new page, we want to have submission details in expand view when members click the submission numbers.
• Design submission details is divide into two tabs: Review Summary and Artifacts:
• In Review Summary Tab, member can see information about their review in table view which contains: Review Type, Reviewer, Score, Appeal and Status
• 
• 
• In Artifacts Tab, member can see their feedback details/submission’s output by clicking on download icon button in the action column. We wanted to CHANGE the flow, instead we will SHOW the feedback on the screen rather than having to download it first. 
• 
• We would like to integrate view review summary and artifacts in challenge details page under the new My Submissions.

05) Data Science - My Submission Tab

• Scenario: when challenge is running and only my submission accessible to members
• Data science, also known as Marathon Match. 
• In the Data Science track, my submission tab will be available after member submit to the challenge and located after Submission Tab. You need to design My submission tab in TABLE view which contains:
  • Order of submission, submission id (eg: 2abf26a4-3ac9-450c-a873-3eac8e393875), Review Date, Review Score, Appeals, and arrow to expand the submission details
  • At the bottom of the table, member can add another submission.
  • This is how my submission looks on challenge page
  • 
  • And this is how my submission will looks on Submission Review App
  • 
  • We would like to integrate Submission Review in the challenge details page under the new My Submissions.

06) Data Science - Submission Details

• Scenario: when members click on the submission id or arrow, they can view submission details
• Instead of moving to new page, we want to have submission details in expand view when members click the submission numbers.
• Design submission details is divide into two tabs: Review Summary and Artifacts:
  • In Review Summary Tab, member can see information about their review in table view which contains: Review Type, Reviewer, Score, and Status.
  • 
  • In Artifacts Tab, member can see their feedback details/submission’s output by clicking on download icon button in the action column. We wanted to CHANGE the flow, instead we will SHOW the feedback on the screen rather than having to download it first. 
  • 
  • We would like to integrate view review summary and artifacts in challenge details page under the new My Submissions.

07) QA - My Submission Tab

• Scenario: Members submit to the challenge and my submission accessible after they submit, challenge still open.
• In the QA track, my submission tab will be available after member submit to the challenge and located after Submission Tab. You need to design the My Submission tab in TABLE view which contains:
  • Order of submission, submission id (eg: 2abf26a4-3ac9-450c-a873-3eac8e393875), Submission Date, Initial Score / Final Score, and arrow to expand the submission details.
  • 
  • At the bottom of the table, member can add another submission.

08) QA - Submission Details

• Scenario: when members click on the submission id or arrow, they can view submission details
• Instead of moving to new page, we want to have submission details in expand view when members click the submission numbers.
• Design submission details is divide into two tabs: Review Summary and Artifacts:
  • In Review Summary Tab, member can see information about their review in table view which contains: Review Type, Reviewer, Initial Score, and Final Score
  • 
  • In Artifacts Tab, member can see their feedback details/submission’s output by clicking on download icon button in the action column. We wanted to CHANGE the flow, instead we will SHOW the feedback on the screen rather than having to download it first. 
  • 
  • We would like to integrate view review summary and artifacts in challenge details page under the new My Submissions.

HELPFUL LINKS

• To help you understand how the marathon match submission format, you can read this post.
• To help you understand about development challenge, you can read this post and this.
• Note: 

BRANDING GUIDELINE

• Topcoder GUI KIT Current.sketch. You can use this sketch library as your design base.
• Marathon Match Challenge Details.sketch. You can use this in your design in order to help you focus on the flow and align your design with Topcoder GUI Kit. Please remove the checkpoint as Marathon Match doesn't use that format.

FONT AND COLORS

• Please use colors in the provided GUI KIT.
• Font: Roboto. Make sure you declare this font in your submission. 

DESIGN TOOLS

• Only Sketch allowed in this challenge.

TARGET DEVICES

• Desktop:: 1440px x 900px
• Mobile Responsive: 1125 x 2436px

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

SUBMISSION AND SOURCE FILES
Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Fonts Name and Links source from allowed sources

Source Files

• All source files of all graphics created in Sketch, saved as an editable layer.