Fear the Tutor: Design


Step 1. Developing low-fidelity prototypes

Prototype 1

Page1.jpgPage1a.jpg


Page1b.jpgPage2a.jpgPage2b_and_3.jpg

Prototype 2

Photo0497.jpg

Photo0498.jpg

Photo0499.jpg


Photo0500.jpg

Photo0501.jpg



Photo0502.jpg


Photo0504.jpg

Transition Diagram for Prototype 2:
transition.jpg
This prototype happened to be the most complicated (and the least obvious how it worked), so we decided it needed a transition diagram.


Prototype 3

Photo0506.jpg

Photo0507.jpg

Photo0505.jpg

Prototype 4

homepage.jpg
loggedin.jpg


tutor.jpg
review.jpg



Step 2. Evaluate the prototypes


Once we had each created a prototype design for our interface, we sat down together to evaluate each of our options. We went through each prototype, assessing its usability and design and decided whether it was a valid option or not. Our overall decisions are described below.

Prototype 1
We felt that prototype one was a very design-oriented prototype. It focused highly on the layout, making the web page look like a bulletin board, to emulate the tutoring fliers displayed throughout the University. We felt this was a great eye-catching design, and would make users remember the site well. We decided a very minimalist design was necessary, and liked that each page wasn't too overwhelming with information everywhere. The spacing between links and buttons works very well. Additionally, we really liked the idea of having pop-up windows when certain things are clicked on, however, we need to investigate how the placement would work and make sure the page in the background wouldn't take attention away from the pop-up window content. Overall, we think Prototype 1 is a strong design, and we definitely will pull some ideas from it.

Prototype 2
Prototype 2 was our strongest prototype. We all really liked the header, with the big logo, log-in/sign up on the top right, and the banner running across the top with frequent links. We think the design completely embodies the minimalist, simple design we are looking for. All of the pages are readily accessible by clicking on one of the links, and the home page is very inviting to the user. The taskbar not only is functional, but attracts user attention and draws focus to all the options available on the website. We all agreed that some sort of a taskbar is a great idea that we definitely want to use for our final design. Additionally, the idea of being able to search for a tutor based on so many specific factors such as location, pricing, and time available is something we are going to use in our final design.

Prototype 3
As a group, we decided that prototype 3 definitely had the most minimalist design out of all of them, which we are looking for in our final design. We like the ease of use with all the big buttons and clean-cut design of the home page. Additionally, like in prototype 2, we like the option of searching for either a specific tutor or for a tutor based on content area. Prototype 3 is the only one that uses an idea of the tutor having a calendar, and as a group we decided this is something we are going to strive for in our final design, even though it might be advanced to design. There should also be an option for tutors to add and remove appointments with students, so the students should have some sort of a calendar or reminder option, so they don't forget about their tutoring sessions.

Prototype 4
Based off of the design of ourumd.com, prototype 4 had a very consistent and simple layout. However, the design focused primarily on the student users rather than providing features for the tutors, such as a calendar or scheduling tool. We did like how the homepage was not cluttered and focused on a search bar, which would allow users to search for either courses or subjects. We also liked how a tutor's reviews would pop up in the same window as his or her profile. However, the prototype did not make a tutor's rate easily visible. After discussion, we decided that this feature should be a searchable feature and a primary design aspect of our final prototype.



Step 3. Reconsider priorities, and make a decision


Rather than choosing one ideal prototype, we decided to take certain aspects from all of our designs and make a superior prototype.

Final Prototype Tutorial:(Images of the final prototype are posted below as well.)This prototype consists of five main pages: Home, Search, Results, Tutoring Profile&Reviews, and an Edit Profile. Each page has a different functionality which is reflected in its name. Home page: The homepage is very simple, it consists of two main buttons: “Find a Tutor”(FT), “Post Tutoring Services”(PTS). Clicking the FT button will take the user to the Search page, while clicking the PTS button will redirect the user to the Edit Profile page.
Search page:
This page is similar to any basic search page, with the exception that there are already many built-in tutor related filters such as: price, subject, tutoring location, and so on. The user can also search for a tutor by name if they prefer. After selecting the desired options and activating the search button, the user will be taken to the result page.
Results page:
This is where the matching results of the users search will be displayed. All of the activate filters will be shown in a box above the results, so that the user can change them as needed. The results will be displayed in sortable columns, which are divided into to distinct categories such as: name, price, ratings, and so on. Each result will consist of a tutor profile picture, their ratings, and a small summary of their services. After selecting a tutor, the user will be taken to the tutor profile page.
Tutoring Profile/Reviews:
Here the student can read or write reviews, schedule an appointment, view the tutors calendar, and other general information.
Edit Profile:
This page is reached by clicking the PST button on the homepage. Here the tutor can post all of the required information about their services, schedule of availability, and post a profile picture.

Basic construction of final prototype:
final1.jpg
final4.jpg
final3.jpg
final2.jpg
final5.jpg