Frame 27.png

Tutor Orial

re-design

Parsons, Major Studio 1

Timeline : 7 weeks

Project Team : Solo

Re-designing the booking platform 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 provide online tutoring services and have their own platform to book and schedule tutoring classes.

• PROBLEM DISCOVERY

Tutor Orial launched their website but they have very low completion rates and received many complaints and bad reviews. The business is struggling and many tutors want to leave because they don't see enough clients.

Swipe to see the original flow of their platform.

Landing page

Landing page.jpg

• HEURISTIC ANALYSIS

I performed a heuristic analysis according to Jakob’s 10 Usability Heuristics,

to define and break down the problem. Swipe through this menu for a more detailed

view of the heuristic analysis.

HEU Landing page(1).jpg
HEU Account creation(2).jpg
HEU Form(1).jpg
HEU Payment(4).jpg
HEU Select your tutor(1).jpg
HEU Schedule(2).jpg
HEU Confirmation(1).jpg

• BREAKDOWN OF THE PROBLEM

Unfortunately, Tutor Orial performed poorly in each principle of the 10 usability heuristics. The website's issues mainly appear in the scheduling screens, with minor problems in the landing and sign-up page.

• The current flow ist irritating and confusing

(Confusing order of events / users have to sign up & pay before they know what they're getting into)

• Users feel stuck / Poor navigation / not enough freedom

• Lack of credibility or authenticity

• HMW? / BUILDING A SOLUTION

How might we create a better user flow, which is not confusing

and includes enough freedom + a good navigation?

I started by mapping out the current user flow and creating new ones with the focus on a better order of events - which is not confusing. In the original flow, the user is asked to pay for a service and class, not booked nor scheduled yet. It would be better if the user could select a tutor, date and time before committing to any registrations or payments. In the possible user flows variations I have mapped out, the flow always ends with payment and confirmation to give the user enough freedom the explore and decide.

 

Group 1(1).png

• ADJACENT INDUSTRY AUDIT

After identifying areas of opportunity and room for improvement, I conducted an adjacent industry audit /desktop research for each step of the user flow (account creation, forms, selection, scheduling, payment and confirmation). Swipe through the slides to get a more detailed view of the audit.

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

•account creation

• forms

• selection

• scheduling

•payment

•confirmation

Success(1).jpg
Selection.jpg

• SKETCHING / WIREFRAMES / LOW-FI

USER FLOW OPTIONS.jpg

After I decided on which flows I wanted to focus, I started sketching and wireframing to build a rough framework / plan for the next steps.

Bildschirmfoto 2022-10-03 um 22.06.37.png
Bildschirmfoto 2022-10-03 um 22.05_edite
Bildschirmfoto 2022-10-03 um 22.07.00.png
Bildschirmfoto 2022-10-03 um 22.06.20.png
Bildschirmfoto 2022-10-03 um 22.06.03.png
Bildschirmfoto 2022-10-03 um 22.14.11.png
USER FLOW OPTIONS.jpg
Bildschirmfoto 2022-09-26 um 23.49.42.png

• MID FIDELITY PROTOTYPE

tutor orial.gif

• USABILITY TESTING

..tested with 8 students

collect data
side bar

Collect data / find tutor

• Flow starts with a questionnaire to collect enough information for showing the right tutors

• User didn't like that they have to start a new search or skip back to the answer they want to change after completing the questionare

• Replaced the questionnaire with an interactive side bar

• Users really liked the sidebar as it gives them a lot of freedom to change their answers.

• Users also liked the flexibility of the website.

Group 1.png
account
account new
Group 1.png

Creating an account

• Users were overwhelmed by the amount of information this form asks for.

• I tried to reduce the fields that are not absolutely necessary and combined some.

• Users liked the new account creation form way more than the other one.

payment

Payment

• Payment doesn't give the user enough freedom (options)

• Added more payment options

• The payment summary didn't exist in the previous prototype - which users critisized.

(It's good to have an overview for what you're paying)

payment new
Group 1.png
Bildschirmfoto 2022-09-26 um 23.50.50.png

Availabe tutors

• Users liked the view with the sidebar more

• Users liked it more to only see a few tutor at one time.

•  Added a process bar, so the user doesn't feel lost.

As the one problem from the original web site was confusion because of the order of the events

side bar
Group 1.png

• High Fidelity Prototype 

TUTOR MOCKUP.gif
TutorOrial
Unbenannt - 21. Oktober 2022 16.10.13 3.png

•  Reflection

During this project I learned HOW important usability testing is to build good, human-centered solutions. ​

What would I have done differnently?

Tutor Orial was one of my first UX/UI projects, so there's a lot of room for improvement and I'm aware, it's not perfect. ​

• Typography : While I wanted to use a playful typeface (Blenny), because tutoring isn't usually that much fun and some students are even scared of it, I would still consider a more minimalist / clean type for more professionalism. I would also focus more on font size and typography consistency.

• Components : Some components feel a bit big and clunky,

others a little too small. I would also focus more on this.

 

• Interface: I would spend more time on the interface

/ try more different things (see frames on the right ->).

 

• Images : Instead of focusing on creating better illustrations,

I might should have used images to create more authenticity

( /to build more trust on the users end? - would love to test that!)

tutor
Bildschirmfoto 2022-10-04 um 01.25.02.png