Difference between revisions of "IS480 Team wiki: 2014T1 Team Epsilon iOS User Flow"
(Created page with "<center> 450px </center> <!-- Start of header --> {|style="background-color:#FFFFFF; color:#000000 padding: 5px 0 0 0;" width="100%" cell...") |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 25: | Line 25: | ||
<!-- Start of sub-header --> | <!-- Start of sub-header --> | ||
{|style="background-color:#FFFFFF; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" | | {|style="background-color:#FFFFFF; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" | | ||
− | | style="padding:0.4em; font-size:150%; background-color:#FFFFFF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Project Overview |<font color="#000000" size=2><b> | + | | style="padding:0.4em; font-size:150%; background-color:#FFFFFF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Project Overview |<font color="#000000" size=2><b>Overview</b></font>]] |
| style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | | style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | ||
− | | style="padding:0.4em; font-size:150%; background-color:#FFFFFF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon | + | | style="padding:0.4em; font-size:150%; background-color:#FFFFFF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Storyboard |<font color="#000000" size=2><b>Storyboard</b></font>]] |
| style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | | style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | ||
Line 35: | Line 35: | ||
| style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | | style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | ||
| style="padding:0.4em; font-size:150%; background-color:#E0D1FF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Scope | <font color="#000000" size=2><b>Scope</b></font>]] | | style="padding:0.4em; font-size:150%; background-color:#E0D1FF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Scope | <font color="#000000" size=2><b>Scope</b></font>]] | ||
+ | |||
+ | | style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | ||
+ | | style="padding:0.4em; font-size:150%; background-color:#FFFFFF; border-bottom:4px solid #000000; border-top:4px solid #000000; text-align:center; color:#828282" width="10%" | [[IS480 Team wiki: 2014T1 Team Epsilon Design Overview | <font color="#000000" size=2><b>Design</b></font>]] | ||
| style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | | style="border-bottom:4px solid #000000; border-top:4px solid #000000; background:none;" width="1%" | | ||
Line 58: | Line 61: | ||
<!-- Start Content --> | <!-- Start Content --> | ||
− | |||
− | + | == '''iOS Functions''' == | |
+ | The Feedback@SG iOS Mobile Application is only intended for public users. | ||
+ | |||
+ | [[Image:Scope_iOS_User_Process_Flow.png|650px]] | ||
== '''Display All Feedback''' == | == '''Display All Feedback''' == | ||
Line 395: | Line 400: | ||
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. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 19:47, 22 November 2014
Home | Project Overview | Project Management | Documentation | Team |
Overview | Storyboard | Stakeholders | Scope | Design | X-Factor |
[ Priority Scope ] | [ iOS User Flow ] | [ Web User Flow ] |
Contents
iOS Functions
The Feedback@SG 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. 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.