LiveXP – EdTech SaaS

Mobile Designer

UX Designer

Product Designer

Amplitude

Figma

Miro

LiveXP

Web

iOS

Android

Goal

At first, we aimed to create an educational live streaming platform for people to share their knowledge, essentially a 'Twitch for education.'

However, during our research and testing, we pivoted toward a language learning marketplace. In the future, LiveXP plans to expand to include other skills for people to share.

Before we continue, watch the video of LiveXP of our dreams.

Challenge

For learners

To understand the user I took my own path of trying to learn on every platform we considered as competitor and results were insightful. In general I had a hard time finding a tutor.

I encountered the following pain points:

Limited budget

Variety of tutors teaching a specific language

Tutor's availability and timezone

Even when I finally found a tutor who seemed like a good fit, I faced the second set of barriers:

Proof of tutor's capability to teach

Accent, speech tempo and mood

Overall quality and completeness of the profile

For tutors

COVID forced many people to adapt quickly and learn to work online.

Education marketplaces were already overcrowded with professional tutors. It made offline-to-online switch really difficult especially for community tutors.

Pain points:

Overcrowded and hard-to-stand-out platforms

Complicated registration and verification process

Geographic related payout issues

In the light of knowledge

Merch on my desk

The team in the office

Solution

For learners

Onboarding:

Search and Match:

Selection:

Learning Experience:

Feedback and Evaluation:

Community services

For tutors

Profile:

Availability:

Verification and Quality Assurance:

Reviews and Community:

User experience flow: scheduling and conducting a lesson

User experince flow: scheduling and conducting a lesson

Design

When it comes to creating a platform such as an educational marketplace, you can find great examples in current market whales like Preply and Italky. They serve as examples of how to do it right, having attracted substantial traffic and setting UI/UX patterns that people have grown accustomed to.

Therefore, when planning to attract users to your product, it's advisable to follow similar UI/UX patterns in look, feel, and usability to help users become familiar with your product more quickly.

Discovering tutors

Pivot from a multi-skill marketplace to a subscription-based language learning platform.

Early design of home page vs subscription based home page

Tutor discovery A/B testing on the category page

Student dashboard

Set up your personal schedule, track your progress, and keep the learning streak!

Tutor profile

Learn more about the tutor and book a trial lesson to see if you are a good fit.

Booking and paying for a lesson

Schedule for later or start a lesson instantly if the tutor is available.

Pivot to subscription

We were prepared for the fact that this transition would lead to the loss of some expensive tutors, but this step was necessary to achieve our business goals within the set deadlines.

Prior to implementing this change, we conducted numerous interviews with both students and tutors to gather their feedback and facilitate the smoothest transition possible.

Conducting a lesson

Lesson structure

Warm-up:

Introduction:

Main Activity:

Feedback and Corrections:

Homework or Assignments:

Closure:

If that was the last scheduled lesson, tutor can ask learner if they want to continue learning together with one click.

Virtual classroom for 1-on-1 lessons

End of the trial lesson followed by the subscription prompt

Lesson management

Get notified of upcoming lessons via iOS or Android apps, agree on rescheduling or canceling lessons.

Tutor studio

Onboarding – no interview or documents required

Compared to the competitors, on the LiveXP platform, tutor onboarding has been designed to be as straightforward as possible.

However, it can be a rather lengthy process, especially if you are registering your very first tutor account and have never tutored online on similar platforms, and do not have a pre-made biography or a video about yourself.

In-app lesson management: notifications, schedule, rescheduling, chat, dashboard

Tutor onboarding steps: teaching settings, availability, introduction, rules

Tutor dashboard

Lesson calendar (schedule), availability management, charge rate progression, wallet, lesson settings, vacation mode, busy mode and more.

Design system

UI kit

I like to remember our first front-end dev (he's head of the front-end department now) said 'One component each day.' So we stuck to the plan of adding one component every day from the very beginning of the development.

It kept our codebase clean, manageable, and less prone to becoming a legacy mess.

It also provided us with the high speed of scaling UI. For instance, to add a new option in the menu or even a whole new menu the developers only needed a text description of the task.

Colors, typography and just a few components demo

Icons & animations

Material Design Icons has great readability and pretty simple guidelines. Some of the icons I've created myself using Material guidelines.

We also connected our codebase with the icons frame via Figma API so designers could easily update icons (in case of emergency) without asking the devs to re-upload the files.

Our talented motion designer created all animations and videos, with my direction.