Home/ Work/ Quemonster
UX Strategy Product Design Information Architecture EdTech Marketplace

Quemonster

A global online group lesson marketplace — designed from zero. Full product strategy, user research, information architecture, and end-to-end UI design for a dual-sided platform built around an idea no one else was doing: shared tutoring.

Type
Client Project
Role
Solo — Strategy · IA · UI Design
Year
2017 — 2019
Tools
Adobe XD · Whimsical
QUEMONSTER
Online Group Lesson Marketplace & Platform
STUDENTS PARENTS TUTORS GLOBAL
Quemonster Student Landing Page Expand ↗

The idea was simple: why should one student pay for all of the tutor's time?

Quemonster was founded on a single insight: traditional 1:1 tutoring is expensive because the student bears the full cost of the tutor's session. What if two students shared that session — paying less individually, while the tutor earns more overall? That's the core of what made Quemonster different from every other tutoring marketplace.

Founded in the UK in 2016 with entities established in Korea and Asia-Pacific markets in early 2018, the platform was designed to support private 1:1, duo (2 students), and small group sessions — starting with duo as the initial launch format, given the video technology constraints of 2017–2018 where multi-party connections were still unreliable beyond two participants.

I joined as the sole designer and led the entire product design process — from competitive research and information architecture, through user flows and business logic, to 50+ high-fidelity screens across three separate dashboard environments in Adobe XD.

Three users. One platform. A pricing model no one had built before.

Most tutoring platforms are built for one-directional booking: student finds tutor, pays, books. Quemonster had to support a fundamentally different model — shared sessions with dynamic pricing — while also serving three user types with completely different goals and trust requirements.

  • × Shared session pricing had to feel fair, not confusing — tutors set rates by class size (1:1 / duo / group), students needed to understand what they were paying and why it was less
  • × Tutors needed credibility and control — profile building, subject/level matrices, pricing by class size, scheduling across time zones, and tutor verification
  • × Students needed a partner or a class to join — beyond solo booking, students might want to find a duo partner (a friend, or a stranger with the same learning goal)
  • × Parents needed oversight without friction — managing payments and monitoring sessions for children, without overlapping or undermining the student's own account experience
  • × The platform itself needed to orchestrate it all — class requests, tutor matching, booking conflicts, price adjustment approvals, and notifications across all parties simultaneously

Research → Architecture → Flows → UI

Every design decision was grounded in a structured process — starting with competitive analysis and user research, moving through IA and business logic flowcharts, into wireframe iterations and finally high-fidelity screens in Adobe XD.

Step 01
Research & Discovery
Competitive analysis of Preply, iTalki, Wyzant. User interviews, persona development, market sizing for UK → Asia-Pacific expansion. Identified the gap: no platform had a shared-session pricing model.
Step 02
Information Architecture
Two full sitemap iterations (v01 Oct 2017 → v02 Nov 2017) with screen-level wireframes embedded. Three user paths: Student, Parent, Tutor — each with distinct navigation and permissions.
Step 03
User Flows & Business Logic
Full system flowcharts covering search, onboarding, booking, class request matching, tutor dashboard, duo/group session management, virtual classroom, and multi-party payment.
Step 04
Hi-Fi UI Design
50+ screens in Adobe XD — purple brand system, responsive layouts, 3 dashboard environments, full messaging system, lesson space, and 11 wireframe iterations for the tutor dashboard alone.

Sitemap evolved through two major iterations

The first sitemap (v01, October 2017) established the core structure: public-facing marketing pages, authentication split by user type, and three separate dashboard environments. Version 2 (November 2017) incorporated screen-level wireframes directly into the sitemap — making it a living IA document and lo-fi prototype simultaneously.

Sitemap Structure
Home
About
Find a Tutor / Class
Subject List
Become a Tutor
How It Works
Help Centre
Student Dashboard
Upcoming Sessions
Bookings (Upcoming / Completed)
Invoices
Lesson Space
Messenger
Settings
Parent Dashboard
My Students
Add / Manage Child
Invoices
Messaging
Help
Tutor Dashboard
My Students / Classes
Booking Overview
Create a Class
Booking Requests
Invoices · Messenger
Quemonster Sitemap Overview Expand ↗
Quemonster Sitemap Detail Expand ↗
Sitemap v01 — Overall structure
Sitemap v02 — Screen-level detail
The Core Differentiator

One tutor. Multiple students. Everyone wins.

The duo and group models weren't just a feature — they were the entire reason Quemonster existed. By sharing session costs, students paid less per hour while tutors earned more per session. The platform launched with duo as the first format: two students, one tutor, shared cost — whether siblings, friends, or matched strangers.

