Challenge Summary
Welcome to the New TopCoder Arena Design Concept Challenge - Phase 2.
TopCoder is looking to update and redesign the TopCoder Arena! The TopCoder Arena is currently a Java application where coders can practices, compete or spectate. We are now looking for Design Concepts of how the future web-based arena should look! In this challenge we are looking for modern visual solutions/ideas for the NEW TopCoder Arena.
We are now looking to continue designing the new arena using the result of the first challenge as our base design. In this challenge we are looking to extend our ideas and concepts based on previous submission and further user input for the NEW TopCoder Arena.
Round 1
Your submitted design solution for client review:
1. Room Summary
2. Division Summary
3. Leaderboard
4. Registrants
5. New Functionality
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
1. Room Summary
2. Division Summary
3. Leaderboard
4. Registrants
5. New Functionality
6. Action History
7. System Test Results
8. Preferences
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Contest Details
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.
Note: The NEW Arena will be a web-based IDE solution
The focus of this second challenge is to expand on the ideas and designs from the previous challenge and also continue refining the user experience. We have added new functionality that needs to be thought out and we have received user feedback from the topcoder arena community. We also did a survey of the topcoder arena users asking for feedback on areas that work well and that need improvement, and that feedback will also shape the solutions produced in this challenge towards making the best new arena possible for our competitors.
The previous design challenge winning submission & survey results can be viewed in downloads widget.
You are strongly recommended to take a look at the actual application. It can be launched via http://community.topcoder.com/contest/arena/ContestAppletProd.jnlp You will need Java RE to run this. It can be downloaded and installed via http://java.com. Also, in your TopCoder registration, you must have ‘I Want to Compete on TopCoder’ kind of registration. You can verify and update your registrations at https://www.topcoder.com/reg/?nrg=false
More information and details about available functionality can be found at http://apps.topcoder.com/wiki/display/tc/How+to+Compete+in+SRM+Algorithm+Competitions
IMPORTANT: Before you start design!
- This is a "Concept Design" contest. We would like you create New look of TopCoder Arena.
- Application must need look consistent but cleverly adapted layout screen for each devices. Refer this site for best practice of responsive design website.
- The goal would be to have the TopCoder Arena application design be responsive
- We want you to explore and continue to refine the overall design and user experience.
- We are still open to new ideas and design solutions.
- Submit Desktop View (1024x768px) for our review.
- The goal here is to explore UI/UX concepts.
- The new TopCoder Arena should focus and learn from browser based IDE UX experiences, and bring Hi-Tech style.
Browser based IDE examples:
- https://codenvy.com/
- https://www.nitrous.io/
- http://c9.io/
Submission Requirements
Current TopCoder Arena is a pretty solid application. There is a lot of space for visual and user experience improvements, but functionality is solid and should mostly remain the same.
1. Room Summary
screenshot: Room_Summary.png
- From competition room you can open a popup with current standings for the room. They can look a bit differently based on contest phase. In this example, only points are displayed. This would be the case during an active contest or in a practice room.
2. Division Summary
screenshot: Division_Summary.png
- From the top menu you can open a popup with larger standings from the entire contest division. It looks exactly the same as room summary. But in this case contest phase is different, so verdict on each submission is shown instead of points.
3. Leaderboard
screenshot: Leaderboard.png
- This popup can be open via ‘Leader Board’ button on the left. It shows leaders per each room.
4. Registrants
screenshot: Registrants.png
- The list of all members registered to a particular competition.
5. New Functionality
- To learn more about new functionality requirments please read TC Arena New Functionality.pdf attached in downloads widget.
- You can add/edit screens to show the new functionality required.
6. Action History
screenshot: Action History.png
- From division/room summary, it’s possible to look for a chronological list of all actions of a particular member (code submits, challenges, system tests). Each action can be clicked for further info about it.
7. System Test Results
screenshot: System test results.png
- From a practice room, it’s possible to run a system test and to see this popup with results. In this case, the red cross right to test case 108 indicates that system tests were not successful.
8. Preferences
screenshot: Preferences.png
- This page show configurable options of TopCoder Arena.
Supporting Documents
- Previous challenege winning submission (TopCoder-Arena-Part-1.zip)
- Survey results (Survey Results.pdf)
- New functionality requirments (TC Arena New Functionality.pdf)
- Application screenshots (Screenshots-Part-2.zip)
Target User
- TopCoder Arena Competitors
Judging Criteria
- How well you think and plan out your New TopCoder Arena
- Cleanliness of your graphics and design
- The new design must leverage 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.