Challenge Overview
Welcome to the HP IDOL OnDemand Business Card Reader Mobile Web Applicaton Prototype Challenge! The goal of this challenge is to build a mobile friendly web application HTML5 UI Prototype of IDOL OnDemand that reads business cards and stores the data in Salesforce.com.
Required Screens:
Below are the required screens for this prototype challenge.
General Screen Guidelines:
- "powered by HP IDOL OnDemand" logo is a hyperlink, use deadlink for now
- from any screen except Login screen, sliding to the right will reveal the Main Menu screen
- 04.png, 05.png, 06.png, 07.png, and 14.png are out of scope
1) Login
- see 01.png
- Login button leads to Main Menu screen
2) Main Menu
- see 02.png
- "Capture a Card" nav leads to Instructions screen
- "Load from Gallery" nav will be deadlink
- replace "Browse Card" nav to "Browse Contacts" and this nav leads to Browse Contacts screen
- add new nav button with label "Browse Leads" link to Browse Leads screen
- "Logout" links to Login screen
3) Instructions
- see 03.png
- remove the business card background image, the rest of the screen design should be included, text should be editable while its background can be whole image
- tapping any part of the screen will lead to Business Card Information screen
4) Business Card Information
- see 08.png, 09.png, 10.png, and 11.png for reference
- fields and labels should be editable
- should apply minimum and auto height for each field rows
- remove "News", "Save as Contact", and "Save as Lead" buttons
- change "Add More Fields" into "Next" button, adjust the width accordingly but maintain left and right padding, make the button center. This button will lead to Business Card Information confirmation screen
- There will be 4 buttons at the bottom of the screen and these are: "Send an Email", "Log a Call", "Set a Meeting", and "Do Nothing". Adjust the width of each button, make some adjustments on the label size or have them in two lines to fit in nicely. Use your best judgement on this.
- Put a temporary icon on the "Do Nothing" button but make it uniformed with other button icon, use your best judgement please.
- These 4 buttons will be deadlink
- remove the back button "<" located at the top left part of the screen.
5) Business Card Information Confirmation
- see 08.png for reference
- basically it is similar to "4) Business Card Information" but this screen will not have editable fields
- this screen will have the following buttons: "Save as Contact" and "Save as Lead"
- "Save as Contact" when clicked/tapped will show dialog/popup screen that says "Contact Saved" with Okay or Close button.
- "Save as Lead" when clicked/tapped will show dialog/popup screen that says "Lead Loaded" with Okay or Close button.
- this screen should not have the following buttons "Add More Fields", "Send an Email", "Set up Call", "Set A Meeting", and "Do Nothing"
- make the "News" button wider and centered, this button will lead to News Feed screen
- the back button "<" at the top left part of the screen will navigate to "Business Card Information" screen
6) News Feed
- see 12.png
- each news item should be tappable/clickable and will lead to News Details screen
- search functionality is out of scope but the text field design and layout is included
- the back button "<" at the top left part of the screen will navigate to "Business Card Information Confirmation" screen
7) News Details
- see 13.png
- "Prev" and "Next" button are deadlink
- the back button "<" at the top left part of the screen will navigate to "News Feed" screen
8) Browse Contacts
- see 15.png
- name this screen as "Browse Contacts" instead of "Browse Cards"
- search functionality is out of scope but the text field design and layout is included
- the letters on the right part will scroll down to the group section, it is okay to add section headers (A, B, C etc...) but only optional .Populate the content of this screen with dummy data to simulate this functionality. For reference see how the "Contact" app of iPhone works.
- clicking/tapping a record will lead to "Business Card Information" screen
- the back button "<" at the top left part of the screen will navigate to "Main Menu" screen
9) Browse Leads
- see 15.png
- this screen is basically similar with Browse Contacts screen
- name this screen as "Browse Leads" instead of "Browse Cards"
- search functionality is out of scope but the text field design and layout is included
- the letters on the right part will scroll down to the group section, it is okay to add section headers (A, B, C etc...) but only optional .Populate the content of this screen with dummy data to simulate this functionality. For reference see how the "Contact" app of iPhone works.
- clicking/tapping a record will lead to "Business Card Information" screen
- the back button "<" at the top left part of the screen will navigate to "Main Menu" screen
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 lay out 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.
- Images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing.
JavaScript Requirements:
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. We would like to use following JavaScript libraries:
- jQuery library
Browsers Requirements:
- latest safari browser on iPhone
Resources:
- Storyboard screens and source files
Final Submission Guidelines
Submission Deliverables: A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.