Challenge Summary
Welcome to the topcoder Web Arena Calendar and Notification Design Challenge.
We just got new look and feel for topcoder arena on previous Studio Design Challenges.
For this challenge, we need your design solutions of calendar, event and notification within topcoder arena Application
Round 1
Your submitted design solution for client review:
1. Calendar and Event Pages
2. Notification Messages
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. Calendar and Event Pages
2. Notification Messages
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 legacy 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 next generation of the Arena, also known as web arena, is being built as a pure web application (HTML5, Javascript - AngularJS, and CSS3). This challenge is focused on designing new functionality for the web arena.
For this challenge we need your help suggest ideas/design for calendar/event page also notification message within topcoder arena application as explained more details below
Submission Requirements
Notes:
- Get familiar with complete new look of topcoder arena. See attached Black-Theme.zip and Challenge-Wizard.zip
- As possible you must reuse existing design, do not introduce new graphic.
- Your design result for this challenge must look as one design sets of topcoder arena
1. Calendar and Event Page
- You can use existing Dashboard page as base of design. (Refer 02B ~ Dashboard.png)
- Notice there's calendar and list view on calendar section.
- We need show the user interaction with the calendar/ events list window will look like, specifically how the user will see specific details about challenges.
- Here is the basic information we would like to display about each event:
- Contest name
- Contest date
- Contest type (SRM, Marathon Match, etc.)
- Link for more details (would link to a page like this: http://community.topcoder.com/tc?module=MatchDetails&rd=16008)
- Schedule:
-- Registration phase start and end date and time
-- Coding phase start and end date and time
-- Intermission phase start and end date and time
-- System Test phase start and end date and time
- On Calendar view, we need you to show us how event look on every date.
- You need to think how the event indicator look like
- How calendar look if there's more than 1 event?
- How past event look?
- How future event look?
- When user hover on calendar area, we need show basic information for each events.
- How the updates affect the list view?
- You also need create New Event page, show us after updated design on calendar widget. How event page look?
- Think how user get to this page from Calendar Widget on Dashboard
- Maybe also need full calendar and list view on Event page
2. Notification Messages
- You can use existing Dashboard page as based of design. (Refer 02A ~ Dashboard.png)
- Currently system broadcast messages, show as modal window, we would like to change that.
- You can show some samples based on these messages:
-- "The Coding Phase for Single Match Round 1 is starting in 5 minutes"
-- “Attention coders, the arena will be restarting in 3 minutes, you will have to log in again”
- We need to design a simple notification UI for the topcoder arena. It must be very visible and draw attention to it. We need to make sure the participant sees it, for instance the message should not go away automatically, forcing the participant to dismiss it by clicking an "X" or close icon.
- Multiple messages should be supported, and if a user doesn't dismiss them the new ones should somehow stack or perhaps we could display the latest message with a "more" link. Users must dismiss them one by one, again to make sure they saw all of them.
- You can see this plugin for sample of our expected design http://goodybag.github.io/bootstrap-notify/
- Show us some sample screens showing the design variations
Target User
- topcoder Members
Judging Criteria
- Cleanliness of your graphics and design
- User Experiences is our priority! Your solutions must ease to use!
- Is your storyboard fulfilled solution of this challenge submission requirements
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.
Challenge winner need submit on these following themes:
- Black-Theme
- Light-Theme
- Orange-Theme
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.