Star

This case study is on creating a feature to perform session self-scheduling in the Tutorcomp web platform.

ROLE

UX Designer, Researcher

TEAM

1 Product Owner,
4 Developers,
4 Testers

PLATFORM

Web App

MODEL

B2C

TIMELINE

12 Weeks

PERIOD

2021-22

OVERVIEW

ℹ️ What is TutorComp?

TutorComp is an online tutoring platform that offers personalized online tutoring services to students worldwide. The company provides one-on-one tutoring services to students of all ages and levels, from kindergarten to college, covering a wide range of subjects and curricula.

Problem

By using a bold and contrasting background color, enlarging the font size, and strategically placing it, we can draw immediate attention to the crucial information through the Von Restorff Effect. With these design techniques, the "Next Stop" becomes visually distinct, ensuring that passengers promptly notice it without any difficulty

Outcome

By using a bold and contrasting background color, enlarging the font size, and strategically placing it, we can draw immediate attention to the crucial information through the Von Restorff Effect. With these design techniques, the "Next Stop" becomes visually distinct, ensuring that passengers promptly notice it without any difficulty

Considering TutorComp's extensive product line and the constraints imposed by NDAs, this case study focuses on the process of designing and implementing the Session Self-Scheduling and Tutor Availability Marking features.

ℹ️

INFORMATION

What is Session Self-Scheduling?

Session self-scheduling is a feature that allows students or parents to independently and autonomously arrange tutoring sessions based on their own availability and preferences within the constraints of the overall scheduling framework.

PROCESS

My creative process was visualized using the double diamond process

The process involved 4 phases:

Phase 1: Discover through extensive research

Phase 2: Define patterns and insights

Phase 3: Develop a solution through iteration and testing

Phase 4: Deliver a finalized design

The Double Diamond

Week 1 - 2 - Defined problem space, and conducted secondary research, preliminary research, and hypothesis. Consolidated research findings to develop a user persona and visualized an experience map.

Week 3 - 5 - User stories and epics, task flow diagram, UI inspiration board, analog sketches, grayscale wireframes, and prototypes. Conducted 2 rounds of user testing based on which the prototype was modified.

Week 6 - 8 - Brand development, mobile app design, UI Library

DISCOVER

The basic idea of "Discover" phase is to understand the design context.

🧑🏽‍🤝‍🧑🏽️ The Potential Users

Drawing from patterns and demographics within the existing user database, as well as discussions involving management and the support team, the users of the TutorComp learning platform have been identified as follows: students seeking academic support, parents or guardians facilitating their child's tutoring, and tutors providing personalized instruction.

The Potential Users of the TutorComp e-Learning Platform

🗣️ User Interviews

After conducting user interviews with a randomly chosen group of 5 parents/guardians, 7 students, and 6 tutors from the existing database, and by thoroughly analyzing the feedback collected by the academic support team from various users over the past two years, the following problems were identified. THE USER INTERVIEWS WERE CONDUCTED TO CREATE PERSONAS.

DEFINE

In this phase, a profound understanding of the challenges and objectives related to the self-session scheduling and tutor availability marking features has to be developed. My responsibility involved setting the foundation for the entire design process.

⚠️ Pain Points

⚠️ The major concerns were…

Based on the concerns gathered from respective users, the key issues with the existing system that needed addressing are as follows.

🎯 Objectives

Based on the pain points, the team worked to define clear goals for the redesign, ensuring that the objectives aligned with the business goals and user needs.

🧑 Personas

Based on based on earlier research and user interviews, we identified two primary user personas that capture key characteristics goals, pain points, and preferences of different user groups.

Student Persona

Due to the limited scope of this case study, the parent/guardian persona has not been included.

🧳 User Journey Mapping

To streamline the initial design process, we have identified an ideal user journey that addresses the primary concerns and needs of both users, while limiting the emotional phases experienced. This ideal case approach allows us to focus on creating an optimal user experience.

User Journey Mapping

🧭 User Flow

Creating the user flow proved to be a challenging aspect of the process, as the focus on flexibility and convenience was paramount in delivering a seamless experience. To address these requirements, we have implemented the following features based on the brainstorming and ideation sessions:


Scheduling: One of the major concepts the team decided to move forward with is flexible scheduling options. The first option is to book sessions as needed based on the tutor's availability, known as 'Flexi Scheduling.' Another option is to provide recurring weekly scheduling that repeats for a longer period based on the tutor's availability called 'Recurring Scheduling'.

Session Scheduling: Apart from offering the 'Flexi' and 'Recurring' options, the students can customize the session duration and choose the desired number of sessions per week.

Tutor Availability Marking: Responding to the requests of tutors, we have introduced a recurring availability marking feature. Tutors can mark their availability for recurring weekdays and weekends, ensuring a consistent schedule. Furthermore, tutors have the convenience of easily overriding the recurring availability if they are unavailable on specific dates.


