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.

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.

Role :

UX / UI Design

-> see content

CONTENT

• Problem Discovery

• Heuristic Analysis

• Adjacent Industry Audit
• User Flows

• Sketches
• Wireframing

• Mid-Fi Prototype

• Usability Testing

• Some Insights & Changes

• User Interface

• High-Fi Prototype

• Reflections

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 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.

Users feel stuck

/ Poor navigation

/ not enough freedom

Lack of credibility

& authenticity

Flow / order of events is

irritating & confusing

HMW? / BUILDING A SOLUTION

Bildschirmfoto 2022-07-13 um 18.13.50.png

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.

 

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.

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

SKETCHING / WIREFRAMES / LOW-FI

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.

Image by Kelly Sikkema

 MID FIDELITY PROTOTYPE  

tutor orial.gif

TESTING (WITH 8 STUDENTS)
SOME INSIGHTS & CHANGES

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 sidebar

• 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
IMG_1441.jpg

It's hard to see where I am in the process..

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.

IMG_1063.jpg

I feel overwhelmed by the amount of information needed.

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
IMG_1445.jpg

How do I change my preferences?

Group 1.png
IMG_1442.jpg

Can I pay with Paypal?

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

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 now consider a clean type. I would also focus more on font size and typography consistency.

• Images  Instead of focusing on creating illustrations, I might should have used images to create more authenticity

( / to build more trust on the users end?

- would love to test this in the future!)

• Interface I would like to spend more time on the interface. Try different things, experiment more.

• Components  Some components feel a bit big and clunky, others a little too small. I would also focus more on this.