Presentation is loading. Please wait.

Presentation is loading. Please wait.

P7: Annotated Wireframes

Similar presentations


Presentation on theme: "P7: Annotated Wireframes"— Presentation transcript:

1 P7: Annotated Wireframes
Team Capptivate

2 Sign Up 1 User has to sign up with UWNet ID to retrieve the class information. (UWNet ID can tell our application student registration information.) 2 User can sign up by inputting an , creating a username, and setting a password. Username can be shared across classes and quarters. 3 User has the option to login if already signed up. 1 2 3

3 Login 1 Interface is very simple - helping the logo stand out 2 User can login with address and password 3 User has the option to sign up if they don’t already have an account. 4 If the user has forgotten his or her password, it can be easily reset 1 2 3 4

4 Forgot Password 1 The back button will lead the user back to the login page. 2 If the user has forgotten their password, they can simply input their to get a verification link to set a new password 1 2

5 Reset Password Users have been sent an to reset their password which would link to this page. 1 1 Interface is very simple - helping the logo stand out 2 User can login with address and password 2

6 Homepage 1 2 3 1 The shaded home signals to the users that they are on the home page. 2 User can click here to go to settings. (Accessible on every page) 3 User can logout here (Accessible on every page) 4 User can star favorite classes to have easy access to them. 5 Below each class is an indication of whether or not the user is a student or a TA. 6 Under favorites, all classes are categorized by quarter. 4 5 6

7 Account Settings 2 1 1 Signifying the user is in the edit account section. (Sidebar options change accordingly) 2 Signifying the user is in the settings 3 User can change username, , or password if desired 4 User can select a different language if desired, allowing the website to be adapted to other countries 3 4

8 Account Settings 1 Signifying the user is in the edit notification section 2 User can select what methods they would prefer to get notifications from 3 User can select what types of notifications they would like to receive. Notifications remind the user to fill out the evaluation surveys and engage in the feedback conversations. 1 2 3

9 View Feedback 1 1 2 2 3 4 3 4 5 5 Student View
Signifies the user is viewing other’s feedback 2 User can switch between different tabs to view a specific category of feedback. Categories are easily organized to help the user search for certain feedback. 3 Users can upvote and downvote feedback they agree or disagree with. The number on the arrow gives the user an idea of what the other students are experiencing. 4 Date of submission helps indicate if the feedback is current or outdated 5 Categories for each comment are always displayed to help illustrate overlaps. 3 4 5

10 View Feedback w/comment
Student View 1 User can click on the number of comments to unveil the comments. 2 The relevant comments will appear below in a stacked formed. 1 2

11 Add Comment 1 1 2 2 Student View
User can click on the plus sign to add a comment, easily allowing them to further engage in the feedback conversation 2 A pop-up will appear, allowing the user to submit a comment. A pop-up is easy to use as it allows the user to remain on the same page. 1 2

12 New Feedback 1 2 1 2 3 3 Student View
Signifies the user is on the page to submit feedback 2 User can select one or multiple tags for a feedback. A circle with a “1” helps direct the user to select tags first. Multiple tags are allowed as not all topics fall indirectly into one category. 3 The user can type their feedback in the textbox and submit it. This screen is intentionally very simple to enforce the idea of ease of submitting feedback. 1 2 3

13 TA Evaluations 1 2 3 4 1 2 4 3 Student View
Displays the current week of evaluation 2 Time remaining is shown to remind the students how much time is left to complete the evaluation. 3 TA’s goals are translated (via our algorithms) into question form and asked. This makes it easy on the TA to generate surveys. 4 User can select which number score best represents how they feel about each TA goal/question. Scale is out of five which follows survey best-practices 1 2 4 3

14 Current Feedback 1 1 2 3 2 3 4 4 5 5 TA View
User can switch between different tabs to view a specific category of feedback. Categories are easily organized to help the user search for certain feedback. 2 User can press the plus sign to add a feedback to their personal goals 3 This is student feedback that is directly quoted from what students have submitted. 4 User can delete feedback if it is inappropriate, in case students use profanity. 5 Number on the arrows tells the TA how many students agree. Comments are prioritized based off the number of upvotes. 2 3 4 5

15 Add Current Feedback to Goals
TA View 1 Clear explanation of what the feature will accomplish 2 User can edit the wording of a feedback before adding it to his or her goals. (ex. “Can you host more office hours” to “Host more office hours”) 3 “Cancel” to cancel task in case user has made an error 4 “Confirm” to submit goal 5 Background is shaded to focus the user on the pop-up 1 2 3 4 5

16 View Goals TA View 1 User can edit the wording of a goal if there was an error. 2 User can see what the average rating was from last week, or “-” if this is a newly added goal 3 User can click to easily see in detail the past evaluations for that specific goal. Weak past evaluations will encourage the user to keep the goal for an additional week. 4 User can delete a goal in case of errors 5 User can choose to complete goal if they are satisfied with their evaluations. 1 2 4 3 5

17 Preview Survey TA View 1 2 1 Indicates which week’s worth of feedback this survey is evaluating 2 User can select the closing date of a survey 3 User can edit the wording of a survey question (the default questions are generated by our algorithms) 4 All data is collected in the form of quantitative data that is easy to visualize. Making the survey quick and easy for students. 3 4

18 View Results TA View 1 User can filter by category (easy navigation) 2 User can view evaluations by section to see how other TAs are doing. (Gives insight as to whether or not this is a classwide problem or a TA specific problem.) 1 2

19 View Results TA View 1 User can select which goal they wish to see data for 2 Average rating per category is shown 3 Response rate appears, depending on what week you hover over on the chart. Number of responses helps give more statistical signficiance. 4 Each week a survey is sent out, more data is added to the graph. Helps visualize the TA’s progress overtime 2 1 3 4

20 Key Path Scenarios

21 View Student Feedback and Add To Goal (TA)
1. Login 2. Homepage 3. View Student Feedback User logins with UWNet ID Selects Class to View Feedback 5. View Goals 4. Pop-up Message Selects top rated feedback to add to goals Edits the language of the feedback to be a goal and confirms

22 View Current Feedback, Upvote Feedback, and Add new comment (Student)
1. Login 2. Homepage 3. View Student Feedback Students upvotes and downvotes feedback which they agree/disagree with User logins with UWNet ID Selects Class to View Feedback 5. Submit new comment 4. Expand Comments Clicks on “+” to submit an additional comment to the feedback Clicking on i.e. “1 comment” will expand the comments of the feedback

23 Submit New Feedback and Complete Evaluation (Student)
3. View Current Feedback (default page) 1. Login 2. Homepage User logins with UWNet ID Selects Class to View Feedback 4.1. New Feedback Page 4.2. Evaluation Page Navigates to the “Submit Feedback” page. Submits a new feedback. Navigates to the “Evaluate TA” page to complete a new evaluation for the TA.


Download ppt "P7: Annotated Wireframes"

Similar presentations


Ads by Google