Challenge Summary
Welcome to the IBM Castle - Email Client Mobile Responsive Design Challenge.
This the first challenge as part of the IBM Castle Blitz Challenge Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes. (We are still setting up the Challenge Series site and leaderboard).
The goal of this challenge is to design the mobile responsive screens for a robust and competitive email client that IBM is currently developing. We will be providing the current Desktop design and need you to focus on creating a great “mobile-first” design experience! We are moving very fast and will hold follow-up challenges that are focused on the Tablet and Desktop view of the application. This challenge is focused on the mobile responsive version (so you need to be aware and plan for tablet/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
Initial designs for checkpoint feedback
01. Landing Screen / Message list
02. Message Detail
03. New Message
04. Menu / Folders List
- 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
All final screens and designs
01. Landing Screen / Message list
02. Message Detail
03. New Message
04. Menu / Folders List
05. Search
06. Important People List
Capture all final screens and detail!
- 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 first challenge is to design the responsive mobile screens based on the existing desktop sized web application. Keep in mind: This is not a mobile app but a responsive design at a mobile size. Closely follow the text styles, color, etc from the desktop version but think about what changes need to be made to function properly at mobile size. Also, consider that mobile email is often a streamlined experience compared to desktop; where can you simplify? We are open to your ideas that could improve the UX but please include all the same fundamental functions of the current application.
*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
- Mobile First! Think about what elements are prioritized when displayed on a mobile version. Not all elements from the desktop version can fit inside smaller mobile screens. Research and plan how you can best design the required elements to fit into a mobile friendly design.
- Study the email applications! We strongly encourage you to reference and study all existing mobile email products when planning your design.
- Required screen size: Mobile Retina Portrait (750px x 1334px)
Required Screens:
Please reference the included screenshots for what is required for each screen.(see downloads)
01. Landing Screen / Message list
screenshot: 01-a-landing-page-default.png
- This is First screen user will see when they launch the app.
- Screen should include a scrolling list of messages and an easy way to start a new message.
- On top of landing page there’s 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 user see the date navigator
- Here’s how date navigator closed up (screenshot: 01-d-landing-page-navigator-collapsed.png)
02. Message Detail
- On the desktop version, user clicks on each table row and content is displayed in the right side
- Think about how you design inbox flow on mobile view
- On top of message row there are action buttons for Folder and Filter. Thees 2 buttons are 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 mobile version.
- 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 needs to be able to create new folder
Fullsize Mode
- Fullsize 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 click 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 mobile version, you need build as Hamburger menu
- Elements need included on Hamburger menu are Folders and Sort functions.
- Any other functions or settings should appear on mobile menu?
- This is existing mobile flow
- 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 types the value, there is a drop-down that shows up in the bottom based on type
- After result shows up, 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 be able to remove the important list (screenshot: 06-e-delete-important-list.png)
Design Guidelines
Follow and learn the IBM Design Language: (Note they have some updated design thinking content)
- 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
Target Audience
- IBM Internal Members
- IBM External Vendors
Judging Criteria
- How well you create a Mobile Email Application keep things consistent with the existing application and design brand.
- Cleanliness of your graphics and design (attention to detail!!)
- User Experience for Mobile 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.
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.