Session Conflicts: The current flow also ensures that during a scheduled session's time slot, the availability for that specific period cannot be used for scheduling a new session, effectively eliminating session conflicts.

Scheduling Options

Tutor Availability Marking: Responding to the requests of tutors, we have introduced a recurring availability marking feature. Tutors can mark their availability for recurring weekdays and weekends, ensuring a consistent schedule. Furthermore, tutors have the convenience of easily overriding the recurring availability if they are unavailable on specific dates.


Session Conflicts: The current flow also ensures that during a scheduled session's time slot, the availability for that specific period cannot be used for scheduling a new session, effectively eliminating session conflicts.

Session Scheduling - User Flow

🔁 Design Approaches

Exploratory Wireframes

Flexi Scheduling

For Flexi, we used a full calendar view to choose a suitable date and the respective slots for that date. This was based on the assumption that the calendar is the mental model in which the user imagines dates.

Flexi Scheduling

Recurring Scheduling

For Recurring, we decided on a weekly view from which the user can choose the starting date of recurring slots that will repeat every other week.

Recurring Scheduling

TEST

🔬 Testing with Real Users

We interviewed 15 individuals from various user types, including students, parents, tutors and academic associates. These interviews provided valuable insights, confirming our hypothesis of the importance of a personalized experience. Furthermore, we discovered that users desire more control over the scheduling process and emphasized the need for smooth, convenient scheduling and availability marking.

RESYNTHESIZE

🔄 Improved Designs Based on Usability Testing and Feedback

Based on the user feedback, we reimagined the wizard into a progressive vertical view, and a summary of each completed step is shown. And opted for a clear and simpler UI with more white space.

Flexi Scheduling

Based on the user feedback and suggestions from the stakeholders

  • Opted for a five-day view instead of a calendar view for the Flexi scheduling option to facilitate quick availability checks for upcoming days.

  • Reduced the calendar view to an overlay, enabling users to navigate to specific dates when necessary.

  • Enhanced the system status by offering additional details about selected slot dates and the remaining balance of hours.

  • Introduced an "Add" button for selected slots to address user confusion that arose from its absence during slot selection.

Flexi Scheduling - Before and After Testing

Recurring Scheduling

Based on the user feedback and suggestions from the stakeholders

  • Condensed recurring session slots into a card for a simplified user interface.

  • Included key details in the card, such as starting date, available days, and timings.

  • Detailed view of selected slot timings in chronological order accessible by selecting the card.

  • Separated the selection of preferred days into a distinct step to alleviate cognitive load

Recurring Scheduling - Before and After Testing

HANDOFF

🚀 Effectively and Efficiently Translating for the Developers

Efficiently and clearly transferring the design assets was necessary to ensure the design could be implemented properly and promptly.

  • Utilized the Tailwind CSS framework for consistent design-to-code conversion.

  • Employed design tokens in Figma to map Tailwind classes.

  • Annotated the design with Tailwind classes and comments for developers.

  • Ensured a seamless transition from design to code implementation.

IMPACT

👩🏻‍💻 Measuring the Impact

After three months of deploying the features, metrics were gathered to quantify the effectiveness of the design.
Within the timeframe:

  • The Feature Utilization Rate (FUR) of Session Self-Scheduling feature recorded a whopping 39%, meaning significant usefulness of the feature. It was calculated using the following formula:
    FUR = (CTR * TCR) / 100
    In this formula: CTR is the Click-Through Rate, in percentage and TCR is the Task Completion Rate, in percentage.

  • The Net Promoter Score (NPS) for tutors was found to be 42%, suggesting a high level of tutor satisfaction. The Net Promoter Score (NPS) for tutors using the availability marking feature was calculated using the following formula:
    NPS = (% of Promoters) - (% of Detractors)

  • The Task Efficiency (TE) of self-scheduling feature jumped to 78%, suggesting increased productivity. The Task Efficiency (TE) was calculated using the following formula:
    TE = (Difference of average time spent on manual and self-scheduling) * 100 / (Average time spent by users on session self-scheduling)

TAKEAWAY

💭 Learning Outcomes

From the initial discovery to the final hand-off, numerous interactions and iterations have led to a multitude of valuable takeaways.

  • Maintained constant coordination with Developers and Product Managers to address data-related queries and ensure design feasibility.

  • Balanced business requirements and user needs, brainstorming ways to align objectives without compromising user experience.

  • Developed skills in presenting and pitching designs to higher-level stakeholders, effectively conveying benefits and potential drawbacks.

  • Integrated business needs into the decision-making process while considering user-centric design principles.

GET IN TOUCH

Have a question? Drop an email or connect via LinkedIn.

Say hi!

Copy Email

Have a question? Drop an email or connect via LinkedIn.

Say hi!

Copy Email

© Shaban 2024

© Shaban 2024