Website Re-Design
Tutor Orial
This is a school project: redesigning Tutor Orial, an online tutor services website. The new website aims to improve user experience in finding good tutors and booking sessions.
Role
Research
Low-Fi Prototypes
User Test
Visual Design
Hi-Fi Prototypes
Research
Low-Fi Prototypes
User Test
Visual Design
Hi-Fi Prototypes
Project Type
School Project
Independent
Date
Sep. 2021 - Nov. 2021
Sep. 2021 - Nov. 2021
Research
I started with the class to discuss and do a heuristic analysis on the original website.
Based on the discussion, I was able to identify and prioritize problems that the website had.
Based on the discussion, I was able to identify and prioritize problems that the website had.
Then I did an adjacent industry audit to gather resources and inspiration on possible solutions.
Flow
This is the first draft of a booking process flow.
There are 2 pathways that differs in the order of events.
Pathway 1
Users first answer a series of questions about their personal information, grade and subjects they want help with. Next they choose the time and date they want to have tutor sessions. Based on the choices, the system will match them with available tutors. Then users can look at their profiles and choose tutor(s) to work with.
Pros
Choosing time first ensures that users only see available tutors.
Cons
Too many questions at the beginning.
Possibility of leaving?
Possibility of leaving?
Pathway 2
Users start with searching subjects. Next they use a filters panel to set their preferences, including price, availability and rating. Then they can choose from tutors that match the settings.
Pros
Users can get a better understanding of the reliability of the website and the quality of its tutors, before actually booking a session.
Cons
Will the filters panel be an obstacle?
Low-Fi Prototypes
At this stage, I did sketching based on the 2 pathways, and refine them into low-fi prototypes.
Sketching
Prototyping
User Test
User Profiles
Script and Notes
Affinity Map
I documented what they said, did and felt.
I was able to identify major pain points and opportunity points for the product.
Ideation
Final Flow
Visual Design
High-Fi Prototypes
User Comments
Random comments floating on the homepage.
Subjects
Lists out popular subjects.
Random comments floating on the homepage.
Subjects
Lists out popular subjects.
Filter & Sort
In the filter panel fixed on the left of the page, user can set up price, availability, rating, etc. The matching tutors on the right will update accordingly.
The [Sort by] dropdown box also allows user to see tutors in specific order, such as rating high to low.
In the filter panel fixed on the left of the page, user can set up price, availability, rating, etc. The matching tutors on the right will update accordingly.
The [Sort by] dropdown box also allows user to see tutors in specific order, such as rating high to low.
Book a Session
Users start with searching subjects. Next they use a filters panel to set their preferences, including price, availability and rating. Then they can choose from tutors that match the settings.
Users start with searching subjects. Next they use a filters panel to set their preferences, including price, availability and rating. Then they can choose from tutors that match the settings.
