Submit a solution
The challenge is finished.

Challenge Summary

Welcome back to the Topcoder Learning Series Challenges. Each month, we launch a design learning series challenge to help our new and existing members improve their design skills and get familiar with our Design Challenge process.

Layout consistency is one of the most important things we need to consider when we design a web or mobile interface. In this challenge, we will learn how to make layouts and components consistently and efficiently using grid systems and libraries. This challenge is the 2nd challenge of the series, and we are going to learn together and also do some quick practice to learn Grid and Libraries for Faster and Efficient Design by creating a Web Dashboard for Universities to Monitor Online Classes. 

This challenge is open for all members who are looking to enhance their design skills. We have 5 x $25 cash prizes to award for the first time submitters in the design track, who complete the guidelines in an article or video tutorial and pass the screening phase. If there are more than 5 members who meet the above criteria, the submissions with the best quality and innovation will be chosen.

Read the challenge specification below carefully and let us know in the forum if you have any questions!
  • The "Learning Series" is a brand new Topcoder program that has a goal to help members to be successful in Topcoder Design track by learning about UI/UX design via videos or article tutorials created by our top design members 

  • When competing in a design challenge, you need to be fast because challenges usually have a short timeline and at the same time you also need to be efficient too because there might be several design screens that need to be created and including the screen interactions to explain any feature in your design.
  • In this 2nd learning series challenge, we are going to guide you to learn some tips on how to create a fast and efficient design utilizing GRID and LIBRARIES that available in modern design tools. 
  • To help you become better at it we have a preparatory tutorial article on Grid and Libraries followed by hands-on video tutorial creating a Sales Dashboard that explains how to set up a GRID in your artboard and use LIBRARIES features inside your design tools to create a faster and efficient design. Later for practice and submission, we are looking for you to create a Web Dashboard for Universities to Monitor Online Classes by learning the concept from this article and the video.
  • We are using Sketch in this tutorial (article and videos), but the technique should be available and easy to be applied in any modern design tool nowadays.
  • As an additional goal for this challenge, we also want you to get familiar with our challenge process, so please don't hesitate to ask questions in the forum, requesting a marvel app project, and submitting your design to this challenge. Our Design Copilot will help you through the process in the challenge forum, so don't hesitate to ask anything there!

  • Learn how to use GRID and LIBRARIES properly
  • Able to create a faster and efficient design screen 
  • Get familiar with Topcoder Challenge Process

1) Read the Tutorial and Watch the Videos
  • GRID and LIBRARIES definitely will help you a lot when designing a lot of screens for a design challenge at Topcoder. Using these two features, you can easily create a number of screens faster and efficiently, which will benefit when you are competing against the time. Read and learn more about GRID and LIBRARIES feature and how to use it in your design from the following article and video:

2) Create a Web Dashboard Screen
  • After understanding how to applying GRID and LIBRARIES in your design, it is time to practice these features by creating a new design that will use these two features 
  • For this challenge, we are going to create a Web Dashboard for Universities to Monitor Online Classes
  • The web dashboard design should contain the following information and content:
    • Ability to see all active classes, it can be various classes available (Maths, Physics, Economy, etc), probably 5-10 classes at one time, including all students that registered to the class and their progress (attendance, class activity, homework, etc)
    • Ability to see all students and lecturer that registered in the platform
    • Ability to track and compare students progress in a graphical chart
    • Feel free to add more features to the dashboard, show us your creativity!

3) Register to the Challenge
  • Once you are done with the design, please register to the challenge and send your design attempt to us so we can review and provide feedback to you
  • Make sure to register within the registration phase. This challenge has 14 days registration and submission phase (Start on "12th May 2020 8 AM EST" and ends on "26th May 2020 8 AM EST").
  • You can see the deadline from this challenge page, and there is a link called 'Show Deadlines' at the above of this page, click that link and see the 'Registration' deadline time there, it's crucial to make sure yourself registered before that date and time arrived. 

4) Ask Questions in Forum
  • If you're having any problem understanding the video tutorial or got any questions about this learning series challenge, make sure to address your questions in the challenge forum.
  • Once you are successfully registered to the challenge, you will be able to see a link called 'Challenge Forum' at the top area of the page, click that link and you will be redirected to the challenge forum, ask any questions there, don't hesitate at all!

5) Request the Marvel App Project
  • In all UI Design challenge related at Topcoder, you will need to request a Marvel Project/Prototype to the Design Copilot
  • In the Marvel Project/Prototype, you will need to upload your JPG/PNG screen design to Marvel so the client can review and provide feedback to your design online
  • There are various ways of requesting Marvel project, but the most common way to do this will be by asking it in the challenge forum thread that already being prepared by the Design Copilot

6) Submit Your Design to Challenge Page
  • This is the most important/crucial moment when participating in a Topcoder challenge
  • You will need to submit all complete design deliverables to the challenge before the challenge deadline come
  • Prepare zip files contains 3 items in it:
    • Declaration.txt file 
    • Submission folder
    • Source folder  
  • More information about how to submit in a challenge can be found from this LINK
  • Failure to submit before challenge deadline come will make your design cannot be accepted/acknowledged and cannot be sent to the client for review

  • Keep things consistent. This means all graphics styles should work together
  • All of the graphics should have a similar feel and general aesthetic appearance

  • We need you to upload your screens to Marvel App
  • Please send your marvel app request in the forum 
  • You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link and share it with your notes/comment this link while you upload)
  • Open To Designers (Colors, Font, Style, etc)

  • Web/Desktop Size: 1400px Width with Height adjusted accordingly

  • Topcoder Members

  • Your submission will be judged on the following criteria:
    • Complete Design Submission Deliverables (Submission Folder, Source Files Folder, Declaration Files)
    • The Overall design and user experience
    • How well your design attempt to create the web dashboard screen using GRID and LIBRARIES
Declaration Files
  • Please create your declaration files (TXT, PDF, Word, RTF, etc) contains all information about Font, Artwork, Photos, and Icons name and source link used in your design 

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 either Adobe XD or Sketch and saved as an editable layer
  • 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.


2020 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 "" file.
  3. Place all of your source files into a "" 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.


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
  • Adobe XD

You must include all source files with your submission.

Submission limit


ID: 30123593