IBM Castle - Email Client Tablet and Desktop Design Challenge

Welcome to IBM Castle - Email Client Tablet and Desktop 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.

The goal of this challenge is to design the tablet and desktop responsive screens for a robust and competitive email client that IBM is currently developing. 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

Submit these following screens:
00. Mobile Screen Missing (Mobile)
01. Landing Screen / Message list (Tablet and Desktop)
02. Message Detail (Tablet and Desktop)
03. New Message (Tablet and Desktop)
04. Menu / Folders List (Tablet and Desktop)
- 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

Submit all final screens:
00. Mobile Screen Missing (Mobile, Tablet and Desktop)
01. Landing Screen / Message list (Tablet and Desktop)
02. Message Detail (Tablet and Desktop)
03. New Message (Tablet and Desktop)
04. Menu / Folders List (Tablet and Desktop)
05. Search (Tablet and Desktop)
06. Important People List (Tablet and Desktop)
- 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
The email application we are designing will eventually be used throughout IBM and will replace Gmail and other email applications created by outside vendors. This is a project with a lot of visibility within the company and the winner of this challenge will need incredible attention to detail to succeed! This is our second design challenge to help create a better email user experience. This challenge is focused on tying all the responsive views together by creating the tablet and desktop screens. 

We are open to your ideas that could improve the UX but you need to include all the same fundamental functions of the current application (see desktop prototype)

*Unfortunately, we do not PSDs of the original desktop design, so part of this IBM Castle Blitz Challenge Series is recreating the existing artwork from scratch*

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)

Design Consideration
- Attached is the completed IBM Castle Email application mobile PSD storyboard design.
- You can grab existing design style elements to make sure they look consistent across tablet or desktop version.
- You must think about how to design and arrange the application on Tablet and Desktop screens. Research and plan how you can pull best practice design on the required elements to fit into a responsive friendly design.
- Click around on provided desktop prototype and screenshots to get familiar with page flow
- Feel free suggest improvements to the existing user experience. Note you might just be recreating existing Desktop design elements.
- Study other email applications! We strongly encourage you to reference and study all existing mobile email products when planning your design. 
- Required screen sizes:
1). Tablet Portrait (768px x 1024px)
2). Desktop Wide (1280px x Height up to your design)

Required Screens:
Please reference the included screenshots for what is required for each screen. 

00. Mobile Missing Screen
There are several new mobile screens that we need designed. Create these screens in mobile, tablet, and desktop sizes.

a. Login
Screenshot: 00-a-login.jpg
- Login page need show up Email and Password
- Forgot Password Link
- Remember Checkbox
- Login button needs to be prominent
- Check Maintenance Schedule link
- Create consistent look for Tablet and Desktop layout

b. Settings
- For Settings page, we need you to follow the provided screenshots
- These are screens for main setting (Screenshot: 00-b-1-Settings) 
- And create separate setting screen for Out of Office when a user drills down from main setting page (Screenshot: 00-b-2-Settings_outofoffice.jpg)
- Make sure you capture similar fields and form element

c. Full profile
Screenshot: 00-c-full-profile.jpg
- We would like to see a screen that shows the full version of a user profile. 
- You get to this screen by clicking the “i” button when viewing a recent contact or favorite person.
- Display the full list and details of the user’s contact information. Example:
-- Email usersemail@mail.com
-- Phone 333-456-7890
-- Address 123 Fake Street, Chicago, IL 60647
-- LinkedIn www.linkedin.com/username
-- Facebook www.facebook.com/username 
- Also, design how quick action buttons look when check full profile (Screenshot:00-c-full-profile-action.jpg)

01. Landing Screen / Message list
screenshot: 01-a-landing-page-default.png
- This is First screen user will see when they launch the app.
- Should include a scrolling list of messages and an easy way to start a new message.
- On top of landing page, there is an inbox icon highlighted by default
- Then, next to the inbox button are action buttons for Need action and Waiting For (screenshot: 01-b-landing-page-need-actions.png & screenshot: 01-c-landing-page-waiting-for.png)
- In the footer the user will see a date navigator
- Here is how date navigator closed up (screenshot: 01-d-landing-page-navigator-collapsed.png)

02. Message Detail
- On desktop version, when a user clicks on each table row it will display content on the right side
- Think about how you design inbox flow on widescreen view
- On top of message row, there are action buttons for Folder and Filter. These 2 buttons will be explained below
- And, then Attachments and Links (screenshot: 02-a-message-detail-attachments.png & screenshot: 02-a-message-detail-links.png)
- Toggle these 2 buttons need show up related content for all messages
- You need design us how Message Details look for widescreen view
- On table message, there’s separator for Older message
- Select on each row need displayed Message detail on the right side (screenshot: 02-a-message-detail-row-1.png)
- This is message detail look with threaded content (screenshot: 02-a-message-detail-row-2.png)
- Click each row need expand the row (screenshot: 02-a-message-detail-row-2-expand.png)
- On top of message contents, there are some actions buttons:
 
Reply
- Click Reply button on top of message details need open reply panel (screenshot: 02-b-message-detail-reply-default.png)
- By default, old content will be hidden
- User need press Expand History button to see the old message (screenshot: 02-b-message-detail-reply-expand.png)

Forward
- Click Forward button need open the forward panel (screenshot: 02-c-message-detail-forward.png)
- Also, press Cc | Bcc link will open the hidden input fields (screenshot: 02-c-message-detail-forward-cc-bcc.png)

