TerpGenius: Online Tutoring System

by Team Giga
  • Patrick Campbell – Created and shared a Google Doc to take notes during the in-class design critiques; worked on Prototype #2 in myBalsamiq, wrote the Abstract and Implications for Design sections
  • Joe Stout – Designed Prototype #1 and Prototype #2 in myBalsamiq; wrote the Results From the Design Critique section
  • Olivia Outlaw – Designed Prototype #2 in myBalsamiq; wrote the The Mid-Fidelity Prototypes and Running the Design Critique sections
  • Nathan Yang – Designed Prototype #1 and Prototype #2 in myBalsamiq; created the flow diagrams for Prototype #1 and Prototype #2; uploaded all images from myBalsamiq; wrote the Learnings from this Project Assignment and Appendix sections; corrected spelling, grammar, and verbiage

Section 1: Abstract

TerpGenius is an online tutoring system designed for Computer Science students at the University of Maryland, College Park. Its goal is to allow students to seek help from tutors and to allow students to market their tutoring services. During the design critique sessions, we asked our participants to perform the following tasks: (1) browse tutors, (2) register / sign-in, and (3) find an instant match.

The first prototype, titled "One, Two, Three, Match!", has a simple layout that utilizes iconography. It features three large, square buttons on the home page, specifically "Browse Tutors," "Find Students," and "InstaMatch." The first prototype only uses the user's location to perform an instant match. The second prototype, titled "Search Engine and Questionnaire," features a Google-like search bar on the home page. Unlike the first prototype, it features an in-depth questionnaire so that the instant match process can perform a match using more information about the user.

To evaluate both prototypes, we asked the participants to voice their thoughts while performing a specific task. During each session, we recorded the participants' thoughts and also took notes on how they completed the tasks. We recorded any difficulties or confusions that the users experienced while completing a task as well.

From the design critiques, we found that the second prototype was more accessible for browsing tutors manually. It also had a better matching system since it required a questionnaire to be filled out before allowing an instant match. Some of our colleagues recommended that we add a direct link to InstaMatch from the final registration page. They also suggested changing the functionality of the “Skip” button, stating that it should skip the current question rather than send the user back to the main page. The design critics also advised offering several matches rather than just one at a time. Our plans for revision include modifying the InstaMatch feature based on the feedback we received. These changes include improving the InstaMatch questionnaire so that a better match is found, adding an InstaMatch link after confirming an account via an email link, modifying the progress bar in the InstaMatch questionnaire, and changing the functionality of the "Skip" button. These are the main changes we intend to make. We will also consider making small changes that were suggested in the critique, such as allowing users to specify exactly how much they are willing to pay for tutoring services rather than providing a broad range.

Section 2: Task Descriptions

We formulated the three primary tasks by brainstorming the main objectives of TerpGenius. We then used feedback from the peer review sessions to refine the main tasks. The tasks browsing tutors, user registration and sign in, and instant match are all important features of an online tutoring system. Being able to quickly and efficiently perform these three tasks will convince users that TerpGenius is a useful tutor and tutee matching system. Below is an outline of the three tasks that were performed on our prototypes by the participants.

1. Browsing Tutors

This task requires the user to navigate to a list of tutors that are available when the student is in need of a tutor. We did not give specific tasks to the user other than to see if he or she could figure out how to browse for tutors from the homepage of both prototypes. Browsing tutors from the homepage quickly is key for users who do not want to register and are in a rush to find a tutor at the last minute. The peer critics indicated that some users would like see the tutors available before committing to a registration and then determine afterwards whether they want to register as a user. We agreed with the critiques and made two different processes but kept it as a primary task for user testing.

2. User Registration and Signing In

