Medtrak
ROLE
UX Designer, Researcher
TEAM
2 Developers,
1 Tester
PLATFORM
Mobile App
MODEL
B2B
TIMELINE
8 Weeks
PERIOD
2021-22
IMPACT
feature utilization rate (FUR) was obtained for the self-scheduling feature
net promoter score (NPS) was recorded by tutors using the availability marking feature
task efficiency (TE) was achieved by using self-scheduling feature
OVERVIEW
ℹ️ What is Medtrak?
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
PROCESS
The Design Process
🔨️ The Design Process
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.
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.
Based on the concerns gathered from respective users, the key issues with the existing system that needed addressing are as follows.
Pain Points of the Existing System
🎯 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.
Defined Objectives for the New Features
🚫 Constraints and Feasibility Issues
I worked closely with the development team to understand the platform's capabilities and constraints. This collaboration helped create designs that could be effectively implemented without major roadblocks. The constraints outlined below were thoroughly discussed prior to initiating the project.
Data Privacy and Security: Ensuring data privacy and security compliance could impose constraints on how user data is collected, stored, and utilized.
Development Complexity: Some design features might be technically complex to develop, increasing the time and effort required.
Scheduling Algorithms: Developing efficient scheduling algorithms that consider tutor availability, student preferences, and optimal time slots can be intricate.
Testing and QA: Thorough testing across various scenarios and potential edge cases is essential to ensure the features work reliably.
User Training: If the new features require a learning curve, providing user training or documentation becomes important.
Scalability: Ensuring the new features can scale as user demand grows is crucial for long-term viability.
Regulatory Compliance: Adhering to legal and regulatory requirements related to education and user data can influence design decisions.
Stakeholder Alignment: Achieving alignment among stakeholders, including users, management, and development teams, can impact the implementation path.
🧑🏽🤝🧑🏽️ Problem Statement
The existing process of scheduling tutoring sessions on the TutorComp learning platform is plagued by inefficiency, lack of visibility into tutor availability, and frequent scheduling conflicts. This results in frustration for both tutors and students, causing session cancellations and rescheduling. Students often struggle to find suitable tutoring times due to the absence of tutor availability information, leading to reduced utilization of the scheduling feature. Additionally, academic associates spend an excessive amount of time managing the scheduling process, affecting their overall workload.
🧑 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
Tutor 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
SYNTHESIZE
💡 Brainstorming and Ideation
After defining the problem, we proceeded to generate a variety of concepts that could eventually converge into practical designs. To achieve this, we utilized the following methods for concept generation and refinement:
Diverse Participants: The ideation session included the management members, marketing team, developers, and academic support team, all of whom had a stake in creating an effective scheduling system.
Define the Focus: The team's goal is to create a scheduling system that caters to students' busy schedules while also ensuring tutors can manage their availability effectively.
Silent Idea Generation: Participants individually jot down ideas such as automated availability syncing, flexible scheduling options, and allowing tutors to set varying availability based on the week.
Idea Sharing: Participants take turns sharing their ideas. One participant suggests integrating a calendar API that syncs with tutors' personal calendars to avoid conflicts.
Discussion and Evaluation: The team discusses the options for flexible scheduling and ways to address the challenge of scheduling conflicts. They evaluate the feasibility of implementing a calendar API and the potential benefits for both students and tutors.
Crazy and Wild Ideas: Someone suggests a chatbot that communicates with both students and tutors to find the best available time slot. While this idea seems unconventional, it sparks discussions about AI-driven scheduling assistants.
Feedback Loop: The sketches are presented to potential users, who provide feedback on the clarity and usability of the proposed designs. Some users suggest including color-coding to differentiate available and booked slots.
Selecting Solutions: 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'.
Scheduling Options
🧭 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:
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.
User Flow
🔁 Design Approaches
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
Tutor Availability Marking
Tutor availability marking was more complex than we thought, as we had to make recurring availability visible and show day-to-day availability. Moreover, the leaves booked on certain dates were also made visible.
Tutor Availability Marking
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
Tutor Availability Marking
Based on the user feedback and suggestions from the stakeholders
Simplified tutor availability marking with two clear options: list view and calendar view.
List view enabled easy addition and modification of recurring weekly hours.
Timings for a specific day could be copied to other weekdays using the copy feature.
Introduced overrides feature to replace previously marked leaves, enabling tutors to indicate unavailable timings while preserving existing available slots.
Tutor Availability- Before and After Testing - Calendar View
Tutor Availability- Before and After Testing - List View
In the calendar view, all the available timings and overrides are distinctly marked. This allows tutors to quickly glance at the entire month and get an overview of their availability.
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.
