Tutorify Website Design

About Tutorify

Tutorify is a two-way educational platform that allows students and tutors to be introduced to each other online or In-Person.

So, tutors can apply to teach on this platform, and students can use it to take educational classes.

The classes are offered in groups or privately, covering textbook topics from middle school to university.

This project is running in two tasks, the App version and the Web.

In this case study, I want to book an online private class on the web version.

Figma Prototype

Project Overview

This business needs to simplify the process of booking their tutoring classes to make it easier for students (from high school to university) to connect with tutors. These classes can be held online or in person in group and private form.

Challenges

Given the wide age range of our audience and the diversity in class types, comprehensive research was necessary. The mindset of individuals seeking private online classes can differ from those looking for In-Person classes. Therefore, we decided to approach each case separately, handling it task by task.

Design Goals

Designing filters: Designing a filter for people who need to choose a location, class type, and subject in finding a tutor.
Optimizing the structure of the tutor's profile for better user experience: Design a comprehensive tutor profile that includes all necessary information, such as teaching experience, educational qualifications, and an introductory video of the tutors.
Designing the schedule table: Designing a flexible scheduling table to facilitate easier class bookings.

Business Need

Target Users

Our target users are classified into several segments, this case study focuses on students.

students from middle school to university.

For adults of any age who need to learn subjects such as languages or other topic.

Tutors who have registered their information on the website as tutors.

In this platform, students can hold classes with tutors in four different ways. Our target users are private online classes, the blue dashed line indicates our path.

Design Process

Competitive Analysis

Initially, we analyzed 12 similar educational platforms to better understand their structure and functionality.

Then we shortlisted 5 of them for a more detailed review because they were closer to our business goals, and according to the reviews of users, we realized that compared to other platforms; They provided a more user-friendly and efficient user experience.

Takeaways

Our plan for this analysis had two goals: to draw inspiration from the information architecture and their classifications and to examine the flows and paths in the platform's design. In the end, we gained valuable insights from their search bars, filters, teacher profiles, flows, and design steps.

Survey

To deepen our understanding of user preferences when choosing an online tutor, we conducted a cross-age survey and gathered insights from 125 respondents. Below are some key findings.

Takeaways

By examining the surveys, we were able to identify the users' priorities and concerns in finding tutors. However, we needed to interview some users to gain a deeper understanding of the issue.

Interview

We conducted interviews with 12 individuals from different age groups who participated in the survey, providing us with valuable insights. Some quotes from interviews:

In creating the affinity diagram, we identified the most important factors to consider.

Affinity Diagram

Takeaway

Based on the available tasks, we placed sticky notes into two subgroups: tutors and platform.

We found part of the needs through competitive analysis and another part by conducting interviews and affinity diagrams, then we will create the persona according to the information obtained.

Tutor Experience
Tutor review
Teaching Method

Filtering
Searching bar
Consultation session

Define

The insights I gained from surveys and interviews led to the creation of this persona. The main goal is to display those patterns and pain points, which allowed me to further empathize with users.

Persona

Site Map

we designed the sitemap based on the collected information and users' needs, as well as to illustrate the overall structure and architecture for a better understanding of the hierarchy.

User Flow

Our aim in designing the user flow is to improve the user experience and clarify the navigation path for a user who wants to choose a private online class.

Develop

My teammates and I tried to map out our ideas so that we could communicate better. Finally, the sketches were formed in 4 pages.

Sketch

Home page

Search page

Profile page

payment page

Wireframe

After several iterations, our wireframe was drawn like this.

Home page

Profile page

Scheduled page

Search page

Payment page

Mood board

We brought together images, colors, and textures that could assist us in the design process. Inspired by them, we enhanced our ideas and creativity. The mood board played a significant role in selecting the color palette, and visual roadmap, and guiding our design direction

UI Kit

To have a comprehensive reference, we created a UI kit for patterns and components, ensuring that our design remains efficient, consistent, and cohesive throughout the project.