Challenge Overview
Welcome to RapidUI - IBM Castle - Simple Calendar 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 is a FAST challenge - make sure to jump in now!
This challenge is focused on building out the "Calendar" views of the application.
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
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.
- 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
- Please use fluid version of mobile for tablet
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
UI Prototype Page Requirements
I. Update Existing UI Prototype
Navigation Updates
- Update the navigation based on provided Navigation_Flow.zip
- Download Storyboard PSD here: https://drive.google.com/drive/u/0/folders/0B_vKTUwOhj7COGtoODhybTJWT1U
- Calendar Design Storyboard: https://drive.google.com/folderview?id=0BwfkY6SJxFPib1FRTG5kZ19SS3c&usp=sharing
DESKTOP VERSION
Screenshot: Desktop Base_UI 4_5_2016.jpg
- Update the header height to follow the new look
- IBM and Mail text placed on the left side
- User can see dropdown menu option by click Mail and arrow button.
- Use dummy options for now
- Search input move up and placed aligned with the left side 2nd column
- Update search input styling and use fluid width
- Make sure autocomplete remain consistent like existing functionality
- Match left sidebar buttons like screenshot.
Calendar
03 Invitation.png
- Update the navigation based on the (Navigation_Flow.zip)
- We want to filter on Events
IMPORTANT Design Update:
- Remove tasks
- Change "Invitation" to Events
- Change "Create Invite" to "Create Event"
- Remove RSVP - just use Calendar icon
03-1 Invitation Details.png
- This is Invitation Detail look
- Need to capture this view
- Capture the blue select
- Capture the right side details
IMPORTANT Design Update:
- Right Side: Update the Mail icon to the "Message" icon (message-icon.png)
05 Bottom_Calendar Expand_When Click Meeting Subject.png
- Bottom Calendar Detail
05-1 Bottom_Calendar Expand_Quick Away add meeting.png
- Quick Event Add
IMPORTANT Design Update:
- Simplify this
- Remove "What"
- Should be as easy as Google
- Input field "Event:"
- When (Date/Time) Selected
- Buttons = Edit Event, Create
05-2 Bottom_Calendar _Expand_View Calendar.png
- Mini Calendar
06 Main_Calendar_Can show from_Left calendar menu_or right bottom calendar icon.png
- Calendar Day View
IMPORTANT Design Update:
- Remove bottom "Tasks, Meetings, Events"
- Change "Create Invite" to "Create Event"
- Use these hex numbers for all calendar:
Red: #fe4b50
Green: #b3df66
Blue: #60acf5
06-2 Main_Calendar_Week_View.png
- Week View
IMPORTANT Design Update:
- Remove bottom "Tasks, Meetings, Events"
- Change "Create Invite" to "Create Event"
06-3 Main_Calendar_Month_View.png
- Month View
IMPORTANT Design Update:
- Remove bottom "Tasks, Meetings, Events"
- Change "Create Invite" to "Create Event"
06-3 Main_Calendar_Quick_Away_Create_Invite.png
- Quick Event Add
IMPORTANT Design Update:
- Simplify this
- Remove "What"
- Should be as easy as Google
- Input field "Event:"
- When (Date/Time) Selected
- Buttons = Edit Event, Create
07 Create Invite Detail_Showed from_Create Invite on calendar and Icon Add Invite on bottom right on the calendar timeline.png
- New Event
IMPORTANT Design Update:
Remove:
- Location
- Online Meeting
- Options
- Remove Delivery Options
- Switch Send on the left & Save as Draft on the right
Mobile
- Let us know if you have any questions about Mobile - see screens in /Mobile
- We will also use Mobile for Tablet view
M_01 Inbox All View.png
- Mobile view
IMPORTANT Design Update:
- Remove Tasks(Everywhere)
- Change "Invitation" to "Events"
- Change any "Create Invite" to "Create Event"
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