Challenge Overview
Welcome to the HP Open Print UI Prototype Challenge - Multi-part Watermarking App! HP's Link Technology API allows for the hyperlinking of printed content through watermarks. They have developed a scanning technology which can detect these watermarks on printed materials like catalogs, postcards, or business cards, and provide the functionality to navigate to associated digital content on a mobile device. For more information about HP Link Technology you should familiarize yourself with the features, API and the mobile LinkReader scanning app at https://www.linkcreationstudio.com and you can watch a video here.
The goal of this challenge is to create the HTML prototype based on the provided HTML wireframe, storyboard designs, and requirements outlined in the Challenge Details section.
Final Submission Guidelines
The scope and focus of this challenge is to build the HTML prototype, most of the JavaScript functionalities are out of scope (these are outlined in the requirements below).
General Requirements:
1. Create all the mentioned pages and interactions outlined below.
2. Use the CSS provided in this Style Guide. This is just optional.
3. Header Navigations (Learn, Create, Manage, Pricing, Support, and Developer) are dead links.
4. Footer links leads to their respective pages (Terms of Use and Privacy Statement).
5. Separate the image content folder from the image/design background. Use /i/ folder for the CSS backgrounds, and use /i/content/ folder for the image content.
6. Corresponding storyboard for tablet view are in Tablet folder and Tablet.psd.
7. Always refer to the wireframe for page flows functionality and ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Pages:
The following are the pages and functionality needed for this challenge.
1. Landing Page
- See 1.Landing.png for reference.
- Carousel should accept HTML markup, the image background should be treated as content (<img>) and not a CSS background. This carousel should be functional.
- Sign In button from the carousel and from the “Get Started” section leads to Sign In page.
- Create Free Account button from the carousel and from the “Get Started” section leads to Create Account page.
- More about this project - Title and Image are dead link. Image should be treated as content.
2. Sign In
- See 24.SignIn.png for reference.
- “Forgot Password” is dead link.
- Cancel button leads to Landing page.
- “Sign up now” link leads to Create Account page.
- Implement simple HTML5 validation of required fields.
- On sign in leads to Dashboard page.
3. Create Account
- See 23.Create-Account-Page.png for reference.
- Implement simple HTML5 validation of required fields.
- Cancel button leads to Landing page.
- “Terms & Conditions” link opens the Terms of Use page in a new tab.
- On sign up leads to Dashboard page.
4. Dashboard
- See 2.Dashboard.png for reference.
- Clicking the pagination arrows on “Recent Project” or on “Recent Uploaded Images” will slide the displayed items. Create about 12 dummy items for each sections and show 4 items at a time.
- The whole part of an items should be clickable.
- The “Top” button found in the bottom right part of the page will smooth scroll to the top.
5. My Projects
5.1 Table View
- See 20.MyProject-TableView.png for reference.
- Sorting, Filter, Delete, and Pagination functionalities are out of scope BUT you have to implement their visual elements.
- Delete modal should be implemented, this will be triggered when the Delete button is pressed. See 16.Error-modal.png for reference on the modal style.
- Filter box should be implemented, this will be triggered when the Filter button has been pressed. Implement a simple slide down for this part based on the wireframe and the look and feel of the storyboard design. Use your best judgement as we don’t have specific storyboard design for this part.
5.2 Tile View
- See 19.MyProjects-Tile View.png for reference.
- This page will have the same functionality outlined in the Table View.
6. Create New Project Wizard
6.1 Authentication
- See 25.Authentication.png for reference.
- Implement simple HTML5 validation of required fields.
- On click of “Authenticate” button, redirect the user to “6.2 Create New Project page”.
6.2 Create New Project
- See 3.Create-New.png for reference.
- Implement simple HTML5 validation of required fields.
- No need to implement 4.Upload-Logo.png
- Clicking “Next” button leads to “6.3 Step 1 page”.
6.3 Step 1
- See 5.Editor-Empty-State.png for reference.
- The “+ Add Image” button and the blue button on the left side when triggered will launch the “Add Image” modal. See 6.Launch-Add-Image.png for reference.
- On the “Add Image” modal:
-- By default the “Upload Image” option is selected. The uploading of image either via the Select Image button or drag & drop is out of scope.
-- Selecting the “Select from existing images” option will show the image items for selection. This will have similar layout as seen in 7.Upload-Multi-Images.png and show at least 8 image items (4 image per row).
--- Use non-input text instead of text inputs for the image title and description.
--- “x” button will be dead link.
--- Clicking any image will highlight the image (blue border).
--- Progress bar is out of scope.
-- Cancel and Next buttons will close the modal.
-- Next button will lead the user to “6.4 Step 2”
6.4 Step 2
- See 8.Images-Added.png for reference.
- Implement the selected image (image with blue border).
- Implement the image hover functionality. See 9.HoverImages.png.
- Implement the Region List button, see 18.Region-List.png for reference. The edit and delete icons are dead links.
- “Show Region” button is toggleable to “Hide Region” button, see 13.Hide-region.png for the icon/style of the button.
- Cancel, Finish, and Save as Draft button leads to My Projects page.
- Add Region, Download, Print, and Preview Watermarked Image buttons are dead links.
7. Project Details
- See 21.Project-Details.png for reference.
- Edit Project button leads to Edit Project page.
- Delete Project button will show a confirmation modal. See the wireframe for the content and use the same modal design mentioned “6.3 Step 1” section above.
- Implement Select All on the checkboxes.
- Implement the “Payoff Library” tab. See the wireframe for the content.
- Delete icon buttons will show a confirmation modal. See the wireframe for the content.
- Thumbnail link, Image Name & Description link, Edit icons, Image icons, and Payoffs links are all dead links.
- Pagination functionality is out of scope.
8. Edit Project
- See 22.Edit-Project-Detail.png for reference.
- Project Name field is an input text instead of select drop down box.
9. Link Creation Studio Terms of Use
- See 27.Terms-of-Use.png for reference.
- All section should be implemented as accordion.
- You can copy the text for each sections here https://users.linkcreationstudio.com/termsofuse
- By default, all accordion are collapsed.
- The link at the right sidebar will scroll down to the corresponding section and will expand the section if it is not expanded.
10. HP Privacy Statement
- The default page will be 26_01-Privacy-Statement.png
- You can copy the text from here http://www8.hp.com/us/en/privacy/ww-privacy.html
- When use clicks on any item, it will show the page in accordion format. See 26_02-Privacy-Statement.png for reference. All links from this page goes to the same accordion format page.
- This will have the same functionality outlined in the Terms of Use page.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- Tablet (Safari & Chrome)
HTML5
- You can use the latest version of Bootstrap for the project
- 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
- You can use the latest version of Bootstrap for the project
- 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.
- You are allowed to jQuery or AngularJS for this challenge.
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.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.