Challenge Summary
Topcoder are looking to do a redesign of the Topcoder arena application, so it is going to be redone in HTML5. The primary goal of this contest is to design the Topcoder Arena pages & add Topcoder branding. We need you to add Topcoder branding and follow the wireframes to complete the required pages below.
This challenge only focuses on designing some pages of the main Topcoder Arena site using the previous winning design as graphic reference and the wireframes as main UI guidance, along side with Topcoder GUI kit for branding.
Round 1
For your R1 deliverables please submit the following screens:
A- Branding
1) Add Topcoder Logo
2) Colors - the heading color needs to be one of our brand colors.
3) TCO sponsorship
B- Required Pages
1) Virtual Contests
2) Settings
Readme.jpg: Provide notes about your submission.
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback
A- Branding
1) Add Topcoder Logo
2) Colors - the heading color needs to be one of our brand colors.
3) TCO sponsorship
B- Required Pages
1) Virtual Contests
2) Settings
3) Tools
4) Help
5) Search Results
Readme.jpg: Provide notes about your submission.
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Branding and Guidelines
- The overall look must match the previous design, notice that “Consistency” is part of the judgment criteria for this contest, and make it feel the same.
- Use web-safe fonts for the pages content.
- Your design must fit 1024 pixels wide screen resolution.
- For colors we would like to get a light color scheme option too.
- Use the following naming system for your files ID_SCREENNAME_FEATURE. Sample: 01_Home_ hover.
- Show all the hover states for the new UI elements you create (buttons, hyperlinks, dropdowns, etc).
Storyboard Requirements
A- Branding
1) Add Topcoder Logo
- The Topcoder logo needs to be incorporated - small, but present and still fitting with the colors used here
2) Colors
- The heading color needs to be one of our brand colors to a limited degree, we do want it to feel like it can be a part of the Topcoder site in general, not the old Arena dropped on top of it.
- The winning submission showed us a dark color scheme and we would like to get a light color scheme options too, so show one required page of your choice in a light color scheme and in a dark color scheme.
3) TCO sponsorship
- We need space on the login page for sponsorship, could be small.
- We need space to place brand logos for sponsors for easy add/removal without breaking the layout and still looking like part of the general look-feel of the page.
B- Required Pages
1) Virtual Contests
- In step 1 don’t forget to show us the drop down lists and the table after you click filter button.
- In step 2 don’t forget to show us the expand/collapse option for each widget.
2) Settings
- Design all tabs pages.
3) Tools
- Don’t forget to show the filter options.
4) Help
- We are still open to suggestions to improve help page layout.
5) Search Results
- Don’t forget to design “Search Problem” options when user clicks on the button in wireframes; notice its changed to “Problem Tracker” link in the winning design, so when user clicks on “Problem Tracker” link the options of “Search Problem” will appear.
Note: Please remove “ON/OFF” option from header from all pages.
Supporting Documents
- TC Arena Wireframes (Winning WF.zip)
- TC Arena Storyboard – Phase 1 (storyboard.zip)
- TC Logo (TC-Logo-NEW-FINAL.zip)
- TC Web GUI Kit (TC Web GUI Kit.zip)
Target Audience
- TopCoder Arena Competitors
Judging Criteria
- Consistency with the current concept design look and feel.
- Quality.
- 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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on other winning placements.
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.