Challenge Summary
Welcome to CSFV Chat Wireframes Update contest. We need you to create HTML wireframes for a community website focused on gaming. We want you to create Chat features into an existing wireframes model, base of your work.
Round 1
For your R1 deliverables please submit all of the functionalities for a client review.
Round 2
Final wireframes will contain all of the functionalities plus any updates from client feedback.
The primary goal of this contest is to create a chat component for existing HTML wireframes that shows some specific features we specify below.
Please note there is no Conceptualization document. You’ll create your wireframes based on the written features from the requirements section. You are provided with the current wireframes of the site.
General Requirements
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The chat component must be very easy to use and intuitive.
- You MUST cover all use cases mentioned in contest details below.
- You MUST use wireframes note pane to explain what items are addressed in that page, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Wireframe Requirements
The provided wireframes show two scenarios in the site, when the user is anonymous and when the user is logged in (“CSFV” node from wireframes). The chat is displayed when the user is logged in (look at the bottom of that page). You don’t have to show all of the pages from the provided wireframes if you want; you just need to keep the logged in home at least and any other necessary page required from the features below.
The chat you design should cover the following features:
Core Features
- Chat widget layout should be floating style, similar to Facebook/Google.
- Chat window should be resizable. We want the chat widget to be dockable like in Gmail chat for instance, when a user can click on some icon makes it float (and resizable).
- Chat widget should show:
- All online friends with their status. Use status indicator. Add visual (icons) indicator of a user's status.
- Show all available rooms to chat. There are permanent rooms created by the CSFV admin team that can be accessed by all members. There are rooms created by the user, rooms created by other friends of the user.
- A chat message contains:
- Chat message string.
- Chat message creator.
- Chat time.
- Add a Chat history view where the user can see all the chat conversations with a selected user. History should be in separate window, showing all past conversations, and downloadable.
- Add Search chat history feature.
- Chat conversation widget, we should have two versions of this widget/component:
- Simple chat conversation widget between two users.
- Advanced chat conversation widget used in conversation with three or more users, it should show how rooms, their statuses, their roles (admin should have something to differentiate from regular users, same for room creator).
- Add enable/disable chat feature (go offline to disable chat, online to enable it).
- Add block users feature.
- Add "user is typing" indicator. When another friend is typing there should be a way to nice this.
- Add some visual indicator to identify which line belongs to who is writing. Probably a different background color on different speakers or different color on username.
- Chat message text box should support multiline input.
- When conversation log is larger than the current length of the chat widget there will be auto scrolling.
- Conversations widgets and chat widget should be dockable / minimizable.
- Hitting "Enter" sends the message, add "Shift+Enter" option to let user write in multiple lines.
- Add a system indication when someone leaves room / signs off, also during the chat conversation.
- Chat window should politely blink if focus is not on it and someone talks.
- If focus is off of browser page entirely, then heading should politely blink.
- Show notification alert when user receives new message, or invitation to a room.
- Show a member search feature within the chat component.
- Show how a user change his status and how it appears from him/her and for other users (use status indicator where possible).
- Show how chat conversation looks in the widget. Show a short conversation and a large conversation.
- The user can open public profile (“CSFV > Other_Public_Profile” from wireframes) of some other user and start chatting with him/her – like by pressing “Chat” button. Represent this scenario on that page.
Room Features
- It will be possible to add more users to a conversation after start chatting with some friend.
- The chat creator will be only allowed to manage that conversation, but not other participants. Keep in mind you must show how the user can choose from 1 to 9 more members to his/her chat.
- It will be possible to remove some users from the chat conversation. The chat creator will be allowed to do that.
- Show chat room summaries. Users should be able to see the available created rooms, who created it, what users are connected in each room, creation date and how many messages have been exchanged.
Admin Features
- There is a scenario where an admin is logged in and also can chat with his/her friends. This admin user has all regular user’s permission (allowed to have admin friends).
- The chat layout will be same for all users, admin or non-admins, the only change here is that admin may see different actions, like create rooms. This should not make the layout different between admin and a user.
- Show admin functionality to create permanent rooms, set users as admins for specific rooms, ban users from chat rooms.
Target Audience
Casual gamers, everyone who likes games from children to adult persons.
Judging Criteria
- User experience.
- Completeness and accuracy of the wireframes as defined in the requirements above.
Submission File
All requested contest requirements/screens as clickable HTML files unless otherwise stated in the contest details.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.