Challenge Overview
Welcome to the IBM - Customer Spotlight UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for a mobile-based application using the provided "Customer Spotlight" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
NOTE:
- We would like you to use Bootstrap (http://getbootstrap.com/getting-started).
- We would like you to use Angular or Ionic and avoid using jQuery!
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers. We are only concerned about mobile browser since this app will run in mobile devices.
Key Requirements:
- We would like you to use bootstrap.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
- You are provided with a wireframe and storyboards.
- Screens/layout in wireframes and storyboards might be different, wherever the screens/layout are different, storyboards takes precedence - please follow that! (Wireframe should be helpful with the flow).
- We want to make sure your prototype works in both Portrait and Landscape resolutions.
Required Pages:
In the below references, we had referred the potrait pages - you can find the corresponding landscape pages in the storyboards..
Login:
Reference: 00-login.jpg / 01-login-error.jpg
- User will be able to enter the username and password.
- Please make sure the first letter is not auto-capitalized because the mobile settings usually capitalizes the first letter of the word.
- When a user enters wrong credentials, we show the error screen 01-login-error.jpg
Choose Customer:
Reference: 03-Choose-customer-(Tick-option).jpg
- First time users, once they are logged in - they will be able to choose the customers.
- Users will be able to select an item and the check-mark will appear as shown in 03-Choose-customer-(Tick-option).jpg, please "grey" the tick mark and text when an item is not selected. (you can refer this greyed out text in 04-Search-Customer.jpg in portrait but please do not use radio button, we want the grey tick-mark here)
- In Landscape (02-Choose customer.jpg), we see the radio buttons instead of tick option while choosing customers but please make sure to follow the portrait view (03-Choose-customer-(Tick-option).jpg).
- Tapping / selecting the parent item (Automobile, Banking, Communication, Electronics…..etc) will select all the values within that.
- By default, all customers are chosen.
- Please use custom scroll bars as shown in the storyboard
- On the right of each of the sections (Automobile, Banking, Communication, Electronics…..etc) we have the expand/collapse - please make sure to implement that!
- Users will be able to initiate the search in the search box at the top, when a user starts typing a character in the textbox, we show the list of items that starts with that particular letter as shown in 04-Search-Customer.jpg
- Below that we have two links “Select All and Clear All”
- - - “Select All” will select all the values and show everything selected with a tick mark
- - - “Clear All” will ask for a confirmation in a modal window with “yes / no” option as shown in 05-Choose-customer-Clear all-popup.jpg, if user selects "yes" all values will be un-selected (change all tick-marks and texts to grey), if "no" then just need to hide the modal window.
- We have a gear icon shown to the right for each of the items under all sections (Automobile, Banking, Communication, Electronics…..etc)
- - - Clicking on each of the options (Chrysler, Mercedes, etc..) will need to show a pop-up as shown in 06-Choose-customer-Tools used-popup.jpg….within this pop-up, you see the tools that were used by that particular client (these are shown with a tick mark and user cannot toggle these tick mark...they are just static icons).
- On clicking “Submit” at the bottom will take them to News screen (07-News.jpg).
- Tapping on the back icon shown in the top left can go to the News page (07-News.jpg)
- Keep the header and footer fixed
Search Customers:
Reference: 04-Search-Customer.jpg
- Back icon at the top will take the user back to choose customer screen (03-Choose-customer-(Tick-option).jpg)
- We show the results categorized as shown in 04-Search-Customer.jpg
- Please make sure to use tick mark, instead of radio buttons.
- Keep the header and footer fixed
News:
Reference: 07-News.jpg
- In the right, we see the “notification” icon with a number indicating the number of “New” news that are still unread. Tapping on this should hide the number and the red background!
- Clicking on the link / button below title will show the previous news and clicking on the one at the bottom will show the next news to the users...we are open to how you animate when a user clicks these and view other news (slide up / down? looking forward to your thoughts)
- Users will also be able to swipe up/down news as shown in 12-Swipe-up-to-read-more-news.jpg, please include few news article, you can include few sample articles to show this swipe up/down interaction as shown in the screen (12-Swipe-up-to-read-more-news.jpg).
- We have three icons at the bottom:
- - - Clicking on the “center icon will allow the user to bookmark the news, the icon will change its color to orange as shown in 10-news-book mark.jpg
- - - Please make the left and right icons as dummy links.
- We need news examples that shows a image (07-News.jpg) and also a video (08-News-Video.jpg).
- Note: We would like to auto-hide the top menu bar (maybe you can time out and auto-hide the menubar) after sometime as shown in 09-news-reading-full-screen-mode(-auto-hide-menu-bar).jpg
- Keep the header and footer fixed
- NOTE: If you find any inconsistencies between the landscape and portrait images....please follow the portrait and also feel free to include as scroll as required in landscape view.
Navigation:
Reference: 11-news-menu.jpg
- On clicking on the hamburger (menu) icon in the left, we show the navigation as shown in 11-menu.jpg
- For now, you just need to make all dummy links but show the selection that was made, please see the active selection as shown in 11-menu.jpg
- In landscape view, we have scrollbar (11-news-menu.jpg), it need to be custom scrollbar!
- Clicking on “Logout” will log’s them out and takes the user to 00-login.jpg
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
Browsers Requirements:
- Safari & Chrome Mobile Browsers.
Documentation Provided:
- Storyboard Screens/PSD and Wireframe files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.