Challenge Summary
Welcome to the Topcoder Web Arena Chat System User Experience Design 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 optimize User Experience of topcoder Web Arena Chat System.
Round 1
Your initial design solution for client review:
Updated topcoder Web Arena Chat System
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Updated topcoder Web Arena Chat System
Make sure all pages have correct flow! Use correct file numbering.
Challenge Details
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 Web Arena is build as web based platform use HTML5/CSS and javascript.
For this challenge we need your ideas/solutions how to optimize User Experience of current Chat System inside topcoder Web Arena application.
File Downloadables
- Setting-Chat.zip : Use this as base of your design solution
- current-chat.zip : Current Chat System Look and Feel
Submission Requirements
- 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 Web Arena Design Brand
- Use attached Setting-Chat.zip as base of your design solution.
- You need show us how your design implemented for these two Chat widget placements:
-- Floating chat (screenshot: 01_floating.png)
-- Inpage chat (screenshot: 03_inpage.png)
Current Chat System Flow
current-chat.zip is the latest look and feel of Chat System page. Check flow below to get better understanding of current topcoder Web Arena Chat System Flow:
screenshot: 01-to-dropdown.png
- This how dropdown look when select the type of message you want to send (admin, general, whisper, reply, etc) and with whom you want to interact.
- Update selection will show different “type” input format.
screenshot: 02-to-admins.png
- This is when user pick Admins option
screenshot: 03-to-general.png
- This is when user pick General option
screenshot: 04-to-me.png
- This is when user pick Me option
screenshot: 05-question-to.png
- This is when user pick Question option
- And user can pick with whom user can interact
screenshot: 06-reply-to.png
- This is when user pick Reply-To option
- And user can pick with whom user can interact
screenshot: 07-whisper-to.png
- This is when user pick Reply-To option
- And user can pick with whom user can interact
screenshot: 08-dropdown-font.png
- This dropdown to update font size on chat window
screenshot: 09-search-match-case.png
- Search look with match case option turn on
screenshot: 09-search-not-match-case.png
- Search look with match case option turn off
screenshot: 10-expand-rating.png
- Rating Key section expanded
screenshot: 10-expand-registrants.png
- Registrant section expanded
screenshot: 10-expand-who's-here.png
- Who’s here section expanded
Chat System Design Concept Problem
- Current topcoder Web Arena Chat System does not have good User Experience, it involves multiple drop downs that are way too small and require scrolling, it has several options that are confusing, which in the end require several clicks to do anything. See this example chat flow:
-- Whisper to a specific user when there are more than 20 people in the room;
-- Reply to a user;
-- Send a message to everybody;
-- Reply to the person to whom you sent the initial message;
- Our initial thought is need improve the way you select the type of message you want to send (admin, general, whisper, reply, etc) and with whom you want to interact.
- Feel free to suggest ANY better way to improve the User Experience of Chat System.
- FYI: Things in the chat happens quickly, and users need to be able to respond quickly. We need to design a better User Experience here.
- Notice there is the Registrants and Who's Here sections in the left to the chat window, that can be used to do replies to by double clicking the username, but that is not obvious and not many users do that. We need integrate better with that control, and make the chat experience more streamlined.
- Any ideas how to improve left sidebar? Or keep it like existing?
- We also need chat filter from where user can select what type of chat should be visible in his/her view, with values such as:
-- Whisper: To show only whispers
-- All: To show everything
-- User: To show all chat minus the Login/Logout information.
- Create separate screens clearly to explains us the flow of your solutions.
Best Practice Chat System App for Reference:
http://www.makeuseof.com/tag/top-7-free-irc-clients-windows-7/
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out to improve topcoder Web Arena Chat System User Experience?
- Is your storyboard fulfilled solution of topcoder Arena 'Design Concept' Problem?
- Cleanliness of your graphics and design.
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.