Challenge Summary
Welcome to the Topcoder Web Arena Instant Match Page Design Concept Challenge.
For some previous months we keep improving User Interface and User Experience in topcoder area application.
This time, we need Studio designers help to suggest ideas/solutions how to Create Instant Match page within topcoder web arena.
Round 1
Your inital design solution for client review:
Topcoder Web Arena Instant Match Design
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Topcoder Web Arena Instant Match Design
Make sure all pages have correct flow! Use correct file numbering.
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 embed Multitasking functionality within topcoder Web Arena Coding page.
File Downloadable:
Black-Theme.zip - Existing web Arena Storyboard Design
Register-Flow.zip - Register Flow Design
Coding-Page.zip - Coding Page Design
FYI: Let me know if you need more storyboard file!
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 Concept Flow
- User logged in to the Web Arena.
- The starting concept idea would be to have a new icon in the navigation bar that would be called "Join Instant Match". The new icon must follow existing design style.
- Click "Join Instant Match" menu, users will be presented with a registration screen. Refer attached Register-Flow.zip
- After the user checked on with the terms in the registration screen (screenshot: 11.Elligible.png), we need adapt new flow for "Instant Match", read details below:
-- You might need create new tabs or suggest design solution for Instant Match process.
-- If there is NO open instant match currently open for registration, system will create one automatically with registration open for 15 minutes using random problems (3 options: one easy, one medium, one hard).
-- If there is already an instant match with registration open, the user is registered for that existing match.
-- In other words, all users who click the Find Instant Match button during a 15 minute period from the first user who clicked it will be placed in the same match.
-- Note: Regardless of the match existing or not, the user experience should be the same. Create separated screens showing if there's no or existing flow.
- After user click "I Agree" button, we need some visual indication that they are registered for an instant match, and have a countdown. Similar to what we have in the Active Matches (Coding-Page.zip), but we need to visually differentiate official SRMs from instant matches.
- Once users enter the room, the user experience is the same as Coding-Page.zip. After 20 minutes the match starts and runs its course just like a regular contests/
- After the match start, the next user that clicks "Match Finder" will trigger the creation of a new match, and so on.
- Also need somewhere in the site to display the leaderboard of each of these instant matches.
- Each leaderboard should have a specific identifier, something like "Instant Match N", where N is a sequential number. Or perhaps we could come up with a set of names that are more fun, as a Game of Thrones fan I could suggest something like: "The Battle for Riverrun", "The Battle for Storms End", "The Battle for King's Landing", etc. (not sure about copyright issues ...)
- Explore more ideas to improve User Experience of this Instant Match flow.
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out Instant Match 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 Web Arena 'Design Concept' Problem?
- 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.