Cx Z's profile

Course project and Paper-prototype

HKBU COMP4045 Group Project,
Paper Prototype Design –
Design Report and revised final UI design.

Corporate with group-mates of the class:
CHUNG Yin Ting
LEE Wai Shing
Hu Yaotian
Paper Prototype finished in 30 Oct. 2018;
high-fidelity prototype finished in 04 Dec. 2018

The paper design showed are done by me. Here I would not show my teammates' paper prototype design works, one reason is that they chose my paper design as the reference to complete later high-fidelity prototype by an online tools called Proto.io. The high-fidelity prototype was created by CHUNG Yin Ting
and me together.
Design Report
- The product statement
The LostSavior is a mobile app platform that enables users easily to post notice for missing items and easily to post the information of the lost they found, and help to connect the loser and finder.  This project also has generated UI code.

- System functions
Consider this is a new concept application and the most users will be the novice users, so we simplify the operate process. We delete the functions of write the article about lost and find experience, and the function of share the lost and found information. For the sorting function, original it was located at the searching result page, we move it into the filter section and locate it at the top of the filter section. The sorting function will support two type sorting: one according date, another according name. 

For the profile page, we haven’t design the specific functions in the paper prototype. So, we add specific functions in the “Profile” pages for user convenience. In the profile page, the welcome info and user name are showed. A list of choice includes “Profile Info” “Your lost” “Your pick up” “FAQ” “Feedback” “Setting” is showed. Tap to page of “Profile Info”, user can view their detailed account information and do modification of head image, account name and bound personal email. “Your Lost” page records the lost you have found through the application, and “Your Picked Up” will record the post you published to find the owner of the lost you picked. “FAQ” will prepare answers about the common question user might ask about this APP, and the simple guideline to use this APP. “Setting” will allows user to do some personal privacy control, notification control and cache clean function. Specific control elements can be viewed in the prototype.


Following is my paper prototype draft design. 
Alternative design 1:
Alternative design 2:
High fidelity prototype:
Page introduction

Login page.
It is used to control only our member can do the lost and found action.
The page include our name of the app, it let user know that what they are using.
This page needs user to input their username and password, after input these field click “Login” button. If the username and password are correct with our existing member then the user can login to our main page (lost page). If not it will be show an alert box to let the user know he/she can’t login to use the function. If the user hasn't a account can click the “Or, create an account” go to create account page.
Create Account page.
It is for someone don’t have account and wanna to use this application, they can register as member here.
This page needs user to input username as id which is use for contact and show on the article.
The username should not be the same with our existing member, password and confirm password should be same. After input info and confirm password then click the button, it will auto login with the new account and go to lost page. If there are any problem with the name and password will not create an account.
Create Account page.
It is for someone don’t have account and wanna to use this application, they can register as member here.
This page needs user to input username as id which is use for contact and show on the article.
The username should not be the same with our existing member, password and confirm password should be same. After input info and confirm password then click the button, it will auto login with the new account and go to lost page. If there are any problem with the name and password will not create an account.
Lost Page.
This page allows users to view all the lost report and can see the details of items.
Search and filter is also allowed. User can input the keyword in search box or use filter to find what they may have found.
Click the item name and the page will jump to item detail page.
Lost Item Detail Page.
The detailed information of lost report will be shown in this page. Item name, description, missing place, missing time and picture.
User will look into the details to make sure if this is the item that they have found.
If yes, they can contact to the user who reported this lost information by clicking ‘You Found It?’ button.
Picked Up Page.
This page allows users to view all the picked up report and can see the details of items.
Search and filter is also allowed. User can input the keyword in search box or use filter to find what they may have lost.
Click the item name and the page will jump to item detail page.
Picked UP Item Detail Page
The detailed information of picked up report will be shown in this page. Item name, description, missing place, missing time and picture.
User will look into the details to make sure if this is the item that they have lost.
If yes, they can contact to the user who reported this picked up information by clicking ‘Contact the Finder?’ button.
Message Page.
Users can see the message history they sent to other users. The icon and name of other contact will be shown in this page and users can pick the contact they want to contact with.
Click the name you want to talk to will jump to chat page.
Chat Page.
If you have pressed ‘Contact the Finder?’ or ‘You Found It?’ buttons, then you will jump to this page. On the top is the name of contact and click the person button on the right will show the profile of this contact.
The message send by me will be shown at right side and the message received from the contact will be show at left side.
At the bottom is the message box. Input the word you want to send and click send will send out the message without any confirmation alert.
The plus button at left side of message box is to add picture to the chat.
Profile Page.
On the top is your name and profile icon.
In this page, users can check the profile information, see the lost report history, picked up report history, see FAQ, send feedback to developer, and to set the setting up.
At the bottom is the logout button. Clicking the logout button will jump to the login page. And then user can login with another account.
There are three parts of setting: privacy, notification and others.
In privacy field, the user can set up the blacklist to block some harassing messages. And can also set whether allow others to see his profile or not.
In notification field, the user can choose to block notification and choose to enable sounds or beep sound.
In other field, user can clear cache.
Course project and Paper-prototype
Published:

Course project and Paper-prototype

HKBU COMP4045 Group Assignment 1, Paper Prototype Design - Design Report and revised final UI design.

Published: