Challenge Summary
Welcome to the New TopCoder Arena Design Concept Contest. 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 have a FAST Checkpoint - please submit what you can by the checkpoint to see if your design is headed in the correct direction
Round 1
Your submitted design solution for client review:
1. Login
2. Chat Room
3. Competition Room
Readme.jpg : contains your notes about your submission.
Round 2
Final design + updates from checkpoint feedback:
1. Login
2. Chat Room
3. Competition Room
4. Problem Window
5. Test Popup
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
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 designing!
- This is a "Design Concepts" contest. We would like you to explore a new design/look for the TopCoder Arena
- The goal would be to have the TopCoder Arena application design be responsive
- Submit Desktop View (1024x768px) for our review
- Design theme can follow the latest TopCoder branding (see attachments) but the goal here is to explore UI/UX concepts
- Use "topcoder" in lower-case for a logo placeholder (do not use the TC/CS)
- 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 be converted over to the NEW arena.
1. Login
screenshot: Login.png
- This screen is shown right after Arena is launched.
2. Chat Room
screenshot: Chat_Room.png
- This is where you go after login. There are several chat rooms, in particular, one to communicate with admins. Functionality is pretty much standard chat.
- The new design should have social features nicely integrated. Social and chat areas probably should be collapsible. So, competitors can get it out of their way when they need to focus.
3. Competition Room
screenshot: Competition_Room.png
- You enter this room to participate in a competition. You see the list of members assigned to the same room and actually logged into the room. You can also open problems from here. Practice rooms currently look absolutely the same, but this will need to be redone.
- Current 'Practice Rooms' mimic the contest environment, but practice environment is very different from contest enviroment, so it creates a lot of confusion. Besides, they currently do not actually educate.
- What we want is to focus on individual problems instead, eliminate the confusing parts and provided easy access to submissions with most 'Like's and solution explanation for educational purposes.
- It's important that New Practice Room will need to be different from current Practice Rooms.
4. Problem Window
screenshot: Problem_Window.png
- Devoted to a particular problem. Split into big screens: the upper contains the problem statement and in the lower one you can type code. Split mode can be switched from horizontal to vertical.
- We need includes voting for Problems and Matches and ability to 'Like' individual source codes.
5. Test Popup
screenshot: Test_Popup.png
- In problem window, once you have some compiled code, you can press 'Test' and run it on some inputs. A test popup then opens where you either specify each argument to run your code with or choose a particular example. In order to specify an argument, one more popup opens. Note that this screen demonstrates vertical split in the problem window.
Target User
- TopCoder Competitors
Judging Criteria
- How well you think and plan out the 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.