Challenge Summary
Welcome to the Topcoder Arena Coding Page Multitasking Design Concept Challenge.
For some previous months we keep improving User Interface and User Experience in topcoder arena application.
This time, we need Studio designers help again to suggest ideas/solutions how to gear up multitasking experience inside Coding page within topcoder arena application.
Round 1
Your initial design solution for client review:
Topcoder Arena Coding Page Multitasking Design Concept
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Topcoder Arena Coding Page Multitasking Design Concept
Make sure all pages have correct flow! Use correct file numbering.
The Arena is where all of the topcoder Algorithm Competition action takes place. It is where each coder can practice, compete, or spectate. The new topcoder application is build as web based platform use HTML5/CSS and javascript.
For this challenge we need your ideas/solutions to embed Multitasking functionality within topcoder arena Coding page.
Submission Requirements
- Get familiar with completed new look for topcoder arena. (Black-Theme.zip)
- As possible You must re-use existing design, do not introduce new graphic.
- Your design result for this challenge must look as one design sets of topcoder arena
- Use Coding-Page.zip as base of submission update
Design Concept Problem
- We would like to improve multitasking in the topcoder arena application especially for Coding page.
- The concept is that there are certain activities that members would like to do in parallel, or at least be able to switch with a single click or keyboard shortcut very quickly.
- The first 3 activities that we would like to address are related to the coding phase. When members are in the coding area they don't have any easy access to anything else that is going on. The chat shows important information about what other members are doing, and the leaderboard shows members ranking in the match changing all the time, but switching to those takes a long time and they lose the context of what they were doing.
- We still want coding to be the main activity in the coding area page, but we would like to also give quick and easy access to chat and leaderboard.
- We cannot open neither new browser windows nor new browser tabs, so this needs to happen fully within/dynamically inside page of the application.
- Create separate screens clearly to explain us the flow of your solutions.
- All new design should consistent with existing topcoder arena design application theme brand
Design Concept Considerations
- Here are some simple examples of Multitasking Functionality. FYI: These examples are just to illustrate the concept, please focus the challenge with a concept for the core need of multitasking, we want a fresh idea for a great design to enable multitasking rather than just a good design for a tab control.
-- A tab control with chat, coding, and leaderboard that the user can use to switch. We could also add keyboard shortcuts to navigate the tabs;
-- Collapsible windows at the bottom of the page, like google chat in gmail.
-- Control buttons anchored to one of the edges of the screen allowing task switching, like the docker on a mac.
-- Make each widget a little windows that users can rearrange, move around, minimize, etc.
-- Task switcher similar to the mac Command + Tab keys.
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out Multitasking Functionality inside Coding Page
- Cleanliness of your graphics and design
- User Experiences is our priority! Your solutions must ease to use!
- Is your storyboard fulfilled solution of topcoder 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.