How To Compete in Design

It may seem a bit complicated at first for some when beginning to compete on Topcoder challenges. Fortunately for you, we have an A-Z guide to help you through your first competition and reference for any other time you need it. Feel free to follow this video with bookmarks or follow the written instructions below.

//images.ctfassets.net/b5f1djy59z3a/3SxG5fuyLeQ2MMW0cg2qSS/fb751974583bf570be25266e286d0f70/design_howto_banner.jpg

It may seem a bit complicated at first for some when beginning to compete on Topcoder challenges. Fortunately for you, we have an A-Z guide to help you through your first competition and reference for any other time you need it. Feel free to follow this video with bookmarks or follow the written instructions below.

Step by Step

Select a Challenge
Select a Challenge

The first step to compete on Topcoder is to select a challenge from the Challenge Listings page and choose a challenge that is in the “Checkpoint Submission” phase.

1-design

💡NOTE The majority of design challenges are two rounds unless it is a one round type challenge such as a Design First2Finish, Rapid User Experience (RUX), or Live User Experience (LUX).

On the Challenge Listings page, note the type of challenge it is (hover over the blue box to learn more) and if you care to proceed you may click on the challenge title, which will take you to the Challenge Details page.

💡NOTE RUX’s and LUX’s are a special type of challenge on Topcoder and it usually offers high prizes and multiple winners.
Register
Register

On the Challenge Details page you can see the register button in the top right corner. Click that button to register for the challenge.

Once you have registered, you will have access to the challenge files and documentation. Usually all of the assets that are provided by the client can be downloaded from the “Downloads” section on the right side. Looking through these files is important as you can then determine whether you want to continue working based on the software involved. If you have already registered and decide that you do not want to participate, you can simply unregister from the challenge so that your rating does not become penalized.

Tip!

Each challenge has its own forum, so make sure to check there as sometimes there may be additional files provided by the copilot or client. You can also find discussion related to the challenge spec in this forum as well. You can find a link to the forum on the challenge details page.
5-design

It is also important to note that you should also “Watch” each challenge forum as you will receive email notifications whenever someone posts in there, which could contain important information.

6-design

Read and Understand the Design Spec
Read and Understand the Design Spec

The spec is divided into two parts:

  1. Round 1 Requirements
  2. Round 2 Requirements

If the challenge that you are currently participating in is a two-round challenge, for the Checkpoint phase you only need to submit the Round 1 requirements. The Round 2 requirements should be completed in the Final Round.

If you have read the spec and you still have questions, just ask it in the forum. Once you understand the requirements, the next step is to start designing!

Create and Prepare Your Design
Create and Prepare Your Design

When creating your designs, make sure you organize your design sources by naming your layers and folders properly as that will help the clients and developers work with your files.

After you finish designing, you will need to prepare these deliverables for submission:

DELIVERABLES:

Source.zip Create a folder and name it Source. Put all of your design source files (.sketch, .psd, .ai, etc) in there and compress the folder into a zip file.

Submission.zip Create a folder and name it Submission. Include the different views of your design (.png or .jpg format) and compress the folder into a zip file.

💡NOTE Make sure to name your PNG/JPG files in ascending order like:

00. Login.png, 01. Homepage.png, 02. Profile.png, and so on..

The naming convention doesn’t have to look exactly like this. The point is to name these files so that the client can view the images in an order. Many challenges require you to create a MarvelApp prototype, so make sure you provide that link in the submission folder. You can accomplish this by creating a file called *marvelapp.txt* and pasting your MarvelApp prototype link in that .txt file.

Preview.png You need to create a preview of your design with size of 1024 x 1024 px. Think of this as a one page presentation of your final submission. Include the most important screens and what they would actually look like on the device(s) you are designing for.

Submit Your Design
Submit Your Design

The deadline is near and after all that hard work, your design is finally complete. Now, it is time to submit your design. To do this there are few simple steps that you will need to follow to make sure your design is successfully submitted to the challenge.

1. Prepare your Declaration Files

  • If your design contains 3rd party assets (fonts, stock icons, stock photos), you will need to declare all of those assets in one single document so the client can easily find and buy the assets if your design wins the challenge.

  • Make sure to follow our instructions on how to declare your files properly in the Extras section below.

2. Prepare your Submission folder
Generate all screen requirements and it’s interaction features as a JPG or PNG into one folder called “Submission”

screen 1

3. Prepare your Source folder
Put all source files of your design into one folder called “Source”

screen 2

4. Prepare your preview/mockup files
If necessary, create a preview/mockup file for your design submission so the client can see your design summary in one screen. Put it in the master folder alongside your submission folder, source folder, and declaration file.

step-4

