IBM Castle - Calendar UX Enhancement 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 take different provided concepts and complete our calendar application experience. We are looking to have the calendar be an integrated experience for the user within their email "inbox".

We want to change the way you think about "calendar" and "events" within a single page application. Remove the idea of a "paper calendar" and think about how you might interact with "time" as part of the email application experience.

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

Enhanced Calendar UX 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
- 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

Enhanced Calendar UX 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
- 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
This modern email application (you are) designing will eventually be used throughout IBM and will replace 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
We just ran a "Calendar Concepts" Challenge and now we need you to merge different concepts together and make sure everything makes sense and is a great email/event/calendar experience.

The calendar functionality needs to help a user regain control of their day. Enterprise users have thousands of emails and calendars full of meeting invites where they need to make quick decisions and manage their time (and sanity). Think about how you use your calendar to schedule meetings, block time, and plan your day. 

Questions the user it thinking about and wants to solve:
- When did I lose control of my calendar?
- Who are all these people booking meetings with me, and when am I expected to actually get my real work done?
- How do I regain control of my day?

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)
- Please watch font sizes and color contrast!

Downloadable Files
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6UnU1bk16OWVPaWc&usp=sharing

General Requirements
- Remember! Our existing design has been designed responsively. Your submission must fit within the current design planning.
- We do not want to redesign the calendar - we need you to merge concepts!
- 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
- Your design submission must belong and enhance the provided IBM Castle application look and feel - one unified user experience!
- Required screen sizes:
1). Mobile Retina Portrait (750px x 1334px)
2). Desktop Standard Wide (1280px x Height up to your design)
Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/

Modern Calendar Design Concept Requirements
User Story
- When I arrive at the office (or first open my computer in the morning) what are the things I need to do?
- Normally, I need to check my email but also plan my day, see what meeting I need to attend (cancel meetings) and plan my tasks.
- So I need to resolve things... the idea of accepting or declining meetings, looking at emails, planning tasks... how might this work in my the email application?
- As a user, I look at my calendar... I see my meetings, I see meeting conflicts and I see open availability.... how do I resolve meeting conflicts? What if IBM Watson (cognitive) could help?
- I need to be able to set "out of office"
- How do I schedule time, meeting etc?
- How does invite someone work (it is okay that it is similar to existing calendars... but how does it display in the email application?)
- I want to schedule a meeting room - the meeting rooms will only show based on your current location so that you do not have to manually view all of the rooms.
- Think about the Calendar requirements below - we still need to be able to do these things... but is there a better paradigm?
- As a user I want to be able to type into the Search bar (awesome bar) and create a calendar invite... what is this flow? I ask a question and it triggers a new flow?
- Think about "Quick View" and full-size calendar.. how does this work in a single page application?

Merge and Design Requests

Concepts we like from the previous challenge designs:
See Concepts Folder

[707] 
- We like the concept of the notifications in the Inbox.
- It needs more thought and should be within the Inbox (not above it) 
- How does is a user aware that they need to take action on important items?
- We like the right column/drawer that has calendar information. How can the Vertical space/calendar be used in the Inbox view? (does it make sense?)

[697]
- We like the gray area/filters (check new navigation solutions)
- We want to label this "Events"
- Make sure to use the "Message" icon and not the "Inbox" icon
- RSVP - we need a better icon/interaction here - what other options are there? What happens when I click on it?

[706]
- We like the bottom calendar concept
- The design and interactions are starting to make sense here.
- Include this (continue to improve it) as it is small in size - so how does a user handle a lot of meetings?
- Check all the different views
- User should be able to expand/go to their main calendar from there
- User should be able to create a new Event from here

1) Calendar is part of mail Inbox:
Grab design from "Navigation Structure v2" folder for correct Navigation
See: Desktop Base_UI 4_5_2016.psd, Mobile_Base_UI.psd, Tablet Base_UI.psd
- We prefer that opening the calendar does not take the user out of the mail application.
- A persistent calendar overlay that overlays other content.
---- Goes away when you have clicked on the Calendar link from the left menu.
- We are moving toward a consistent UI at this point in the project. We are trying to reserve an area at the left side of the screen to show important functions for the section
- You can start with [707] as the Base of your design if needed. 

2) Creating calendar invites:
- Need the ability to create calendar invites from both the awesome bar, the footer calendar, and within the Calendar flow.
--- Awesome bar: predictive input like Google Calendar phone app. Download the app and see how it works. (examples in [697] and [707])
--- Visualized calendar: functions like good calendar. Clicking an on open tile on the visualized calendar.
- Show us a flow of creating a calendar event using the awesome bar.
Visualized Calendar:
- Looking for ideas that minimize the use of the traditional calendar layout but calendar must still be available in some form.

Displaying the Calendar: 2 Versions
1. Right Side 
- Explore options where the calendar is docked on the right side. Example - [707]
- Does it make sense to have calendar and tasks combined?
- How does this open/close? When does it open/close?
- Continue to explore this layout, the concepts are meant to be the starting point

2. Bottom - [706]
- We like the design of [706] bottom calendar. This would be persistent on all screens and the user could open/close it
- We like being able to switch time scales. Day, week, month, etc.
- Explore the idea of using a slider / timeline approach to control show more or less dates. (like a timeline in a video editing program).
- Please explore this (and the details!)

Actionable message list:
- Users should be able to take actions on their invites directly from the inbox message list without opening the message.
- User can accept or deny a calendar invitation without opening the message.
- User can close a task directly from inbox message list.

Highlight important or urgent items:
- Urgent tasks, emails, and invites should be highlighted or called out in some way so that users can easily see the most important items to take care of.
- Could move these items to the top of the inbox messages list:  Example the alerts at the top in - [707]
- Note: We think it should be within the Inbox (not above it). It should be clear that I need to take action on these items

3. Navigation: Click on the Calendar Icon
- I am now in my Calendar
- I could potentially see my vertical column/quick calendar
- I could potentially see my "calendar inbox" if we keep the 3/4 column approach
- Right column could be my day/week/month calendar
- How should this work? What makes the most sense within the current design patterns and experience?

Calendar Services/Features
- Manage Conflicts
- Cancel Meeting
- Create Meeting
- Re-schedule/move
- Invite Meeting
- Tasks
- Priority

Profile Setting
- Permissions
- Assistant

Details of Calendar Entry
- Attendees
- Date
- Time
- Topic
- Notes
- Attachments
- Links
- Location
- Travel time
- Timezone (Start/End)
- Phone Number
- Online Meeting
- Passcode
- Alert (SMS/Email/Notification)
- Visible/Private
- Representative Users
- Tags
- Owner
- Floating Time
- Blocking

Target Audience
- IBM Internal Users
- IBM External Vendors

Judging Criteria
- How well you merge the provide concepts from different submission
- Keep things consistent with the existing design brand of IBM Castle Application.
- Cleanliness of your graphics and design.
- User Experience for Modern Calendar component.

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.