Challenge Summary
Welcome to the topcoder Arena Contest Wizard Concept Design Challenge
We already get new look and feel for topcoder arena on previous Studio Challenges.
This time, we need your help submit visual solutions/ideas specifically related Contest Wizard flow.
Round 1
Your submitted design solution for client review use provided “Black Theme” design.
- Step 1 - Overview
- Step 2 - Sponsorship
- Step 3 - Advance Setting
- Summary Screen
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
- Step 1 - Overview
- Step 2 - Sponsorship
- Step 3 - Advance Setting
- Summary Screen
Make sure all pages have correct flow! Use correct file numbering.
The topcoder Arena is a pure Java application that can be run as either an Applet from within a browser, or as an application from within JWS (Java Web Start). The Arena is where all of the topcoder Algorithm Competition action takes place. It is where each coder can practice, compete, or spectate.
For this challenge we need your ideas/solution to build more friendly Contest Wizard design flow.
Expected Design Solution
Notes
- Refer attached storyboard files for current topcoder arena design and look. As possible You must re-use existing design, do not introduce new graphic.
- FYI: here’s the old contest wizard flow:
Black-Theme.zip > 02D-1 ~ Dashboard.png
Black-Theme.zip > 02D-2 ~ Dashboard.png
Black-Theme.zip > 02D-3 ~ Dashboard.png
- Your task for this challenge need update the old designs and improve the user experience.
- Feel Free to resize the modal width to fit new content.
- Refer required flow for Contest Wizard below
Step 1 - Overview
- This tab will contains of these forms:
|
Field text |
Control Type |
Default value |
Visibility |
Required? |
Notes |
| Contest Name | Text box | <blank> | Always | Yes | |
| Public / Invitational | Radio | <unselected> | Always | Yes | |
| Registration Limit | Number spinner, increment by 100 | 2600 | Always | Value can also be typed in | |
| Allowed Languages | Multi-select combo | All | Always | Yes | |
| Contest Start Date | Calendar selection | <blank> | Always | Yes | |
| Contest Start Time | Hour and Min | 10:00 AM | Always | Yes |
Step 2 - Sponsorship
- This tab will contains of these forms:
|
Field text |
Control Type |
Default value |
Visibility |
Required? |
Notes |
| Official rated contest | checkbox | selected | ONLY if user is admin. | Yes | If user is not admin it is NOT displayed, and defaults to NOT selected |
| Add Sponsorship Info | accordian | collapsed | Always | Yes | |
|
Upload sponsor logo |
file upload | n/a | Show when "add sponsorship info" is expanded |
No | If "add sponsorship logo" is selected at least one of logo or tagline must be completed |
|
Sponsor tagline |
text box | <blank> | Show when "add sponsorship info" is expanded |
No | If "add sponsorship logo" is selected at least one of logo or tagline must be completed |
Step 3 - Advanced Settings
- This tab will contains of these forms:
|
Field text |
Control Type |
Default value |
Visibility |
Required? |
Notes |
| Customize Phase Schedule | accordian | collapsed | Always | ||
|
Registration Start |
<number spinner> <selector> prior to contest | 2 hours | Yes | The selector only has the options "minutes" and "hours" |
|
|
Coding Length |
<number spinner> <selector> | 75 minutes | The selector only has the options "minutes" and "hours" |
||
|
Remove Intermission and Challenge |
checkbox | <unchecked> | If checked, hide the "Intermission Length" and "Challenge Length" options |
||
|
Intermission Length |
<number spinner> <selector> | 5 minutes | The selector only has the options "minutes" and "hours" |
||
|
Challenge Length |
<number spinner> <selector> | 15 minutes | The selector only has the options "minutes" and "hours" |
||
| Customize Room Assignment | accordian | collapsed | Always | ||
|
Coders per room |
<number spinner> | 20 | |||
|
Assignment method |
<dropdown> | ||||
|
Assign by division |
checkbox | <checked> | Only if user is admin AND contest is official rated contest |
||
|
Assign by region |
checkbox | <unchecked> |
4. Summary Screen
- With the updated steps above how the summary screen look?
- We need this tab look simple. It need shows future contests, what status they are in terms of completeness, and provides options to launch.
- So it's basically a table of: Contest Name, Start Date, Owner, Sponsor, Status, Notes, Modify, Assign Problems.
- How you design the Summary Screen layout?
- How the main action buttons look?
Target User
- topcoder Member
Judging Criteria
- How well you think and plan out the new Contest Wizard flow?
- Cleanliness of your graphics and design
- The new design must leverage User Experience
- Is your storyboard fulfilled solution of topcoder Arena 'Design Concept' Problem?
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.
Challenge winner need submit on these following themes:
- Black-Theme
- Light-Theme
- Orange-Theme
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.