3. View UIUX
Figma Diagram Link
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 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.
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.
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.
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.
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 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.
- 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.
- 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.
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 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.
- 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.
This page remains still since All participants in mockup usability test could make a request in 10 seconds without confusion.
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.
- 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.
All participants in mockup usability test could understand the information of pictures and requesters, and grant a request in 6 sec
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.
- 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).
We keep the original design because every participant in mockup usability test could understand whether the request is granted or not.
