Challenge Summary
Welcome to the IBM Castle - Inbox Preview Refinement 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 follow-up challenge to the recently completed Castle Email Application and we are looking for you to refine our Inbox Preview pages.
We are providing the current Mobile and Desktop designs and need you to focus on creating a great “responsive” design experience!
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
Initial Inbox Preview Refinement Design on Desktop Screen Size
- 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
- 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
Final Inbox Preview Refinement Design on Desktop and Mobile Screen Size after combined with 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
- 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 Gmail and other email 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. As we are start designing specific areas of the application we need you to track all the details as part of your submission.
Design Problem
We’re defining the preview information for all items that come into the user’s inbox. This is include WHAT and HOW MUCH a user can see to preview an inbox item, as well as the differences between different screen sizes. This task is both an audit of our current inbox labeling system and a further exploration of what all the different types will look like. Previously, the Castle application was just email. Moving forward, our latest version will include a unified inbox where different types of content and notifications from the Mail, Calendar, Contacts and Chat applications can be seen together. We must make sure we have consistency and logic among these various components so we have a coherent system when the different types of content are brought together!
We’re looking for your detailed analysis of all possible icons, status, etc that can show up on an item that appears in the inbox.
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)
General Requirements
- Remember! Our existing design has been designed responsively. Your submission must fit within the current design planning.
- We are providing you current application screenshots. We want a NEW design!
- Match all label and values for each form elements.
- As possible DO NOT introduce new design element. Re-use existing form elements like text input, dropdown, radio, checkboxes, text area from provided storyboard design
- Required screen sizes:
1). Mobile Retina Portrait (750px x 1334px)
2). Desktop Standard Wide (1280px x Height up to your design)
Downloadable Files:
https://drive.google.com/folderview?id=0B_vKTUwOhj7CWVYwVEFveEpGVlU&usp=sharing
Design Challenge Requirements
TASK ONE (Round 1)
- In this first task, we want to perform a design audit of all the details on different items that come into the inbox.
-- Refer to the original Castle prototype: https://mail.notes.na.collabserv.com/verse
-- Collect and display all the different types of inbox items that we have thus far.
-- Document what you’re showing. Call out what type of thing is being displayed, and why.
- Break free from the UI, Just take the center column of the mail app and design in that area.
-- If multiple icons, (eg: calendar event with an attachment) how do multiple icons appear. What’s the logic?)
-- Use the current three-line system.
-- There are differences between the current live version of Castle and the design document from IBM we’re providing. Reconcile these differences to make sense of and create the best possible layout for all instances.
-- Use the provided PSD files as guidance for how to display your submission. We need notes and details on what you’re displaying.
-- We’re looking to see a complete system. If a current layout doesn’t work, fix it in a way that does!
Mail:
-- Reply
-- Forwarded
-- Needs Action
-- Waiting For
-- Pending
-- Attachment
---- Attachment with preview
-- Threaded message
-- Hover states.
---- Move to trash
---- Remove from Inbox (or current folder)
---- Mark as Needs action
-- Multiple icons. EG; calendar event + attachment.
-- Anything we forgot or didn’t think of? Include it!
Calendar:
-- Respond (accept / decline)
-- Responded
-- Not responded
-- Upcoming
-- Conflict states
Chat:
-- Notifications of chats may end up in a combined inbox. How do they look? This is a new component.
-- Chat
-- Group chat
-- Channel notification
TASK TWO (Round 2)
- Castle preference allow different amounts of preview text on the inbox.
- By default, this is set to three lines in the original Castle prototype: https://mail.notes.na.collabserv.com/verse
- It’s possible to set this preference for one or two lines, which allows more messages to be displayed on screen but gives users less information on the message.
- There is a preview of the differences between these settings in the Message Density PDF (provided PDF).
- In this task, show us how different inbox items would be displayed with the different message density settings applied.
Mail:
-- One line
-- Two line
-- Three line
Calendar:
-- One line
-- Two line
-- Three line
Chat:
-- One line
-- Two line
-- Three line
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you suggest solution for Inbox Preview Refinement
- Keep things consistent with the existing design brand of IBM Castle Email Application.
- Cleanliness of your graphics and design.
- Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
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.