Shay Chu
Product Designer | Multilingual | Writer for Bootcamp, part of UX Collective

End-to-end Case Study

Langsteach: Learning Platform that Connects Teachers with Language Learners

Image alt tag

Project

Student Project

Role

Product Designer

Timeline

7 Months

Prototypes

Interact with my mobile prototype

Interact with my desktop prototype

Problem Statement

Problem: How can we better connect language teachers with language learners?

Problem Statement

Busy, young professionals who feel frustrated about learning a new language needs opportunities to improve their conversational skills in the target language, especially if it's not widely spoken in the country where they live, but current opportunities, such as classes and apps, tend to focus too intensely on grammar and translation and on writing and reading skills.

We will know this to be true when we have 3 000 users who are using our app at least once per week within 3 months of launching our app and reviews of our app on Google Play and on the Apple App Store have an average of 4 stars at the six-month mark of launching our app.

Guiding Questions

  • How are websites and apps in the market accomplishing this objective?

  • Are language learners interested in having a language teacher?

  • What do language learners look for in such a platform?

  • What do language teachers look for in such a platform?

Research
A simple color scheme is featured with red, white, and black in dark mode, users can search for teachers right after they login, and there are only 4 options at the bottom of the screen.

A simple color scheme is featured with red, white, and black in dark mode, users can search for teachers right after they login, and there are only 4 options at the bottom of the screen.

Competitive Analysis

I first conducted a competitive analysis on websites and apps that were already in the market. One of the companies that I researched was italki, an established leader in the industry, being in the industry since 2008. I took inspiration from its designs when I started wireframing later in the design process.

Image alt tag

SWOT Analysis on italki

At a glance

  • One-on-one lessons in more than 150 languages

  • Free Study prompts for conversations are available

  • Forums are available to use for users

Survey

From CareerFoundry's Slack and from an autodidact language-learning Discord server, I recruited 17 participants for a survey that had 8 questions.

Survey Objectives

  1. To understand user behaviour about learning a language

  2. To find out about users' pain points about learning a language

  3. To find out the functionalities that users want while using an app that connects language learners with teachers

Key Insights

  1. The majority of the participants said that they would rather study on their own than under the guidance of a teacher, but was cost a deciding factor? When asked about things that they look for if they were looking for a teacher, while about 59% of people said cost, a fewer percentage mentioned teacher reviews and teaching methods.

  2. Among the things that participants said they look for in a teacher are teaching schedule, reviews, and whether it is in-person instruction or online. I will be sure to incorporate these things into the design.

User Interviews & Affinity Mapping

From my personal network and from CareerFoundry's Slack, I recruited 4 participants who have experience studying a language besides their home language. I conducted user interviews with them over the phone and on Slack.

Participants

All the participants had experience with a language teacher.

Interview Objectives

  1. To understand user behaviour about learning a language

  2. To find out about users' pain points about learning a language

  3. To find out the functionalities that users want while using an app that connects language learners with teachers

Key Insights

  1. Three interviewees are studying another language due to interest in living in another country.

  2. The other interviewee wants to improve her English to pass an English proficiency exam.

  3. Interviewees believe that teachers do help with language studies, which provides support for our app's existence. However, they know that bad teachers exist.

  4. Three of the 4 participants believe that having peers while studying a language is important. Later, I designed a messages section to incorporate this insight into my design.

  5. Participants associate negative emotions, such as frustration and forgetfulness, with studying.

Personas

Based on the user interviews that I had conducted, I created 2 personas.

  1. One persona is someone who is studying a language to live abroad.

  2. The other persona is someone who is studying English for career opportunities. This persona helps us to think about users who live outside of the Anglosphere.

User Stories

For each of the 7 main features, such as onboarding and the payment system, I wrote 2 user stories, with 14 user stories in total. One user story is from the perspective of the student while the other is from the perspective of a teacher. Writing user stories helps us to focus what is important for each user group regarding a main feature.

Here are the 2 user stories for booking a teacher.

Booking a Teacher

Learner's User Story

As a language learner, I want to be able to see reviews of teachers, along with their teacher profile, before I pay for one, so that I know that I'm choosing the one who's a good fit for me.  

Teacher's User Story

As a teacher, I want language learners to have an easy time finding my teacher profile, so that I can have more students and earn more money.

Card Sorting

I conducted an open, unmoderated card sort with 11 cards and 6 participants.

  • I varied the wording to reduce the wording's influence on the participants' decisions.

  • I decided to conduct an open card sort because I wanted to find out the categories' names that the participants would come up with and I didn't want the categories' names that I would have picked to influence the participants' decisions.

Card Sorting Objective

  1. To understand the implicit mindset of users

