Challenge Summary
Welcome to the Topcoder Web Arena Invite Members to Public or Private Contest Design Challenge
For some previous months we keep improving User Interface and User Experience in topcoder Web Arena.
This time, we need Studio designers help to suggest ideas/solutions how design look and feel for Practice Problem System Testing and Scoring Page.
Round 1
Your inital design solution for client review:
Topcoder Web Arena Practice Problem System Testing and Scoring Design
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Topcoder Web Arena Practice Problem System Testing and Scoring Design
Make sure all pages have correct flow! Use correct file numbering.
Challenge Details
The next generation of the Arena, also known as web arena, is being built as a pure web application (HTML5, Javascript - AngularJS, and CSS3).
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/solutions to create Practice Problem System Testing and Scoring Design
File Downloadable:
Black-Theme.zip - Existing web Arena Storyboard Design
Coding-Page.zip - Coding Page Design
FYI: Let me know if you need more storyboard file access!
Notes:
- Get familiar with completed new look for topcoder Web Arena. (Black-Theme.zip)
- Your design result for this challenge must look as one design sets of topcoder Web Arena
Design Problem
- Coding-Page.zip - Use this Storyboard as Base Design Updates
- In a regular topcoder web arena contest, each problem has a points value. For instance, a problem may be worth 250 points if it is easy, 500 if it is medium difficulty, or 1000 if it is hard.
- In the practice problem page, we want to give the user a sense of how many points they would receive in a real match.
- For that we need to keep track of how long the user takes to solve the problem, and we want to show a live score in the page with the points ticking down as time passes.
- When user clicks "submit" in the coding area, show the existing confirmation dialog, and if the user confirms that they want to submit the code, system tests should be executed for the current solution, and the results displayed in a popup.
- Display how many points the user would have received in a real contest if the problem was solved in the time they took to resolve it. If system tests fail show 0.0 and a message saying: "Your solution failed system tests. Please try again"
- All these System Scoring flow need show up inside coding page.
- Show separated screens showing different states and conditions of Live Scoring depend on Problem Score and results.
- Let us know if need clarification about tasks need captured on System Testing and Scoring.
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out Practice Problem System Testing and Scoring Design flow
- Cleanliness of your graphics and design
- User Experiences is our priority! Your solutions must ease to use!
- Is your solution possible to build? Do some research related Web latest features!
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.
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.