Back to site

TutorMatch

Product & brand design for a tutor-finding app and responsive website with personalised recommendations.

Two TutorMatch app screens: the home dashboard, and the first step of the matching quiz

Stage 01

Context

A mobile app, and later a responsive website, that lets a parent describe what their child needs in under a minute and get back a ranked shortlist that says why each tutor matched. I did the research, the design and the front-end build.

The problem

Parents look for tutors through Facebook groups and word of mouth, with no easy way to compare qualifications, price or fit for their specific child. It is slow, and it is hard to trust a stranger from a group chat.

The goal

Let a parent describe what their child needs in under a minute, and surface a ranked, transparent shortlist of matched tutors, then keep messaging and booking in the same app so nothing falls through the cracks.

Pixel-art scene of a parent at a laptop, hand on chin, buried under a heap of chat bubbles and question marks

Stage 02

Research

Before designing a single screen I also audited three tutor-matching products parents already use, one direct competitor and two indirect, to see what was worth keeping and what was worth deliberately doing differently.

  • Superprof

    Direct competitor

    Strength

    Huge subject coverage, plus tutor reviews.

    Gap

    No compatibility matching at all, so parents read through many tutor descriptions by hand just to judge fit.

  • Preply

    Indirect competitor

    Strength

    A thorough intake questionnaire that actually identifies what a user needs.

    Gap

    Its progress is never shown, so the questionnaire can feel never-ending.

  • Tutorful

    Indirect competitor

    Strength

    Preference-based matching and a clear "how it works" page with real stats.

    Gap

    Forces booking before a parent has even messaged the tutor.

I continued by conducting short user surveys with a group of parents, asking them what issues they have encountered when previously looking for a tutor for their children and what would they like to see in a tutor-finding application.

Stage 03

The user

I built a persona, Lydia, from the goals and frustrations parents mention most often when searching for a tutor.

Pixel-art portrait of Lydia, a woman in her late thirties with long brown hair

Lydia Jones

Marketing manager, mother of two

Age
38
Family
2 children (9 & 12)
Tech comfort
Medium
“I don’t have hours to vet tutors myself, I just want to know someone is qualified, safe, and actually a good fit for my kid.”

Goals

  • Find a qualified tutor quickly, without endless research
  • Feel confident the tutor is vetted and safe
  • Keep track of progress across both kids in one app

Frustrations

  • Facebook groups feel unreliable and unstructured
  • No easy way to compare price, subject fit and reviews
  • Hard to message and schedule outside one app

What matters most

Trust & safety 95%

Convenience 85%

Price sensitivity 60%

Flexibility 70%

Stage 04

Flow

Designing the user flows helped me decide the best course of action for the matching algorithm. Initially I had planned to have all the child data in the profile and match them with tutors based on their general preferences, but user surveys revealed that some parents may have specific requirements for each tutor their child has for different subjects, so tutor-specific preferences have been moved to a guided quiz.

  1. Open app

    Lands on Home

  2. Home

    Taps “Get started”

  3. Choose child

    Picks which child

  4. Subject

    Picks a subject

  1. Budget

    Sets hourly range

  2. Goal

    Selects one or more

  3. Preference

    Tutor preference

  4. Results

    Ranked tutor list

Stage 05

Ideation

I’ve scrapped a few ideas before landing on the guided quiz matching and direct tutor messaging. Some worth mentioning: in-app booking and calendar tracking (removed to make app simpler for parents who aren’t tech savvy) and child progress tracking (removed because statistics weren’t informative).

Some initial sketches

A spiral notebook of hand-drawn wireframes for the app's home, child profile and messaging screens

Stage 06

UI design

From simple wireframes to polished UI designs.

The TutorMatch component library: a violet main colour, a teal accent and a gradient of the two, the puzzle-piece logo, and Poppins for headings with Inter for body text

Hi-fi mock-ups

  • 1 of 11. Home dashboard: “Welcome back Lydia”, a card inviting her to find the perfect tutor, and her current tutors
  • 2 of 11. Quiz step one: “Who are we finding a tutor for?”, with Nadia and James to choose between
  • 3 of 11. Quiz step: “What does your child want to learn?”, a grid of nine subjects with Math selected
  • 4 of 11. Quiz step two of four: “What’s your budget per hour?”, a range slider set from 20$ to 60$
  • 5 of 11. Quiz step three of four: “What’s your goal?”, with improving grades and homework help ticked
  • 6 of 11. Quiz step four of four: “What tutor would you prefer?”, with no preference selected
  • 7 of 11. Find tutors: a search field, subject filter chips, and four matched tutors with match percentages and hourly rates
  • 8 of 11. Inbox: four message threads with tutors, two of them unread
  • 9 of 11. Profile: Lydia’s details, her two children, and Nadia’s learning preferences
  • 10 of 11. Tutor profile for Janna Smith: 95% match, rating, hourly rate and parent reviews
  • 11 of 11. Chat with Janna Smith, who has sent a summary of Nadia’s last session

Stage 07

Prototype

Interactive HTML prototype created for testing. Try it out!

  • Onboarding

    Sign-up through to adding a child

  • Matching quiz

    Five staged questions with live progress

  • Message tutor

    Message tutors directly to book.

Open the prototype in a new tab

Stage 08

Testing

My first pass matched each child to tutors from their stored profile alone — subject and general goals, set once and reused for every search. Parents kept pointing out that what matters most does not stay fixed for each tutor the child needs, it changes per search: the same child might need a cheaper tutor this time and a tutor focused on exam prep the next.

Before

Budget, goal and tutor preference lived on the child’s saved profile, set once and reused for every search.

After

Budget, goal and preference moved into a short quiz that runs fresh every time a parent starts a new search.

Stage 09

Responsive web app

Some parents research a tutor on their laptop during a work break rather than on their phone. I extended the same product to a responsive web application, sticking to the same design system.

  • 1 of 6. TutorMatch marketing home page: “Find the perfect tutor for your child”, with a tutor match card beside it
  • 2 of 6. The get-matched page, running the same quiz questions in a browser
  • 3 of 6. Find tutors on the web: filters down the side and a grid of matched tutors
  • 4 of 6. A tutor profile page on the web, with reviews and a booking panel
  • 5 of 6. The messages page: a thread list beside an open conversation
  • 6 of 6. The parent dashboard on the web
The same home page at 390 wide: the hero, the four headline numbers, the four how-it-works steps, and the footer

Stage 10

Reflection

This was my first product design project, completed during the Google UX Design Professional Certificate. It helped me understand the importance of taking the proper steps in the user research and reiterating the design process in order to reach the best outcome, but also of knowing when to challenge my own decisions.

The most important takeaway is that more isn’t always better; I decided to scrap the uninformative dashboard and it resulted in a cleaner user experience.

Back to site

Next project

Bănuț

See project