Topcoder DS Match Graphical Leaderboard Integration Design Challenge

Graphical User InterfaceData ScienceDrilldownWeb Accessibility Initiative

BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the “Topcoder DS Match Graphical Leaderboard Integration Design Challenge". We are looking for your creative help to integrate Interactive Leaderboard into Data Science challenge details page so this feature will be available for all members and customers without typing the URL or leaving the challenge details page. This leaderboard allows members and customers to interactively view challenge participants and activity.

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) Participant Overview
02) Results Overview
03) Challenge Status, Participants and Activity
  • 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) Participant Overview
02) Results Overview
03) Challenge Status, Participants and Activity
  • 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

CHALLENGE OVERVIEW
  • We build this unique and cool Interactive Leaderboard that bring so much attention from members and customers. 
  • We have THREE main issues regarding this Interactive Leaderboard:
    • 1st: This leaderboard is built outside of our actual platform and only available for specific DS challenges. We want to make this leaderboard available for all tracks in future, but right now, we will FOCUSING on Data Science Match.
    • 2nd: The only way to access this leaderboard is by entering the URL link. We want to remove this pain point and make it accessible from the challenge details page. The only requirement is it needs to be on the challenge details page. It doesn't need to be a “tab".  But it should “live" somewhere on the details page
    • 3rd: It takes the members off of the Community App/Community Challenge Page.
  • We are looking for different ways on how members would interact from the challenge details page to get to this new dashboard/leaderboard.
  • Feel free to explore and propose new interaction for this interactive dashboard. If you have any idea to make the dashboard more intuitive, informative, and interactive for you to use, then be our guest! 

CHALLENGE OBJECTIVES
  • Design interactive leaderboard so it aligns with Topcoder challenge details page branding, look and feel.
  • Web and responsive mobile
  • Explore how members and customers can navigate directly from the challenge details page, and provide interactive experience.

TARGET AUDIENCE
  • Topcoder members
  • Topcoder customers.

DESIGN CONSIDERATION
  • Modern, simple and clean look & feel chart.
  • Your chart must be meaningful and can be build using D3.js.
  • Your design must align with Topcoder challenge details page style, with blue button.
  • Make sure your design follows the web accessibility.

CHALLENGE FORUM
  • If you have any questions regarding challenge requirements, please ask in the forum challenge. (TBA)

SCREEN REQUIREMENTS
01) Participant Overview
Scenario: when users land on the challenge details page, they can see this interactive leaderboard. Users can switch between Participant Overview and Results Overview 
  • Participant overview will cover the Geography tab. It is up to you to explore how to show all the features below in card or inline with page, have drill down ability to save up space or any other interaction to enrich the user experience.
  • Main feature we wanted to keep is the total number of participants from each country on table view and map view side by side.
  • Map view interaction, when users hover on the map, it will show country name with total participants . On mobile interaction, hover will be replaced with tap. And the table will be highlighted.
  • Table view interaction, when users hover or click on the table, it will show the location on map and highlight it.
  • Users can drill down for each country by clicking the maps or table and have it reflected on other card/feature, such as challenge participant, challenge activity, etc.

02) Results Overview
Scenario: when members and customers land on challenge details page, they can see this interactive leaderboard. Users can switch between Participant Overview and Results Overview
  • Results overview will cover the Results tab. It is up to you to explore how to show all the features below in card or inline with page, have drill down ability to save up space or any other interaction to enrich the user experience.
  • In this feature, users will be able to see scatterplot of submission with submit date as x-axis, and score as y-axis. 
  • When user hover or click on the submission dots, it will show information about handle, total submission, score, and submit date.
  • By default, the scatterplot will be shown as total duration and user allowed to narrow down the time using time filter:
    • Total Duration - Default: show all submission from start to end of the challenge
    • Last 48 hours: show all submission submitted in last 48 hours
    • Last 24 hours: show all submission submitted in last 24 hours
    • Custom/Range: show all submissions submitted in customized time range.

03) Challenge Status, Participants and Activity
Scenario: when members and customers land on the challenge details page, they can see this interactive leaderboard.
  • Right now information shown on these features are static. No relation between maps and results overview interaction (hover, click or tap). Do we need to make it dynamic? It’s up for you to explore.
  • Challenge status
    • This feature needs to be updated since some information already shown in the challenge details page such as: start date and end date, total registrant, etc.
    • It is up to you which information you wanted to remove from this section, BUT make sure the information shown here is not redundant. 
  • Challenge participants
    • This feature will shown as table view and list information about handle and submit date and time, rating, country, long submission number, programming language use in the submission, and score rank.
    • Think how to make this table more attractive and intuitive rather than just showing what we have right now.
  • Challenge activity
    • On challenge activity, there is two tab available: Submissions and Alerts. Feel free to explore if you want to split this tab to reduce click needed.
    • In Submission Tab, it will show history of submission in table view which contains:
      • Handle with submission date and time
      • Long submission number
      • Total points
    • In Alerts Tab, it will show notification about challenge status/phase.

BRANDING GUIDELINE
DOCUMENTATION
  • Example-dont-copy.png. This screenshot provided as example how other platforms visualise their participants to engage more members and customers.

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 for 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
  • Only Sketch allowed for this challenge.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Sketch

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30150852