5. Zipped all those 4 into one single zip file

  • Once all four files are created, the next step is to compress them into a zip file.
  • Name the file as your wish, but we recommend to use the challenge name as the file name, for example: “Tiger - DViz Dashboard Viewer Responsive Web App Design Concepts Challenge

step-5

6. Open Challenge Page
Once you are done zipping your design submission, open the challenge details page and click the “Submit” button

screen 3

This will take you to the upload page, which will allow you to upload your design submission to the challenge.

screen 4

7. Upload them to the upload page
To upload your submission to the challenge, you can drag and drop the zip file into the “submission upload” box or click “Pick a File” button to select the zip file from your local machine.

screen 6

Once the submission is attached, you will be redirected back to the upload screen. After reading Topcoder's Terms of Use, click the “I understand and agree” checkbox and click “Submit” button and your submission will be uploaded to the challenge.

screen 9

8. Check Your Submission Status
After your submission has completed uploading, click the “View My Submissions” button to make sure your submission is officially submitted to the challenge.

screen 11

If the submission ID is shown in the table then that means your submission has been submitted successfully.

On the “Actions” column in the table, you can do several interactions such as: downloading your submission, deleting your submission, and seeing the submission details.

If you want to add another submission, you can click the “Add Submission” button and repeat the upload process from the beginning

Winner Announcement
Winner Announcement

The review of the Final Round takes a few days to complete so be sure to keep an eye on your email because once the review has ended you will get notification (you will receive a separate email if you win). After you see the email announcement, make sure to check the challenge forum as well because the copilot may have other information to provide.

If you do win the challenge, the next step is to complete the final fixes if needed. The Final Fix phase is performed if the client has minor details to change or wants to mix elements from runner-up designs. If the fixes are large, there may be an additional payment for you to complete them.

Extras

LUX & RUX Challenges Explained!

Live User Experience (LUX) and Rapid User Experience (RUX) are special types of challenges in Topcoder Design. You will find that these types of challenges usually have higher payouts and award more placements. These challenges run fast, which means it is a one round challenge that usually runs 48 hours for LUX and 72 hours for RUX. Even though this is a one round challenge, there will be a point in the competition where you can submit your design in the middle of a challenge (specific time will be mentioned in the challenge details). This part of the competition is called a Rolling Checkpoint and this is a great opportunity to receive feedback and the first 8 qualifying submissions will also receive $50!

Using Marvel Application for UI Design Challenges at Topcoder

More and more here at Topcoder our Design challenges utilize Marvel as it is a great tool to present your designs to the client and have them provide feedback.

We have put together this walkthrough video to guide you on how to use the app for Topcoder challenge purposes.

Properly Declaring Your Files

  • You MUST declare every single design file and element from your submission including: fonts, icons, and stock arts that were not created by you so that we can track and take care of the administration for those files before handing the final design deliverables to the client.

  • Any 3rd party design files and elements MUST comply and follow our Policy Rules (see Fonts, Icons and Stock Art policy for more details). DO NOT use any design files and elements that are not approved by Topcoder in your design.

  • Do not add your username or personal information in your declaration files, keep it anonymous.

  • You can use this Declaration Files Template as a base to declare your design files (download it as a pdf, replace the content with your design files and elements in a text editor, and upload it with your design submission).

  • Be specific when you declare your design files, do not just add generic information. For example, do not put “I’m using this picture from google.com”, this will result in a failed screening for your submission. Provide as much detail as possible about your 3rd party design in the declaration files.

  • For any design files and elements that belong and come from the client, put a note in the template that those files were provided by the client.

FAQ

Here are a few answers to our most common questions
What design tools are accepted when competing in a Topcoder challenge? Can we use open source tools like Gimp or Affinity Designer?

Typically design tools that are being used by industries/companies world wide are accepted such as: Adobe Photoshop, Adobe XD, Sketch or Illustrator. Topcoder right now does not allow open source tools such as GIMP or Affinity Designer when competing in design challenges.

The challenge deadline is getting close and I am having trouble uploading my submission, what do I do?

You should ask the Support Team for help via email and cc the challenge's copilot/PM in the process.

Why can't I see the designs after the winners were announced?

Many clients desire to keep their competitions private. They also may not want to influence the designer's creativity, which is why sometimes it is the reason we hide their company's name in challenges.

Are we allowed to post our designs from Topcoder challenges in our online design portfolios?

We prefer that Topcoder designers do not post their design submissions on the Internet. If it is important for your portfolio, please scrub all branding guidelines (remove the logo and change the colors, font, etc) and remove any hint of its relation to the client.

However, if the challenge requires NDA in the beginning, any work related to the challenge, cannot be posted online.