︎



Tutor Orial
Redesign



Designing a new version of the scheduling form and sign up flow for a E-learning platform - Tutor Orial.

Solo Project
Education - Web redesign

Duration
6 weeks

Practiced
Heuristic analysis
User flows
Prototyping
Usability test







01 Problem Discovery


 Problem 

Tutor Orial is a new tutor agency for high school students that specializes in finding fun and friendly tutors that help students learn.

They launched their online flow about a year ago and have very low completion rates. They have gotten a lot of complaints and bad social media reviews about how confusing the process is. The business is struggling and many tutors want to leave because they are not seeing enough clients.


 Challenges 

  • The website needs a sign-up flow that communicates with users.
  • Create an engaging conversation in the main body of the form and the scheduling screen.
  • The user experience should represent the brand and the good tutoring service.






02 Heuristic Analysis


I did a heuristic analysis according to Jakob’s 10 Usability Heuristics, to break down the problem.
Unfortunately Tutor Orial did poorly through each principle in the 10 usability heuristics. The problems of the website mainly appear in the scheduling screens, with minor problems in the landing and sign-up page.



#2 Matching between system and the real world.
Just by the look of the illustrations and other visual information, I would not recognize the website as an E-learning platform. It would be better if there are some real life pictures.

#8: Aesthetic and minimalist design

The icons and some visual elements on the user interface are irrelevant and don’t support the user to get the information they need.





#3: User control and freedom

There is no option for the user to exist and cancel their action. There is only the traditional way to log in. It would be more efficient if the user can log in through other platforms like Facebook or Google.






#10: Help and documentation

The website does not provide enough information for the user to select the best tutor that fulfills their need. The user does not know how to schedule for a tutor session.





#1: Visibility of system status

Although the header tells the user they are scheduling tutor sessions, the user does not know what would happen next.

#2 Matching between system and the real world.

A chalendar form for the date and time selection would be much more efficient.

#6: Recognition rather than recall

The user should not have to remember the detail information about the tutor and the subject they selected.





#1: Visibility of system status

The user is not informed about the outcome of their action, and determine the next step.

#5: Error prevention

#9: Help users recognize, diagnose, and recover from errors

There is no error message. The user is not presented with a review of their order.











03 Designing the Solution


 User Flow 

I mapped out the current user flow before creating a new one.
In the current flow, the payment screen appeared before the scheduling screen. There is no reason for Tutor Orial to do this, and this step brought out frustration to many users. They shouldn't have to make a payment before going into tutor selection. The user feels confused and not clear with what is going on in each step in the process.




Then I mapped out two flows. The first flow prioritizes the tutor selection and session scheduling leaving users more time to go through the website and collect information before they decide to book a tutor. Since Tutor Orial needs to gather personal information from the user to optimize the search results, filling out the forms can take a long time. The second flow divides the form into two sections, one would appear when the user creates their account, and one would appear when the user starts booking their tutor.





 Adjacent Industry Audit 

Now I have identified areas of opportunity and room for improvement. I did the desktop research on each step the user will take, from account creation, forms, selection, scheduling, to payment and confirmation. 












04 Low Fidelity Prototype


 Wireframing

Now I have mapped out a new user flow and gathered interface examples to use for reference, I started wireframing to build a basic structure for the solution.









 Low Fidelity Prototype 

Then I transferred the wireframes on to Figma. Here are some highlights to show what I did differently than the original website design.


  • The discount code offer on the landing page may catch the user’s attention, and motivate them to sign up.




  • There is an option for the user to skip the first form and dive into the search directly.




  • A pop up window will tell the user if there's anything wrong with their card information.












05 Mid Fidelity Prototype and Usability Testing


 Mid Fidelity Prototype

Here is an overview of the mid-fi prototype for usability testing.






 Usability Testing

I interviewed six college students using the mid-fi prototype. The feedback was focused on the sign-up process, tutor selection screen, payment screen, and confirmation page.




Sign-up Process

  • Darken the background for the overlay window.
  • Add re-enter password field in the account creation screen.
  • Let the user knows once they have copied the discount code.



Tutor Selection Screen

  • Filters for subject, price, location, and time.
  • Add a search bar for the user to enter topics or keywords of their choice.



Payment Screen

  • Give an order summary for the user while they enter the payment information.
  • Add a place for the user to enter the discount code at the checkout.



Confirmation page

  • Display the details of the tutor session on the confirmation page.
  • Add a button for the user to review their order after the order is placed.









06 High Fidelity Prototype


 Branding 




 Illustrations 



Credit: Brazuca by Cezar Berje





 Final Solution 





Sign-up





Form #1





Tutor Selection





Scheduling + Payment










07 Reflection


Tutor Orial was the first project I did while I was studying product design at Parsons. I learned about the 10 Usability Heuristics, how to identify the problem in the user flow and user interface, and what is the appropriate interaction. I learned about wireframing to build out the structure based on the user flow, and prototyping using Figma.

 What would I do differently... 
Because of the short amount of time I had during this project, I only had a chance to interview college students. However Tutor Orial is targeting high school students, it would be more fitting to perform the usability test on high school students.

I would also like to work on more details if I have time, there is room for improvements on adding micro-interactions in the final prototype. I wish I could use the high-fi prototype to do another round of usability testing, and iterate based on the feedback.