Sketches,+Storyboards,+&+Critique

media type="custom" key="24167258" toc by Team Giga
 * Patrick Campbell – Made 2 primary and 3 secondary interfaces for the in-class assignment. Completed the Learnings from Design Critique section and smaller edits throughout.
 * Joe Stout – Made 2 primary and 2 secondary interfaces as well as 2 refined sketches. Came up with majority of task brainstorming ideas.
 * Olivia Outlaw – Made 2 primary and 2 secondary interfaces for the in-class feedback. Contributed to all but two sections of the final report.
 * Nathan Yang – Sketched 2 primary interfaces, 2 secondary interfaces, and the storyboard. Assigned points to each primary and secondary sketch based on peer reviews. Refined Sketch 7 and wrote description of changes. Fixed spelling, grammar, and formatting issues.

=Abstract=

When a student decides to major in Computer Science, they will have to pass many challenging classes. If they want help in a particular class, finding a tutor can become a chore and just adds on to the stress they are already dealing with in these classes. There are resources that can help with the tutor matching process, but they do not actively inform both the tutor and the tutee that there is a match for them available. We would like to integrate these resources into one application in which both the tutor and the tutee can visit a website, find a good match for themselves, and contact that match through the website. We have conducted interviews and surveys to get our target users’ thoughts on what they think of this solution. We have also created sketches of interfaces and storyboards and got feedback on those as well. We refined the sketches using the feedback from the peer critiques. This application will benefit Computer Science students who want to find a tutor because they need the help and also Computer Science students who want to tutor because they might not have room in their schedule for a part-time job. TerpGenius offers tutors a quick way to earn money and allows tutors work hours in which they are available.

=Introduction=

It is no secret that Computer Science classes can be very difficult. And not just the classes in the department but also some of the required courses in other departments as well like Mathematics. A lot of times students will declare this major with a legitimate interest in the field but just have a hard time picking up the material and end up switching to another major. On the other end of the spectrum, there are students that are actively looking for people to tutor. Whether their reason is for earning money or wanting to assist their peers, they are looking for students that are struggling to grasp the material. While there are many opportunities for students to get help, they are either not well-advertised or just not a good tutoring system. Students can either request a tutor or request someone to tutor by emailing the Undergraduate Office of Computer Science. The flaw in this system is that the database of tutors and tutees has to be manually modified all the time which makes this system prone to mistakes in the matchmaking process. Our system’s database will automatically update if a profile is added or deleted. There are also many tutor-matching websites out there but many of them are not geared specifically towards UMD students. Moreover, some require tutors and tutees to reach out to each other. Our system will match the students together and from there the students will decide if they want to pursue their match or not.

If there was a way for the student that is looking for help and the student that is looking to do the helping to easily find each other, then it can make an impact on both of them. This is exactly what we plan to do, and we will accomplish this by making a website that allows both tutors and tutees to create a profile that specifies what they are looking for and choose their best match by looking at factors like reviews, hourly rates, and possibly even hobbies. We decided to include a section on hobbies in the user’s profile to further enhance the tutoring experience. This can help break the ice between the tutor and the tutee which in the long run can possibly create a bond between the two. The tutees' profiles will have their name, classes they are looking to be tutored in, price range they are willing to pay, hobbies, and possibly a few other pieces of information. Tutors will generally have the same information with reviews from past tutees included. The user will find a daily, updated list of the closest matches based on their preferences. If they proceed with a match, then contact information will be exchanged, and they can go from there.

=Task Descriptions and Storyboards=

The tasks that we thought were relevant to our application included: (1) browsing tutors; (2) instant tutor matching; and (3) registration. Browsing tutors is relevant because students who need help in a subject need to find a tutor in the database that can best support their needs. We want the results of the search to be as close to what the user is looking for as much as possible. Instant tutor matching is relevant because it is a quick way for the tutor and tutee to find an instant match without having to search through numerous tutors or tutees. Registration is relevant because we want our user to spend as little time and effort as possible when creating a profile. However, at the same time, we want to get enough information from them in order to match them with a tutor or tutee. We brainstormed these tasks by first creating an enormous list of tasks on a Google Doc. Each of us voted on three tasks that we thought were the most relevant. We picked the three tasks with the most votes. The original list of brainstormed tasks is shown in the Appendix under the title “Original List of Tasks.”

