Challenge Summary
Welcome to the HP Open Print UI Web Design Challenge - Multi-part Watermarking App! This is a design challenge to create multiple watermarks per page. 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.
For this challenge, the primary goal is to create the user experience and UI to allow authors to add multiple watermarks to one page, based on the provided wireframe and instructions outlined below. The use case: for example, a page from a catalog, which has different watermarks added to multiple product images.
Round 1
For Desktop (1280px width)
1. Create New Project Wizard (only project edit step 1, and step 2 screens -- omit the authentication steps for now)
2. Edit Project
3. Watermark Editor
4. Project Details
5. My Projects (Tile View)
For Tablet (1028px width)
1. Watermark Editor
Round 2
Modifications to the screens above.
For Desktop (1280px width)
1. Landing page
2. Dashboard
3. My Projects (Table View)
For Tablet (1028px width)
1. Create New Project Wizard (only project edit step 1, and step 2 screens -- omit the authentication steps for now)
2. My Projects (Tile View)
The objective of this challenge is to create the responsive web design of the Multi-part Watermarking Application.
The primary use case for this application is to provide the capability for the watermark authors to designate regions within a source image which upon scanning will link to online content. We're not doing the "scanning" part of the technology in this challenge, we're solely focused on watermarking and trigger definition.
The demo use case that we're hoping to showcase is a Fashion Catalog use case, where each part of a model's outfit is a separately watermarked region and links to the corresponding online product page. The initial app will be generalized to be able to process any type of source image -- it is essentially a tool for authoring multi-part watermarked images.
Design Consideration:
- Responsive, consider designing the UI in mobile, tablet, and desktop devices.
Screen Requirements:
Below are the initial screens suggestions that needs to be create in this challenge, feel free to add/edit/modify any features for better UI/UX performance. It is important to capture all the functionality and popups in the provided wireframe.
1. Landing page
2. Dashboard
3. My Projects (both table and tile view)
4. Create New Project Wizard (including the authentication, step 1, and step 2 screens)
5. Edit Project
6. Watermark Editor
7. Project Details
Target Audience
HP is hoping to use this application to demonstrate the watermarking capabilities of the Open Link API to various content managers and creators. An editor of a fashion catalog would be prime example.
Screen Sizes
- Tablet: 1024px width
- Desktop: 1280px width
Branding Guidelines
- No need for any HP specific branding in the app/site.
- Check the following resources for branding guidelines:
-- https://link-creation-studio-resources.s3.amazonaws.com/learn/resources/LinkReader-Guidelines.pdf
-- http://link-css.herokuapp.com/
-- https://www.linkcreationstudio.com/learn/resources
Judging Criteria
- How well you design the provided design challenge requirement.
- Cleanliness of your graphics and design.
- Design and User Experience.
- Responsiveness and ease of use.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.