User registration is a critical process that can grow the user base of TerpGenius and is pivotal to the customized experience that we want to provide students and tutors. From the Browse Tutors page, we asked our participants to register an account on TerpGenius and sign in after receiving an email confirmation of their registration. This allows the user to begin customizing his or her student or tutor profile so others can view their information. We also asked them to create an account so that they could be introduced to the instant matching feature. The critics from the peer reviews gave us the direction we needed for both designs by emphasizing the need to focus heavily on the design of the registration process. Consequently, both prototypes utilize different registration processes so we could get useful comparative feedback from the participants. By approaching the registration process differently but still keeping it as a main task, we are iterating to a much better design. After the users registered on both prototypes, they were asked to log in to the system.

During the sketching phase, we did not consider user registration as a primary task. However, Professor Froehlich mentioned that the registration process could make or break the success of TerpGenius. We realized the importance of gathering information from our users in a way that is not too demanding in order to find the best match and keep them as users of the system. Thus, the first prototype had a simple registration form that did not ask for too many details from the user, while the second prototype required users to go through several pages in order to register.

3. Instant Match

Instant match is a unique feature in TerpGenius that performs a quick match between a student and tutor based on information provided by the user such as his or her distance, price, expertise, gender, and rating preferences. Performing an effective instant match requires extra information from the user besides the basic email address, birthday, gender, username, and password requirements of most websites. We made the instant match process separate from user registration (e.g. an instant match does not occur immediately after user registration; the user has to manually request an instant match). This way the user can choose how they would like to find students or tutors, either by manually browsing and filtering tutors and students or by performing an instant match.

We asked the participants to perform an instant match after they had signed into the website with their newly registered account. Once completed, a tutor would be matched based on the information they provided. During the peer critiques, there were many comments about making the instant match process quick and simple so the user would not view the task as burdensome. This led us to make the two prototypes handle the task very differently in order to determine the usability of each instant match version and decide on the best final design. One instant match version is more visual and interactive, while the other is similar to a one-page registration form. This allows us to receive feedback from two different approaches to the instant match process.

Section 3: The Mid-Fidelity Prototypes

Our first mid-fidelity prototype was aimed at simplicity, so our users do not have to put in too much effort in providing information about themselves. The disadvantage to using this design is that we would not get enough information from our user in order to make an intelligent match between a student and a tutor. Our second mid-fidelity prototype was aimed at providing a more thorough match by asking the user for a lot more information than the first prototype. The disadvantage to using this design is that the user will have to put more time to perform an instant match. Users might not be willing to use TerpGenius if the instant match process is tedious. Both of our mid-fidelity prototypes are similar because they both allow the user to start browsing tutors and students and use InstaMatch from the homepages. While there are many differences between our two mid-fidelity prototypes, the main differences are in the homepages, the browse tutors page, the registration process, and the InstaMatch process. Both of our prototypes have their unique advantages and disadvantages. However, overall, they are designed to assist the user in completing the three primary tasks.

Mid-fidelity Prototype Design #1: One, Two, Three, Match!

In the first prototype’s homepage (Figure 1), the user will be able to login by entering their information in the text fields at the top. There are three large buttons that the user can click on, which are “Browse Tutors”, “Find Students”, and “InstaMatch," respectively.

external image U7wEEjD7f68xgrF1fWbUrknhwvAqUVcT67nUK83Qrm63RN-LM6p7ZNS6lIIv-wgUifMJ0V1syhLhz9bVD3-rRSSKTmk1HvyeuABaDTmtjX7yg-CKToBhaLqTAQ
Figure 1: Homepage when the user is not logged in. The only difference is that the InstaMatch button is grayed out because the user must be logged in.

Both the registration (Figure 2) and InstaMatch (Figure 3) processes in the first prototype are very short and to the point, allowing the users to complete the process at the click of a button.

external image ZpfUBiv_SQf6-31dGigL8c3oaQ3VORKYAXYzUzGE4XnSrYiiT8daQ4JKmnMALNePYlgeu5kqB-9dnC8EUrlxQO9jbF-7k6xC2yNWFwbyIr7vol3c_v1f2T-G7w
Figure 2: Registration. The user only has to fill in this information and click the green “Sign up” button.