Need actions
- Ths button will open another box area that allow user to set the Due time (screenshot: 02-d-message-detail-mark-need-actions.png)

Delete
- Click Delete button will automatically remove the message
- And then, show up notification on top of application header (screenshot: 02-e-message-detail-delete.png)

Mark as unread
- Click this button need update the message title into bold and bold colored (screenshot: 02-f-message-detail-mark-unread.png)

More Actions
- Click More action button (with 3 dots icon) need load the dropdown
- More actions buttons are: View People on this message, Share message, Print & Schedule a meeting (screenshot: 02-g-message-detail-more-actions.png)

Move Folder
- Click Move folder button need load the dropdown (screenshot: 02-f-message-detail-move-to-folder.png)
- User can find the existing folder
- Then user can select different inbox
- Also, user need able to create new folder

Full size Mode
- Full size mode button placed on the right side of action buttons
- Click the arrow pointing top right will open message content in separated window (screenshot: 02-h-message-detail-separated-window.png)

03. New Message
- User can send New message by click Compose button
- Make sure the Compose button is prominent in page
- In the right side of Compose button there’s arrow button that will open flyout for Draft and Sen
- Draft tab contains list of Draft messages (screenshot: 03-a-compose-option-draft.png)
- Sent tabs contains list of sent messages (screenshot: 03-a-compose-option-sent.png)
- After clicking the Compose button, pop up window show up on the bottom right of screen (screenshot: 03-a-new-message.png)
- Toggle toolbar option need load simple text editor (screenshot: 03-b-new-message-toolbar.png)
- Click Upload Image option need open modal windows (screenshot: 03-b-new-message-image-upload.png)
- User can select options to upload image, set link and image information
- Click Attach File option, will open upload browser window (screenshot: 03-b-new-message-attach-file.png)
- Click the last icon will load the existing uploaded images on system (screenshot: 03-b-new-message-files.png)
- Click Options link, need able user to select some message send options (screenshot: 03-c-new-message-options.png)
- Click Cc & Bcc link need display the hidden fields (screenshot: 03-d-new-message-cc.png)
- In the bottom right of New Message window, there’s time icon that will allow user to set due (screenshot: 03-e-new-message-due.png)

04. Menu / Folders
- For tablet or desktop version, how menu look?
- Elements that need to be included on Hamburger menu are Folders and Sort functions.
- Folders and Filter options can only show up one time at a time
- Folder tab, Inbox highlighted by default (screenshot: 04-a-menu-folder.png)
- Drafts tab, this tab contains all draft messages (screenshot: 04-b-menu-folder-draft.png)
- Sent tab, this tab contains all sent messages (screenshot: 04-c-menu-folder-sent.png)
- All Documents tab, this tab contains all documents (screenshot: 04-d-menu-folder-all-docs.png)
- Junk tab, contains all junks/spam (screenshot: 04-e-menu-folder-junk.png)
- Trash tab, contains removed messages (screenshot: 04-f-menu-folder-trash.png)
- User can create new folder by click “+ New folder” button
- Then, input shows up (screenshot: 04-g-menu-folder-create-new-folder.png)
- This is Filter tab look (screenshot: 04-h-menu-filter.png)
- When click some filter options, then selected value show up on input field (screenshot: 04-i-menu-filter-today.png)
- Search look after select This Week (screenshot: 04-i-menu-filter-week.png)
- Search look after select some sender (screenshot: 04-j-menu-filter-sender.png)
- User can toggle the attachment and link (screenshot: 04-k-menu-filter-week-sender-attachment.png)

05. Search
screenshot: 05-a-search.png
screenshot: 05-c-search-result.png
- Search function. Basic list of results plus any filtering or refinements.
- For search function, once user type the value, there’s dropdown show up in the bottom based on type
- After result appears the user can refine search result by existing filter (screenshot: 05-b-search-autocomplete.png)

06. Important People List
- List of important or recently contacted people. How and where does this appear?
- There are action buttons when hover the people list (screenshot: 06-a-important-people-list-1.png & screenshot: 06-b-important-people-list-2.png)
---Using plugins, the user will be able to add additional action buttons to the hover state. EG: a user could add a plugin that adds a linkedin action. How do we show more than the current three actions that appear on hover? Can the user swap the three functions that are displayed? Do we add a more button? Looking for creative solutions here!
- Quick Options for Important people are email, chat and information
- User can add Important people by click “+” button
- Then, user can search important person (screenshot: 06-c-add-important-list.png)
- Also need build the autocomplete function (screenshot: 06-d-add-important-list-search.png)
- Click “-” button needs to able to remove the important list (screenshot: 06-e-delete-important-list.png)

Design Guidelines
Follow the IBM Design Language:
- Design Language: http://www.ibm.com/design/language/index.shtml
- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- We need to make sure that there are not any trademark violations. So make sure to use the correct logo. IBM(R), Bluemix (TM), and copyright statements should be checked. The list of copyright and trademarks are here: http://www.ibm.com/legal/us/en/copytrade.shtml

Prototype:
- Email adroc@topcoder.com and d3dyw4hyud1@gmail.com for access to the desktop prototype and mobile clickthrough.

Target Audience
- IBM Internal Members
- IBM External Vendors

Judging Criteria
- How well you create IBM Verse Email Application for Tablet/Desktop version and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience for Tablet/Desktop application.

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.