HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2014T1 Team Epsilon Scope iOS User Flow"

From IS480
Jump to navigation Jump to search
Line 339: Line 339:
  
 
== '''Create Feedback''' ==
 
== '''Create Feedback''' ==
 +
 +
<b> Overview </b>
 +
 +
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.
 +
 +
<center> [[Image: Create_Feedback_Permission_For_GPS.png|900px]] </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.
 +
 +
They will still be able to use the app normally.
 +
 +
<b> Basic Information (Step 1 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Basic_Information.png|900px]] </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.
 +
 +
<center> [[Image: Create_Feedback_Basic_Information_Map_View.png|900px]] </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.
 +
 +
This is also useful when the user is reporting a feedback but is not currently at the location of the feedback/issue.
 +
 +
 +
<b> Image Upload (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload.png|900px]] </center>
 +
 +
The user will be able to upload images with annotations here.
 +
 +
 +
<b> Take a Photo (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload_Take_A_Photo.png|900px]] </center>
 +
 +
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.
 +
 +
<b> Upload from Camera Roll (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload_From_Camera_Roll.png|900px]] </center>
 +
 +
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.
 +
 +
<b> Crop Image (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload_Crop_Image.png|900px]] </center>
 +
 +
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).
 +
 +
<b> Annotate Image (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload_Annotate_Image.png|900px]] </center>
 +
 +
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.
 +
 +
<b> Finalize Image Upload (Step 2 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Image_Upload_Finalize_Image_Upload.png|900px]] </center>
 +
 +
The user will be able to review the images and annotations chosen before finalizing the images here.
 +
 +
<b> Review Feedback (Step 3 of 3) </b>
 +
 +
<center> [[Image: Create_Feedback_Review_Feedback_1.png|900px]] </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.
 +
 +
<center> [[Image: Create_Feedback_Review_Feedback_2.png|900px]] </center>
 +
 +
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''' ==
 
== '''Notifications''' ==
  
 
== '''Close Feedback''' ==
 
== '''Close Feedback''' ==

Revision as of 17:54, 12 August 2014

Team Epsilon Logo.png.png

Home   Project Overview   Project Management   Documentation   Team

Description   Motivation   Stakeholders   Scope   X-Factor


[ Priority Scope ] [ iOS User Flow ] [ Admin User Flow ] [ Agency User Flow ]


The PFP iOS Mobile Application is only intended for public users.

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. Date & time which feedback was submitted

2. Location of feedback

3. Detailed location of feedback

4. Feedback title

5. Image of feedback (if user has submitted one or more images)

6. Number of votes

7. Number of comments

Display All Feedback.png

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.

Open & Closed Feedback

The user will be able to filter all the feedback by listing:

1. All Open Feedback

2. All Closed Feedback

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 Facebook

2. Login with Email & Password

3. Register New account


Account Before Login.png

Register New Account

Register New Account.png

Users will only be able to sign up as a normal public user. Signing up as an agency or admin user will not be available.

After entering the above information, the user clicks Register to continue with the registration process.

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 Facebook

2. Login with Email & Password

3. Register new account

Account Before Login.png

If the user chooses to login with Facebook, the app will ask iOS for permission to access the user’s profile information such as the email and name.

The email will be used for the system to do a check to see if an existing account with the same email exists.

If the email exists, the app will log the user in through Facebook authentication.

If the email does not exist in the system, and the user allows access, the user will be redirected to the registration page with the name and email address (depending on which information is available) filled to speed up the user’s registration.

Successful Login

Account After Login.png

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 places the “Create Feedback” icon at the top right of every page to facilitate and encourage the user to submit a feedback.

Password Change

Password Change.png

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. Date & time which feedback was submitted

2. Location of feedback

3. Detailed location of feedback

4. Feedback title

5. Image of feedback (if user has submitted one or more images)

6. Number of votes

7. Number of comments


Display My Feedback.png

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.

Open & Closed Feedback

The user will be able to filter his/her feedback by listing:

1. My Open Feedback

2. My Closed Feedback

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. Date & time which feedback was submitted

3. Location of feedback

4. Detailed location of feedback

5. Feedback title

6. Images of feedback (if user has submitted one or more images)

7. Annotation of feedback (if user has annotated one or more images)

8. Number of votes

9. Number of comments

10. Description of feedback

11. Comments made by other users

12. Agency update of feedback

13. Map of feedback (by clicking on the location details)


View Feedback Detail Before Vote.png


Vote on Feedback

View Feedback Detail After Vote.png

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

View Feedback Detail After Vote.png

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

Image Gallery With Annotation Description.png

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.

Image Gallery With Annotation Boxes.png

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.

Image Gallery Screen.png


View Location Map

Map View Screen.png

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.


Agency Information

Agency Information Screen.png

When the user clicks on the agency name at the display feedback screen, the agency information view will be invoked.

Here, the user will be able to see the name of the handling agency, a short description of the agency, and the address of the agency.

The user can go back to view the feedback details page by clicking on the back button at the top of the screen.


Report Abuse

View Feedback Detail Before Vote.png


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).

Report Abuse Comment Screen.png

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.

Create Feedback Permission For GPS.png

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)

Create Feedback Basic Information.png

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.

Create Feedback Basic Information Map View.png

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)

Create Feedback Image Upload.png

The user will be able to upload images with annotations here.


Take a Photo (Step 2 of 3)

Create Feedback Image Upload Take A Photo.png

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)

Create Feedback Image Upload From Camera Roll.png

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)

Create Feedback Image Upload Crop Image.png

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)

Create Feedback Image Upload Annotate Image.png

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)

Create Feedback Image Upload Finalize Image Upload.png

The user will be able to review the images and annotations chosen before finalizing the images here.

Review Feedback (Step 3 of 3)

Create Feedback Review Feedback 1.png

The user will be able to review all the feedback details input and the images and annotations uploaded before finalizing the feedback submission here.

Create Feedback Review Feedback 2.png

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

Close Feedback