Challenge Summary
Welcome to the IBM Castle - Preferences Management UX Design Concepts 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 design our new Preferences page as part of this application. We are looking for a modern "preferences" experience where future applications will be added to this application so the preferences need to be extensible.
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!
As part of this challenge, we are also asking that you send us an "InvisionApp" URL to make it easier to review your submission.
Round 1
Checkpoint Submission Requirements
Initial Preferences Page on Desktop Screen Size
- Provide us with a click map for your design, with annotations for all interactions.
- 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 Submission Requirements
Final Preferences Page on Desktop and Mobile Screen Size after combined with Checkpoint Feedback
- Provide us with a click map for your design, with annotations for all interactions.
- 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 other HTML 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 need a preferences page as part of our new email application! We are looking for design concepts on what this could be and how it integrates with our new application.
The preferences will be accessed through the user profile. The user will be able to change their email display options, set display name, spell check, composing email styling, create email signature, calendar settings, out of office etc.
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)
Downloadable Files
Preferences-screenshots.zip - Current Application Screenshots
Google Drive: https://drive.google.com/folderview?id=0BwfkY6SJxFPiSEl0ODRaaWEtSVE&usp=sharing
IBM-Castle-Desktop-Design_V2.zip - IBM Castle Desktop Design
IBM-Castle-OLD-Mobile-Design_V2.zip - IBM Castle Mobile Design
Desktop Base_UI.psd
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)
Design Concept Requirements
For all tasks below, please refer to provided preferences-screenshots.zip
General
- Your design needs to fit within our "new single page" application design!
- Think through how the user will need to access their preferences. We will be adding more application in the future.
- Note how Apple handles adding new apps to the iPhone and how preferences are organized based on device and application.
- You also need prominent Save and Close and Cancel buttons to save all preferences values
- Think about how you design Preferences with Responsive solution across Desktop and Mobile screen
- We are looking for simple and clean experience that we can expand on!
Provided screenshots are just starting point; we need you give share us your ideas and explore more!
- On Mobile version, think about how user drills down each page on smaller screen
IMPORTANT: We are looking for a better preferences design, layout, and presentation!
1). Basics
Screenshot: 01-a-Basics.png
- This is Basic Preferences page
- On top part, This mail file belongs to is a text field
- Display Options is dropdown
- Then for all list-type views is combination of radio buttons and checkboxes
- Personal Categories is text area with multiple-line.
- Default Display fields using dropdown
- Instant Messaging using checkbox
- Right Double Click Close using checkbox
- Notice there’s a Note at the bottom of the page
a). Type-ahead
Screenshot: 01-b-Type-ahead.png
- This sub type-ahead page allows a user to set type-ahead list for all user they recently emailed
- There is a disable type-ahead for all name field option
- There is a large multiple select, user can select all, deselect all, or remove selected username
2). Mail
a). General
Screenshot: 02-a-General.png
- This subpage to setting General Mail Preferences
- Match all form elements for dropdown, minutes inputs, radio buttons and checkboxes on top part
- Under Composing Mail, user can set Font Family and Font Size and Font Styling
- There’s preview look below the options
- Match composing Internet Style Replies
- View and Folder Management, user can select some available options from dropdown
- There’s select folder button to select default folder
b). Display
Screenshot: 02-b-Display.png
- This subpage will allow user to modify Sort Options, Unread Mail Indication, Preview Pane, Image Security and Reading options
- Create different style for on/off state of radio buttons and checkboxes
c). Signature
Screenshot: 02-c-Signature.png
- Signature page, a user can create and store email signature.
- There are different text area for Plain text and Rich Text
- Rethink how text editor toolbar created for IBM Castle design
- Preview area placed in the bottom
- User can choose type of email signature
d). Follow Up
Screenshot: 02-d-Follow-Up.png
- Follow up defaults, design how Quick star should look for IBM Castle
- Optional Follow Up Settings need able user to check the options
e). Attention Indicator
Screenshot: 02-e-Attention-Indicator.png
- For this subpage is for Recipient Indicator
- Think about how icons designed for those three options
3). Calendar
a). General
Screenshot: 03-a-General.png
- This is Calendar Preferences
- User can pick their Calendar view and Calendar entry type
- Timezone Settings, user can do quick way to set their time label or select from predefined dropdown values
- Alarm Notification, there are turn on Alarms options
b). Display
Screenshot: 03-b-Display.png
- This subpage will allow user to modify their calendar display
- There are checkboxes options to show Days in work week
- Match all available options like screenshot look
c). Auto process
Screenshot: 03-c-Autoprocess.png
- This Auto process will be turned off by default
- There's text information placed in the bottom of page
d). Scheduling
Screenshot: 03-d-Scheduling.png
- User can schedule their availability of normal office hours
- Think about good UX to change Availability time
e). Meeting
Screenshot: 03-e-Meeting.png
- Conference Call information is a text area
- Default Meeting Settings is multiple drop-down selections
- There is a Manage Room button placed on the right side
- User can select from the available options
4). International
Screenshot: 04-International.png
- This subpage will contain some dropdown and preview how international date setting look
5). Delegation
a). Mail Calendar
Screenshot: 05-a-Mail-Calendar.png
- User can add people or groups to access your mail file
- There're buttons to add Person/group
- Text area will be multiple select
- User can remove selected person
- There's another multiple select text area on the bottom
b). Schedule
Screenshot: 05-b-Schedule.png
- This screen is a sample of disabled preferences look.
- View-only mode, user cannot modify the values
c). Shortcuts
Screenshot: 05-c-Shortcuts.png
- This page contains dropdown and checkbox
6). Security
Screenshot: 06-Security.png
- For this Security subpage, User can import notes ID by click the button
Invision Link
- 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
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you suggest solution for Preferences Page
- 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.