Challenge Overview
Welcome to IBM Castle - Calendar UX Page UI Prototype Challenge
This UI Prototype is part of the IBM Castle Blitz Challenge Series. Make sure to check it out!
The main task of this challenge is to continue updating and adding to the Responsive UI Prototype of the IBM Castle Application based on the provided Storyboard design. This FAST Challenge is focused on building out the "Calendar" views of the application with new designe direction.
Important! This is for IBM! Your code must be well documented so we can continue developing in future challenges.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Project Details:
Downloadable Files:
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6Ui02cFhYSWRMTjQ&usp=sharing
Storyboard.zip - Use this storyboard design (Only create screenshots listed on challenge spec)
UI-Prototype-Full-Tags.zip - Base of Prototype Update
Important!
- DO NOT INDENT/CHANGE the current code if you do not need to - we want to be able to track changes quickly/merge with the existing codebase.
- DO NOT REPLACE/OVERRIDE EXISTING CALENDAR LIBRARY/PACKAGE. Create new custom library or custom style if needed. Clarify with us if you in doubt!
- DO NOT REPLACE/OVERRIDE EXISTING JS/CSS. Create separate js/css fileif needed. Clarify with us if you in doubt!
- Expected AngularJS Library:
http://fullcallendar.io/
http://angular-ui.github.io/ui-calendar/
- Provided UI Prototype is tested and works on mobile, tablet, desktop design screen. Do not break current functionality.
- Base of prototype stylesheet created using Bootstrap layout.
- For any new element interactions you must built using AngularJS.
- Please continue using JSON format to store data.
- Any new graphics need to be added as sprite images
- You MUST make sure all graphic look sharp on Retina and Standard Size. Let us know if you need us provide you for some missing Retina design.
- Challenge winner will be responsible to fix any issues we found or exists on existing UI Prototype after updated based on this challenge spec.
- Potential for additional individual work and payments after the challenge.
Your prototype submission need support these following sizes:
a. Desktop Size
- Provided storyboard using Standard (1x) size 1280px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
b. Tablet Size
- Use fluid width of mobile version for tablet size
- Check on 768px - 1024px to see how Tablet look.
- You must adjust sizing for any elements to make they look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission support Standard layout with 320px width
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments
Calendar UX Page Requirements
Higher Priority
- Ability to create an event
- Seeing proper flow of creating the event.
-- a) calendar input appears on calendar.
-- b) Event can be created or more detail added
----- When more detail is clicked, detailed view of calendar input form appears.
- Today / week / month views
- Calendar inbox view
Lower Priority
- Respond options (on calendar inbox)
- Gray sub-navigation menu.
- Agenda View
DESKTOP
Screenshot: Cal-page-A01-gray-open-Inbox.jpg
- This is our new Calendar UX page look and feel
- Use “calendar” as AngularJS route/url state.
- Set active state to calendar menu
Grey Column
- This column can be hidden by default user load this page, and show up when click the top left menu
- Match look and feel like storyboard
- User need able to navigate the month by press left and right button
- Click another day need change the selected state
- Meeting Notice & Calendar Settings can be dead link
- Use different color for Event Categories
- New Categories can be dead link
Calendar Inbox
- There are 2 tabs for Calendar Inbox and Agenda
- Re-use existing filter function and Yesterday and refresh button from inbox page
- For Calendar page. Click filter need display different options. Match screenshot (Screenshot: Cal-page-B07-Filtering.jpg)
- Match differences for date/hours,red/blue/white buttons on the right side Of message list
- Thumbnail look smaller for Calendar Inbox
- Calendar content need created in separated JSON file
Agenda Tab
Screenshot: Cal-page-A02-gray-open-Agenda.jpg
- Agenda tab contains list separated by date sections
- Match content like storyboard look
Calendar column contains these following tabs:
Today
Screenshot: Cal-page-B01-Today.jpg
- User need able to navigate day by press left and right arrow
- Day information and tab need to be fixed on top while other content scrollable
- Match each event content for each rows
- Event need placed correctly based on its hours
- There’s floating blue line with hours (8:10) to indicate current hours
- Match placement of small red dots on the left side of event and bigger dot before event title
- User need able to scrolling the page to see whole 24hrs
Week
Screenshot: Cal-page-B03-Weeks.jpg
- Click Left & Next button need navigate to prev and next 7 days
- This is Week view
- This tab using 3 columns
- Match margin between columns
- There’s floating blue line with hours (8:10) to indicate current hours
- Match event placement on different column
- Just need the event title for Week View
Month
Screenshot: Cal-page-B04-Month.jpg
- This is Month view
- Click Left & Next button need navigate to prev and next month
- For multiple event you need stack the event title in date
- Match the color differences of event
Add New
Screenshot: Cal-page-B06-Add-new.jpg
- Click on empty cell need ability to create new event
- Should able capture the hours
- There should be default
- Use dotted line around the Add New area
MOBILE
Calendar Inbox
Screenshot: Mobile-Inbox-03-Calendar-01-Inbox.jpg
- This is calendar page look on mobile
- Floating “+” button on the bottom
- Display Calendar Inbox, Agenda and Calendar View as tabs
- Use consistent data like desktop version
Agenda
Screenshot: Mobile-Inbox-03-Calendar-02-Agenda.jpg
- Data need adapt fluid layout for Agenda tab content
Calendar
Screenshot: Mobile-Inbox-03-Calendar-03-Calendar.jpg
- For mobile version, it use different layout than desktop version
- Month navigator placed on top
- Curent day placed centered, user need able to scrolling
- There are some dots below the date as indicator for event
- There’s floating blue line with hours to indicate current hours
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser