TopCoder Analytics Landing Page Storyboard

Welcome to TopCoder Analytics Landing Page Storyboard Contest. The Goal of this contest is to design a Landing Page for TopCoder Analytics (Marathon Matches).

Read the Contest Details carefully and let us know if you have any questions.

Round 1

At the end of Round 1, we will choose five (5) Round 1 winners, each will win $50 and a Design Review. These winners and any member who had a passing submission in round one will be eligible to compete in Round 2 for the additional $1000 in prizes.

Round 2

Round 2 will start with the announcement of the Five (5) $50 Round 1 winners and their design review.

Project Overview

TopCoder will be investing in "productizing" the marathon matches. We want to make the process of creating, running, monitoring and getting results from marathon matches much better than it is now. This is similar to how over the past two years we've invested in developing Cockpit, which productized the software competitions and allows TopCoder clients to easily create and monitor software and studio competitions.

Task Overview
TopCoder is working on building a mini-platform (website) for the sole purpose of creating, running, monitoring and getting results from marathon matches.

In this contest you are asked to create a "Pixel-Perfect" design for the Landing Page of TopCoder Analytics portal.

Task Requirements
Here are couple of notes to consider while designing the Landing Page:

• Keep it clean, simple, user-friendly and focused!
• Try to follow the latest trends in web graphic design, we are looking for "pixel-perfect" design.
• Don't be shy! Start playing with typefaces, a new trend has began to gain strength and that's by utilizing big and bold fonts with the exclusive intention of grab the surfer's attention, this is good to use in Landing Page specifically for the Headline to get user attention!
• Mixing a bold and light fonts is still a good idea.
• Use a color that suits what we offer and use a different color for headline/Call-To-Action elements.
• Incorporate rounded corner buttons and other elements.
• Working with stripes are also interesting instead of working with boring plain elements.
• Provide hover styles for all clickable elements.
• You don't have to stick with placing everything "above the fold" concept, it is OK if some page elements are placed "below the fold".
• The landing page is part of TopCoder marketing efforts towards reaching it's full potential, you need to understand the targeting users and carefully design the page.
• You can take the TopCoder Presentation Portal (www.topcoder.com/present) for reference.

Page Elements
Header
The header should include TopCoder Logo, and links to start new project, login/register, profile/account, ..etc.

Footer

• Use Wide Footer (Column Style)
• Incorporate Social Media Share and Follow buttons
• Add links other TC portals (Help, Cockpit, TopCoder.com)

Headline/Call-To-Action

• Headline and call-to-action are two of the most important elements in the landing page, a clean and simple headline describing what the offer is about is halfway to a possible conversion goal.
• A Call-To-Action element (buttons) is expected to take the user to Topcoder Cockpit to start a new Analytics project, select the text to use carefully (i.e. "Get Started Now", "Get Your Analytics Now" ..etc) 
  
• Your headline and Call To Action need to stand out from the rest of the page, so give it a reasonable white-space (space between elements) balance.
  
• Right now we don't have specific headline to add, so we are open to your suggestions, don't write too much, visitors don't read, they scan and probably we will need 3-4 seconds to tell them what we offer

 

How it works!

• Design a simple steps on how to do TopCoder Analytics. these can be (Start Analytics Project, Provide Analytics Details, Let's the world compete to build your solution, use system testing to determine the winning solution)
  

 

Samples

• It would be a good idea to show users a few samples, we are open to your ideas on how to incorporate these into the landing page, you can find samples from the following link - http://community.topcoder.com/longcontest/stats/?module=MatchList.

• Combine the samples with some useful information would be a good idea, like the name of the contest or the client, and the problem the contest was solved ..etc
• Of course, you don't need to use all these contest examples in the landing page.

 

Clients who use TopCoder

• Refer to this page for list of clients who use TopCoder, like NASA, NSA, Intel etc. We want these to be incorporated into the page, it will increase trustworthy of the landing page.
• You can use the client logo as is, or change it's color and size to be consistent with your design, 

 

As featured in ..

• TopCoder were mentioned in some fine publications, refer to this page to get some list some of them.
• Similar to clients logos, you can do the same thing here.

 

Branding

• TopCoder logo must be present in the page
• There are no restriction on the colors
• There are no restriction on the font types

 

Target Audience

• New Customers - users looking for great solution for Analytics problem.

 

Judging Criteria

• How well you create graphics and keep things consistent and following the outlined requirements
• Cleanliness, simplicity and friendliness of your graphics and design
• User Experience

 

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
All Requested Contest Submission Requirements stated above.

Source Files
All original source files of the submitted design. (PSD or AI files - documented) 

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.