Learnelo is an online language learning platform
Learnelo startup
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
💡 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





🧪 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

- 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


- Teacher user flows


🔨 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

✨ Visual Design
![[Student] Home landing page](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdb138e04-99cd-4e50-b76f-8341eae93128%2FHome_page.png?id=fb3ea7b1-f105-4d61-ab28-a7c157581243&table=block)
![[Student] Teacher landing page](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F920e5e9b-d656-46ee-a7e6-1bd7fec9be7f%2F3._Find_your_teacher.png?id=c6f3a306-0c62-4b57-8c5e-92fbb874e3d8&table=block)
![[Student] Teacher details page](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb4826d37-83eb-481c-aafa-87f921a782a9%2Fteacher_details_page.png?id=422c3fcd-5c23-42ff-b07f-8ce20a8cc1b9&table=block)
![[Student] Chat](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb479e968-1a78-4f3c-8d2a-a8e6fe215ece%2FChat.png?id=d959281f-52de-4e09-8308-668c62443a59&table=block)

![[Teacher] Teacher dashboard](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff0296f00-22ad-46b6-876b-4f019dd82218%2FTeacher_dashboard.png?id=cc01326a-1461-464a-81ae-be90d09d7ff8&table=block)
🎨 Design system




