Tutorly

Project overview: For my first project as part of the Google UX Design Professional Certificate, I designed a responsive tutoring website that allows parents to search for and book sessions for their children. I created both a desktop and a mobile version, using a graceful degradation approach to ensure functionality across different devices.

Timeline: May 2025

Role: Product Designer

Tools/Methods:

• Figma

• User Persona Development

• Information Architecture

• Wireframing

• Unmoderated Usability Study

• UX Research

• Branding

• Prototyping

The Problem

Busy parents often struggle to find qualified, trustworthy tutors and easily schedule sessions for their children. Many existing tutoring platforms are cluttered, outdated, or lack transparency—making it difficult to compare tutors, understand availability, and confidently make a booking.

Empathizing With Users

To guide my design decisions, I created a fictional user persona that represents someone who would use Tutorly. I identified their tasks, feelings, and opportunities for improvement in the user experience.

Information Architecture

Before wireframing, I created a sitemap to organize the “Find tutors” tab and user flows of the platform. This helped me visualize the structure of the website, ensure logical navigation, and keep the user journey streamlined—from browsing tutors to booking a session. It also served as a foundation for deciding how to prioritize content and simplify decision-making for users.

My first set of low-fidelity wireframes illustrates the homepage and the list of tutors the user can look through. Then, it goes through the simple 5-step booking process to schedule a tutoring session. I focused on establishing a clear information hierarchy and intuitive navigation, prioritizing ease of use for busy parents. These wireframes helped me quickly test layout ideas and identify pain points before moving into high-fidelity designs.

Low Fidelity Wireframes

In my early wireframe, the Availability tab displayed a full week of time slots across multiple days. While this layout showed a range of options, usability testing revealed it was visually overwhelming and unclear to users. Several participants noted they weren’t sure which dates or times were actually available. To improve clarity, I redesigned this step using a standard calendar format, allowing users to first select a specific date and then choose from available time slots—creating a more familiar and intuitive experience.

I also revised the original 5-step booking process, which initially followed this order: Availability → Session Method → Comments → Review → Confirmation. To streamline the flow and accommodate clearer pricing interaction, I replaced “Review” with a new “Pay” step and moved “Review” to the end. The updated flow became: Availability → Method → Comments → Pay → Review. A separate Confirmation screen was added after the final step to give users a clear success message and session summary without crowding the booking process.

Unmoderated Usability Study

I conducted an unmoderated usability study with five participants who matched the target user profile– busy parents looking for tutoring services. Through this study, I discovered that several users were confused by the way the “Availability” tab in the booking process was formatted. Based on their feedback, I redesigned the availability section to use a familiar calendar format, making it easier for users to view and select available time slots.

Here are the notes from one participant during the unmoderated usability study.

Branding

Why Tutorly: I chose the name Tutorly because it clearly conveys the platform’s purpose while maintaining a clean, modern, and trustworthy tone—ideal for a tutoring site that aims to feel both professional and approachable to parents and students alike.

Tutorly’s branding focuses on warmth, trust, and approachability. I chose a soft, modern color palette with warm oranges and neutral tones to create a friendly and professional atmosphere. The Poppins typeface, used consistently across headings and body text, reinforces clarity and simplicity. The bold logo highlights the “Tutor” to emphasize the platform’s main goal.

High Fidelity Prototype

After incorporating feedback from usability testing and refining my wireframes, I created high-fidelity prototypes in Figma to bring Tutorly’s visual design to life. These prototypes reflect the final branding, typography, and color choices, and showcase a responsive layout across desktop and mobile.

The desktop version includes a full navigation bar, visible search and filter options, and tutor profiles for easier browsing. For the mobile version, I used a hamburger menu and filter icon to save space to focus only on the most essential content and actions.

Users need the right info — showing tutor credentials, ratings, and availability upfront helps parents make quicker, more confident choices.

Simplifying the booking flow makes a big difference — breaking the process into smaller steps makes it easier to follow and less frustrating to complete.

Visual design shapes how people feel about the platform — a clean layout and warm color palette helps build trust and makes the site feel more approachable.

Key Takeaways