Learnelo
Learnelo

Learnelo

Created
Oct 7, 2022 6:31 PM
Description

Learnelo is an online language learning platform

Industry
Education
Tools
FigmaMiro
Clients

Learnelo startup

Links
Design
UXUIResearch
Platforms
WebTablet

Brief introduction to my role in this project

In this case study, I have described the process that my team and I at Learnelo went through while designing the product called — Learnelo. In this project, I was the lead/head of design for the learnelo platform as this was my first start up

About

Learnelo.co is an online language learning platform built for the people to connect with qualified teachers/instructors and learn new languages. Main mission of learnelo is to provide the thai population language learner platform with qualified teachers at an affordable price. Moreover, trying to make language learning more accessible.

❓ Problem Statement

👉🏻
How might we design a seamless and hassle-free experience for the students to look for qualified teachers, connect and start learning all in one platform?

💡 Solution

In order to build a seamless and hassle-free selling experience for the students we identified the pain points of the students and teacher by doing user interviews and doing competitive benchmarking with our users. After we have collected the feedback from students and teachers, we wanted to build a smooth onboarding, views teachers and payment screen for our students and an easy and hassle-free dashboard for teachers show their availability and check their payments

  • Smooth flow for students to view teachers, payment and study with the teacher
  • Hassle-free dashboard and time availability for teachers
  • A community for the students to learn and retain the language they are learning

Scroll down to know more ⬇⬇⬇

💭 Workshop

Before we kicked off this project. We had a workshop with the representatives from YesPls team. The goal of this workshop was to:

  • Understand the goals of our stakeholders
  • Get to know our users and create user personas
  • Clarify all the doubts and questions we have listed out after we have thoroughly gone through their requirements
image
image
image
image
image

🧪 Research

Two research method were conducted while working on the product. we talked to the potential users after we have identified our personas and I did a benchmark on our competitors in Thailand and International companies to identify their USPs and how we position our product in the market

Here are the competitors we identified:

  • italki.com
  • Preply.com
  • Skooldio

⛓ Information architecture

After I have gathered information of our stakeholder goals, competitive analysis and identified the products USP. I started working on the product’s architecture to lay down how each feature will be displayed

  • Sitemaps - To organize the architecture across the website
image
  • User flows - To identify different touch points, screens, states for each flows. In the current case study, I have shown only 4 user flows (2 for students and 2 for teacher).
    • Student user flows
image
image
  • Teacher user flows
image
image

🔨 Wireframes

Once we have finished laying down our information architecture and working on the user flows for both student and teacher platform. In the next step, I focus on the creation of low fidelity wireframes so that my partners and I can visualize how the users will interact with our product and bring the IA structure to live.

After the creation of low fidelity wireframes, I worked on creating the high fidelity wireframes by filling in the details that are missing in their low-fidelity predecessors. As such, they typically contain elements that are intended to accurately represent the final product.

  • Low fidelity wireframes
Wireframes
Wireframes

✨ Visual Design

[Student] Home landing page
[Student] Home landing page
[Student] Teacher landing page
[Student] Teacher landing page
[Student] Teacher details page
[Student] Teacher details page
[Student] Chat
[Student] Chat
Video conferencing and Admin dashboard
Video conferencing and Admin dashboard
[Teacher] Teacher dashboard
[Teacher] Teacher dashboard

🎨 Design system

image
image
image
image
image