Challenge Summary
Welcome to the HP Open Print Wireframe 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.
For this challenge, the primary goal is to create a wireframe of an app that will enable the users to create a multi-part watermarked image that will connect or link each part to online content or websites.
Round 1
Initial solution for client review:
1. Landing page
2. Sign In and Sign Up
3. Home page
4. Create a project
5. Manage projects
Round 2
All requirements outlined in the challenge details with client feedback applied.
1. Landing page
2. Sign In and Sign Up
3. Home page
4. Create a project
5. Manage projects
Challenge Details:
The objective of this challenge is to create a wireframe of a Multi-part Watermarking Application to create a way to connect multiple parts of an image to online content.
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.
Wireframe Expectations:
- Produce an HTML click-through wireframe that can be used to demonstrate all mentioned functionalities as required in each round.
- This application must be very easy to use and be intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens outlined in sections below. If any requirement is missing in final submission the client will not take a look at it, so make a checklist for the required screens to make sure you designed all of them.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Screen size:
The primary use case of this application will be on laptop and tablet screens, the size should be 1400px in width. Please keep in mind that application should be mobile friendly.
Required screens:
1. Landing page
- This will be the main site of the application.
- This should showcase what the application can do.
2. Sign In & Sign Up
- a way for the user to register and login into the application.
- registration only requires name, email, and password (with password confirmation field).
3. Home page
- There should be a way for the Users to authenticate with the Link Creation Studio service before they will be allowed to create a project.
- Authentication requires that the Users go to the Link Creation Studio website, sign in and copy their Client ID and Client Secret into this app.
- Helper text should be provided to guide the Users in obtaining their Client ID and Client Secret from the Link Creation Studio website https://www.linkcreationstudio.com/api/libraries/ruby/ and copying into this app. Note: the Users must be signed into the Link Creation Studio website in order to see their Client ID and Client Secret.|
- The wireframe should enable the Users to enter their Client ID and Client Secret which they obtained from the Link Creation Studio website. Note: In the future, this authentication step will be optimized, but for now it must be done this way.
4. Create A Project
- Authors or users will need to create a project.
- A project will have the following fields: Name, Description, Created Date, and Last Modified Date.
- Authors are allowed to "brand" a project with some kind of image or logo.
- Authors should have the capability of uploading a source image into a project.
- Authors should have the ability to designate rectangular regions of the image to watermark. A single project can have multiple source images. And each source image can have multiple watermarked regions.
- Authors should be able to enter a destination (URL of the site to hyperlink to for each watermarked region - known in the Link Technology API as a Payoff).
- The application should prevent users from creating overlapping regions in a source image.
- After the user designates the regions to be highlighted and the destinations, the system will create the watermarked image which will include one or more watermarked regions. This processing will happen before the validation step.
- The application should allow users to save projects, images, regions, and destinations.
- After users have designated the regions to be watermarked and the associated destinations, the application should provide access to view the watermarked image on the screen so that users can validate that the watermarked regions scan properly. The triggers in the watermarked images work from computer screens as well as printed materials. Scanning will alway happen through the LinkReader mobile application (iOS and Android).
- Users will need the ability to print each watermarked image.
- Users should be able to download each watermarked image.
5. Manage Projects
- The application should list all the projects that the user has created.
- The user should be able to open an existing project and update it:
- Update name, logo, images
- Users should be able to edit any image, updating previously defined regions and payoffs
- Users should be able to add and remove regions.
- The application should allow users to create a new payoff (a destination) or use an existing payoff when defining the destination for a region. Available payoffs should be scoped within the current project.
- Users should be able to retrieve the source image as part of the project. This is just an image file distinct from any watermarked regions.
Target Users:
- 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.
Judging Criteria:
- User Experience of the application.
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide an intuitive user flow.
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
- Generated HTML files with all the requested contest requirements stated above.
Source Files
-Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.