Topcoder Gig and Challenge Content Listing Exploration Design Challenge

Welcome to the “Topcoder Gig and Challenge Content Listing Exploration Design Challenge". In this challenge, we need your design ideas and exploration on how to display content in the listing page for challenges and gigs so at first glance, members can easily distinguish between gigs or “type” (challenge, F2F, task) and track (Design, Dev, DS, QA) using text, color, and icon for Topcoder platform.

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) Challenge Listing Page (Web and Mobile Responsive) 
02) Gig Listing Page (Web and Mobile 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) Challenge Listing Page (Web and Mobile Responsive) 
02) Gig Listing Page (Web and Mobile 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

• If you compare gig listing and challenge listing they look different and detach. In the next release, we want to make challenges and gigs listing pages having consistent design and look for both by applying the latest EARN App design. 
• We also want to tackle the issue of how the listings content will be shown so that it provides users enough information about the gig or challenge and make them want to click into the challenge details.

TARGET AUDIENCE

• Topcoder members and visitors 
• Freelancers/Gig workers

DESIGN CONSIDERATION

• Modern, simple and clean look & feel.
• The key thing for these screens is less is more. So think on how to make the listing stand out without overcrowding the table with unused items.
• Design hierarchy should be applied in your design.
• Following Topcoder GUI Kit.
• Your design must use the EARN App.Sketch as base and update the existing design to reflect your ideas.
• Your design must follow web accessibility.
• Consider to use real challenge name and information that can be found here.

CHALLENGE FORUM

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

SCREEN REQUIREMENTS
01) Challenge Listing Page (Web and Mobile Responsive) 

• For the challenge listing page, the main goal is to make each track distinctive. This can be reached using visual cues like icon, color and text treatment, and this up for your discretion. Your solution should be better than what we have right now.
• Think on how to make the challenge listing simple and informative enough that make members want to click into the challenge details.. 
• Notes for mobile: think on how to make your design look better for mobile responsive rather than just resize it.
• Make sure to capture these components in your designs:
  • Challenge track: Design, Code, DS, QA
  • Challenge type: Challenge, Task, F2F
  • Challenge name: show one line and two lines for challenge name.
  • TCO eligible icon: is this challenge eligible for TCO points or not. 
  • Challenge timeline: your design should show different state of each challenge regarding each track that you show, eg Registration, Submission, Review, etc.
  • Challenge deadline: should we show this? If yes, how to make this not 
  • Tools or Technology used in the challenge: this can be design tools, programming language, latest technology will be used in the challenge.
  • Registrants number.
  • Submissions number.
  • Prizes. Full purse vs prize placement
  • Additional Interaction: hover, on-click, tooltip, popout, etc.
  • Challenge forum link for each challenge

02) Gig Listing page (Web and Mobile Responsive) 

• For the gigs listing page, the main goal is to make each gigs distinctive base on type of work needed, eg: Design Gigs, Development Gigs, etc. This can be reached using visual cues like icon, color and text treatment, and this up for your discretion. Your solution should be better than what we have right now.
• Think which information needs to be shown by applying design hierarchy for gig-workers.
• Notes for mobile: think on how to make your design look better for mobile responsive rather than just resize it.
• Make sure to capture these components in your designs:
  • Gigs name: show one line and two lines for challenge name.
  • Gig type: we need an easy way to show what kind of work the gig related to, eg. design work, coding, QA, 3D render, etc. It can be icon, tags, etc.
  • Tools or Technology required for the gigs: this can be design tools, programming language, latest technology will be used for the work.
  • Location: anywhere/specific city/country/regions (Europe, North America, etc) 
  • Payment: per week.
  • Gig duration: Months
  • Additional Interaction: hover, on-click, tooltip, popout, etc.

DOCUMENTATION AND BRANDING GUIDELINE

• Topcoder GUI KIT Current.sketch. You can use this sketch library as your design base.
• 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.
• Topcoder EARN App - Marvel. Your design look and feel must align with Topcoder EARN App.
• Earn App.sketch. You can use this as base design.
• Framing App Reference. Please use this microapplication framing that we have already defined to make your design consistent.
• Iconography. Check forum. 

FONT AND COLORS

• Please use colors in the provided GUI KIT. 
• Preferred to use GREEN color for clickable items, eg. radio, button.
• Font: Roboto and Barlow Condensed. Make sure you declare this font in your submission. 

DESIGN TOOLS

• Only Sketch allowed in this challenge.

TARGET DEVICES

• Desktop: 1366 x 768px (height adjustable as much as needed).
• Mobile Responsive: width 375 px  x 667px height (height adjustable as much as needed). You can export your designs at 2X for Marvel.

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

STOCK PHOTOGRAPHY

• Stock photography is not allowed in this challenge.