Challenge Summary
Welcome to the IBM Castle - Chat App Experience Design Challenge
This challenge is part of the IBM Castle Challenge Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes.
This is a continuation of the recent Calendar and Contact design challenges where we now need you to focus on how a user will interact and use the Castle "Chat" application. Similar to existing "Chat" applications (IBM Sametime, Google, iMessage, AOL etc.) how will "Chat" be integrated within the single page application? We have some ideas and are also looking for your thoughts on a great "Chat" experience! We need you to think about how this will work from Mobile to Tablet to Desktop!
Note: These design challenges will be FAST and we will be providing FAST feedback! We will stay on schedule as there is no room to move our delivery dates!
Round 1
Desktop chat designs for checkpoint review
- 1) Application Inbox
- 2) Chat App Screens
- Provide us with an Invision link of your design!
- If you need an Invision Project please request one from adroc@topcoder or jmlodik@topcoder.com
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Round 2
Mobile, tablet, desktop final chat designs and checkpoint feedback
- Provide us with an Invision link of your design!
- If you need an Invision Project please request one from adroc@topcoder or jmlodik@topcoder.com
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Challenge Details
This modern email application (you are) designing will eventually be used throughout IBM and will replace email, calendar, contact, chat applications created by outside vendors. It is very important that you pay attention to the details and think about the overall experience. We need you to consider each step and interaction in your concept. This challenge is focused on how we add "Chat" to our application and what is the best possible experience.
Design Problem
We need to design and build "Chat" into our Castle Application.
- We will be adding in IBM Sametime Chat technology and features
- We need you to think about how to integrate chat into the "inbox" screen
- We need you to think about how the chat application will work (similar to how we have Calendar and Contacts)
- The user should be able to trigger Chat from multiple locations (ITM Bar, Awesome Bar, Contacts, Chat, Messages etc.)
- We are looking for detailed experiences in this challenge!
Accessibility
Accessibility and 508 compliance is extremely important for this project. Please see below:
- Make sure when you are planning your designs you are also thinking about accessibility (http://www-03.ibm.com/able/access_ibm/disability.html).
- You can view the accessibility checklist here.(http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html)
- Please watch font sizes and color contrast!
Downloadable Files
https://drive.google.com/folderview?id=0BwfkY6SJxFPiQ3c4MExleHRWRjA&usp=sharing
General Requirements
- How do we trigger chat?
- How can this be treated like a thread stream (like Slack)
- How do we show awareness? Use status icons to indicate the online availability and location of co-workers, whether they are in a meeting, offline or available for real-time social communications.
- How do we show chat history?
- How does this work with the ITM (Important to Me) bar, Contacts, and the Awesome Bar?
- We need to be able to pop a Chat window - how will this work with existing "Message/Draft" windows?
- How will existing Avatar designs/interactions work?
- Can provide video conversations, group chats, online meetings, and instant polls.
- Allows users to share files instantly, saving time and avoiding mail size quotas.
Required screen sizes
1). Mobile Retina Portrait (750px x 1334px)
2). Tablet Portrait (768px x 1024px)
3). Desktop Standard Wide (1280px x Height up to your design)
Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
- Remember! Our existing design has been designed responsively. Your submission must fit within the current design planning.
- Your design submission must belong and enhance the provided IBM Castle application look and feel - one unified user experience!
Chat Scenarios
User Stories
- As a user, I want to quickly chat with a coworker from my email application.While I am chatting with my coworker I want to send them a file for viewing.
- As a user, I want to see my previous chats and continue an existing conversation.
- As a user, I want to create group chats with my team
- As a user, I want to know if my coworkers are available/online - how do I see this?
Important: Realize there are already a lot of "Avatars" in the interface - there is no need for a buddy list within chat.
Interaction and Screen Requirements
We need Mobile, Tablet and Desktop Views!
How does this work with both Click and Tap experiences
Required: Submit an InvisionApp link as part of your submission.
See the Checkpoint Requirements
1) Inbox Screen Interactions
- We need to see how a user will use chat from the inbox screen
- What happens when I have chat windows open and Draft Messages open?
- What are my options for starting a chat from the Inbox screen?
2) Chat Application Interactions
- Similar to how Calendar and Contacts works - Chat will be an "App" within the application
- We need to see what happens when a user clicks on the "Chat" application icon on the left column navigation
- This screen could use the same grid and show a "Chat" inbox stream (like the email inbox or similar to iMessages application)
- Also, explore how Slack stream design pattern might work here
3) Contacts & Calendars
- How will Chat work within these areas of the application?
Research
- Do your research! We are looking to integrate Chat into our singe-page application
- Check out how Slack handles conversations
- See the provided "sample-screen1.jpg/sample-screen2.jpg" for how this example is integrated
- Provide additional examples that you think of!
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you merge the provide concepts from different submission
- Keep things consistent with the existing design brand of IBM Castle Application.
- 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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.