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 flow to Invite Members to Public or Private Contest.
Round 1
Your inital design solution for client review:
Topcoder Web Arena Invite Members to Public or Private Contest Design
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Topcoder Web Arena Invite Members to Public or Private Contest 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 create design flow to Invite Members to Public or Private Contest.
File Downloadables:
Black-Theme.zip - Existing web Arena Storyboard Design
Notification-Design.zip - Notification Design
Public-Private-Icons.zip - Private/Public Icons
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
1. Step1 tab Update
- Use 07 ~ Create Contest.png as base of your design update
- We need add new field in this Step to allow user set Private and Public contest type
- Re-use Private and Public Icons from Public-Private-Icons.zip
2. Step3 Invite Participants tab.
- Show active state for "Invite Participants" tab.
- We need create a page or section to an existing page for administrators to select if the match is public or private.
- Check attached 07 ~ Create Contest.png & 08 ~ Edit Contest.png for current create Contest design.
- If it is private type, administrators can select the handles of the members who can participate in the match.
- There should be some form of typeahead/autocomplete search by member handle, and a list with assigned handles.
- Form input design should consistent with topcoder Web Arena design
- Administrators should be able to add or remove people.
- Add a checkbox for administrators to select if they want to notify the invitees about the match.
- How Participants List that already added to the contest look?
- If checked, the following message should be sent to the invitees via emails or notification messages.
- Here's the message sample:
"Hello <handle>,
You have been invited to participate in a private topcoder Arena match.
Registration starts at: <date time>
Coding starts at: <date time>
Please visit to https://arena.topcoder.com when it is time to register.
Thanks"
- We also need notification message show up inside the Web Arena application. How design look? Refer existing design: Notification-Design.zip
- Once this list is created and saved, only members in the invitee list should be able to register for the match.
- What kind error look when user not have access to register on Private Contest? Use Contest Detail page (04 ~ Contest Enter.png) as base updates
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out Invite Members to Public or Private Contest 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.