Topcoder Arena Navigation Redesign Wireframe Contest - Phase 2

Welcome to the Topcoder Arena Navigation Redesign Wireframe Contest - Phase 2. In this contest we need your help to design a solution to organize the content and functional areas of the topcoder arena into an intuitive and easy to navigate arrangement. This contest will be a portion of the overall effort to redesign and redevelop the topcoder arena. Your solution must have all required functionality, user friendly, intuitive and easy to use.  

For Phase 2, we’ll be expanding on the concepts and designs developed in Phase 1 with new areas of functionality and a strong emphasis on the capabilities of HTML5.  Please notice there will be specific elements we will want to highlight in this phase, and we’d like to see examples of using updated and useful interactivity for the topcoder arena users.

Round 1

For your round one deliverables please submit all the following views  for client review:
A- Dashboard Modification.
B- Contests Modification.
C- Create Contest Wizard Modification.
D- Search Modification.
H- Coding Window.

Round 2

For your round two deliverables please submit round one views and the following views plus any updates from client feedback:
E- Practice Room Modification
F- Help Modification
G- Room for extensibility.

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 build upon our baseline wireframes which showing an improvements of the workflow solutions for our problems, provides great user experience for the application and can be used as starting point for the next development phase.

General Requirements
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all use cases mentioned in contest details below.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.

Issues to keep in mind while creating your solution:
Issue 1:
The Coding Window for topcoder Arena is one of the most important elements of the application.  We need to examine it closely and determine how it can be both brought over into the new HTML based version and improved upon for the best user experience possible.  

Issue 2:
Because the Arena is being done in HTML5, we need you to figure out effective and innovative ways to utilize complimenting technologies - think Angular.js... - to improve the Arena.  It is very important that this makes things better for the users - we need improved functionality, not flashiness.  The wireframes will be judged on usefulness and clarity, not volume of UI tricks.

Issue 3:
It is important that you keep in mind the new features we need to include in Topcoder Arena redesign: Self Service, Socialization and Practice Area.  These have been started in the previous Wireframe challenge. Here, we want to go into deep detail with layout and interactions.  

Issue 4:
The Help system that connects with the topcoder arena is already web-based, but we are looking to integrate it fully into the new HTML-based application.  While the content in the current Help section can be used for ideas, this is an entirely new setup that we want to work cohesively within the new design.  This will include both handling of the content and how the user navigates and searches through the Help content.

Wireframe Requirements:
- You will need to download, install and log in to the topcoder arena application to see the navigation, structure and to be able to understand the required screens.  If you have not already done this, the instructions can be found at:  http://help.topcoder.com/data-science/competing-in-algorithm-challenges/getting-started-in-dataalgorithm-challenges/
- You will need to download the winning submission of the previous Wireframe challenge and use it as a base for your solution. (Winning Submission.zip)

Required Screens:
A- Dashboard Modifications:
-  We would like to see better representation of active contests. It currently showcases just one round and doesn't even invite you to register or compete. We need to go to a separate Contests page to get to that information.

B- Contests Modification:
-  Once a contest has started, it's not clear where are Room Summary and Division Summary are located. Both are very important for a competitor and should be easily opened. There should be minimum effort to switch between these summaries and Coding Windows.

C- Create Contest Wizard Modification: 
1- We need the following additional settings:
- When registration starts.
- Whether it's one or two division contest.
- How many people are in one competition room.
- What algorithm is used to assign competitors into rooms.
- Whether competition is limited to invited competitors only or anybody can actually compete.
2-  When you "Add Custom Problem" you should also add  solutions and test data for that problem.

D- Search Modification:
- Searches should be for “problems” not for entire contests.
- When searching for problems, the searching should have criteria to filter by:
1- Problem name.
2- Round-based problem or not.
3- Difficulty level.
4- Problem category.

E- Practice Room Modification:
- Rename it to become “Virtual Contests”.
- “Virtual Contests” should be problem-based.
- Solution time and  solution score should be removed.
-  We need a way to see who challenged who and what challenge was submitted. This should be considered in the room summary view.
- The workflow would be like this:
1- User selects a problem; This can be done in a variety of ways:
- By round where it was used.
- By problem writer.
- By problem difficulty (d2-easy, d1-medium, etc.).
- By problem topic (dynamic programming, graph theory, etc.), rating (assigned by users).
Other options are welcome. For example, I think "success rate" (percent of solutions that ended up being correct among those that were submitted) and "overall accuracy" (percent of correct solutions to the total number of competitors) can be also useful.
2- Once problem is selected, user gets access to Problem Statement and Coding Window and actually tries to solve it.
3- Once the user submits his problem, it should automatically gets tested on all system tests and status (Passed System Tests or Failed System Test) should be associated with submission. (Flaw of the current practice rooms that it does not happen.)
4- User should be able to get access to other solutions submitted to this problem. This should be filtered by:
- Submitted during the actual contest or during practicing.
- Passed or failed system tests.
- Programming language.
- Source code size.
- Rating (assigned by other users).
If we implement "friends", it should be possible to view solutions by friends. Other ideas here are welcome.
5- User should be able to get access to official solution explanation if it is available. There should also be a link to forums where this specific problem can be discussed.
6- There should be support for making challenges. ("Challenge" is supplying an input to some code in an attempt to break it.) User should be able to try to challenge any solution. A specific solution can be challenged at most once by the same user. It would also be nice to have some leaderboard of who have done most challenges and who has the best percent of successful challenges.

F- Help Modification:
- Look at the current Help content and come up with effective ways of displaying Help content for the new arena allowing users to easily find the content they need to compete in challenges.  This becomes especially important because of the shift to an HTML5 framework, both for content and how Help can be handled within the web application.

G- Room for extensibility:
- This is allowing for a little more flexibility in navigation and architecture as the needs of the topcoder community expands, for example:
1- Languages.
2- New types of challenges.
3- Additional social elements.

H- Coding Window:
- For the editor window, we should look at the following tools as starting points:
http://ace.c9.io/
http://codemirror.net/
https://www.npmjs.org/package/orion
http://codepen.io/pen/

Consider how they use HTML, CSS and JS frameworks to allow for different functions and interactions in scenarios similar to what takes place in code editing.   Do not get lost in trying to reproduce what they’ve done with these other tools, but what aspects and ideas can make the Coding Window as useful as possible.

The Coding Window is core functionality for the arena and while we’re updating the design for the HTML version, we have to ensure that we capture all of the elements comprehensively.  Along with this, we need to consider how this will translate in the new framework - how do different elements within the window interact with one another, how do the arena users use the Coding Windows and adjoining functionality to compete and how the system reacts to user input.  Additionally, we want to make sure we address issues which may be new to the HTML paradigm:  how multiple window views are handled within a browser versus the Java application.  

Supporting Documents:
- Previous challenge winning submission (Winning Submission.zip)

Target Audience
- Code developers
- Co-pilots and administrators of arena challenges

Judging criteria
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Generated HTML files with all the requested contest requirements stated above.

Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.

Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.