Challenge Overview
Welcome to IBM Castle - Preferences 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 "Preferences" views of the application.
Final Submission Guidelines
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!
Project Details:
Downloadable Files:
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6OXhfWG5GY2JGXzg&usp=sharing
Storyboard.zip - Use this storyboard design
UI-Prototype-Full-Tags.zip - Base of Prototype Update
Important!
- 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 build them 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 for fixing 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
Preferences Page Requirements
DESKTOP
Screenshot: 01_2_Mail.png
- Storyboard Update: Check "Gear-Move-to-top/Tags_0000_Threading_on.jpg". We need move existing gear icon to top header bar
- Existing Contact thumbnail need height need extend as browser height. No space below the last contact thumbnail.
- User landed on this Preferences page from Gear icon
- Preferences page need to have its own route/url state. Use "preferences" for now.
- When refresh page, need remain on this page not on Mail landing page
- Preferences page use different layout than existing Mail pages
- Header bar placed on top and need to be fluid
- Preferences title placed on the left side and Done button on the right side.
- Click Done button take user back to Message page
- Left sidebar need use fixed width
- Preferences content use fluid width
- All menu need to be expanded by default
- Set active/inactive style for sub-menu
- Click sub-menu need scrolling content to related section
- After change some values, Saved notification need automatically displayed on top of screen. Use this design: Screenshot: 01_2_Mail.png
Mail - General
- Match radio buttons styling
- Click label need able to select on/off the radio
- Composing Mail, use image based for the text-editor area
Mail - Signature
- Match radio buttons styling
- Plain text is a text area, with some default text placeholder
- Use browser based style for scrollbar
- Rich text editor can use same image based like Composing Mail explained above
- You have following… is a text area
- Match Checkbox style, click label need checked on/off the checkbox
Calendar - General
Screenshot: 02_Calendar.png
- Match dropdown styling
- Use dummy options for now
- Suggest how dropdown should look, match with dropdown look
- Appointment and Anniversaries are text input
- Match style for active/inactive checkboxes
- Alarm Notification, inactive checkbox, need disabled related text and dropdown
Calendar - Schedule
- Settings button can be dead link
- Availability, inactive checkbox, need disabled related text input
International - Display
Screenshot: 03_International.png
- Match content like storyboard look
- Grey background colored text input are not editable.
- Checkbox for Bidirectional Settings
Delegation - Mail, Calendar
Screenshot: 04_Delegation.png
- Both text for “The following people” and “Access to your mail” area are multi-select
- Use blue background for selected row
- Add Person or Group and Remove Selected Person can be dead link
- Match both button styling
- Change Access button is disable
Delegation - Schedule
- Only need able to select 1 radio button for both sections
Delegation - Shortcuts
- Setup Shortcuts is a text input
- Checkbox placed on the bottom
MOBILE
Screenshot: 05_1_Mobile_Mail.png
- This is mobile screen look for Preferences pages
- To access another sub menu, there’s arrow next to page title
- Click the arrow need expand the sub-menu. Use this design: Screenshot: 05_4_Mobile_Mail.png
- Active page using blue colored and bold text
- Use fluid width for mobile screen
- For mobile each sections need display collapsible button that placed on the right side of title
- Collapsed section look. Match the arrow styling (Screenshot: 05_2_Mobile_Mail.png)
Mail - General
- Composing mail can use fluid image
Mail - Signature
- Radio button must remain in single line
- Text-area need use fluid width
Calendar - General
Screenshot: 06_Mobile_Caledar.png
- Label and form element (dropdown/text input) need displayed in separated link
- Checkboxes and label need remain in single line
- Alarm Notification, label and form element (text input, dropdown and in advance text) must always placed on the the bottom side of checkboxes. Ignore storyboard look
Calendar - Schedule
- Text input placed on the bottom of checkboxes
International - Display
Screenshot: 07_Mobile_international.png
- Match width and placement of each dropdown and text input
- They all need fill the browser width
Delegation
Screenshot: 08_Mobile_Delegation.png
- Match all form element placement and width based on storyboard look
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation
- Creating quality and efficient AngularJS/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