external image eyH2d5Buba8IMnVcQYYl7ovfACgaV54Rgi7tzbw5x0CKw7-DlYArq5yhAhsqZcIzGme0nfDsXS1cHaOqoWtx6RpGRG_S8a--J7LBhAklpo-jdVQPgUoC78O6XQ
Figure 3: This is the screen that shows up when the “InstaMatch” button is clicked on the home screen when the user is logged in. If the user chooses the “Yes” button they will be matched with this tutor. If the user chooses the “No” button, then another tutor will show up, and they will be given an option to accept or decline that tutor.

The Browse Tutors page (Figure 4) in the first prototype lists a series of tutors.

external image wPpX6oiZKKo0la-_sE5KVafvURe8MNPe-wh0mBJZdWPFqpCNfmfAGshskeSAD3ZaqoMU2yWXH9M8mqPksdrUVo47NOh5-21CiGPrrIdTCBIgLUKZnmJfCpm9Pw
Figure 4: This page is what shows up when the user clicks the “Browse” button on the homepage and then clicks on the "Tutors" tab on the left of the displayed results. The user is able to filter the results by students, tutors, starred (like bookmarks), subject and zip code. They can also sort the results by distance, experience, price, and rating.

Link to Prototype #1 on myBalsamiq: https://umdhci.mybalsamiq.com/projects/434prototype

Mid-fidelity Prototype Design #2: Search Engine and Questionnaire

The second prototype’s homepage (Figure 5) is simple and clean like Google’s homepage which includes a register and sign in button (both buttons lead to separate pages) and a search bar with a “Search” and “Browse” button underneath.
external image npo_41dpUik-JpmqKZmQfEhzaUmnlV4OYN8Iz904gvA6U1NFJXh5VizUf9pr4Yse2tVB-ryqvmcOc6Duj0ximDNKGm0o8PczSkKH1_VBtfFgHHaQmbWm5wIlvw
Figure 5: Homepage when the user is not logged in. The InstaMatch button that gets displayed for logged in users, under the “Search” and “Browse” buttons, is hidden.

The registration (Figure 6) and InstaMatch (Figure 7) processes in the second prototype were more like questionnaires that required our users perform more work in order to receive a better match.

prototype2-register-mybalsamiq.png
Figure 6: This is a screenshot of all of the screens that our user must go through in the registration process (a lot more than the first prototype). In this process, the user is asked to provide personal information such as gender, birthday, where they live, what they are looking for (student or tutor), and an email and password for creating their account.

prototype2-instamatch-mybalsamiq.png

Figure 7: This is a screenshot of all of the screens that our user must go through in the InstaMatch process (a lot more than the first prototype). In this process, the user must provide information like the type of learner they are (e.g. auditory, visual, active/kinesthetic), the type of work that helps them learn (e.g. homework, problem sets, real world applications, etc.), tutor gender preference, distance preference, and price preference. By the end of this process, the user will see a screen similar to Figure 3, allowing the user to accept or reject an instant match.

The browse tutors page (Figure 8) in the second prototype utilizes a two-column layout to display the list of tutors (as opposed to a one-column layout).

external image xz6pwsLxacbJfoyn1kw6rfgZ9Rs_T5pUe812sec-qMXC8yutdNLRq2DJ-l7H2xc8nC-dz6PXbwQyu0S-vR9mFmw-CpHyO8V8ScTf1Ot8WSjkcxegvd5Un-hUcw
Figure 8: This page is what shows up when the user clicks the “Browse” button on the homepage. The user is able to filter the results by students, tutors, and zip code. They are also able to sort the results by distance, experience, price, and rating.

Link to Prototype #2 on myBalsamiq: https://umdhci.mybalsamiq.com/projects/terpgenius

Section 4: Running the Design Critique

