mockup tutor orial.jpg

Tutor Orial

re-design

Parsons, Major Studio 1

Timeline : 7 weeks

Project Team : Solo

Re-designing the web performance for a tutoring agency.

Role :

Heuristic Analysis

Adjacent Industry Audit 
User Research
User Flows
Wireframing
Usability Testing
Product Design
Prototyping

(Lo-Fi, Mid-Fi, Hi-Fi)

Tutor Orial is a high school student tutoring agency specializing in finding tutors to help students achieve their academic goals. They launched their website and have very low completion rates, received many complaints and bad reviews. The business is struggling and many tutors want to leave because they don't see enough clients.

How might we design a clear and visually pleasing user flow for students, parents and tutors?

Swipe for

original flow

->

Bildschirmfoto 2022-07-13 um 18.13.50.png
Landing page.jpg

02 The Problem / Heurestic 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.

Swipe for

Heurestic

Analysis

->

HEU Landing page(1).jpg

01 How Might We

The current flow ist irritating and confusing

Lack of credibility or authenticity

Users feel stuck

Bildschirmfoto 2022-07-13 um 18.13.50.png

Breakdown of the problem

03 Designing the Solution

Then I mapped out four potentional 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.

Bildschirmfoto 2022-07-13 um 18.13.50.png

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.

04  Adjacent Industry Audit 

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

Adjacent

  Industry

Audit

->

Process 6(1).jpg
Success(1).jpg
Account creation.jpg
Forms.jpg
Payment(2).jpg
Schedule.jpg
Selection.jpg

05 Wireframing + Low Fidelity Prototype 

USER FLOW OPTIONS.jpg

 Wireframing

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

Bildschirmfoto 2022-09-26 um 23.49.42.png

06 Mid fidelity prototype + user testing

• USABILITY TESTING

..tested with high school students

IMG_1441.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1445.jpg
IMG_1442.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1063.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1053.jpg
IMG_1052.jpg
tutor orial.gif

Wireframing


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

Bildschirmfoto 2022-09-27 um 00.14.23.png
Bildschirmfoto 2022-09-26 um 23.52.05.png

07 High Fidelity Prototype 

08  Reflection

Bildschirmfoto 2022-09-27 um 00.07.42.png
Bildschirmfoto 2022-09-27 um 00.08.40.png
Bildschirmfoto 2022-09-27 um 00.10.18.png
Bildschirmfoto 2022-09-27 um 00.10.02.png
Bildschirmfoto 2022-09-26 um 23.50.50.png
Bildschirmfoto 2022-09-26 um 23.51.11.png









...
this site is in progress































 

Swipe for

original flow

->

Landing page.jpg

• USABILITY TESTING

..tested with high school students

IMG_1441.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1445.jpg
IMG_1442.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1063.jpg

It would be great to see some reviews.

It would be great to see some reviews.

IMG_1053.jpg
IMG_1052.jpg