Challenge Overview
Welcome to RapidUI - IBM Castle - Contact Management 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 RapidUI Challenge - make sure to jump in now!
This challenge is focused on building out the "Contact" 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.
- The base of the prototype stylesheet is created using Bootstrap layout.
- For any new element interactions, you must build using AngularJS.
- 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.
- Potential for additional individual work and payments after the challenge.
Your prototype submission needs to 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
- Tablet layout can use fluid width of mobile version
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 to adjust some element placement in 320px width screen size. Let’s discuss any doubt about adjustments
Contact Management Prototype
- Update the navigation based attached on Navigation_Flow.zip
- Download Navigation Storyboard PSD here: https://drive.google.com/drive/u/0/folders/0B_vKTUwOhj7COGtoODhybTJWT1U
- These are our Contact Design Page: https://drive.google.com/folderview?id=0BwfkY6SJxFPiZUpJcmJJbzgySWs&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.
Contacts
00~Grid-View.jpg
- We want to show the grid view here
IMPORTANT Design Update:
- Update the hover to be like the existing "blue hover" in the prototype
- Page should default to showing the first contact in the right column
- Change "lorem ipsum" text to Phone Number
06~Select-Contact.jpg
- List view
IMPORTANT Design Update:
- Update to include the Contact's phone number in this view (to the right of email)
07A~Contact-Details-V3-(alternate).jpg
- Contact Detail View
IMPORTANT Design Update:
- Make sure the image matches with the contact selected
- Only need "Timeline Tab" - remove "Social Activity" and "Related Contact"
- Include the "Frequency Communication" piece from "Communication-Frequency.png" within the tab/white background
- Changes text to "Messages with Anna"
09~Multiple-Select-Contact.jpg
- Select Multiple Contacts
IMPORTANT Design Update:
- Top right column icons: Remove the expand/contract window icons
- Change the Email icons to Message icon (see: message-icon.png )
12~New-Group.jpg
- Create New Group
IMPORTANT Design Update:
- This should actually be an "action window" - like creating an email window (populate from the bottom right)
- Show Group Name
- Show people
- Remove Grouping By field
- Remove Description field
15~New-Contact.jpg
- Create New Contact
IMPORTANT Design Update:
- This should actually be an "action window" - like creating an email window (populate from the bottom right)
- Show First/Last Name
- Company
- Phone
- Email
- Address
17~New-Group.jpg
IMPORTANT Design Update:
- This should actually be an "action window" - like creating an email window (populate from the bottom right)
- Should be able to add users (auto-complete)
- Show Group Name
- Show people
- Remove Grouping By field
- Remove Description field
Mobile
- Let us know if you have any questions about Mobile - see screens in /Mobile
- We will also use Mobile for Tablet view
Mobile/01~IBM-Menu.jpg
- This screen is not correct, menu options should be : Inbox, Calendar, Contact
Mobile/04~Select-Contact.jpg
- Select Contact
Mobile/05A~Select-Contact.jpg
- Contact Detail
8~Multiple-Selection.jpg
- Multiple selection
- Action bar at the bottom
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.
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