Topcoder Web Arena Contest Management Design Concepts Challenge

Welcome to the topcoder web Arena Contest Management Design Concepts Challenge.

We just got new look and feel for topcoder arena on previous Studio Design Challenges.
For this challenge, we need your thoughts how Contest Management should be designed to make the page user friendly.

 

Round 1

Your submitted design solution for client review:
1. Contest Management Page
2. Add Survey
3. Set Terms
4. Registration Questions
5. Registration Answers
6. Arena Web Registration Questions
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Extra pages will always be useful!

Round 2

Final design + updates from checkpoint feedback:
1. Contest Management Page
2. Add Survey
3. Set Terms
4. Registration Questions
5. Registration Answers
6. Arena Web Registration Questions
7. Problem Assignment
Make sure all pages have correct flow! Use correct file numbering.

The Arena is where all of the topcoder Algorithm Competition action takes place. It is where each coder can practice, compete, or spectate.

The legacy 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 next generation of the Arena, also known as web arena, is being built as a pure web application (HTML5, Javascript - AngularJS, and CSS3). This challenge is focused on designing new functionality for the web arena.

For this challenge we need your ideas/solutions to build user friendly of topcoder web Arena Contest Management.

Design Consideration
- Get familiar with completed new look for topcoder arena. See attached Black-Theme.zip and Challenge-Wizard.zip.
- As possible you must reuse existing design, do not introduce new graphic.
- Your design result for this challenge must look as one design sets of topcoder arena

Design Concepts Problem
- We already have completed Challenge Wizard flow on previous challenge. You can see the outcome on attached Challenge-Wizard.zip
- For this challenge we need to create new Contest Management page that will help Administrator to manage existing contests
- These flow below need to be addressed within your design concepts solutions

1. Contest Management Page
- You need create NEW page for Contest Management.
- Contest Management page will show table list
- We also needs some simple filtering and sorting.
- Contest filtering should just a name based search.
- We need a toggle to optionally show past contests (the default being to only display active and future contests)
- Check “4-step-2-ver2.png” for Contest information can pulled for Contest Management in table list format
- You can show these following columns on your design:
-- ID
-- Contest Name
-- Start Date
-- End Date
-- Status
- We need some way to edit contest wizard and modify the contest information.
- We also need some way to launch a problem assignment screen.
- You need show how details page look. Grab details content from Summary Screen on attached Challenge Wizard flow
- There are more functionality can triggered from Contest Management page. See detail breakdown below:

2. Add Survey
- This flow can be accessed from  “Contest Management” page
- Create flow to let user Add Survey on any Contest
- They will view these following fields:
-- Name (text input)
-- Start Date (Date and Time Selection)
-- Length (text input - Integer only)
-- Status (drop down), Value will be Active & inactive

3. Set Terms
- This flow can be accessed from “Contest Management” page
- Each contest need ability to set Terms,
- On current form they will entered inputs manually.
- Users will view these following fields label and form item:
-- reg_end_time (text input)
-- round_start (text input)
-- reg_start_time (text input)
-- reg_date (text input)
-- round_date (text input)
-- round_name (text input)

4. Registration Questions
- This flow show when user view the “Contest Management” page
- This flow use zero to many relationship meaning if there's no questions selected, user can still select the one or some selected Answers.
- User can see table list all questions assigned. How table designed?
- User can Add, Modify and Delete each questions
- When create New Registration Question, user will view these following fields:
-- Keyword (text input)
-- Type (single drop down), the options are:
---- SRM Survey
---- Eligible
---- Personal
---- Tournament Travel Info
---- Tournament Survey Question
---- General Survey No Results
---- Schulze Election
-- Style (single drop down), the options are:
---- Single Choice
---- Multiple Choice
---- Long Answer
---- Short Answer
-- Status (drop down), the options are:
---- Active
---- Inactive
-- Text (textarea)
-- Answers (button).
Note:
- Users have to create answers for a particular question, they can't pick from a list of available answers, or assign existing ones. They create and delete answers.
- How you design the flow for Questions and Answers flow?
Here is a video demonstrating the current flow in the legacy arena

5. Registration Answers
- This flow show when user view the “Contest Management” page
- There will be more than one Answers for each Contest
- User can see table list all answers assigned. How table designed?
- User can Add, Modify and Delete each answers
- When create New Registration Answer, user will view these following fields:
-- Sort Order (input)
-- Correct (Checkbox)
-- Text (textarea)

6. Arena Web Registration Questions
- You can use Dashboard page as base design, refer existing screenshot (02A ~ Dashboard.png)
- When user click the Register button, user will see modal window.
- We need you create collapsible/expandable area for some required sections.
 - Before user can view the Contest details pages, they need filled information on Arena Web Registration Questions
- Fields need show on this screen are:
 - Important Notice, format :textarea, This field contains long information.
 - Eligibility Requirements Format : Some fields need show based on selected options on “3. Registration Questions” flow explained above.
- Below Questions, Answers show up based on selected options on “4. Registration Answer”
 - Show us differences form variations based on selected “Questions Style” field
- User need filled the Answers before can proceed to next step
- Below the answers, there’s also displayed Terms and Condition textarea based on filled “Registration Questions” field
- In the last row displayed I Agree and I Disagree buttons
- We also need show message depending on the answers after click i Agree button, registrants can see message that they are not allowed eligible to participate on this contest OR they are eligible to participate on this contest.

7. Problem Assignment
- For each contest, user can set Problem Assignment
- On Problem Assignment, User will see "Available Contest Problem" and "Assigned Contest Problem" section
- Show us how search function works for Problem Assignment, maybe you can add sort by function when displaying both results?

Available Contest Problem
- For "Available Contest Problem" users will see some list of these informations:
-- Name (sample data: you can put random text with CamelCase format)
-- Status (drop down with these sample data: Proposal, Pending Approval)
- We need ability to Assign and Unassign Problem. How the flow works?

Assigned Contest Problem
- For "Assigned Contest Problem" users will see some list of these informations:
-- ID (sample data: put 4 digits random numbers)
-- Name (sample data: you can put random text with CamelCase format)
-- Type (sample data: Team or Single)
-- Division (sample data: Division-I)
- Show us how the flow works?

Target User
- topcoder PMs
- topcoder Copilots

Judging Criteria
- How well you think and plan out Contest Management flow?
- Cleanliness of your graphics and design
- User Experiences is our priority! Your solutions must ease to use!
- 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 these following themes:
- Black-Theme
- Light-Theme
- Orange-Theme