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

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Topcoder Education Center Design Challenge". In this challenge, we need your help to create Topcoder’s Educational Center Application that will help members of the Topcoder community to easily search and find articles, forum posts, videos, and other forms of content that has been gathered from across the Topcoder platform. In particular, we are looking for a design of three pages that should, at a minimum, display the below-listed components associated with them.

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 design for a Checkpoint Feedback (Desktop + Mobile)

01) Homepage
02) Sub Categories Page
03) Article Page
  • As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please make sure the MarvelApp URL is included in “notes.txt”. 
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates (Desktop + Mobile)

01) Homepage
02) Sub Categories Page
03) Article Page
  • As part of your Final submission, you must replace your checkpoint submission with the final submission on MarvelApp so we can provide direct feedback on your designs. Again, please include the MarvelApp URL in “notes.txt”.
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

BACKGROUND OVERVIEW
  • This new Topcoder Education Center App will serve as the primary source of educational content on the platform for all Topcoder Members and for all the tracks(Development, Design, Data Science, Competitive Programming, and QA)
  • The main target audience is our registered members. The goal is to provide easy access to any relevant information on the Topcoder platform from various sources such as the main website, forums, blogs, social media accounts, youtube, etc.

CHALLENGE GOAL
  • Create the Best possible UI/UX design for Our New Topcoder Education Center application that allows easy access to educational content and relevant information on the platform for members of the community.

CHALLENGE FORUM
ACCESSIBILITY COMPLIANT

SCREEN FEATURE REQUIREMENTS
For this challenge, we are looking for the below screens to be designed/considered in your submission. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.

00) General Requirements
  • Your Design MUST align with our Topcoder GUI KIT (See branding guidelines area)
  • Do some research about best practice to create a great Education/Help page or take a peek of how some popular site create their education or help center 
  • Do not create or put information into pop-ups/modal windows. All information should be clear from the first visit.
  • If you want to draw/create any awesome design illustrations, that is fine. BUT, it needs to be your own creation (3rd Party/Stock Illustration IS NOT ALLOWED)
  • Our priority is to have a clean and minimalistic design and layout
  • Remember this page is for both registered and unregistered members, which means that this site is for YOU! So please consider what kind of design visualization and content information will easily help you to use and find information from this app? Put your thoughts and visualize it in the design!
  • Please refer to our Final Hierarchy diagram for the planned categories structured of the Edu Center
  • Refer to the following spreadsheet for the content: https://docs.google.com/spreadsheets/d/1FI943sIlJXDHBpYeuuX0069vhjQ15VCRQRAOBsuwtzM/edit?usp=sharing (you can grab one or more content from the spreadsheet, as much as you need to help visualize your design ideas)

01) Homepage
  • This is the first page users will see upon arriving at the Topcoder Educational Center
  • Characteristics: Welcoming and Useable
  • Mandatory Components:
    • Search Bar - Prominent and should appear in the top fold
    • Next to the search bar should be a dropdown for values such as: All (default), Tags, Author
    • Next to the dropdown should be a button that says “Search”
    • Main Categories displayed with previews to their subcategories
    • Main Categories include: Development, Design, Data-Science, Competitive Programming, QA, and General
    • Please refer to our Final Hierarchy diagram for the planned categories and subcategories structure of the Edu Center

02) Sub Categories Page
  • This page will display an index of information depending on which Category or Subcategory was clicked.  For example, if the category “Design” was chosen from the homepage, this page will display all the subcategories available for Design along with a preview of the articles listed under that subcategory.  It is also possible that there are subcategories under subcategories.
  • Characteristics: Informational, No Need to Be Flashy, Information Presented Cleanly and Organized
  • Mandatory Components:
    • Search Bar - Prominent and should appear in the top fold
    • Next to the search bar should be a dropdown for values such as: Current Category(default), All, Tags, Author
    • Next to the dropdown should be a button that says “Search”
    • Breadcrumb - A hierarchy displaying where the user is currently. This will begin at the “Homepage” and lead up to their current position.  Ex: Homepage - > Design -> UI Design Tutorials
    • Top Articles Area - This will be an area on the page that will list the top 5 articles based on the number of votes.
    • Tags Area - This will be an area that will list the most common tags associated with articles.  Each tag will be a link which when clicked will send the user to another “Subcategories” page with articles relevant to that tag.

03) Article Page
  • Finally, the user finds the article they are looking for!  We have a list of components that we plan to have on this page so make sure that all of the Mandatory Components are accounted for
  • Mandatory Components:
    • Banner (optional): If a banner image is provided, it should appear on the page.
    • Title - If a banner is present, overlay the banner with the title, else add the title somewhere before the content.
    • Author - The name and/or handle of the person who wrote the article and a link to their Topcoder Profile.
    • Date and Time - The date and time the article was published
    • Content - Obviously the text, images, links, videos of the article
    • Tags - All tags that are associated with this article and all links (see last section)
    • Up/Down Vote - There should be an option for the user to upvote or downvote the article.
    • Comments - Please allow for an area in your design to harbor comments from a user.  Comments will only be allowed from registered Topcoder Members.
    • Recommended/Related Area - This will be an area on the page that will list 5 articles related to the current article.

IMPORTANT:
  • Keep things consistent. This means all graphics styles should work together
  • All of the graphics should have a similar feel and general aesthetic appearance
 
MARVEL PROTOTYPE
  • We need you to upload your screens to Marvel App
  • Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
  • 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/comments this link while you upload)
 
BRANDING GUIDELINES
DOCUMENTATION
TARGET DEVICE
  • Web/Desktop: 1440px width with Height adjusted accordingly
  • Mobile: 750px width with Height adjusted accordingly

TARGET AUDIENCES
  • You and more than a Million+ Members that Topcoder currently has

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
  • The overall idea, Creative use of design, and execution of concepts
  • How easy is it to find the desired resource?
  • How well does your design align with the objectives of the challenge
  • Creative but clear ability to integrate content into the page
  • Execution and thoughtfulness put into solving the problem
  • The overall design, UI, and user experience
  • Cleanliness of screen design and user flow

SUBMISSION AND SOURCE FILES
Preview Image
  • Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
 
Submission File
  • Submit JPG/PNG image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
 
Source Files
  • All source files of all graphics created in Sketch and saved as an editable layer
 
FINAL FIXES
  • As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors

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.

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:

Topcoder Open 2019

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

Unlimited

ID: 30095496