TC Design Bootcamp Microsite Fun Design Challenge

Key Information

The challenge is finished.
Show Deadlines

Challenge Summary

Welcome to "TC Design Bootcamp Microsite Fun Design Challenge". As part of Topcoder goal this year to empowering its members to reach their fullest potential, Topcoder held a program called Design Bootcamp where members can learn about UI and UX skills from other members (Topcoder best and experienced Designer) based on their country/region/city.

In this challenge, we are looking for your help to create a microsite for TC Design Bootcamp which will be used by all Topcoder members to find information about the Bootcamp and able to do some interaction in it. This microsite needs to be simple, easy to use, offer a great focus and CTA to the user, and at the same time it needs to look modern and professional.

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!
Project Description
Topcoder Design Bootcamp is an initiative education program from Topcoder Community Team, utilizing a concept called Member To Members, where new members can learn from an Experienced members that available in their region for a period of time in an onsite and online events to increase their UI/UX skills and have a bigger chance to win in Topcoder design challenge.

We are in need to create a microsite that able to supply all information about the design Bootcamp program, including tracking history of the previous Design Bootcamp and help members to register and participate in the program either as students or mentors. 

Challenge Goal
Build a great design look and feel for Topcoder Design Bootcamp microsite that able to engage members to register, participate and find any information about the bootcamp easily. 

Design Consideration
- Simple, Clean, Professional, and Modern look and feel.
- Simplicity to find and add necessary information 
- Needs to offer a great focus to the user
- Best Practice for Responsive Web Based App (Desktop and Mobile)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:

Screen Requirements
01) Homepage
For this challenge, we are looking only for the homepage creation with the following requirements:

- Needs to supply the following Design Bootcamp informations (can be created asa separate section, tabs, etc):
-- The purpose of Design Bootcamp
-- Benefit to join as Student and Mentor
-- Class Timeline(5 Days Onsite UI Skill workshop and 5 Weeks Online UX Skill workshop) 
-- Image gallery of the previous Bootcamp class activity (to show members about the bootcamp excitement and make them interested with the program, can be hero images, carousel, list of images gallery, etc)

- Needs to provide google maps and provide list of city location that have Design Bootcamp supported (Medan, Surabaya, Yogyakarta, Jaipur, Bangalore, etc)

- List of upcoming Design Bootcamp Class for 2019

- History list of previous Design Bootcamp Class that already run and successfull (Class Number, Location, Mentors, List of participants)

- Testimony from members (Student and Mentor)

- Need an area/section where members can register to the bootcamp (as a Student or Mentor), provide the registration from too

- FAQ and Help 

- 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) or post it 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).
Branding Guidelines
- Follow Topcoder Branding Guidelines Document: https://www.topcoder.com/about/topcoder-brand-guidelines/ 
- Explore our site for more references: https://www.topcoder.com 

Target Devices
- Responsive Web Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
- Mobile: 750px x 1334px (Height can be adjusted)

Target Audience
- Topcoder Members

Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Submission & 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 either Adobe Photoshop, XD or Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.

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.


Topcoder will compensate members in accordance with our standard payment policies, unless otherwise specified in this challenge. For information on payment policies, setting up your profile to receive payments, and general payment questions, please refer to ‌Payment Policies and Instructions.


Topcoder Open 2019


Screening Scorecard


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.


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.

Questions? ‌Ask in the Challenge Discussion Forums.


  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • xd

You must include all source files with your submission.



ID: 30083894