Colearn is an EdTech company that uses AI to aid students in comprehending math problems.

Services Product Design & Strategy

Year Apr 2020 - Aug 2020

View Live
Retta 12th Grade Student
Wow! CoLearn is incredibly useful. In addition to taking pictures of questions, joining the Live Class is a blast. They taught me the fundamentals. I'm falling in love with Math even more!

Context #

Colearn is an EdTech company that uses AI to aid students in comprehending math problems.

Colearn began operations by partnering with an offline tuition center to enhance Indonesia's education. However, the offline tuition model has many drawbacks, such as cost and time, making it accessible only to certain students. Moreover, due to COVID-19, offline activities have become inefficient and risky.

As a Product Designer, I help CoLearn transform its business from a tuition center platform to an automated, scalable, and effective learning tool in Indonesia.

I designed an AI-powered "automated doubt-solving" and interactive class learning feature to help students study during the COVID-19 pandemic. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, with over 2.5 million users. In 2020, Google Play selected CoLearn as the best app in the personal growth category.

Think #

One of the challenges to transform the business is we only have a limited time. I collaborate with the Customer Insight team to validate the early-stage changes to save time.

We conducted 1:1 online interviews with students from various Indonesian cities to gain insights into their learning experiences. Three main points emerged from the interviews:

🔍 Three main insights

  • The student has difficulty locating reliable resources to comprehend math lessons.

  • The student is struggling to find an excellent teacher to enhance their academic success.

  • The student struggles to practice their skills due to the limited number of exam questions available.

Explore #

We explored the problem by creating a customer journey. We defined the student's interaction with CoLearn.

User Journey Map for Practice Platform feature
User Journey Map for Practice Platform feature

From the customer journey, we convert to a main flow and create a wireframe to confirm the idea. In this stage, we decide to include four main features:

🎛 Four main feature

  • Tutor (Tutor finder feature)

    Students can seek help from teachers when they encounter learning difficulties.

  • Bimbel (Tuition Center)

    Students can locate nearby tuition centers and enroll for long-term learning. This will provide a deeper understanding rather than merely studying when they encounter difficulties.

  • Practice

    Students can hone their exam skills at any time by practicing answering questions.

  • CoLearn+

    Students can learn from inspirational people, providing them with role models to dream about.

CoLearn Main FLow
Main Flow - CoLearn 2.0

Build #

Wireframe #

We create the wireframe based on the main flow we constructed earlier. We aim to confirm our hypothesis: Will the student problems be solved by these features?

Screenshot CoLearn Wireframe
Screenshot CoLearn Wireframe
Screenshot CoLearn Wireframe

We began by researching with students to test our wireframe. We hypothesized that students would no longer visit the tuition center. So, we conducted A/B testing by creating two versions of the prototype; one with the Bimbel (Tuition Center) feature, and one without it.

The research results surprised us. Some of the features we had previously investigated failed to meet student needs. Here is our insight:

🔍 Three main insights

  • Most of them are not keen on attending a tuition center, but they need long-term learning to gain a deeper understanding.

  • Students experienced difficulty asking multiple questions because they had to book the teacher and then inquire about the schedule. They needed to resolve the issue quickly

  • Students already have plenty of inspiring role models, such as those found on YouTube, so we're not focusing on this for now.

Based on our insights, we are considering merging and modifying some features. We have identified three main components:

🎛 Three main feature

  • Live Class

    Students can join interactive, live classes for long-term learning, providing a deeper understanding. These classes are limited to small groups, allowing for a more personal experience.

  • Ask(automated doubt solving)

    Students can solve the problem by taking a photo. This one is our main feature to support students learning math subjects.

  • Practice

    Students can hone their exam-taking skills by practicing answering questions whenever they wish.

High-fidelity #

Live Class #

Learn concepts, practice together, and prepare for exams in an interactive, live class.

Live classes help students build confidence in understanding concepts. Teachers teach and interact with students in real-time, making it easier for students to comprehend the material, practice questions, and prepare for exams.

Screenshot CoLearn Live Class
Screenshot CoLearn Live Class

Ask (automated doubt solving) #

Get step-by-step video solutions to your math problems instantly.

The Ask feature is designed to help students learn from their mistakes, enabling them to gain a deeper understanding of concepts quickly.

Students can take a photo of any question they don't understand. CoLearn uses image recognition and natural language processing technology to automatically provide video solutions.

Screenshot CoLearn automated doubt solving
Screenshot CoLearn automated doubt solving
Screenshot CoLearn automated doubt solving

Practice #

Prepare for exams by practicing answering questions from different subjects.

The Practice feature helps students hone their skills in answering questions from different subjects so they can gain a better understanding.

Students can exercise themselves by taking simulated exams like the real thing. Upon completion, they receive an immediate report to identify areas for improvement.

Screenshot CoLearn Practice
Screenshot CoLearn Practice

WhatsApp Chatbot #

Grow user base by leveraging the most popular channels.

More than 80% of internet users in Indonesia use WhatsApp. To increase user growth, we've been exploring alternative channels rather than relying solely on social media promotion.

We collaborate with the UX Writer to design the WhatsApp chatbot feature. We use Botsociety for prototyping, making it easy to test and share with stakeholders.

Design System #

Creating a cohesive and scalable design system

We developed a design system to ensure consistency and accelerate the design and development process. Our goal was to create a design system that is straightforward, understandable and visually appealing for students.

We define a foundation of colors, typography, elevation, icons, and grids to make it easier to use across Web, iOS, and Android platforms. This enables the team to build a faster and more accessible interface.

Screenshot CoLearn Design Token
Screenshot CoLearn Design Token

In addition to Foundation, we construct Core UI components such as Avatar, Tag, Button, Form and Alert. As the app expands, we also develop new components as templates, such as Top Bar, Bottom Bar and Feedback.

By creating the design system, we want to make it easier for everyone. Starting from designers themselves, engineers, and users.

Screenshot CoLearn Design System
Screenshot CoLearn Design System
Screenshot CoLearn Design System
Screenshot CoLearn Design System

🏆 Launch

In August 2020, we launched the new CoLearn. After three months of my involvement in the transformation, it was rewarding to see the design come to life and help students learn every day.

The unique student registration has grown to over 2.5 million as of March 2021 since its release.

Student feedback has shown that CoLearn has had a significant impact on success. Many students have reported enjoying and benefiting from the experience.