In our design critiques, we paired up with Team Hermes, the group that is designing the SmartRoad app. At the beginning of the design critique, we explained TerpGenius's main use cases, who our target users are, and what we want to accomplish. We then had them test the two prototypes we designed with myBalsamiq. As they executed the three primary tasks, we observed their actions while recording and answering any questions or comments they had. In our sketches and storyboard user testing sessions, we had our participants try to accomplish the tasks we gave them without any help from anybody (unless they were stuck). Also, if they had any questions or feedback, we asked the participants to voice them. In this design critique, however, our participants tried to accomplish the tasks as a group. While we did ask them to voice their thoughts, we also brought up critiques that we had from the sketches and storyboards and asked them how they felt about it (whether they agreed or disagreed with the suggestions and why). In this critique, it was easier to get a feel of how first-time users would interact with our website because now they are using the hardware devices (e.g. mouse, keyboard, etc.) that a normal user would use in the real world. This made the observations more informative and realistic than when we observed the sketches and storyboard user testing sessions. In the paper prototypes, we were not sure if the source of our participants’ confusion on what to do next was due to the actual design or the way we drew objects and elements. For example, they might not have recognized a selection bubble because we drew it as a circle without any indication as to what it was; it did not resemble radio buttons that are common on many web pages.

Section 5: Results from the Design Critique

During the design critique session with Team Hermes, we gained an outside perspective of our prototypes’ design that was well-informed thanks to the concepts taught in the course. When browsing through the list of tutors on our website, Prototype #2 was viewed as being more accessible for manually finding an ideal tutor. Prototype #2 was also regarded as having a more superior matching system than Prototype #1 (however, at the cost of increased user involvement). Additionally, we received many suggestions that can improve the functionality of Prototype #2’s InstaMatching. For example, members from Team Hermes suggested adding a direct link to InstaMatch in the final registration page, changing the functionality of the “Skip” button to skip the current question rather than send the user back to the main page, and offering several matches rather than just one at a time.

What was most surprising was our participants' reactions to Prototype #2’s browsing layout when compared to Prototype #1. When first presented with Prototype #1’s browsing page, the only real criticism was the difficulty of browsing multiple tutors at once due to the single column layout. However Prototype #2 was introduced, the two-column layout was seen as “cluttered,” and the peer reviewers preferred one single column (without mentioning Prototype #1’s design.) The other fact that made this reaction surprising was that the group felt they had more control when browsing and filtering results in Prototype #2 and were more likely to find an optimal match over the first prototype. This is surprising because Prototype #2 allows one to filter by distance and type of user (tutor or student), but Prototype #1 also does this in addition to filtering by subject. There is also an option for users to type in their own search terms, which offers arguably more control.

The more useful pieces of feedback were associated with the InstaMatch feature. Overall, having an involved questionnaire for the InstaMatch process was preferred over not having one. This critique showed us that users are willing to take the time to fill out a survey if it means giving them a more optimal match when compared to the other prototype that matches solely on student-tutor distance. Next, having a way for users to skip a question in the InstaMatch survey may boost survey completion rates and even show us as designers what people consider to be important qualifications in finding a tutor. Finally, in both prototypes, we only presented a single match at a time to the user, which was viewed as too limiting for our participants. It may be beneficial for us to display multiple matches or even a list of their top matches.

It would seem that the sketch critiques from TA04 was more valuable for our prototypes. From that critique, we were able to narrow down several different ideas to two distinct prototypes. We focused on the importance of features and methods such as the rating system and how to go about designing the InstaMatch process. The mid-fi prototype critiques evaluated the layout and look of the two prototypes because the core ideas behind our tasks (such as the InstaMatch process) had already been fleshed out. This may be due to the fact that users may be more willing to provide honest feedback if they see that the prototypes did not take too much time to create. The mid-fi prototypes definitely consumed more time than the paper prototypes.

Section 6: Implications for Design

The main regions of focus for improving TerpGenius include moving forward with our customized InstaMatch process, simplifying our browse tutors process by combining advantages from both prototypes, adding a visually-appealing progress bar to the InstaMatch questionnaire, and displaying more than one match in the final screen of the InstaMatch process.

The customized InstaMatch process was critical to our participants in the paper prototypes. It was also the main criticism of our mid-fi prototypes. Prototype #1 only match based on distance, while Prototype #2 matched based on a short questionnaire provided to the user. While we initially thought the questionnaire would be too long and tedious for the user to complete before getting instantly matched, the other group told us that it's worthwhile to complete a thorough questionnaire in order to find the most optimal matches.

