Topcoder Challenge Page Filter UI Update Design Challenge

Welcome to the “Topcoder Challenge Page Filter UI Update Design Challenge". The goal is to update the filter section to reflect each challenge bucket status and make searching for past challenges easier for Topcoder members. This will be a simple challenge to look at how the sections can be reorganized. 

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
01) Updated Challenge Filter UI (Web, Mobile and Tablet Responsive)

• 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
01. Updated Challenge Filter UI (Web, Mobile and Tablet Responsive) 

• 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

• Search for past challenges is very confusing for members. Right now we have Open for Registration, Open for Review, Active, Completed and All challenges filters in 2 separate sections. 
• Open for registration is the default bucket so when you open the filter, the status is not available so it's not clear how to look for closed/past challenges. 
• Our goal in this challenge is to remove the confusion by reorganizing the filter section.

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)  Updated Challenge Filter UI (Web, Mobile and Tablet Responsive)



 

• When visiting Topcoder challenge listing page, members can filter challenges base on status Active and Completed/Past Challenge (see pictures).
• Right now we have 4 main bucket to filter challenge by their status which are:
  • All challenges, showing all challenge regardless of members participating or not,
    • If member select this bucket, by default, dropdown Status is set to “Active” and showing all active challenges.
    • If member select status “Completed”, past challenge will show.
    • If member select “All”, both active and completed challenge will show.
  • My challenges, showing all challenges that the member is currently registered in. Right now, the challenge “Status” is missing from this bucket. But we want to add “Status” drop down so members can see “Active” and  “Completed” challenges.
  • Open for registration, showing all challenges that is available for members to register.
    • Right now challenge “Status” is missing from this bucket. But we want to add “Status” drop down and set it only as “Active”, as “Completed” will not make sense for this bucket.
  • Open for review, for this bucket, this bucket is out of scope. There is no ‘status’ filter dropdown for this bucket.
• We need your help to propose a new way of reorganizing the section so it will be easier for members to filter the challenge based on challenge status and participation.
• We DON’T want PAST CHALLENGES to be in the bucket. It's not something most members look for (except for some of our veteran members). 

DOCUMENTATION AND BRANDING GUIDELINE

• Topcoder GUI KIT Current.sketch. You can use this sketch library as your design base.
• Topcoder GUI KIT Current.pdf. This GUI KIT provided for non-Sketch user.. 
• TC UI Kit Marvel. For non sketch user you can use the handoff feature to know the properties of each element.
• How to use the Topcoder GUI Kit. Read this article so you have a complete understanding on how to use the Topcoder GUI KIT 2020.

FONT AND COLORS

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

DESIGN TOOLS
As we don’t want to limit your participation and ideas on this challenge, Adobe Photoshop, Adobe XD, Figma and Sketch are allowed in this challenge.


TARGET DEVICES

• Desktop:: 1440px x 900px
• Mobile Responsive: 1125 x 2436px
• Tablet: 1536 x 2048 px 

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 either Adobe Photoshop, Adobe XD, Figma and Sketch, saved as an editable layer