TUTOR orial

user flow researcH/design

What is tutor orial?

Tutor Orial is a project given through my grad program, Parsons School of Design.

Tutor Orial is an online tutoring website, where students of all ages can find a suitable tutor to schedule a class with. My job was to redesign the user experience of a student finding, scheduling, and paying for his/her own tutor.

Original Home Page

1. Heuristic Evaluation

I first did some basic heuristic analysis to determine areas that do not adhere with pre-defined principles. 

2. sticky note brainstorming

I went through the original flow to see what stuck out and felt like it was missing. I was able to get some other designers to help out for this portion of the project. More perspective the better! 

3. Adjacent industry audit

I also researched  what other websites do that I may want to look at as a reference to tutor orial. 

Takeaway 1: Websites with good processes always tell users why an information is needed and necessary to be filled out, so users understand why certain information is being asked. 

Takeaway 2: Good forms are concise and EASY to fill out. A lot of times they have options to “sign up with google,” to make signing up even faster.

I put all my research into a Figma file. This way I can easily look back on it when needed:

4. recreating the user flow 

Through the adjacent industry research, it is obvious that filling in surveys or creating an account isn't part of the user's goals. However, creating an account, especially, is a crucial part of Tutor Orial's company goal. It is also necessary to have an account to schedule lessons and keep users' information. Therefore, I decided to restructure the flow of action. Rather than having users sign up and take questionnaires right from the beginning, these tasks can be secondary while completing the users' original goal (to find a tutor). 

5. sketching the content

Now that the flow is determined, the main meat of each screen has to be well thought out. What features need to be implemented? What information would users want to know? How can users feel confident in scheduling and paying for a tutor?

Finding A tutor

  • Filters to make it easier to find tutors (including currency preference)

  • Sketch 4 is a portrayal of after users click on the tutor’s name for more information. You can message the tutor first or read reviews, etc

  • Teacher bio and different specific courses they can teach e.g. AP Biology, or just “conversational Spanish”

showcasing tutors

  • Original screen with many tutors

  • Clicking into the name will go to either a pop up of the tutor’s bio, or…

  • A separate page. This might take longer loading issues because it’s a completely new page. 

Book & pay

  • Book before paying. Show transparency of the amount users are going to pay

  • An informative header that shows what happens during this whole process: you schedule/pay here, then receive confirmation of meeting location or meeting link, then potential refund option.

success confirmation

  • Tells users what has happened and what will/can happen next

  • Transaction summary and tutor information show

  • Information regarding rescheduling/cancelling, or to go back and search for more tutors. 

6. low fi design and user interviews

I created a low-fi design for my flow and conducted userbility testings with 3-4 people (participants were chosen at random via screening and surveying)

Research Questions

  • Was the flow to schedule a tutor easy and self explainable for users?

  • What was missing that users noticed?

  • What did users fail to understand the most (what part were users confused at)?

I created a general script to follow with questions to ask for certain screens, and recorded the session in case I missed out on useful information while I moderated and took my notes. Below are some screen shots of the recorded tests.

6. Results - synthesis process

With my notes from testing my low fidelity prototype, I used affinity mapping, 4 W's framework and urgency/frequency graphs to come up with results. 

Research q&A

  • Was the flow to schedule a tutor easy and self explainable for users?

Yes, the general feedback was that the flow was pretty straightforward and that nothing was confusing/surprising in a negative way. Buttons and filters all seem very universal 

  • What was missing that users noticed?

A tutor’s teaching style and more transparency that can show that the tutor is real and trustworthy.

Reoccuring sessions, one time lessons, free trials - more information about what users are scheduling for.

  • What did users fail to understand the most (what part were users confused at)?

How to work with messaging as you schedule for a session. Adding a message during payment page also seems ambiguous.

takeaways

  • ​Clear up misunderstandings for scheduling: reoccurring, one time, free trial, etc. Make sure users know before they pay if they can schedule recurring classes later, what to expect AFTER a tutoring session. 

  • Include more transparency with the tutor’s teaching style. Users want to know if tutors can be trusted from this website, and if the tutor is real.

 

  • Include functions to message the tutor during payment/scheduling stage more obviously. This is so that students can have a more transparent communication with the tutor, see if their personalities match before committing, and ask specific questions about lessons/studies that may not be in the tutor’s bio. 

  • Display materials required by the tutor on the tutor bio and confirmation screen. Will textbook be required? Or will the tutor prepare PDF’s? 

  • Create chat box in the flow for final version to show how the flow is if users wanted to message before scheduling.

7. High fidelity prototype final

8. FINAL UI VIDEO GUIDE

Designs, illustrations, and animations © Roseanne Chao