The browse pages from the two prototypes received mixed reviews. The first prototype was criticized for being too simple, while the second prototype was criticized for being too cluttered. We intend to port both designs onto a web page in order to judge whether or not the page is too cluttered. From there, we will implement the filtering features since the other group found them useful. We will most likely choose a single column for displaying tutors rather than using a two-column layout.

The last two changes we intend to make have to do with the InstaMatch feature. One is to add a visually-appealing progress bar to the questionnaire, and another is to add more than one InstaMatch result to the final page. The progress bar was suggested so that the user has an idea of how many questions they would have to answer. Users would be much more inclined to finish the survey if they knew how much more they had to complete. Having multiple results on the InstaMatch final screen will give the user a better impression of the feature since it gives the user a set of successful matches rather than a single match that could be considered an incorrect match by the user. For example, if the user's highest priority is the cost of the tutor and the matching algorithm decides to weigh distance more, then the student may want to pick the second or third matched tutor to save more money. This leaves the final decision to the user while still providing a customized matching system.

Section 7: Learnings from this Project Assignment

We first experimented with a prototyping tool called ProtoShare (http://www.protoshare.com/), which allows one to build website wireframes by using a drag-and-drop interface. ProtoShare provided a great deal of drag-and-drop HTML elements such as horizontal lines, iframes, form elements, and containers. It did not require us to know how to write HTML, CSS, or JavaScript. However, we quickly learned that the free trial version only allowed one editor, as it immediately asked us to pay when trying to add multiple collaborators to the prototype project. ProtoShare charges a hefty fee of $29-59 per month per editor, so without a budget, we had to find a different prototyping tool.

We decided to select myBalsamiq as our prototyping tool since Jon had a class account that was free for everyone to use. myBalsamiq had a user-friendly interface that allowed one to easily create mockups by dragging and dropping elements onto a page. myBalsamiq also had a low learning curve as we were able to produce the first prototype design in a matter of three hours. Overall, the factors of price (free), ease of use, and ability to have multiple collaborators influenced our decision of going with myBalsamiq.

myBalsamiq had an inviting user interface. It categorized the user interface elements at the top and displayed a wide toolbar that allowed one to drag and drop common elements like text, containers, and form elements onto a page. myBalsamiq also had horizontal and vertical guard lines that assisted in placing elements in specific positions (e.g. center of the page). The tool featured a properties toolbar that allows one to customize elements, such as changing font size, font color, and background color. myBalsamiq also supported layering, allowing elements to be stacked on top of each other.

While myBalsamiq had many positive features, it also came with limitations. We could not modify the height of some elements like the search box. We had to use a multi-line text box in order to create a text field with a specific height. myBalsamiq also lacks an option that lets you set the default font used throughout the mockup. The default font family is set to Balsamiq Sans, and the default font size is set to 13pt. The 13pt font size displays text that is a bit small on large screens. Also, we could not change the font family used throughout the prototypes, which prevents us from utilizing typography. myBalsamiq could also use a better file management system. All custom images had to be placed under the "Site assets" or "Project assets" category, and there was no option that allows one to create custom folders to sort project files. Lastly, myBalsamiq provided no controls for rotating elements. Thus, we had to manually rotate the images of elements in an image processing software like Photoshop in order to display them in the correct orientation in the mockups.

Mid-fidelity prototyping allowed us to create an interactive prototype that communicated our design. It helped reveal the different types of functionality that TerpGenius will deliver and what it would be like for users to interact with the website. Mid-fidelity prototypes, similar to paper prototypes, are still relatively inexpensive to implement and change since there is no coding involved. While the paper prototypes provided a high-level view of the overall structure of the website, the mid-fidelity prototypes helped us unravel use cases (how the system should interact with users) and graphical requirements like navigation elements, form elements, and buttons. If we had started with mid-fidelity prototyping rather than paper, then we would have had less user testing and feedback. We would not have caught design mistakes early in the development process by not anticipating common user errors and increasing the chance that the final product could have design flaws. Paper prototyping is still important since it helps a team brainstorm how an interface might look.

If we had to do the assignment again, we would explore other free prototyping tools like InVision (http://www.invisionapp.com/) and Webflow (
https://webflow.com/) to see if they are better than myBalsamiq at creating mid-fidelity prototypes. myBalsamiq creates mockups that are not exactly mid-fidelity. It is more of a tool that allows creating prototypes that are between low-fidelity and mid-fidelity. Many interactive features like selecting an item from a drop-down menu and hovering links are missing.

Section 8: Appendix

Notes from In-class Design Critiques


Prototype #1: One, Two, Three, Match!


Browsing Tutors


Goes to sign in first

Enter email and pass, login

Click browse, completed


User Registration and Signing In


Fill form, etc

Login, back to main page


Instant Match


Click instant match

Distance only

Wants more customization in instant matching


Prototype #2: Search Engine and Questionnaire


Browsing Tutors


Browse, fields at the top to filter, other one harder to instant match. can filter on own

More information available

Rather 1 column than 2


User Registration and Signing In


Better, not all fields at once, suggested step count per page

Other says one page better, less inclined to finish, suggested progress bar style


Instant Match


More flexibility to match, customized.

When register, maybe add match info automatically right away

Expected skip the question rather than whole process (skip question, skip all)

Multi button, expected fill in

Type in number in cost rather than buttons

Process?

Expected more detailed survey, more your choice rather than them choosing for you

Option to read reviews, amazon most helpful

Another match rather than instant match again

More than 1 instant match per page to compare (checkmark system)

Screen Flow Diagrams


Prototype #1: One, Two, Three, Match!


Browsing Tutors


prototype1-browse-tutors-flow-diagram.png
Figure 9: The user can click on the "Browse Tutors" button on the main page in order to get to the "Browse Tutors" page. At the "Browse Tutors" page, the user can click on the drop-down menu to sort the results by distance, experience, price, and rating. Clicking on the TerpGenius logo at any of the pages brings the user back to the main page.

User Registration and Signing In



prototype1-register-login-flow-diagram.png
Figure 10: To register on TerpGenius, the user can click on the "Sign up" button at the top right corner of any page while not logged in. For example, the diagram above shows that the user can get to the Registration page by clicking on the "Sign up" button on the Main Page and the Browse Tutors page. After filling out all of the required fields on the Registration page and clicking on the green "Sign up" button, the user is brought to a registration confirmation page. The user can enter his or her credentials to login to TerpGenius. After logging in, the user can access the user drop-down menu that allows modifying account settings, viewing his or her own profile, and signing out.

Instant Match


prototype1-instamatch-flow-diagram.png
Figure 11: Using InstaMatch requires the user to be logged in. After logging in, the user can click on the "InstaMatch" button on the home page to get matched up with a tutor. The user can either accept the match, which brings them to a congratulations page, or reject the match, which matches them with a different tutor.

Prototype #2: Search Engine and Questionnaire


Browsing Tutors


prototype2-browse-tutors-flow-diagram.png
Figure 12: To browse tutors, the user can click on the "Browse" button on the main page. On the Browse page, the results can be filtered by tutors, students, or both, distance, zip code. The list can also be sorted by distance, experience, price, and rating.

User Registration and Signing In


prototype2-register-flow-diagram.png
Figure 13: To register, users can click on the "Register" button in the upper right corner of any page while not logged in. For example, the diagram above shows that the user can reach the initial registration page from the Main page and the Browse page. There are a total of seven screens associated with the registration process. The user can use the red "Back" button to return to the previous step. The green "Next" button brings the user to the next step.

prototype2-login-flow-diagram.png
Figure 14: After registering, the user can click on the "Sign In" button located at the top right corner of each page. For example, the diagram above shows that the user can get to the login page by clicking on the "Sign In" button on the Main page and the Browse page. After logging in, the user is brought back to the Main page, which reveals a user menu widget in the upper right corner. Clicking on the user menu widget brings a menu that allows the user to view his or her profile, modify settings, and sign out. Signing out brings the user back to the Main page.

Instant Match


prototype2-instamatch-flow-diagram.png
Figure 15: After logging in, the user can perform an instant match by clicking on the blue "InstaMatch" button on the home page. The user has to go through a series of ten screens to get matched. At any of the InstaMatch questionnaire pages, the user can click on the red "Back" button to return to a previous step or the red "Skip" button to save their answers and return to the questionnaire at some point in the future. The green "Next" button brings the user to the next step of the InstaMatch questionnaire process. Completing the InstaMatch questionnaire is required to get instant matched.

Screenshots from myBalsamiq


Prototype #1: One, Two, Three, Match!


01-main-page.png
Figure 16: The TerpGenius home page. It features an email address text field and a password text field that allows the user to login at the home page. There is also a "Sign up" button to the right of the "Login" button that allows new users to register. The home page features three square buttons for navigation purposes: 1) Browse Tutors; 2) Find Students; 3) InstaMatch. The InstaMatch button is grayed out and disabled if the user is not logged in.

