UI/UX:

Figma Diagram Link

Main Menu (Github Code Links: Layout, VC)

Our Main Menu page is composed of three main parts. The first part consists of two circle buttons that are used to start the creation and examination flow for users. Both the icons on those two buttons and the text under the buttons correspond to the respecitve funtion so that the users can quickly know which button to use for their purpose. The second part "My Creations" is a list of chunks. Each chunk displays the information of the image created by users together with the pending request numbers on the right side. In this way, users can clearly know their creation information and the remaining pending requests to process. The form of the third part "Sent Requests" is similar to the second part. Each chunk displays their request information. The different colors of two request status on the right side make users easily get to know whether their request has been granted or rejected. Above all of those three parts, the name of our app and login status are displayed at each side of the title bar. If the users log in successfully, it will show their account names.

• Display user's login information
• Two buttons to start creation and examination flow
• Two parts below buttons list watermark and request records

Design Justification:

We modified keywords on the main menu because 1 participant in mockup usability test couldn’t find the target picture in “My Watermarks” within 40 seconds. It may be hard for users to differentiate the requests sent to the user, with the requests sent by the users through original keywords "My Watermarks" and "Sent Requests". Thus, we rephrase those two keywords in this way:

• My Watermarks => My Creation
• My Requests => Sent Requests

Creation Flow

Creation flow is used to embed the image with the watermark. The users have to upload the image they want to embed and select some information to include in the watermark.

Picture Import Tab (Github Code Links: Layout, VC)

After the user clicks the "New Watermark" button, the color of another button will become gray to inform the user of the successful clicking. At the meantime, the area below the two buttons will turn to three buttons: a button of uploading image from camera, a button of uploading from album and a cancel button.

Embed Tab (Github Code Links: Layout, VC)

After the users successfully upload the image, the image will be displayed at the top of the page. Below the image, there is another part displaying a list with white background. We want to inform the users through differen background color that this is the place where they can edit something. In the list are several fields for users to select or fill in as the content of the watermark.

Picture Save Tab (Github Code Links: Layout, VC)

After users click the right arrow button to show that they have finished editing the watermark, the part below the selected picture will display green check mark indicating that watermark has been successfully embedded to the picture. Users can clicking share button to share the processed picture or save the picture in the album. Then, after everything is done, users can just click return home button to go back to the main menu.

Design Justification:

We add a new home button in the last screen because 1 participant in mockup usability test returned to the main menu with over 10 seconds. Thus, even though there is already a home button on the top left corner of the screen, adding a new one will increase the redundancy of information and make returning home more intuitive

Examination Flow

Examination flow is used to decode the watermark from the image together with the watermark content, namely the information of the image. The users have to upload the image they want to examine and browse the information.

Picture Import Tab (Github Code Links: Layout, VC)

• Import a picture from album / external apps and extract the watermark data

After the user clicks the "Examine Watermark" button, the color of another button will become gray to inform the user of the successful clicking. At the meantime, the area below the two buttons will turn to two buttons: a button of uploading from album and a cancel button.

Data Extraction (Github Code Links: Layout, VC)

• Let users input a password to decrypt the message
• Present data and/or warnings as appropriate

After the users successfully select the image, the image will be displayed at the top of the page same as before. Below the image, there is another part displaying a list of watermark content. If the message is encrpyted, the users have to input a password to access the message.

Design Justification:

We rephrase the "Modified" entry and reorganize the screen layout since 1 participant in mockup usability test was confused about the keyword "Modified". We want to make it clearer that "Modified" is not a meta-data of this picture, instead it indicates that the picture has been modified compared to the original one created by its author.

Permission Request Flow

Permission Request Flow is optional after the Examination Flow. After knowing the information of the image, the users may want to contact the author for usage permission. In this flow, the users are able to send the message to the author of the image.

Send Request Tab

• Users can send a message to request the permission to use the copyrighted picture
• Green check mark indicating that request has been sent

After browsing the information of the watermark, the users can click the "Contact Author" button. The area below the image will be used to leave the message. Users can check "Send From" and "Send To" fields and then input their message to the author. After clicking the "Send" button at the top right side, a green check mark will be displayed indicating that the request has been successfully sent.

Design Justification:

This page remains still since All participants in mockup usability test could make a request in 10 seconds without confusion.

Authorization Flow

Authorization Flow is used to authorize the usage permission (grant or reject) to the request sent by other users. The request list is shown in the second part "My Creations" on the main menu page.

My Creations Tab (Github Code Links: Layout, VC)

• Display the information of the target picture and requesters
• User can grant / reject the permission request

After clicking one of the requests in "My Creations", the image information will be shown at the top of the page including the file name, the username, time stamp, etc. The area below the image info is the list of the request for that image. Users can click "SEE MORE" button to see the message and then either "GRANT" or "REJECT" that request.

Design Justification:

All participants in mockup usability test could understand the information of pictures and requesters, and grant a request in 6 sec

Authorization Feedback

This flow is used to check the status of usage permission request sent by users. The request status list is shown in the third part "Sent Requests" on the main menu page.

Sent Requests Tab (Github Code Links: Layout, VC)

• Display the picture information
• User can check the permission request feedback by the author

After clicking one of the requests in "Sent Requests", the corresponding image information will be shown at the top of the page. The area below the image info is the information of the request created by the user together with the status (GRANTED or REJECTED).

Design Justification:

We keep the original design because every participant in mockup usability test could understand whether the request is granted or not.