Registration
Registration is when the user first makes a profile and specifies who they are and what they are looking for. The key to making this process as efficient as possible is to make it easy and intuitive on the user. Otherwise, they might find TerpGenius to be burdensome and end up not using the tutoring system at all.

Browsing Tutors
Browsing tutors allows our users to successfully find a specific tutor with one or more qualities that they are looking for. They can freely searching through the database of tutors. Part of making this easier for the user is allowing them to perform actions like filtering and sorting the tutors by qualities. In part 2 of the storyboard, we reference this task when the main character’s friend is telling the main character that they are able to manually search through many tutors on TerpGenius.

Instant Tutor Matching
Instant tutor matching allows users to narrow down the tutors to one person at the click of a button. This saves our users time by not requiring them to find the best tutor themselves. At the Instant Match screen, they can choose to pick the first automatically matched tutor or pick the next best tutor, and so on. In part 2 of the storyboard, we reference this task when the main character’s friend is telling the main character that they are able to use Instant Match as opposed to searching through an enormous list of tutors.

Storyboard Part 1: A Computer Science student tries to seek help in TA office hours, but the wait is too long. A friend stops by and introduces the student to TerpGenius.



Storyboard Part 2: The friend demonstrates the functionality of TerpGenius and gets matched as a tutor for the student.

=Initial Interface Sketches=

Our sketched primary screens serve as the initial home screen. It will be the first screen that the user will see when they type in TerpGenius's URL into the web browser. Generally, the goal of the primary screen is to have the user log in and/or begin their tutor/tutee search off the bat. The first secondary screen is the screen that the user will see when they click the “Sign Up” button in the primary screen. The goal of this screen is to allow the user to log in with as little time and effort invested as possible. The second secondary screen is the screen that the tutee will see when they are logged in, browsing for tutors. The goal of this secondary screen is to have the user browse through the database of tutors in the most efficient way possible. The third secondary screen is the screen that the user sees when they click on the “Instant Match” button on their home screen when they are logged in. The goal of this secondary screen is to give the user a list of tutors/tutees that best fits their profile and needs.

When performing the sketches for the primary screens, we wanted the interface to be simple yet informative. We did not want the user to be greeted with a whole bunch of words, buttons, and pictures. However, we did want to guide our users so that they would immediately know what to do at the home screen. We took the results from the interviews into consideration. Many people felt that Google was the most intuitive and friendly website to use. As a result, we used Google as a model for creating a design that our users are familiar with. For the secondary screens, we had a similar approach where we wanted to design it so that the user knew what was going on without confusion as to how to perform an activity.

Primary Interface Screen Sketches (Home Page)
Sketch 1: The first sketch is a homepage that displays the TerpGenius name and logo and allows the user to immediately search for a tutor/tutee by course. There is also an option in the upper right corner to sign in or log in. The design was inspired by Google.

Sketch 2: This sketch was designed to be more customizable than the "Google-like" Sketch 1. There are more filters to find a tutor rather than just searching by course name. The user can search for tutors based on price, course, rating, and tutor qualities.

Sketch 3: This sketch automatically allows the user to immediately start searching the database for classes and tutors. Users also have the option of finding a match for themselves all at the click of a button. There is also an option to find out more about the website.

Sketch 4: This sketch gives the user the option to immediately begin searching by class or tutor, or get started on creating a profile. Other options include signing in, contacting support, and learning more about TerpGenius.

Sketch 5: This sketch prompts the user for their login information and gives them the option to search the database. Users can click on the hyperlinks on the right, where the tutors of the day and the most popular search terms are listed. Each hyperlink opens up a new page.

Sketch 6: This sketch is meant to emulate the Google homepage where there is just the name of the website, an option to search the database for tutors/tutees, and an option to login.

Sketch 7: This sketch gives the user many options ranging from searching the database to posting on the homepage.

Sketch 8: This sketch has the same functions as the previous sketch but with additional features like displaying the number of notifications and a button to visit the Messaging page that allows private messages to be sent between users.