Model 01
Private 1:1
Traditional format. Student books directly with a tutor. Full session cost for the student, baseline rate for the tutor.
Student pays: full rate
Model 02 — Launch Model
Duo (2 Students)
Two students share a session. Each pays less than a 1:1 rate — could be siblings, friends, or matched via the platform. Tutor earns more per session than 1:1.
Student pays: ~60–70% of 1:1 rate · Tutor earns: ~130% of 1:1
Model 03 — Future
Small Group (3–8)
Larger group class. Designed but deferred for v2 — 2017–2018 video infrastructure wasn't reliable enough for 3+ participant sessions without quality degradation.
Student pays: significantly reduced · Tutor earns: highest per session

Booking, matching, pricing — all had to be designed, not assumed.

The platform's business logic was more complex than a standard marketplace. Duo sessions required student matching. Price adjustment had a controlled approval process. Class requests flowed through a "Centre" — an internal tutor-matching department. Every one of these flows was mapped and designed before a single hi-fi screen was made.

System Flowcharts

50+ screens. 3 dashboards. One design language.

All screens were designed in Adobe XD with a consistent purple-based brand system, white card surfaces, and a dark footer. Each user type has its own dashboard environment, while sharing common components for the messaging system, search, and authentication flows.

Multi-filter Search Expand ↗
Find a Tutor
Multi-filter Search
6 filter states — Category, Subject, Hourly Rate, Location, Class Type. Before and after login states designed separately with progressively unlocked booking actions.
Subjects Offered Expand ↗
Discovery
Subjects Offered
Full subject catalogue organised by category — from academic subjects to languages and skills. Entry point for students who browse before searching by tutor.
Messaging Expand ↗
Messaging
Multi-state Messenger
7 messenger states: Student view, Tutor view (Recent / Students / Group), expandable chat window, expandable lists, and maximised full view.
Student Dashboard Invoices Expand ↗
Student Dashboard
Invoice Management
Full billing history with per-session breakdown — showing duo session cost sharing with transparency on what each student paid and the shared rate applied.
Tutor Dashboard Expand ↗
Tutor Dashboard
Class & Student Management
Quick overview of upcoming bookings, new messages, recent reviews, My Students / My Classes / Create a Class / Booking Requests / Invoice management.
Parent Dashboard Expand ↗
Parent Dashboard
Child Oversight
My Students overview, Add Student flow (multi-step onboarding for child accounts), separate invoicing, and tutor communication — without overlapping the student's own experience.
Tutor Profile Tutor Profile — Free Introductory Meeting Expand ↗
Book a Class Parent View Booking — Parent View Expand ↗
Tutor Scheduling Tutor Scheduling Expand ↗
Tutor Scheduling Calendar Scheduling Calendar Expand ↗
Tutor Verification Tutor Credential Verification Expand ↗
Messenger Maximised Messenger — Maximised View Expand ↗
Messenger States
Tutor Dashboard — 11 Wireframe Iterations

The tutor dashboard went through 11 distinct wireframe iterations before reaching hi-fi. Each version refined the information hierarchy, booking overview structure, and class management layout.

The choices that shaped the platform

Decision 01

Launch with Duo, not Group

Despite the platform supporting groups of up to 8, the initial launch was scoped to duo (2 students) only. Video conferencing technology in 2017–2018 wasn't reliable enough for 3+ simultaneous participants without degradation — so duo was both the safest technical bet and the simplest UX to explain.

Decision 02

Purple Brand System

A strong purple palette differentiated Quemonster from the blue-dominant EdTech market — projecting creativity and approachability while maintaining professional credibility across all three user types.

Decision 03

Unified Design Language Across 3 Dashboards

All three dashboards (Student, Parent, Tutor) share the same component library and visual system — navigation patterns, card styles, typography — while surfacing only the features relevant to each role.

Decision 04

Persistent Expandable Messenger

Rather than a separate messages page, the messenger was designed as a persistent UI layer — expandable from a chat bubble, collapsible into a sidebar list, and maximisable to full screen — keeping communication in context at all times.

Decision 05

Tutor Pricing Matrix

Tutors set rates across a subject × level × class size matrix — Private 1:1, Duo, Group under 8, Group over 8. Price adjustments capped to once every 90 days with Centre (financial dept) approval — protecting price stability and student trust.

Decision 06

Pre-Login vs Post-Login Search

The Find a Tutor experience was designed in two states — before and after authentication — progressively revealing booking actions as users log in. This reduced barrier to discovery while protecting the transaction flow from unauthenticated abuse.

Eight years later, I'm revisiting this platform — this time with AI as a collaborator.

What would Quemonster look like if designed from scratch today?

View 2026 Redesign Concept →

Next Project

PRSA Website Redesign

View Project