Difference between revisions of "IS480 Team wiki: 2014T1 Team Epsilon Scope iOS User Flow"
(14 intermediate revisions by the same user not shown) | |||
Line 51: | Line 51: | ||
| style="padding:0 .3em; font-size:100%; solid #000000; text-align:center; background-color:white; " width="20%"| [[IS480 Team wiki: 2014T1 Team Epsilon Scope iOS User Flow |<font color="#3600D4" size=2><b>[ iOS User Flow ]</b></font>]] | | style="padding:0 .3em; font-size:100%; solid #000000; text-align:center; background-color:white; " width="20%"| [[IS480 Team wiki: 2014T1 Team Epsilon Scope iOS User Flow |<font color="#3600D4" size=2><b>[ iOS User Flow ]</b></font>]] | ||
− | | style="padding:0 .3em; font-size:100%; solid #000000; text-align:center; background-color:white; " width="20%" | [[IS480 Team wiki: 2014T1 Team Epsilon Scope Admin User Flow | <font color="#000000" size=2><b>[ | + | | style="padding:0 .3em; font-size:100%; solid #000000; text-align:center; background-color:white; " width="20%" | [[IS480 Team wiki: 2014T1 Team Epsilon Scope Admin User Flow | <font color="#000000" size=2><b>[ Web User Flow ]</b></font>]] |
− | |||
− | |||
|} | |} | ||
Line 60: | Line 58: | ||
<!-- Start Content --> | <!-- Start Content --> | ||
− | The | + | The Public Feedback & Enquiry Platform iOS Mobile Application is only intended for public users. |
+ | |||
+ | <center> [[Image:Scope_iOS_User_Process_Flow.png|900px]] </center> | ||
== '''Display All Feedback''' == | == '''Display All Feedback''' == | ||
Line 70: | Line 70: | ||
In this view, the user will be able to see the following feedback details | In this view, the user will be able to see the following feedback details | ||
− | 1. | + | :1. Time which feedback was submitted |
− | 2. Location of feedback | + | :2. Location of feedback |
− | 3. | + | :3. Feedback title |
− | 4. | + | :4. Image of feedback (if user has submitted one or more images) |
− | 5. | + | :5. Number of votes |
− | 6. Number of | + | :6. Number of comments |
− | + | <center> [[Image:Scope_Display_All_Feedback.png|400px]] </center> | |
− | |||
The app has a fixed navigation bar at the bottom of the screen. This navigation bar is omnipresent throughout the app, and allows the user to get to the core functionalities of the app no matter where they are. | The app has a fixed navigation bar at the bottom of the screen. This navigation bar is omnipresent throughout the app, and allows the user to get to the core functionalities of the app no matter where they are. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<b> Feedback List Sorting </b> | <b> Feedback List Sorting </b> | ||
Line 112: | Line 103: | ||
The user will be able to: | The user will be able to: | ||
− | 1 | + | :1. Login with Email & Password |
− | |||
− | |||
− | + | :2. Register New account | |
− | <center> [[Image: | + | <center> [[Image:Scope_Account_Before_Login.png|400px]] </center> |
<b> Register New Account </b> | <b> Register New Account </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Register_New_Account.png|400px]] </center> |
− | Users will only be able to sign up as a normal public user | + | Users will only be able to sign up as a normal public user. |
After entering the above information, the user clicks Register to continue with the registration process. | After entering the above information, the user clicks Register to continue with the registration process. | ||
+ | |||
+ | <b> Terms & Conditions </b> | ||
+ | |||
+ | <center> [[Image:Scope_Terms_And_Condition_Mobile_Screen.png|400px]] </center> | ||
+ | |||
+ | Users who sign up can read the terms and conditions, and they must comply to them for using our system. | ||
<b> Verify Mobile </b> | <b> Verify Mobile </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Verify_Mobile_Screen.png|400px]] </center> |
The verification code will be sent to the user’s mobile number. | The verification code will be sent to the user’s mobile number. | ||
Line 151: | Line 146: | ||
The user will be able to: | The user will be able to: | ||
− | 1. Login with | + | :1. Login with Email & Password |
− | 2. | + | :2. Register new account |
− | + | <center> [[Image:Scope_Account_Before_Login.png|400px]] </center> | |
− | |||
− | <center> [[Image: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<b> Successful Login </b> | <b> Successful Login </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Account_After_Login.png|400px]] </center> |
Upon successful login, the account page will show the user’s email and mobile number, as well as provide the user the option to change their password and log out of the system. | Upon successful login, the account page will show the user’s email and mobile number, as well as provide the user the option to change their password and log out of the system. | ||
− | A successful login also | + | A successful login also allows the user to create feedback by clicking at the icon at the top right of every page. |
<b> Password Change </b> | <b> Password Change </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Password_Change.png|400px]] </center> |
The user will be prompted to enter the details in the screen to change their password. | The user will be prompted to enter the details in the screen to change their password. | ||
Line 189: | Line 174: | ||
In this view, the user will be able to see the following feedback details: | In this view, the user will be able to see the following feedback details: | ||
− | 1. | + | :1. Time which feedback was submitted |
− | |||
− | |||
− | + | :2. Location of feedback | |
− | + | :3. Feedback title | |
− | + | :4. Image of feedback (if user has submitted one or more images) | |
− | + | :5. Number of votes | |
− | + | :6. Number of comments | |
− | <center> [[Image: | + | <center> [[Image:Scope_Display_My_Feedback.png|400px]] </center> |
This view is similar to display all feedback function, and allows the user to get to the feedback that they care about the most quickly. | This view is similar to display all feedback function, and allows the user to get to the feedback that they care about the most quickly. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<b> Feedback List Sorting </b> | <b> Feedback List Sorting </b> | ||
Line 228: | Line 203: | ||
In this view, the user will be able to see the following feedback details: | In this view, the user will be able to see the following feedback details: | ||
− | 1. Feedback owner (user who submitted feedback) | + | :1. Feedback owner (user who submitted feedback) |
− | 2. | + | :2. Time which feedback was submitted |
− | 3. Location of feedback | + | :3. Location of feedback |
− | 4. | + | :4. Feedback title |
− | 5. | + | :5. Images of feedback (if user has submitted one or more images) |
− | 6. | + | :6. Annotation of feedback (if user has annotated one or more images) |
− | 7. | + | :7. Number of votes |
− | 8. Number of | + | :8. Number of comments |
− | 9. | + | :9. Description of feedback |
− | 10. | + | :10. Comments made by other users |
− | 11. | + | :11. Map of feedback (by clicking on the location details) |
− | |||
− | + | <center> [[Image:Scope_View_Feedback_Detail_Before_Vote.png|400px]] </center> | |
− | |||
− | |||
− | <center> [[Image: | ||
<b> Vote on Feedback </b> | <b> Vote on Feedback </b> | ||
− | |||
− | |||
When the user votes for a feedback, the total number of votes will be highlighted to signify and tell the user that he/she has voted for the current feedback listed. | When the user votes for a feedback, the total number of votes will be highlighted to signify and tell the user that he/she has voted for the current feedback listed. | ||
Line 271: | Line 240: | ||
<b> Comment on Feedback </b> | <b> Comment on Feedback </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Comment_On_Feedback.png|400px]] </center> |
When the user clicks on Write Comment, this will be shown to the user, along with an invoked keyboard for the user to input the comment. | When the user clicks on Write Comment, this will be shown to the user, along with an invoked keyboard for the user to input the comment. | ||
Line 280: | Line 249: | ||
<b> View Image & Annotations </b> | <b> View Image & Annotations </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Image_Gallery_With_Annotation_Description.png|400px]] </center> |
When the user clicks on the image of the feedback on the detailed feedback page, the image gallery view will be invoked. | When the user clicks on the image of the feedback on the detailed feedback page, the image gallery view will be invoked. | ||
Line 289: | Line 258: | ||
Clicking one of these indicators will show the annotation details for that particular annotation. | Clicking one of these indicators will show the annotation details for that particular annotation. | ||
− | |||
− | |||
The user will be able to dismiss the image gallery view and return to the display feedback details view by tapping on the black area outside of the image. | The user will be able to dismiss the image gallery view and return to the display feedback details view by tapping on the black area outside of the image. | ||
− | |||
− | |||
<b> View Location Map </b> | <b> View Location Map </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Map_View_Screen.png|400px]] </center> |
When the user clicks on the location details of the feedback on the feedback detail page, the map view will be invoked. | When the user clicks on the location details of the feedback on the feedback detail page, the map view will be invoked. | ||
Line 306: | Line 271: | ||
This location will be determined by the mobile’s GPS (if the user gives access), and can be edited by the feedback owner. | This location will be determined by the mobile’s GPS (if the user gives access), and can be edited by the feedback owner. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<b> Report Abuse </b> | <b> Report Abuse </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_View_Feedback_Detail_Report_Abuse.png|400px]] </center> |
Line 336: | Line 290: | ||
Once a feedback has been deemed safe (report abuse rejected) by the admin, it can no longer be reported for abuse again (the button will be disabled or not shown to the user). | Once a feedback has been deemed safe (report abuse rejected) by the admin, it can no longer be reported for abuse again (the button will be disabled or not shown to the user). | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Report_Abuse_Comment_Screen.png|400px]] </center> |
When the user chooses to report a feedback as abusive, the app will show the above screen to allow the user to input the reason of why the feedback is abusive. | When the user chooses to report a feedback as abusive, the app will show the above screen to allow the user to input the reason of why the feedback is abusive. | ||
Line 348: | Line 302: | ||
When the user creates a feedback for the first time, the app will prompt the user to give access rights to its GPS unit, so that the app can determine the rough location of the user using the GPS chip as shown. | When the user creates a feedback for the first time, the app will prompt the user to give access rights to its GPS unit, so that the app can determine the rough location of the user using the GPS chip as shown. | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Permission_For_GPS.png|400px]] </center> |
If the user does not give the app access rights to the GPS unit, the user will need to enter the location information on their own. | If the user does not give the app access rights to the GPS unit, the user will need to enter the location information on their own. | ||
Line 356: | Line 310: | ||
<b> Basic Information (Step 1 of 3) </b> | <b> Basic Information (Step 1 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Basic_Information.png|400px]] </center> |
If GPS is enabled, the app will auto-populate the location when user presses the icon. If not, the user will need to input this field. This field is user-editable even if GPS is enabled. | If GPS is enabled, the app will auto-populate the location when user presses the icon. If not, the user will need to input this field. This field is user-editable even if GPS is enabled. | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Basic_Information_Map_View.png|400px]] </center> |
If the user selects to change the location selected by the GPS due to various reasons like inaccuracy of the location, the user will be able to drag a pin on the map to pinpoint the desired location. | If the user selects to change the location selected by the GPS due to various reasons like inaccuracy of the location, the user will be able to drag a pin on the map to pinpoint the desired location. | ||
Line 369: | Line 323: | ||
<b> Image Upload (Step 2 of 3) </b> | <b> Image Upload (Step 2 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Image_Upload.png|400px]] </center> |
The user will be able to upload images with annotations here. | The user will be able to upload images with annotations here. | ||
Line 376: | Line 330: | ||
<b> Take a Photo (Step 2 of 3) </b> | <b> Take a Photo (Step 2 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Image_Upload_Take_A_Photo.png|400px]] </center> |
The user will be able take a photo to upload here. | The user will be able take a photo to upload here. | ||
Line 385: | Line 339: | ||
<b> Upload from Camera Roll (Step 2 of 3) </b> | <b> Upload from Camera Roll (Step 2 of 3) </b> | ||
− | |||
− | |||
Besides taking a photo to upload, the other alternative to upload image is for the user to upload an image from their iPhone’s camera roll. | Besides taking a photo to upload, the other alternative to upload image is for the user to upload an image from their iPhone’s camera roll. | ||
Line 394: | Line 346: | ||
<b> Crop Image (Step 2 of 3) </b> | <b> Crop Image (Step 2 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Image_Upload_Crop_Image.png|400px]] </center> |
The user will be able to crop an image before annotating here. | The user will be able to crop an image before annotating here. | ||
Line 404: | Line 356: | ||
<b> Annotate Image (Step 2 of 3) </b> | <b> Annotate Image (Step 2 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Image_Upload_Annotate_Image.png|400px]] </center> |
The user will be able to annotate an image here. | The user will be able to annotate an image here. | ||
Line 412: | Line 364: | ||
<b> Finalize Image Upload (Step 2 of 3) </b> | <b> Finalize Image Upload (Step 2 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Image_Upload_Finalize_Image_Upload.png|400px]] </center> |
The user will be able to review the images and annotations chosen before finalizing the images here. | The user will be able to review the images and annotations chosen before finalizing the images here. | ||
Line 418: | Line 370: | ||
<b> Review Feedback (Step 3 of 3) </b> | <b> Review Feedback (Step 3 of 3) </b> | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Create_Feedback_Review_Feedback_1.png|400px]] </center> |
The user will be able to review all the feedback details input and the images and annotations uploaded before finalizing the feedback submission here. | The user will be able to review all the feedback details input and the images and annotations uploaded before finalizing the feedback submission here. | ||
− | |||
− | |||
After reviewing all the information (scrolling down to see all the images), the user will be able to submit the feedback. | After reviewing all the information (scrolling down to see all the images), the user will be able to submit the feedback. | ||
Line 436: | Line 386: | ||
User will be alerted to notifications when: | User will be alerted to notifications when: | ||
− | 1. Other users vote | + | :1. Other users vote on their submitted feedback |
− | |||
− | |||
− | + | :2. Other users comment on their submitted feedback | |
− | + | :3. Other users reported abuse on their submitted feedback | |
− | <center> [[Image: | + | <center> [[Image:Scope_Notifications_Screen.png|400px]] </center> |
The notification icon at the bottom of the omnipresent navigation bar will also display a number to let the user know at a glance the number of outstanding notifications the user has. | The notification icon at the bottom of the omnipresent navigation bar will also display a number to let the user know at a glance the number of outstanding notifications the user has. | ||
Line 454: | Line 402: | ||
The user will be able to close a feedback they have submitted here. | The user will be able to close a feedback they have submitted here. | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Close_Feedback_Screen.png|400px]] </center> |
When viewing a feedback they have created, a user will be able to see an additional button to close the feedback. | When viewing a feedback they have created, a user will be able to see an additional button to close the feedback. | ||
− | <center> [[Image: | + | <center> [[Image:Scope_Close_Feedback_Confirmation_Prompt_Screen.png|400px]] </center> |
When the user chooses to close the feedback, the app will prompt to let the user confirm before closing the feedback. | When the user chooses to close the feedback, the app will prompt to let the user confirm before closing the feedback. | ||
− | Feedback owners are able to close the feedback at any time | + | Feedback owners are able to close the feedback at any time. |
− | |||
− |
Latest revision as of 00:03, 22 November 2014
Home | Project Overview | Project Management | Documentation | Team |
Description | Motivation | Stakeholders | Scope | X-Factor |
[ Priority Scope ] | [ iOS User Flow ] | [ Web User Flow ] |
The Public Feedback & Enquiry Platform iOS Mobile Application is only intended for public users.
Contents
Display All Feedback
Overview
When the user first launches the app, they will be able to see a listing of all the feedback posted by other users in the system here, even if they have not login.
In this view, the user will be able to see the following feedback details
- 1. Time which feedback was submitted
- 2. Location of feedback
- 3. Feedback title
- 4. Image of feedback (if user has submitted one or more images)
- 5. Number of votes
- 6. Number of comments
The app has a fixed navigation bar at the bottom of the screen. This navigation bar is omnipresent throughout the app, and allows the user to get to the core functionalities of the app no matter where they are.
Feedback List Sorting
The feedback listing will be displayed according to feedback with the latest updated activity (posted, commented, voted or approved as non-abusive).
Registration
Overview
If the user wants to submit a feedback they will need to have a user account.
The user will be able to register for an account here.
The following screen will be what the user will see when they are not logged in to the system.
The user will be able to:
- 1. Login with Email & Password
- 2. Register New account
Register New Account
Users will only be able to sign up as a normal public user.
After entering the above information, the user clicks Register to continue with the registration process.
Terms & Conditions
Users who sign up can read the terms and conditions, and they must comply to them for using our system.
Verify Mobile
The verification code will be sent to the user’s mobile number.
This code will be time-sensitive for security purposes, and will become invalid after five minutes.
Upon confirmation of the verification code, the user will be logged in with credentials saved for convenience of using the app next time.
If the verification code has expired or the user input the wrong verification code, the user will be able to click on Resend Verification Code to get a second code.
Login
Overview
In order to submit a feedback, as well as vote and comment on other feedback, the user will need to login to the system which they will be able to do here.
The following screen is what the user will see when they are not logged in to the system.
The user will be able to:
- 1. Login with Email & Password
- 2. Register new account
Successful Login
Upon successful login, the account page will show the user’s email and mobile number, as well as provide the user the option to change their password and log out of the system.
A successful login also allows the user to create feedback by clicking at the icon at the top right of every page.
Password Change
The user will be prompted to enter the details in the screen to change their password.
Display My Feedback
Overview
After the user logins to the system, the user will be able to see a listing of all the feedback that is submitted by the user in the system here.
In this view, the user will be able to see the following feedback details:
- 1. Time which feedback was submitted
- 2. Location of feedback
- 3. Feedback title
- 4. Image of feedback (if user has submitted one or more images)
- 5. Number of votes
- 6. Number of comments
This view is similar to display all feedback function, and allows the user to get to the feedback that they care about the most quickly.
Feedback List Sorting
The feedback listing will be displayed according to feedback with the latest updated activity (posted, commented, voted or approved as non-abusive).
Display Feedback Details
Overview
The user will be able to see the details of the selected feedback in the system here.
In this view, the user will be able to see the following feedback details:
- 1. Feedback owner (user who submitted feedback)
- 2. Time which feedback was submitted
- 3. Location of feedback
- 4. Feedback title
- 5. Images of feedback (if user has submitted one or more images)
- 6. Annotation of feedback (if user has annotated one or more images)
- 7. Number of votes
- 8. Number of comments
- 9. Description of feedback
- 10. Comments made by other users
- 11. Map of feedback (by clicking on the location details)
Vote on Feedback
When the user votes for a feedback, the total number of votes will be highlighted to signify and tell the user that he/she has voted for the current feedback listed.
The user can also comment on a feedback by clicking on the Write Comment button.
The user will be able to swipe horizontally to see all the images uploaded for the feedback.
Comment on Feedback
When the user clicks on Write Comment, this will be shown to the user, along with an invoked keyboard for the user to input the comment.
All input fields that require user’s input will show the keyboard like the screen above.
View Image & Annotations
When the user clicks on the image of the feedback on the detailed feedback page, the image gallery view will be invoked.
Here, the user will be able to see the enlarged image more clearly, along with one of the default/primary annotation description.
The user will be able to tap on the image outside of the annotation boxes to show/hide annotations, which are highlighted on the image by enclosing indicators.
Clicking one of these indicators will show the annotation details for that particular annotation.
The user will be able to dismiss the image gallery view and return to the display feedback details view by tapping on the black area outside of the image.
View Location Map
When the user clicks on the location details of the feedback on the feedback detail page, the map view will be invoked.
Here, the user will be able to see a map with the location of the feedback highlighted.
This location will be determined by the mobile’s GPS (if the user gives access), and can be edited by the feedback owner.
Report Abuse
When viewing any feedback, a user will be able to report a feedback as abusive by clicking on the “Report Abuse” button to flag the feedback to the admin.
Feedback that is reported for abuse will be temporarily removed/hidden from the display feedback listing in the app.
The admin will be notified of the abuse report, to approve or reject the report.
If the admin approves the report abuse, the feedback will stay removed/hidden from users.
If the admin rejects the report abuse, the feedback will be available for user’s access again.
Once a feedback has been deemed safe (report abuse rejected) by the admin, it can no longer be reported for abuse again (the button will be disabled or not shown to the user).
When the user chooses to report a feedback as abusive, the app will show the above screen to allow the user to input the reason of why the feedback is abusive.
Create Feedback
Overview
The user will be able to create and submit a new feedback in the system here.
When the user creates a feedback for the first time, the app will prompt the user to give access rights to its GPS unit, so that the app can determine the rough location of the user using the GPS chip as shown.
If the user does not give the app access rights to the GPS unit, the user will need to enter the location information on their own.
They will still be able to use the app normally.
Basic Information (Step 1 of 3)
If GPS is enabled, the app will auto-populate the location when user presses the icon. If not, the user will need to input this field. This field is user-editable even if GPS is enabled.
If the user selects to change the location selected by the GPS due to various reasons like inaccuracy of the location, the user will be able to drag a pin on the map to pinpoint the desired location.
This is also useful when the user is reporting a feedback but is not currently at the location of the feedback/issue.
Image Upload (Step 2 of 3)
The user will be able to upload images with annotations here.
Take a Photo (Step 2 of 3)
The user will be able take a photo to upload here.
To ensure a consistent and better viewing experience throughout the platform, the photo will be fixed to a certain resolution (to be determined).
To facilitate the image uploading process, the camera will fix the image resolution when the user is taking the photo. This eliminates the need for the user to crop the image after this step.
Upload from Camera Roll (Step 2 of 3)
Besides taking a photo to upload, the other alternative to upload image is for the user to upload an image from their iPhone’s camera roll.
The camera roll with be invoked, and the user will be able to choose an image to from an image gallery viewer.
Crop Image (Step 2 of 3)
The user will be able to crop an image before annotating here.
This step is not required and will be skipped if the user takes a photo to upload. If the user uploads an image from the camera roll, the user will be required to crop the image before continuing.
This is to ensure a consistent and better viewing experience throughout the platform. Therefore, the photo will be fixed to a certain resolution (to be determined).
Annotate Image (Step 2 of 3)
The user will be able to annotate an image here.
This step is not required and can be skipped at the user’s discretion. This allows the user to label the uploaded image to give more details or clarity about the image.
Finalize Image Upload (Step 2 of 3)
The user will be able to review the images and annotations chosen before finalizing the images here.
Review Feedback (Step 3 of 3)
The user will be able to review all the feedback details input and the images and annotations uploaded before finalizing the feedback submission here.
After reviewing all the information (scrolling down to see all the images), the user will be able to submit the feedback.
This ends the process for create feedback.
Notifications
Overview
The user will be able to see all the notifications here.
User will be alerted to notifications when:
- 1. Other users vote on their submitted feedback
- 2. Other users comment on their submitted feedback
- 3. Other users reported abuse on their submitted feedback
The notification icon at the bottom of the omnipresent navigation bar will also display a number to let the user know at a glance the number of outstanding notifications the user has.
Close Feedback
Overview
The user will be able to close a feedback they have submitted here.
When viewing a feedback they have created, a user will be able to see an additional button to close the feedback.
When the user chooses to close the feedback, the app will prompt to let the user confirm before closing the feedback.
Feedback owners are able to close the feedback at any time.