Tutor Tree

An app for users to search, connect, and book lessons with expert tutors

Overview

A case study on an end-to-end app. designed for users to easily search, connect, and book tutoring lessons in a variety of subjects.

My role

User research, Branding, Information Architecture, UI Design, Interaction Design, Prototyping, Usability Testing

Tools used

Figma, Zeplin, Photoshop,
Illustrator, Marvel

Project duration

6 months

Context

A project for Career Foundry course

How might we help users find and book expert tutors in their subject of interest

The challenge

Whether students want to improve on a specific subject or are struggling with a particular subject, there are many reasons why one chooses tutoring services. This is seen especially during the height of COVID, where education was disrupted, leaving students to rely on themselves and their close contacts to help bridge the gap. Therefore, the Tutor Tree app is designed to allow users to search, connect easily, and book lessons with tutors in their subject of interest.

The process

Research

User Interviews
User surveys
Market Analysis
‍

Define

Personas
Sitemap
User flow
Journey Map
Card sorting

Design

Wireframes
Responsive Design
Design System
Documentation
Branding

Refine

Hi-fidelity Prototype
Usability Testing
Affinity map

RESEARCH

I started my project by understanding the problem I was trying to solve. This is important in order to design a solution that will be the best way forward for the user and the business. This will be determined by conducting early user research. To begin, I did secondary research ( reading blogs, articles, tutor help classified ), before conducting primary research.

Research Methods

1:1 interviews

Conduct 1:1 interviews with 5 participants to gain more
in-depth understanding of participants’ attitudes, beliefs, desires, and experiences

Online Surveys

Collect insights and understand the demographics of targeted users

Market Analysis

Research other tutoring apps and services to discover what they provide, to identify gaps, and to understand how they solve a similar problem

Goals

  • Analyze the competitors’ products and services
  • Learn how users discover a tutor/tutoring
  • Determine what influences the students decision to book a tutor
  • What is the goal for the students to get tutoring
  • How often, long, and where do people use tutoring services

Interview & Surveys results:

The survey was great for quickly gathering information from a sample of my target audience, while the interviews allowed me to gain a deeper understanding of the participant's behaviors. The main takeaways from the two methods were:

  • Students need a way to easily search for a tutor
  • Students need an easy way to book a lesson with tutor
  • Students want to have the option of having in-person or online tutoring
  • Students need an easier way to find a tutor’s availability
  • Students need tutors that are knowledgeable
  • Students need tutors that are experienced

DEFINE

Building Persona

Meet Taylor! A persona based on the data I gathered from research. Taylor will help guide the decisions I make throughout my design process.

Meet Taylor!  A persona based on the data I gathered from research. Taylor will help guide the decisions I make throughout my design process.

WANTS

Students want tutors to assess their comprehension level

Students want to have the option of having in-person or online tutoring

Students enjoy having a first free lesson to test if they tutors are the right fit for them

Students want tutors to help them reach their goal

ABOUT

Clara is a third-year student at MIT High School. She is in athletics, works part-time, and is having a tough time keeping with the demands of school. She is hesitant to ask questions in class because she feels she is slowing everyone down. Physics is a tough course for her, and therefore is working with her tutor to build knowledge and confidence in this course.

NEED

Students need an easy way to search for a tutor

Students need an easy way to book a lesson with tutor

Students want tutors that can work well with them

Students need tutors that are knowledgeable

Students need tutors that are experienced

CHALLENGES

Students need an easier way to find a tutor’s availability

Students want tutors to explain an complicated subject in a simple way

Student seek tutoring to help them in subjects they want to improve

Students want to have a formal method to contact and communicate with the tutors

Students want tutors to adapt to their learning style and pace

Journey Map

Next, I created the journey map to help visualize a potential new user's process to accomplish a goal. In this scenario, Taylor (our persona) is seeking a tutor for physics. Her journey helps identify any additional opportunities that may not come up at the research phase.

see full image

Information Architecture

Tutor tree app is built with an easy-to-navigate application with room to add new features later.
I conducted a Closed Card Sorting research where participants put a list of items into a logical order with the provided categories. Analyzing the results helped me organize the app layout in an intuitive way for the user to find what they want.

The main task I’ll be focused on in my design is booking a tutoring session. I’ve created a simple task flow to help me design the screens I need to achieve the task.

In my design, I will also include Onboarding and Sign in and additional screens such as Add Payment screens to show the potential of the solution.

DESIGN

Low Fidelity Wireframes

With the understanding of who the user is, what tasks to design for, and how the app’s content should be organized, I started sketching out some ideas with pen and paper for the main screens. Then I continued on with creating the mid-fidelity wireframes in Figma to show more detail how the content should be arranged.

Responsive Design

After completing the mid-fidelity wireframes for Tutor Tree app, I started to sketch the homepage for the responsive website design on Desktop, Tablet, and Mobile, keeping in mind how the design would be easily adaptable to other screen dimensions. Referencing Market Analysis research with other tutoring services, Tutor Tree will also provide an app and website experience. I use the “Mobile First Design” strategy to create a better experience starting with the smallest screens ( a progressive enhancement approach); as the devices increase in size, the features and content will be progressively introduced.

see full image

see full image

REFINE

Usability Testing

Using a mid-fidelity prototype, I conducted remote online usability test sessions. Five participants would have to complete 2 different tasks that are aimed to evaluate how users interact with the Tutor Tree app.

The results of the testing proved the interaction design was overall seamless, and no major pain points for users to achieve their task.

Task #1

Do a general search for a physics tutor

Task completion rate

80%

Task #2

Book a tutor

Task completion rate

100%

The final design

The next step, I refine the final design with the feedback from the usability testing. The UI design created from the previous phase and branding for Tutor Tree, is shown here has a stylistic approach that is modern, educational, and fun. I created a Design System Language so that the UI design is consistent with all products and platforms. The color palette include green and yellow colors that are repeated throughout the interface to reinforce branding and functionality. Recall that problem statement: “How might we help users find and book expert tutors in their subject of interest,” the following screens show how these goals are accomplished.

What I've learned

This project was challenging yet rewarding because I was able to propose a solution to a problem that was especially prominent during COVID. As schools transition from in-person to online, this app offers both services to provide options for students. During this time, conducting research was a bit challenging. In-person was unsafe, so all research had to be done remotely.

Heading

Next steps:
The design process is ongoing, and there’s always room for improvement. I look forward to conducting more research and iterating the design, especially learning more about the tutor’s perspective in using this product.

SEE OTHER PROJECTS

Gluco

Mobile app

Libra

Mobile app

Democracy Lab

Responsive Website