123 Tutors is an online tutoring platform that connects students with verified tutors for both in-person and remote learning. The project involved creating a seamless customer-facing signup form system and a backend management dashboard for tutors, allowing both sides of the platform to interact efficiently.
The goal was to design an experience that simplified what is typically a complex service structure: onboarding, lesson tracking, payment management, and student progress tracking. My role focused on UI/UX design and system mapping, ensuring that the flow between customer actions and tutor tools remained intuitive and consistent.
This project was designed in Adobe XD over several months in close collaboration with two developers. My design decisions were guided not only by user experience goals but also by developer capabilities and platform constraints.
The collaboration process involved:
Translating business needs into functional wireframes and user flows.
Designing interaction prototypes in Adobe XD to test usability.
Adjusting UI complexity based on backend feasibility and API limitations.
This ensured that the final design system was technically realistic, scalable, and efficient for long-term use — bridging design vision with developer practicality.
The customer-facing form was designed as a four-step guided process that allowed users to easily find and book a suitable tutor. The primary goals were clarity, accessibility, and reducing user drop-off.
The flow included:
Personal Information: Collecting essential details like name, grade, and subject.
Tutoring Preferences: Allowing users to filter based on subject, mode (online/in-person), and budget.
Tutor Matching: Generating a shortlist of tutors that best matched the user’s requirements.
Automatic Quote & Confirmation: Providing instant pricing and next steps, with a clear CTA to confirm the booking.
This flow created a sense of efficiency and transparency, giving users immediate feedback and eliminating the need for manual quoting. The minimalistic visual layout and progress tracker ensured users understood exactly where they were in the process.
The backend system was designed for tutors and administrators, prioritising simplicity and task visibility. The dashboard layout focused on providing a clear overview of active and past students, alongside easily accessible primary tools.
Key considerations included:
Clean, modular interface: A neutral colour palette with accent pink highlights was used to draw attention to key actions like “Log Lessons” or “View Progress.”
Student management: Tutors could view all current and previous students, log hours, and track subjects with visual progress bars.
Financial tracking: A dedicated section for managing payments, logging invoices, and viewing income summaries was designed to streamline backend administration.
Ease of navigation: The side navigation kept primary categories—My Students, Tutoring Jobs, Bank Details, and Help Centre immediately visible at all times.
The result is a lightweight and functional UI that reduces cognitive load while helping tutors and administrators focus on high-priority tasks without distraction.