LearnLink — Master your craft with the help of an online tutor
Introduction
Hello reader! Throughout this UI/UX case study, I will present the design of my new web application, “LearnLink”. It comprises several features that enable users to book a lesson and discover the best teacher for their subject of interest. I aspired to create an app as user-friendly, intuitive, functional, and unique as possible.
Project overview
Imagine being a student and having difficulty preparing for a particular exam, or try to think of an adult who is inspired to learn a new skill but does not know where to start. In either case, both the student and the adult lifelong learner will come across learning problems that could more easily be resolved by an expert in their field of interest.
I worked on this project as a sole designer, and the following (the design and the case study) is a product of 4 weeks of work.
User research
User demographics
- Age range
From children, i.e., students as young as 12, to adults in their 40s or 50s (I call them “life-long learners”). - Educational background
Target groups in terms of their educational background are elementary school, middle school, high school, or university-level students, but also people with no educational background. Formal education is not an important factor, even though most of the users are still expected to be students. - Geographic location
The geographical location of LearnLink’s users is not important, as everyone can access the platform online.
User goals and objectives
- Learning and skill development
Some users may have the goal of acquiring new knowledge, improving existing skills, or developing expertise in specific subjects or areas. - Academic success
For students, their objective might be to achieve academic success by using LearnLink to supplement their studies, improve grades, or prepare for exams. They may seek resources, tutorials, or guidance to excel in their educational pursuits. - Personal growth and enrichment
Users may have a broader goal of personal growth. They might seek self-improvement, pursue their interests, or engage in lifelong learning. LearnLink can provide them with opportunities to explore new subjects or indulge in intellectual curiosity. - Sharing Knowledge and Expertise
Those motivated to teach aim to share their knowledge and expertise in a particular subject or field with students. In the end, naturally, they will tend to monetize their skills.
Types of users
Even though the focus of this app is on students, there is still one other type of user one must not neglect — tutors. Therefore, there are two well-defined user personas:
Problem statement and solution
After taking the findings of user research into account, it was time to state the core problem users have and how LearnLink is supposed to solve it:
Essentially, finding an adequate mentor or tutor for one’s learning process can be hard. Finding an expert in a specific field and getting to know your tutor takes time and patience. With LearnLink (which will be shown later more in detail in the Final Design chapter), students can read a tutor’s profile description, learning approach, and other students’ reviews. All of this eases the students’ decision-making by saving them both time and money. On the other hand, tutors will also attract students with somewhat similar personalities to their own. In one way, that makes the tutor’s job and the student’s experience more enjoyable.
Competitor analysis
The following is a summary of the competitor analysis for some of the competitors’ online learning platforms. I went through every one of these sites myself, taking notes on what was good and what wasn’t.
Verbling
Verbling is an online language learning platform that connects students with language tutors for one-on-one lessons through live video calls.
Pros:
- Nice and user-friendly UI
- It's easy to start searching for tutors
- The first lesson is free of charge
Cons:
- One can only find language tutors
- Needlessly rigorous requirements for becoming a teacher
Tutorful
Tutorful is a web application that connects students with qualified tutors across a wide range of subjects and academic levels.
Pros:
- Offers a wide range of subjects
- Playful and clear UI
- Offers lessons to people of all ages
Cons:
- Tutors are limited to the United Kingdom
- High percentage fees
Wyzant
Wyzant is an online marketplace that connects students with a wide range of tutors across various subjects and academic levels.
Pros:
- Flexibility for tutors in terms of lesson duration, pricing, etc.
- Wide range of subjects to find or tutor
- It is possible to find tutors who offer both online and in-person teaching sessions
Cons:
- Messy and outdated UI
Preply
Preply is an online platform that connects students with tutors for one-on-one or group lessons in a wide range of subjects, with a primary focus on language learning.
Pros:
- Modern and clean user interface
- Goal tracking function
- Offers group lessons
Cons:
- Offers mostly language learning
- Very high commission rates for tutors
Inspiration board
No matter the topic of the project at hand, I always aspire to collect inspiration and ideas. I take shots of all the sites and pages relevant to my project and put them onto a special Figma page called the Inspiration Board. This way, I come up with some ideas and extract already-existing, good-looking design elements.
Since the structure of my design has some common elements (such as the dashboard, search page, reviews, etc.) with other online learning platforms, I made a segmented inspiration board with specific UI elements.
Wireframing
After understanding users’ needs and pain points, analyzing competitors’ platforms, and collecting inspiration, it was time to make low-fidelity wireframes of the main screens my web app would contain. I will not show them here, as they only served me in the early stages of structuring the entire app.
Style guide and resources
To make my workflow more fluid and my design more consistent, I created a style guide.
I chose the Quicksand typeface because of its playful and uplifting nature. I believe learning should be linked to overall positive emotions. Regarding font size and style, my goal was to reduce the number of the two to a minimum because of simplicity and maintainability.
I also spent some time thinking about the theme colors I would use. I experimented with a few more color palettes but found the one above to be the most suitable for this project. The colors blue and green are supposed to make the design friendly, especially for a younger population since they represent the majority of potential users.
All the visuals used in this project come from sources with high-quality photographs and illustrations. Especially when it comes to choosing illustrations, I made sure that, first of all, I stayed consistent by using only one illustration pack. Secondly, it was important that they also follow the playful and uplifting nature of the platform.
You will have a chance to see a few of the above-mentioned illustrations in some of the design shots below.
Final design
The following are the most important design shots of the entire web application. I will explain every design element in detail after every shot.
- The navigation bar contains some of the more important links to other pages within the site. The CTA on the left is a sign-in button that gives users the option of signing in or registering (in case they already don’t have an account).
The How it works and Become a tutor links lead to rather informative pages (more about them later). - The second important element in the hero section is the search bar. Users can immediately do a quick search to find a tutor for their preferred subject.
- The “LearnLink in numbers” is supposed to be a small section designated to reassure a new user of how the site grows and that people were using the site’s services before them.
- The “Explore our popular subjects” section serves two purposes. The first one is to show how our platform offers a wide range of subjects but also to engage the user to start searching for his/her tutor. All of these subjects are actually links that start a search for the desired subject.
- This CTA opens a search page.
- “What our students say” is a classical testimonial section. It is very reassuring for new users to read about the experiences of people who have already used the platform. Social proof is very important.
- This is a small UI detail; there are arrows on each side to easily scroll through more reviews.
- Since the majority of visitors to the site will, for the most part, be students, this “Become a student” section is crucial. It is the last section of our landing page and is supposed to be the last call for a visitor to become a user.
- Regardless, if the visitor is still not sure or has some questions about signing up, he/she can visit the “How it works page”.
- The footer will be the same on every page of the site. It contains some other less important links and links (in the form of icons) to the social media accounts of the platform. I also included a newsletter since LearnLink could communicate directly with their users in a personalized way by sending out valuable content, news, and promotions.
This is the page visitors to the site open when they want to inform themselves. However, this specific page is particularly designated for students, i.e., those who want to become that.
- In the first few seconds that the visitor scrolls through this page, the goal is to inform him/her on how to find the most suitable tutor and how to arrange the first lesson.
- Immediately after, the “Become a student” section openly invites the visitor to register as a student.
- The third section reassures the potential student that his/her money is refundable after the first lesson. For a higher conversion rate for lesson reservations, such an offer may be crucial.
- The “FAQs” section is quite self-explanatory. It is supposed to answer some of the most frequently asked questions users might have regarding their entire learning experience on the platform.
The “How does it work for tutors” page has a similar purpose to the one above (the “How it works for students” page). It is just that this one addresses the tutors. The potential tutor is first informed of how everything works and then invited to sign up.
Sign-in/sign-up process
Upon clicking on the sign-in button on the landing page, the visitor is led to this page.
- He/she is asked to enter his/her email address and password to access his/her account. Upon entering the correct information (email and password), the user is signed in to his account.
- If the visitor does not have an account already, he/she is encouraged to make one.
The following steps are for registering, i.e. creating an account.
One chooses whether he/she wants to use LearnLink as a student or as a tutor.
If the user decides to use the app as a student, he/she must fill out these fields. This is the only relevant information:
- First and last name;
- profile photo;
- email address and password.
On this page, sign-up is complete for students. The student is then redirected to his/her dashboard.
Tutors essentially must enter the same sign-up information as students; however, for them to complete their registration, they must also add an initial teaching offer.
Note: The text that the tutor fills out as a short biography is the same for every new teaching offer.
With this page, registering as a tutor is complete. The tutor is directed to his/her dashboard.
Student dashboard
In the next few shots, I will present the student dashboard, its functions, and its elements.
Essentially, it is divided into three parts:
- My lessons;
- notifications;
- settings.
This is the design of the “My lessons” part of the dashboard, and it looks like this in case the student has no booked lessons. By placing the “Find a tutor” CTA, the student is encouraged to find a tutor and book a lesson.
This is a list students see when they have booked lessons. In the top right corner, there is a “Find a tutor” button, which, when clicked, opens up the search page (which will be shown later). Also, students have an overview of the upcoming lessons and the recent lessons.
In the shot above, we can see a list of upcoming lessons this fictional user has. He/she can sort out how he views these lessons; in this example, they are sorted by date, but they can also be sorted in other ways as well.
In the “lesson bars”, there is a button with a vibrant red color for canceling a lesson. When clicked, the following pop-up appears:
On the pop-up, the student confirms his choice. That way, accidental cancellations are avoided.
The “Recent lessons” tab, aside from serving as an archive tab for past lessons, is also a tab on which the student leaves a review for the tutor.
A pop-up such as the one above appears, and the student leaves a star-based review and writes what he/she thinks about the lesson as a whole. These reviews later on help higher-quality tutors differ from other mediocre tutors but they also help future students make a smarter choice when selecting an instructor.
On the notifications page, students receive notifications i.e. cancelations, confirmations, and updates.
On the settings page, users set up and change their account information.
Upon clicking the profile photo in the top right corner, a small dropdown menu appears. It contains the same links as the dashboard navbar along with the links: find tutors, messages and log out.
The final part of this dashboard is the messages tab. It is essential for communication between the two sides. It is here that they also discuss further details such as the learning material they will use and on which platform the session is going to happen (e.g. Zoom, Discord).
Finding a tutor
This is the search page. At the top of the page, there is a search bar. By typing in the name of the wished subjects, results start coming out. On the left side, there is a filter frame. I included only the two most important filter elements: price and star review. I felt as if those are the most important factors when students look for a tutor.
Right below the search bar, there are a few buttons to do a quick search by the most popular subject.
Once the user comes across a tutor he/she finds most suitable, he/she can open that tutor’s profile page.
The most important information on this page is structured so that it is easily visible. The tutor’s hourly rate and the star rating are at the top of the page, along with the tutor’s name and profile photo. Profile photos are important for establishing trust and connection and for increased approachability.
The Reviews part of the page is also very important because it serves as social proof. This section is filled with students’ reviews. They provide valuable insights for future learners.
Another essential part of the page is the schedule and messages section. This side of the page has fixed scrolling so that it is always accessible, even when the user scrolls down to see more information at the bottom. This way, the student is indirectly encouraged to select a time and date, i.e., book a lesson or send a message to the tutor.
Payment
After the student selects the preferred lesson date, he/she proceeds to the payment page.
The shot above is the billing form. It is the next and final step, right after the student books a lesson. Then, the student receives a payment confirmation in his/her notifications tab (and an electronic receipt via email if requested), and the tutor gets notified of a newly booked lesson.
Tutor dashboard
Note: The tutor dashboard contains the same elements as the student dashboard. The only part composed exclusively of the tutor dashboard is the “My services” tab.
In this tab, the tutor manages his teaching services. He/she can add teaching services or edit existing ones.
This is the page on which tutors set up their teaching offers. I intended to make the process of adding a lesson offer quick and easy. Tutors only need to write the name of the subject they teach, describe their teaching approach, enter their hourly rate, and select the time in a week when they are available. Once a tutor completes listing his/her services, their offer is live and listed on the platform for students to find.
Usability testing
Because LearnLink is my private project and the whole product went only through the research and design stages, any type of serious or extensive usability testing is hard to achieve due to technical limitations. However, I insisted on conducting a small usability test with 10 people in my community. Since I tested LearnLink with a quantitatively small group of people, I only collected qualitative test findings.
Note: Since the examinees consisted exclusively of friends and family (those that fall into the user group—students and potential tutors), I insisted that they try to be as objective and unbiased as possible.
I gave them the following tasks to complete within the app:
- Sign up as a tutor or as a student (depending on interest)
- Find a tutor
- Book a lesson
- Leave a review
Below is a summary of the feedback from testers in the qualitative assessment of my product.
I have a hard time singing up as a tutor
Three testers who planned on using LearnLink as tutors reported that initially finding a way to sign up as a tutor was somewhat difficult. They were right; in the initial version of the page, the "Become a Student" button was easy to find on the landing page, while the "Become a Tutor" button was hidden. To change that, I placed a navigation link “Become a tutor” in the navbar. Now the link leads to a page where one can find out more about how tutoring works, but more importantly, they can sign up as a tutor!
I can’t see my past lessons
For 4 out of 10 users, viewing past lessons was very important. However, doing that was a bit difficult. In the first versions of the student and tutor dashboards, to see previous lessons, one had to click on his profile icon and then find the “Recent lessons” link. Now, it is placed on the “My lessons” tab of the dashboard, where it is more visible.
Reading and leaving reviews is easy
6 out of 10 users liked the function in which they could leave a review, but more importantly, they liked that they could read reviews about tutors. This instilled confidence in them regarding tutors and the platform in general.
When it comes to all the other tasks I gave my testers, they completed them with negligible difficulty.
Final words
Thank you for reading this case study. I have learned a lot in the entire process of designing this platform. However, as it always happens at the end of any project, only now can I see the mistakes I made and the irregularities of the product as a whole.
If you liked my case study, make sure to clap it 50 times. Here’s a pro tip: try long-pressing the clap button to clap faster!
Get in touch
Find me on LinkedIn or email me on danisokic.design@gmail.com
