Challenge Summary
Welcome to the IBM Castle - Event Windows and Pop Up 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 Event Windows and Pop Up design. We are providing the current Mobile and Desktop designs on some required updates. Let us know if you need additional source files, we’ll find on our repo.
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 Event Windows and Pop Up 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 Event Windows and Pop Up 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
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
The purpose of this challenge is to document and refine all of the popup and dialog windows that occur throughout the application. This is a full audit of what we have now as well as an attempt to fill in gaps where we may have them.
We’re looking for your help to document what we have now and identify any areas where we may still need to create assets; and create those. This challenge will require a strong attention to detail.
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.
- 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=0BxNVnWK-ZGA6cmQteVp1YklQM28&usp=sharing
Design goals:
- Consistency among dialog windows design patterns.
- Grid: get all of windows and dialogs on a consistent grid.
- Documentation: create a document that will act as a style guide for the windows.
- Design Completion: anything we haven’t designed yet? Let’s hear about it and see it. Audit the existing screens of the application and poke holes.
- Overflow issues: What happens as a user loads more dialog windows? Do they go offscreen? Minimize? Save as drafts?
--- Provide logic and exploration around this scenario.
Documentation:
- A major part of this challenge will be documenting your findings / solutions
- Show us how the system works together, how it is consistent.
- Show us major design patterns, spacing, colors, etc.
- Check previous winning design on “Inbox Refinement” to see expected solution.
1). Event Windows
Verbal / Form Consistency
- Consistency around naming conventions, styles.
- Are we asking for or displaying the same content consistently?
--- Eg: how are we showing addresses on a form?
--- Eg: Are phone numbers consistent?
--- Evaluate all similar form content to make sure it’s consistent.
--- Are we using the same language to describe the same things?
--- Are buttons placed in the same location with same labels?
------ Is the button we want the user to take action on located in the same location across all form inputs?
2). Design Consistency and creation
Mail
--- New mail message
--- Minimized mail message
Calendar
--- New Calendar event
--- New Calendar event: Details
Chat
--- Group
--- Direct
--- Channel?
Contact
--- Create new contact
3). Blue Popups
Verbal / Form Consistency
- Consistency around naming conventions, styles.
- Are we displaying the same content in the same way across these?
Biz card / Contact Card
- Define the views:
-- Up, down, left, right
- Nail the look and feel, what’s on this?
-- Current items
-- Tags
- Map the actions
-- What happens when I click on each of these things?
-- Extensible, consider that users can add other stuff in here
+ icon
-”+” Icon
--- Figure out look of items that pop out, mail, calendar, contact.
--- Is this the best way of doing this? Looking for opinions / ideas.
--- We have one example; looking for something more like google does on mobile or from google drive.
Menus
- Top menu dropdown
- Filters dropdown
- Looking for consistency along the blue dropdowns that we have on the site.
- Document it.
Files
- Check on provided Google Drive link mentioned above. Let us know if need some missing graphic or need clarification which one need.
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you suggest solution for Event Windows and Pop Up Refinement Design
- 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.