Key Insights

  1. The majority of participants had onboarding in its own category while I previously had it under settings.

  2. Half of the participants had notifications under settings while I previously had it under messages.

  3. The majority of participants had the "Find a Teacher" category with the same 4 cards in the original sitemap.

  4. Half of the participants had settings in the way in which I had it except onboarding in the original sitemap was replaced with notifications.

Testing

Usability Testing

I recruited 6 participants who had varied language-learning backgrounds from CareerFoundry's Slack and from LinkedIn. Participants who did not have the target background were recruited too because I wanted the design to be accessible to the general audience. One participant used to be a language teacher.

Both the mobile and desktop versions were tested.

All the usability test sessions were moderated remote sessions on Zoom, and they were recorded with the permission of the participants.

Test Objectives

  1. Determine if users can create an account

  2. Determine if users can find and navigate through the tutorial

  3. Determine if users can book a lesson with a teacher

  4. Determine if users can send a message to another user on the software

  5. Determine if users can navigate the app to change their account information, like their password

Key Insights

  • Four of the 6 participants wanted a place to look for their friend before messaging their friend, so I created a contacts section where users can search for other users, message them, and add them to their contacts.

  • All the participants mentioned about wanting to see the tutorial screens in context, so the darken blurred backgrounds were taken out and replaced with miniature screenshots.

  • A participant had to struggle to book a lesson on the mobile version, so a "Book a Lesson" button was created, just like the original desktop version had a "Book a Lesson" button.

  • A participant accidentally accessed a teacher's entire profile by scrolling down on the mobile version, so the teacher profile on the mobile version was no longer clickable. A text button that say "See Entire Profile" was created for both the mobile and desktop versions, so there's consistency across devices and clarity too.

  • Several participants mentioned about wanting to see more than a weekly schedule and clicked on the time slots that weren't clickable, so a UI calendar was created for both the mobile and desktop versions.

  • Added a terms & conditions to the payments page, so it doesn't look "sketchy," as one participant put it

View my test report:

https://drive.google.com/file/d/1okmSjhDjo3sx7xUq33tXuuq3d8FNeAZV/view?usp=sharing

How did this test affect my designs?
Mobile Preference Test Versions

Mobile Preference Test Versions

Mobile Preference Testing

I recruited 14 participants from CareerFoundry's Slack and from a Discord server focused on language learning.

Only the registration/login screen of the mobile version was tested. Two versions of the screen were made for the preference test.

All the mobile preference test sessions were unmoderated remote sessions.

After choosing their preferred design, the participants were given the option to answer the question "Why did you choose that option?" which they could not answer.

Test Objectives

  1. Determine user preferences regarding the positioning of the registration & login buttons on the mobile version

  2. Find out how users feel about the registration/login screen

Mobile Preference Test Results

Mobile Preference Test Results

Key Insights

  1. Eight participants (57%) chose version 2.

  2. Six participants (43%) chose version 1.

  3. A participant wrote that “Continue as guest makes more sense under the sign up option,” which I agreed.

Even though the desktop version wasn't tested in this preference test, its corresponding screen was revised, so there's consistency across devices.

How did this test affect my designs?
Desktop Preference Test Versions

Desktop Preference Test Versions

Desktop Preference Test

I recruited 18 participants from CareerFoundry's Slack.

A desktop screen that clearly featured the top navigation bar was used. Two versions of the screen were made for the preference test.

All the desktop preference test sessions were unmoderated remote sessions.

After choosing their preferred design, the participants were given the option to answer the question "Why did you choose that option?" which they could not answer.

Test Objectives

  1. Determine user preferences regarding the positioning of the "Access Website Tour" text button

  2. Determine user preferences regarding the positioning of the Langsteach's branding

Desktop Preference Test Results

Desktop Preference Test Results

Key Insights

  1. Eleven participants (61%) chose version 2.

  2. Seven participants (39%) chose version 1.

  3. A participant wrote that “I always expect the logo to be in the top left, so would never expect a button to be there. It fits much better in the menu."

How did this test affect my designs?

Designer Feedback

I asked for feedback from 4 designers, and I changed my designs accordingly.

Style Guide
Summary
6
Months
4
User Interviews
1
Usability Test
2
Preference Tests
65
Total Participants

What have I learned?

Potential Next Steps

  • New problem statement and hypothesis statement

    • Language learners want to know whether teachers have experience or are focused in teaching to their level of proficiency in their target language. Therefore, there should be proficiency levels to which the teachers teach on their profile cards.

      We will know this to be true by conducting preference testing where the result is statistically significant.

  • Conduct a new round of usability tests on the prototypes

  • Conduct a new round of preference tests on other features

  • Revise the designs based on the results

Drop me a message
Let's share ideas & discuss ways to collaborate!