02-main-page-logged-in.png
Figure 17: Users who have logged in will notice changes to the main page. The InstaMatch button is no longer grayed out and is enabled. The "Login" and "Sign up" buttons have been replaced with a drop-down user menu.

03-main-page-logged-in-user-menu-dropdown.png
Figure 18: Clicking on the drop-down user menu displays three options: 1) Account for modifying account settings; 2) View Profile for viewing the user's own profile; and 3) Sign Out to log out of the website.

04-browse-tutors.png
Figure 19: The Browse Tutors page. Users can use the search box to filter the results. They can also sort the results using the drop-down menu.

05-browse-tutors-dropdown.png
Figure 20: Clicking on the drop-down menu on the Browse Tutors page allows the user to sort the results by distance, experience, price, and rating.

06-registration.png
Figure 21: The registration page requires the user to enter his or her first name, last name, e-mail address, desired password, gender, location, birthday, and whether or not they are interested in being a student, tutor, or both. The green "Sign up" button allows the user to submit the form.

07-registration-confirmation.png
Figure 22: The registration confirmation page lets the user know that a confirmation email has been sent to his or her email address. The user can also request the system to re-send the confirmation email, and he or she can also change their email address if it was incorrectly entered on the registration form.

08-instamatch-tutor1.png
Figure 23: An example of using instant match to find a tutor. The user has the option to accept the tutor or reject the tutor.

