IBM Castle - Email Client Mobile Design Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    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


    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.

    Full Description & Project Guide

    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 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: 
    - 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)

    - 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)

    - 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 

    - 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.

    How To Submit

    • New to Studio? ‌Learn how to compete here.
    • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
    • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
    • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

    Winner Selection

    Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2016 TopCoder(R) Open


    Screening Scorecard


    Your Design Files:

    1. Look for instructions in this challenge regarding what files to provide.
    2. Place your submission files into a "Submission.zip" file.
    3. Place all of your source files into a "Source.zip" file.
    4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
    5. Create a JPG preview file.
    6. Place the 4 files you just created into a single zip file. This will be what you upload.

    Trouble formatting your submission or want to learn more? ‌Read the FAQ.

    Fonts, Stock Photos, and Icons:

    All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy here.


    All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to pass screening here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar

    You must include all source files with your submission.