First Secondary Screen Sketches (Registration)
Sketch 9: This sketch is the form that the user will need to fill out in order to register. This is a short, yet informative sign up page that asks very close-ended questions so the user does not have to put in a great deal of effort in becoming a user.

Sketch 10: This registration page is more open-ended and allows the user to specifically define what they are looking for. It allows the user to point out how they best learn (e.g. auditory learner).

Second Secondary Screen Sketches (Browse Tutors)
Sketch 11: In this sketch, the user is able to browse the entire database of tutors and sort them by categories like rating and price.

Sketch 12: This sketch allows the user to browse tutors by typing keywords into the quick search on the left side. The results will be displayed on the right side.

Sketch 13: This sketch allows the user to browse the entire database by filtering tutors by categories.

Sketch 14: This sketch allows the user to filter the database of tutors and sort them by particular categories like distance.

Third Secondary Screen Sketches (Instant Match)
Sketch 15: This sketch will allow the user to look through their best matches. The matches will be ordered from best match to worst.

Sketch 16: This sketch depicts the Instant Match function of TerpGenius, which allows the user to quickly find a tutor or tutee. They can accept the recommended tutor or tutee or reject it to display the second best match, and so on.

=Learnings from Design Critique=

In the peer review session, we worked with Team Not Trashy who are designing Litterless. Each member of our team created two sketches for both the primary screens and the secondary screens. A total of sixteen sketches was reviewed.

In the first critique of eight home page interfaces, Sketch 3, 4, and 7 were the top placing designs, respectively. Sketch 3 was commended for its simple design and reduction of clutter on the initial webpage visit. The survey results we received were very keen on Google’s webpage design, so this is not a surprise. This is something to consider very strongly in our final design.

The second highest ranking design was Sketch 4, which focused on a simple design while giving the user the option for a more advanced tutor search. While both designs were grounded in simplicity, the ability to expand the search criteria was received well. Lastly, the reviewers liked the Facebook style news feed of Sketch 7. This gave examples of topics that students can search as well as creating more of a community atmosphere rather than featuring only a lifeless search bar. This is something we will have to consider for our final design as well, but from our results it seems we need to take a clean and simple design route.

In the second round of critiques, each team member sketched two designs for the browse tutors page, which displays after running a search. There is also the option for two types of searches: one that lists all possible tutors, and another that tries to match the single best tutor to the student. The designs that received the top scores were Sketch 14, 12, and 16, respectively. The top design, Sketch 14, was commended for being very informative about the specific tutors after the search. The ability to see the descriptions, reviews, pictures, and prices quickly was a key factor in being the top choice. The second highest point total was Sketch 12, which was very similar in design to Sketch 14 in the tutor display but had an up-vote and down-vote system for the tutor displayed next to the description. Team Not Trashy thought it was more visually impactful than the five star rating system. In third place, we have Sketch 16, which depicts the result of an instant match. This search results in a large description of the single tutor matched to the student with more descriptive information and a larger tutor picture. This seemed to be more personal, and the reviewing group thought this was important in the tutor selection process.

Lastly, we enjoyed hearing some of the closing remarks that the reviewing group had on the design flow and utility of TerpGenius as a whole. They were very interested in the instant matching feature and suggested we take it more seriously in our design. The sign in process was an important topic of conversation to make TerpGenius easier to use right away and provide frequent users with the customizability they deserve. Lastly, Professor Froehlich mentioned that we should research matching websites such as okCupid to pattern our student information points. This way, people have a tried and proven method of simply customizing their matching characteristics.

=Refined Interface Sketches= Sketch 17: Refined version of Sketch 7. The “genius logo” serves as the Instant Match button, rather than redirecting the user to the home page.

One of the members from Team Not Trashy had a question about Sketch 7. In particular, how a user would get to the “Instant Match” feature from the home page? Sketch 7 did not have a link or button that clearly redirects the user to the Instant Match page. We refined Sketch 7 so that there would be an easy way to get instantly matched with a tutor or student. Instead of having the “genius logo” link to the home page, it would instead link to the Instant Match page. First time users may not know what the “genius logo” does, so we could have a tooltip balloon that pops up next to the “genius logo” that states: “Instant Match - Match up with a tutor or student instantly!” We also decided to swap the “Tutors” and “Students” links so that the “Tutors” link comes before the “Students” link. Our formative research results showed a larger percentage of students who were interested in being tutees, rather than tutors. Thus, the “Tutors” link should be closer to the left, as it will likely be used by more visitors.

