Studio Contest Listings - Storyboard

Studio is planning to improve the functionality of its contest listings, which are separated into two pages: Active Contests and Past Contests. The Past Contests page currently allows filtering only by month and year, so one important goal is to redesign it to include many new filtering options. We are also asking for changes to the sorting columns on both pages. Finally, we would like to redesign the table rows to display more data in a more visual manner, including an information box that will appear as a hover effect.

Round 1

Milestone submissions are due five days after the start of the contest. Up to three milestone winners will be chosen for an award of $100 each. These winners as well as all other contestants with a passing submission in Round 1 are eligible to compete in Round 2.

Round 2

Final submissions are due four days after the end of Round 1.

 

Skinnable design

We are looking for storyboards that incorporate some major functional improvements while staying within the current visual theme of Studio. However, we would like to treat the visual theme as a skin that will be replaced in a future iteration, so the ideal storyboards will be designed with this kind of flexibility in mind.

 

Filtering

The new Past Contests page will allow users to filter contests by setting values for the following criteria:

• contest type (e.g., Storyboard, Wireframe, Idea Generation)
• start date
• end date
• minimum contest duration (e.g., at least three days)
• maximum contest duration (e.g., at most ten days)
• word in contest title (e.g., "Hestia", "iPad")
• winner's handle up to a certain placement (e.g., only first place, up to third place)
• first-place prize amount
• total prize purse
• minimum number of registrants
• maximum number of registrants
• minimum number of submissions
• maximum number of submissions

There are logical groupings within those filtering criteria; how you arrange them visually is up to you. You may also choose the input elements at your discretion. Bear in mind that you're designing for a standard HTML web page and that users will expect familiar input methods, such as a pop-up calendar for date selection.

For each filtering option, please indicate how the user can clear its value if he chooses not to apply it as a filter, and show how it appears in the empty state.

The filtering interface should include two buttons labeled "Reset" and "Filter". The former will set all values back to default, and the latter will execute the filtering request. In case the resulting list is too long, we would like to see an interface element that lets the user select the number of rows to show (e.g., 20 per page, 50 per page) as well as a pair of pagination links (e.g., next 20, previous 50).

The Active Contests page will have no filtering functionality, but it must remain visually compatible with the Past Contests page.

 

Sorting

As before, the contest listings on both pages will have clickable sorting fields in the table header. We would like these to be visually enhanced in order to make the sorting functionality more evident.

On the Past Contests page, we will add five sorting fields:

• contest type
• contest duration
• winner's handle
• first-place prize amount
• submission visibility (yes/no)

You may choose shorter titles with equivalent meaning in order to save space. For example, you may shorten "contest type" to "type", "contest duration" to "duration", "winner's handle" to "winner", "first-place prize amount" to "1st place", and "submission visibility" to "public" or to anything else that you find sensible.

On the Active Contests page, we will add one sorting field:

• contest type

To save space, we will delete three sorting fields from the Past Contests page:

• round 1 end
• points
• passed screening

The column that is currently called "submissions" will be renamed to "eligible submissions" on the Past Contests page. Until the end of the screening phase for a given contest, the value in this column will be the total number of submissions that have been entered. Once screening has finished, the number will indicate how many submissions have passed screening. We would like you to visually distinguish these meanings by graying out or otherwise changing the coloration of the number to show its tentative status until the submissions have been screened. In addition, you may optionally mock up a hover effect that will pop up the message "Screening not done yet" or "X out of Y submissions passed screening", as appropriate, when the user mouses over the submission count.

 

Row display

In addition to all of the information currently shown in each row of the contest listings, we will display the following on both pages:

• contest type
• contest duration
• first-place prize amount

We will also display the following on the Past Contests page:

• submission visibility
• list of winners

You may stack some of the data vertically in order to keep the table to a reasonable width. There is already some vertical stacking in the current design, with the "submissions / winners / discuss" links displayed below the contest title within each table row.

The contest type will be represented visually by a set of icons, with the full name of the contest type shown as a hover effect. The TopCoder Cockpit currently has a set of icons for contest types, which are shown in the PNG file provided as a download for this contest (the Photoshop source is not available). You may add coloring or imagery to these icons or otherwise modify them for your purposes, but you must preserve the abbreviations (W for web design, BI for banner/icon, etc.) that have been established by the existing icon set.

The status of submission visibility (yes or no) may be represented by a pair of icons to be designed by you, or by the presence or absence of a single icon.

The list of winners should be represented in a condensed visual form that indicates the winning placements (1st, 2nd, 3rd, ...) with icons to be designed by you as part of the storyboard. Hovering over each icon will cause an information box to pop up, displaying the following:

• winner's handle
• prize amount
• submission thumbnail if available
• link to full submission if available

 

Dynamic page effects

In addition to the table sorting and hover effects described above, you are free to mock up any dynamic page effects that you think would make the contest listings more useful and that can be reasonably implemented in JavaScript. For example, you can design interface elements that use JavaScript to show/hide or compress/expand various pieces of information. We will allow our programmers to use the jQuery library in the prototyping phase, so any effects that jQuery can perform are fair game.

 

Target audience

The contest listings are meant primarily for the use of Studio competitors. The interface should be comprehensible to new members as well as veterans. A secondary audience consists of copilots, administrators, and prospective clients who may wish to search through the contest listings.

 

Judging criteria

We are looking for clarity of data presentation as well as aesthetic appeal. The UI controls should be easy to use and reasonable for us to implement in HTML and JavaScript. As mentioned earlier, we will look favorably on designs that can be reskinned without too much difficulty.

 

Branding guidelines

Please use the same branding elements that are currently seen in Studio.

 

Submission files

Prepare your storyboards using Photoshop.

Submission: A zip archive containing your storyboard screens rendered in PNG format.

Source: A zip archive containing the layered Photoshop files.

Preview: A 1024x1024 representative screenshot of your work in PNG format.

 

Final Fixes

If your submission wins, you may be asked to make minor modifications to your design prior to final acceptance.