09-instamatch-tutor1-accepted.png
Figure 24: Accepting a tutor from the InstaMatch page brings the user to a congratulations page. The user can then schedule an appointment, send the tutor a message, or change tutors.

10-instamatch-tutor2.png
Figure 25: Another example of using instant match to find a tutor. The user can either accept the tutor or reject the tutor.

11-instamatch-tutor2-accepted.png
Figure 26: A congratulations message appears after accepting a tutor from an instant match. The user is presented with three buttons: 1) Schedule Appointment; 2) Send Message; and 3) Change Tutor.

Prototype #2: Search Engine and Questionnaire

2-01-main-page.png
Figure 27: The home page inspired by Google. It features a search box that allows users to search for tutors, students, topics, and classes. Users can also click on the "Browse" button to browse tutors, students, and both. There is a "Sign In" and "Register" button in the top right corner.

2-02-login.png
Figure 28: The login page inspired by Google. The user has to input his or her email address and password and then click on the "Sign In" button. If the user does not have an account, they can click on the "Register" button to create one. The "I forgot my password" link allows the user to reset his or her password in case they forgot it. The "Remember Me" check box, when clicked, allows the user to keep their login session even after closing his or her browser.

2-03-main-page-logged-in.png
Figure 29: The home page when logged in. The "Sign In" and "Register" buttons have been replaced with a user menu widget. Also, the blue "InstaMatch" button appears below the "Search" and "Browse" buttons.

