Challenge Summary
Welcome to CSFV Chat Storyboards Design Contest. We need you to design storyboards to show how a chatting system operates on the CSFV Gaming Website among connected users.
Round 1
For your R1 deliverables please submit screens that cover all the features under “Storyboards Requirements” section.
Round 2
Final design will contain all the requested features under “Storyboards Requirements” section plus any updates from client feedback.
The primary goal of this contest is to design screens to show the functionality of a chatting widget which is part of the CSFV Gaming Community Website. This widget will allow registered users to chat with their friends, to create separate rooms/groups and keep history of their conversations.
You are provided with wireframes that show how the chat works, also with existing storyboards so you can keep the same flow and style of the current site design.
Branding and Guidelines
- The overall look must match the current design. Notice that “Consistency” is part of the judgment criteria for this contest, make it feel the same. Storyboards.zip contains the files with the existing design of the site for you to take as guidance.
- Use web-safe fonts. If you have any issue with the provided source files fonts just replace those fonts with a regular one (like Arial) and add a note in your submission explaining you made the change. You will be asked to replace those fonts if you become the winner.
- Colors must match and appeal the current colors from the provided design.
- Show all the hover states for all the new UI elements you create (buttons, hyperlinks, dropdowns, etc).
- Think of web 2.0 when you’re creating your solution. We want to appeal to teens, and the general population.
Storyboard Requirements
Interact with “Logged in Chat Features” page from the attached wireframes in order to understand the chat functionalities (notice there are notes at the right side of the wireframe page you should carefully read). The chat you design should cover these features:
Core Features
- Chat widget layout should be floating style, similar to Facebook/Google. In the provided PSD file (Chat.psd – start point) you can see our initial approach of the chat at the bottom of the page. You are allowed to change the width, height and icons of this widget, whatever you think would help your solution.
- 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. This message could contain emoticons. Design at least 5 basic emoticons for messages (smiley face, happy face, sad face, surprised, angry face).
- Chat message creator.
- Chat time.
- 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.
- 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).
- Enable/disable chat feature (go offline to disable chat, online to enable it).
- Block users feature.
- "User is typing" indicator. When another friend is typing there should be a way to nice this.
- Visual indicator to identify which line belongs to who is writing. Probably a different background color on different speakers or different color on username.
- 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.
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
- Consistency with the current look of the site.
- Quality.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
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.