ZZETTA

WORK / STUBY

STUBY

Your Study Buddy

Stuby tutoring app screens laid out on a pale paper background

Finding a tutor isn't difficult. Finding the right tutor is.

ROLE
UI/UX Designer
SCOPE
Research, UX Strategy, UI, Prototype, Testing
TOOLS
Figma, Adobe
YEAR
Product Design / UI UX — 2024
01 / Context

Context

Indonesian students have no shortage of tutoring options — marketplaces, community groups, school noticeboards. The hard part is judging fit before you have paid for a session. Stuby started as a question: what if matching came first and browsing came second?

02 / Research

Research

Interviews with students and parents, plus a walkthrough of five existing platforms. Recurring theme: profiles read like résumés, not like people you would learn from.

  • 8 student interviews (SMA & first-year university)
  • 5 competitor teardowns
  • Diary study on how sessions actually get booked
  • Survey on what makes a tutor 'click'
03 / Problem

Problem

Students judge tutors on credentials they can't verify, and give up before the first lesson.

04 / Design process

Design Process

Process — SCROLL HORIZONTALLY →
Discover
Define
Map flows
Wireframe
UI system
Prototype
Test
05 / Site map

Site Map

Site map — SCROLL HORIZONTALLY →
Onboarding
Home
Discover tutors
Tutor profile
Micro teaching
Booking
Messages
Schedule
Profile
06 / User flow

User Flow

Matching flow — SCROLL HORIZONTALLY →
Sign up
Questionnaire
Match results
Watch micro video
Shortlist
Message tutor
Book trial
Rate session
07 / Brand system

Brand System

A soft, studious palette with a single green accent, rounded type and illustration that keeps the tone encouraging rather than academic.

Design system overview
08 / Onboarding

Onboarding Questionnaire

Six short questions — subject, goal, pace, learning style, budget, schedule — framed as a conversation instead of a form. Each answer weights the match score.

09 / Discovery

Tutor Discovery

Cards lead with teaching style and a short intro clip; credentials sit underneath, where they belong.

10 / Micro teaching

Micro Teaching Video

A 45-second sample lesson on every profile. In testing this was the single strongest signal students used to shortlist.

11 / Matching

Matching / Search

Match score is explained in plain language — students can see which of their answers drove a recommendation and adjust them inline.

12 / Messaging

Messaging

Templated openers remove the awkward first message and speed up first replies.

13 / Scheduling

Scheduling

Availability is shown as overlapping windows between student and tutor, so booking is a single confirmation rather than a negotiation.

14 / Testing

Testing

Moderated usability testing with six students on a clickable prototype. The questionnaire length and the match-score explanation were both revised afterwards.

  • Cut onboarding from 11 to 6 questions
  • Moved micro-video above the fold on profiles
  • Rewrote match reasons in plain language
  • Added a 'not a fit' action to refine results
15 / Reflection

Reflection

Stuby taught me that a matching product is mostly an editorial problem: deciding what to show first is the design. If I picked it back up, I would test trust signals for parents, who quietly hold the budget.