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 :
Heuristic Analysis
Adjacent Industry Audit
User Research
User Flows
Wireframing
Usability Testing
Product Design
Prototyping
(Lo-Fi, Mid-Fi, Hi-Fi)
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
• 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.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.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.
.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.
.jpg)
.jpg)
•account creation
• forms
• selection
• scheduling
•payment
•confirmation
.jpg)
• 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.
• MID FIDELITY PROTOTYPE
• TESTING (SOME INSIGHTS & CHANGES)
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.
It's hard to see where I am in the process..
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.
I feel overwhelmed by the amount of information needed.
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
How do I change my preferences?
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)
It would be great if I could pay in different ways.
• High Fidelity Prototype
• 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.
• Interface: I would spend more time on the interface
/ try more different things (see frames on the right ->).
• 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.
• 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!)
