Formatting Your Submission: It’s Not Rocket Science
After seeing a couple of members fail screenings these days - including veteran members - I thought it would be a good idea to write a very simple “how to” guide and share some foolproof tips to improve your submissions and help copilots with their work.
Nobody likes to fail a screening or get a screening warning for not formatting their submission properly; so follow these simple steps in order to avoid this.
Make a correct file structure
A perfect submission, and actually the correct submission, should contain the following file structure:
Submission.zip
Source.zip
Readme/Notes.txt file
JPG/PNG Preview image
All these 4 files should be zipped into a single .zip file. A good practice is to name this single file with your handle and the challenge name, for example:
Chekspir-RUX-72HR-CallCenter-Challenge.zip
So, you might be wondering “why do I need to do this?” Well, sometimes when the challenge copilot downloads all the submissions in bulk, and unzips all the files, your submission folder might be confusing for being called just “folder.zip”, “submit.zip”, “design.zip”. This forces the copilot to double check the submission number and downloaded file to make sure your submission is not a duplicate or something similar.
Based on this idea, let’s talk now about each file:
1) Submission.zip
Recently, I personally have seen many members naming this file wrong. Some examples of this are the following names:
submit.zip
my-design.zip
round1.zip
artworks.zip
mockups.zip
So keeping in mind that the correct name for this folder is submission.zip let’s talk now about what this folder should contain.
Within this folder you should only add PNG or JPG files with your design. Do not add any other files than these in this folder.
It is very common to find submissions without the proper file numbering, for example:
Dashboard.jpg
Login.jpg
Notifications.jpg
If you do this, your files won’t be visible in the correct order. Maybe you think this is not necessary because you might be providing a MarvelApp prototype. However, keep in mind that sometimes our clients might not be able to access/open a MarvelApp link. This happens a lot and for several reasons, like internal network limitations and restrictions, internet access in review meeting rooms, etc. So plan B is always to show your files directly so the client can download your files and visualize them on their computer.
Based on this, a good submissions file naming would be like this:
00-login.jpg
01-login-error.jpg
02-dashboard.jpg
03-dashboard-notifications.jpg
If you read every challenge specification carefully you will find something like this
Again, it's always good advice to read the entire challenge specification carefully.
2) Source.zip
This file should contain only the source files of your design. It doesn’t matter if you are using Photoshop, Illustrator, Sketch or XD; only the source files should be there.
Similar to the submission folder, it is a good practice to place all your source files inside of a “Source” folder and then zip it. So when a copilot unzips the main single.zip file you submitted they will see something like this:
It is very common to see members mixing the content for these two folders. For example:
Placing all the PNG/JPG files inside the “Source” folder
Placing all the source files inside the “Submission” folder
You need to be very careful with this, this “simple” error might cause you to fail screening. I know sometimes we submit very late at night when we are tired and falling asleep, but a double check before submitting always helps.
As a final recommendation, avoid weird names like:
MySource.zip
Editables.zip
Photoshop.zip
Sketch.zip
The final file name should be only: source.zip
3) Readme/Notes.txt File
This file should contain the following information:
- Your declaration notes: Where you took your stocks images and icons from; just the url is enough.
- Your MarvelApp links: Only if the challenge requires this. So if your challenge is not requesting a MarvelApp prototype link, you don’t need to add anything or something like this:
“MarvelApp Link: None”. Totally unnecessary. As a side note for MarvelApp links; if you have been assigned to a prototype and it is requested to provide your link, please do it on this file. Do not assume that Copilot would know your link. Usually on a regular challenge more than 30 Marvel App prototypes are assigned, so it is very hard for Copilots to know which prototype is yours.
- Any comments you would like to explain about your design. Many members don’t do this, but this is very helpful and will make the review process easier for clients. For example, if you are using a cool feature like augmented reality and that wasn't requested in the specs, you can add a comment explaining why you added that into your solution.
Once again, you can add comments directly in MarvelApp, but remember you need to have a “Plan B” in case the client cannot access the prototype. Don’t let your ideas and concepts be ignored.
There is not a proper content structure for this file, but a good example would be something like this:
This file is very important, as important as your design itself, and it is one of the main reasons of why lots of submissions fail the screening process.
4) Preview Image
Finally, there is the preview image; this file can be a PNG or JPG file, and it is the preview image that the copilot and project manager will see in the Topcoder System as a thumbnail.
Some members dedicate too much time to creating cool preview images. Even when this can be considered “good” this is not strictly necessary.
In the specifications page you will find this:
“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.”
You can do any of the following:
Take your best looking screen, copy it and call it “preview.jpg”.
If it is a RUX/LUX challenge, copy your presentation screen and call it “preview.jpg”.
Take a screenshot of your design software open with the artwork there, and call it “preview.jpg”.
Whatever approach you choose, just remember to include your preview.jpg image.
Side note, this file can be either JPG or PNG.
You can find more information about how to submit in the following link.
Also good information about how to pass the screening process and how to compete on Topcoder challenges.
Final advice: double check everything before submitting, don’t let your hard work go directly to the trash bin because of a simple error.
Good luck and see you in the forums!