Sketch 18.0: Refined version of Sketch 10 and 9.

Registration pages are common yet an important section of a website. New users should not be turned away from a site because creating an account is too complex or too long to fill out in one sitting. A good registration page should require minimal effort to complete and should keep the user's interest by implementing eye-catching features. To make the process as quick and easy as possible, the required questions can be reduced to those found in Sketch 10: > More information is needed to utilize the Instant Matching feature, so there will be additional questions that the user can optionally fill out at a later time.
 * 1) What is your name?
 * 2) Do you want to be a tutor?
 * 3) How would you describe yourself?

Sketch 18.1: Continuation of Sketch 18.0, refined from Sketch 9.

Clicking the box with the plus sign in Sketch 18.0 expands more options the user has to fill out in order to use the Instant Matching feature. This does not have to be completed, so they can still browse tutors and have a profile. As the user types in classes, a list of suggested entries drops down from the field which the user can click to complete. This idea is remixed from Google's auto-fill list of suggestions. Learning styles can help guide the tutor on how to approach individual students and overall assist the tutoring process by giving the student what they want. Finally, if they intend to be a tutor themselves, they can provide a list of classes that they have gotten a good grade in (requirements subject to change), and we will use this to find them a student they can teach.

Sketch 19: Refined version of Sketch 12. Influenced by Sketches 11, 13, 14.

This sketch most closely resembles Sketch 12 in design but remixes ideas from the other browse tutor sketches as well as taking ideas from Team Trashy's critiques. The main purpose of the page is to display the tutors available. There are three main ways to filter the list of tutors: > Sketch 11 had a very simple but useful feature of having arrows designating the order of the listings in increasing or decreasing values, and that is used in this sketch to sort by the three categories. Another great idea was brought up during the critique. One person suggested instead of just searching by the tutor's name or class, why not have another category like topics? Topics can be more general. Examples include searching topics such as object-oriented programming, a particular programming language, or computer graphics.
 * 1) By rating
 * 2) By price per hour
 * 3) By classes taught.

=Appendix=

Original List of Tasks

 * Browse tutors
 * Locate tutors (by map?)
 * Instant tutor-matching
 * Create profile
 * Log in (as tutor or student)
 * Search by class
 * Search by tutor
 * Find tutor’s experience / rating / price / distance
 * Communicate with tutor
 * Learn about site
 * Contact support
 * View profile

Scoring
Points for each interface were distributed based on rank: Rank #1 = 100 points Rank #2 = 66 points Rank #3 = 33 points

Primary Interface Screen Scoreboard

 * **Sketch #** || **Points** ||
 * 1 || 99 ||
 * 2 || 66 ||
 * 3 || 33 ||
 * 4 || 33 ||
 * 5 || 100 ||
 * 6 || 66 ||
 * 7 || 166 ||
 * 8 || 233 ||

Secondary Interface Screen Scoreboard

 * **Sketch #** || **Points** ||
 * 1 || 99 ||
 * 2 || 265 ||
 * 3 || 266 ||
 * 4 || 133 ||
 * 5 || 0 ||
 * 6 || 0 ||
 * 7 || 33 ||
 * 8 || 0 ||

Feedback from the Primary Sketches

 * Liked the simplicity from #8
 * Liked the idea of tutors of the day and most popular searches from #1.
 * Liked #2 because the user can specify what they want from the tutor/tutee
 * Liked the facebook idea from #5 and #6.

Feedback from the Secondary Sketches

 * Liked the instant match idea, but how would you get to the instant match page?
 * Some type of reputation system would be useful
 * Make the sign in really fast and easy
 * What is most important when matching? (e.g. prices, people with the best ratings, etc.)
 * Don’t taking instant matching lightly
 * Look at matching websites (ex. okCupid) because we want to make sure that people don’t have to go through a lot to give information to the database.