2-04-main-page-logged-in-user-menu-dropdown.png
Figure 30: Clicking on the user menu widget brings up a menu that allows the user to view his or her profile, modify settings, and sign out of TerpGenius. The user's profile picture is displayed as a thumbnail next to their name in the user menu.

2-05-browse.png
Figure 31: The Browse page utilizes a two-column layout to display results. Users can filter the results by tutors, students, or both, distance, and zip code. They can also sort the results.

2-06-browse-tutors-dropdown.png
Figure 32: The drop-down menu that allows users to filter results by tutors, students, or both.

2-07-browse-distance-dropdown.png
Figure 33: The drop-down menu that allows users to filter results by different distances.

2-08-browse-sorted-dropdown.png
Figure 34: The drop-down menu that allows users to sort results by distance, experience, price, and rating.

2-09-registration-1.png
Figure 35: The initial registration page displays a short message and a green "Start!" button that allows the user to begin the registration process.

2-10-registration-2.png
Figure 36: The second registration page asks for the user's gender. The red "Back" button" brings the user back to the initial registration page. The green "Next" button brings the user to the next step in the registration process.

2-11-registration-3.png
Figure 37: The third registration page asks for the user's birthday.

2-12-registration-4.png
Figure 38: The fourth registration page asks for the user's location, either a zip code or a city.

2-13-registration-5.png
Figure 39: The fifth registration page asks whether the user is interested in finding tutors, students, or both.

2-14-registration-6.png
Figure 40: The sixth registration page asks the user to enter his or her email address and create a secure password.

2-15-registration-7.png
Figure 41: The registration confirmation page tells the user that a confirmation email has been sent to their email address. He or she needs to click on the link inside that email to confirm their account. Users can ask the system to resend the activation email, and they can also change their email address if it was incorrectly entered in the previous step.

2-16-instamatch-1.png
Figure 42: The initial InstaMatch questionnaire page. It displays a brief message and features a green "Start!" button that brings the user to the next page.

2-17-instamatch-2.png
Figure 43: The second InstaMatch questionnaire page is designed to find out whether or not the user is an auditory learner. Users can click on the red "Skip" button to save their InstaMatch questionnaire answers so that they can return to the same spot they left off. The green "Next" button brings the user to the next step in the InstaMatch questionnaire process. Users have to complete the InstaMatch questionnaire before getting instant matched.

2-18-instamatch-3.png
Figure 44: The third InstaMatch questionnaire page is designed to find out whether or not the user is a visual learner. The user can click on the red "Back" button to return to the previous page,

2-19-instamatch-4.png
Figure 45: The fourth InstaMatch questionnaire page is designed to find out whether or not the user is a kinesthetic learner.

2-20-instamatch-5.png
Figure 46: The fifth InstaMatch questionnaire page asks the user to select items that help him or her learn. The gray progress bar at the bottom of the page shows the user how far he or she is away from completing the survey.

2-21-instamatch-6.png
Figure 47: The sixth InstaMatch questionnaire page asks the user if they have a gender preference for tutors.

2-22-instamatch-7.png
Figure 48: The seventh InstaMatch questionnaire page asks the user to specify his or her preference for tutors within a given distance.

2-23-instamatch-8.png
Figure 49: The eighth InstaMatch questionnaire page asks the user how much he or she is willing to pay for a tutor.

2-24-instamatch-9.png
Figure 50: After completing the InstaMatch questionnaire, the user can ask the system to perform an InstaMatch.

2-25-instamatch-10.png
Figure 51: An example of using InstaMatch to find a tutor. The page above displays the tutor's name, a brief biography, location, credentials, 5-star rating, rate, and number of reviews. The user is presented with three buttons that allow sending the tutor a message, scheduling an appointment, and finding a different instant match.

Interactive Prototypes in PDF

Below are PDF versions of the two prototypes created in myBalsamiq. They are interactive in the sense that you can click on elements to navigate to other pages.

Prototype #1: One, Two, Three, Match!



Prototype #2: Search Engine and Questionnaire