Manabie
E-Learning App: Total Education

INTRODUCING MANABIE APP

Manabie is an online learning service for high school students (G10-12) and university exam candidates. Manabie provides courses that are perfect for catching up with school lessons, studying ahead, or studying for school tests, mid-term exams, final exams, and university entrance exams, based on the concept of ‘Total Education’, as opposed to pure memorization.
‍
Manabie’s lectures are delivered through short and engaging animated videos, and reinforced with comprehensive study guides, quizzes, and mock exams.

MY ROLE

Role: Product Design Manager
I joined Manabie in 2019 as the first official designer in the Vietnam office - all designs below are done by me.

Over the course of two years, I built and led a design team, growing it from 01 designer to a team of 06 designers by 2021.
Team Leadership
‍•  Mentor and guide a team of six product designers across Vietnam, Singapore, and Japan.
•  Oversee resource allocation to ensure project success.
Design Strategy & Execution
‍•  Shape design vision to align with business and product goals.
•  Conduct user research to identify needs and pain points.
•  Create user flows, wireframes, and prototypes.
•  Maintain and evolve design systems for consistency and scalability.
Communication & Collaboration
‍•  Present design concepts effectively to stakeholders.
•  Partner with product managers, engineers, and stakeholders to develop solutions.
•  Lead stakeholder meetings and ideation workshops.
Metrics and Impact
‍•  Track design success through user feedback and data analysis.
•  Implement improvements based on insights and performance metrics.

Commercial Video

Step-by-step guide on how to use our app, take users through each feature, ensuring they can easily navigate and make the most out of everything the app has to offer.

EXISTING PRODUCT & ISSUES

In 2019, when I joined Manabie, the mobile app faced significant challenges, including a high drop-off rate and low user engagement, leading to reduced time spent on the platform. These issues negatively impacted the app's performance and overall user experience
High Learning Drop-Off Rate
67.6% drop-off rate - Manabie Learning Journey
Manabie App was facing a high learning journey drop-off rate of 67.6%. Many learners find the journey either too difficult or lack the motivation to complete it. The consequence is students finish lessons without fully understanding.
Low Assignment Completion Rate
26% assignment completion rate
Manabie faced a low assignment completion rate, with only 26% of assignments being completed. Many students struggle to locate assignments, often forget about them, and show low engagement with the tasks. This is reducing the overall effectiveness of their learning experience.
Low User Interaction
Falling below industry benchmarks
Manabie struggled with low average time on the app, falling below industry benchmarks. Many students find the app lacks engaging content and fails to engage users effectively. This limits their interaction and reduces opportunities for meaningful learning and retention.
RESEARCH

UNDERSTAND THE PRODUCT & BUSINESS OBJECTIVES

Method & Techniques
Stakeholder Meeting
Brainstorming
In 2019, when I joined Manabie, the mobile app faced significant challenges, including a high drop-off rate and low user engagement, leading to reduced time spent on the platform. These issues negatively impacted the app's performance and overall user experience
SOLVE PROBLEM
In this showcase, my focus is to address the critical issue of a 67.6% drop-off rate in Manabie's learning journey. The design approach aims to identify the problem, come up with solutions that enhance user engagement and improve user experience throughout the learning experience.

AUDIT PRODUCT, REFINE THE DESIGN PROCESS

Method & Techniques
Review Documentation
Stakeholder Meeting
The first step in my design approach at Manabie was to audit the product and refine the design process. ​I began by downloading the app from Google Play and the Apple Store, exploring its features in the learning journey, and evaluating its performance and user interface.

Next, I defined the design process for the team, choosing Agile UX to enable effective collaboration between designers and developers. This choice aligned seamlessly with the development team’s existing Agile/Scrum methodology.

AUDIT PRODUCT, REFINE THE DESIGN PROCESS

Method & Techniques
Google Analytics
Mixpanel
The second step of my design approach was to analyze user data to address the problem. Manabie uses two user behavior tracking tools—Google Analytics and Mixpanel. I collaborated with a data scientist to examine user data and behaviors throughout the Manabie learning journey.

This analysis provided valuable insights which help me to define the root-cause problems of the product.
Identify where the problems come from
The data analysis allowed me to narrow down the areas of the problem, providing a clear understanding of where users were facing challenges. This insight was crucial in shaping an effective strategy for addressing these issues and guided the direction of my subsequent design efforts.
Step 5 ⇾ Step 6
Between steps 5 and 6, the highest drop-off rate of 44.4% was observed
Step 4 ⇾ Step 5
From step 3 to step 4, there is a significant drop-off rate of 31.8%, the second highest in the process.
Step 2 ⇾ Step 3
From step 2 to step 3, the drop-off rate is 9.9%. it is a room for me to improve the product.

CONDUCT HEURISTIC EVALUATION

Method & Techniques
Heuristic Evaluation
One of the most efficient design methods I applied in the early stage of my approach for the Manabie app was heuristic evaluation. This simple and effective method helped evaluate the usability of the current product and identify areas for improvement.​

I conducted the evaluation on 9 key screens on the learning journey.

Below is a sample of my evaluation findings.
Manabie Heuristic Evaluation
1
Visibility of system status
  • The course should display the users' learning progress status.
  • The UI should display the courses students have completed and those they have not.
  • The course card should show the number of topics as well as the number of lessons in the course.
  • The UI should indicate to the user which step of the learning journey they are currently on.
2
Match between the system and the real world
  • We should restructure the course list and update its naming convention, for example, changing "Math Grade 12" to "Course Name: Geometry and Dynamics, Grade: 12."
  • Reconsider the copy "Find from subjects"
  • We should consider changing the home icon, as the current pencil icon doesn't make it easy for users to understand its purpose.

CONDUCT USER INTERVIEW, BUILD PERSONAS

Method & Techniques
Interviewee: 10 Students
Duration: 30 mins per user
To gain a deeper understanding of the users, I conducted user interviews, which is an efficient method for gathering insights. Focusing on improving the learning journey, my interview questions focused on users' experiences with the manabie's learning journey.​

The interviews were conducted in Manabie Office in 3 days on 10 students.​​

Based on the insights gathered from the user interviews, I developed two early personas to represent two groups of students: urban and rural students. By understanding the different behaviors and needs of each persona, I was able to tailor proper solutions for each persona.
Manabie User Interview
Interview Questions
  • Could you introduce about yourself?
  • Can you tell us a little about your daily study routine?
  • What specific goals do you want a learning app to help you achieve (e.g., better test scores, mastering specific subjects)?
  • What challenges do you face when trying to study with Manabie App? - Learning Journey.
  • Have you ever felt overwhelmed or lost when using Manabie app? If so, why?
  • How do you prefer to learn—through videos, quizzes, reading materials, or interactive activities?
  • Are there any step/features in the learning journey you feel are missing from Manabie App?
  • If our app could do anything for you, what would be the one feature you’d want the most?

CONDUCT USABILITY TEST, BEHAVIORAL INSIGHTS

  • Interviewee: 10 Students
  • Duration: 40 mins per user
  • Days: 3 Days
  • Technique: Observation and Interview
The usability testing is an indispensable part of my process, the purpose is to ensure the effectiveness and accessibility of our app across diverse personas. I have conducted usability test upon 10 users whom represent 02 personas such as: Urban Student Persona and Rural Student Persona.​

‍Each testing session spanned 40 mins, allowing me to gather comprehensive feedback. ​There are 2 major tasks that users are requested to process are:​

‍Goal 1: Find out the most relevant subjects, topics and lessons in the Manabie App.

‍Goal 2: Complete the learning journey with at least 40%

The results of the usability testing helped identify the root-cause problems affecting the user experience on the define stage.

COMPETITIVE LANDSCAPE ANALYSIS

Using the list of competitors provided by stakeholders, I conducted a competitive landscape analysis. I started by downloading their apps to experience and observe their features.

I then consolidated my findings into a competitive analysis template, which allowed for a structured comparison and identification of key differentiators and opportunities for improvement.​

Below is a part of my analysis.

DEFINE PROBLEM: SYNTHESIS & ANALYSIS

After conducting user research, I consolidated all user data into Excel sheets for synthesis. Using a simple grouping method, I organized similar information to identify patterns and common themes. To highlight the key problems, I visualized the findings using a bar chart, making it easier to prioritize issues and inform the next steps in the design process.​

The bar chart below illustrates the key issues in Manabie's learning journey, identified from the user interviews conducted in the previous stage.
Learning Flow is too long
Many students feel that the learning journey on the app is too lengthy and time-consuming.
Boring Learning Materials
Many students find the learning materials on app is too boring. They prefer video content rather than just text.
The Quiz UI is missing essential features
Most students feel that the Quiz UI lacks essential features, making it difficult to navigate and use effectively.
The UI is unattractive
Most students find the UI too old-school and feel that it lacks visual attraction.
The app's navigation is confusing
Most students find the app's navigation confusing and difficult to use.
Hard to keep track with their studying progress
Most students find it difficult to track their study progress within our app.

SCREEN ANALYSIS & POINT OF VIEW (POV) STATEMENT

To define the root-cause problems for each screen in the learning journey, I analyzed user data gathered from usability tests and heuristic evaluations. Feedback was grouped by each mobile screen, allowing for targeted analysis.

By applying the "user point of view" statement method, I gained deeper insights into user pain points. This approach helped me identify relevant solutions to enhance the usability of each screen.

FACILITATE IDEATION WORKSHOPS

Method & Techniques
Group Brainstorming
Object-Oriented UX
Card-sorting
How Might We
To solve the problems identified in the previous stage, I facilitated an ideation workshop with four stakeholders. During the workshop, we explored various design methodologies, including card sorting, "How Might We" questions, and Object-Oriented User Experience (OOUX)...​

In the early stage, our solutions focus on solving 2 problems on the learning journey below.

80% - Learning Flow is too long
60% - Boring Learning Materials
I and my team in an ideation workshop at Manabie Office.2019

EXPERIMENT: IMPROVE LEARNING FLOW

To improve the learning flow of the Manabie app, I analyzed user insights and incorporated ideas derived from the ideation workshop. Based on this research, I developed a proposal for a new learning flow that better aligns with user needs and enhances the user experience below.
Simplify The Flow
Reduce Steps: 5 steps instead of 6 as original
Simplified the flow by combining the course and topic into a single screen.​Additionally, I moved the "select subject" feature to the home screen, making it more efficient for users to navigate through their learning journey.
Flexible Study
Allow users to pause their study anytime
This feature gives students the flexibility to take breaks without losing progress. They can easily resume their study from the home screen, and a reminder notification helps them stay on track by prompting them when it's time to continue their learning.
Engaged Content
Easily switch between video and text content
we proposed integrating video content alongside the existing text-based materials. This dual approach would allow users to choose between video and text, catering to different learning preferences.

SCREEN INFORMATION ARCHITECTURE IMPROVEMENT

Method & Techniques
Object Oriented UX
Card-Sorting
The first step in my design approach at Manabie was to audit the product and refine the design process. ​I began by downloading the app from Google Play and the Apple Store, exploring its features in the learning journey, and evaluating its performance and user interface.

Next, I defined the design process for the team, choosing Agile UX to enable effective collaboration between designers and developers. This choice aligned seamlessly with the development team’s existing Agile/Scrum methodology.

IMPROVE QUIZ SCREEN

  • Show user's progress: inform users the total number of questions, display how many questions left.
  • Add "solution" below the correct answer: Brief explanation for the correct answer -> help students to understand answer, or rather, lesson efficiently.
  • Add "Pause" button: to allow users pause their practice -> Flexibility of learning.
  • Add "Time Remaining": inform users about their remaining time.
  • Relayout the screen: Maximise middle space to display the most important content
  • Add "Study Guide": Flexibility to review the lesson anywhere through the practice.
  • Clearly show user's choice/answer: Help users understanding and memorise lessons/questions better.

IMPROVE THE FIND TOPICS SCREEN

  • Add "Select Course": to allow users to navigate and find course quickly and easily
  • Display the number of topics and lessons: Show users the total number of topics and lessons on each course. Its help users to come up with relevant learning strategy.
  • Circle Progress Indicator: Using progress indicator to show students learning progress (in case of completion, using crown icon to clearly indicate completed topics)
  • Meaningful Icons: Using meaningful icon to improve users learnability and memorability.
  • Improve the consistency : make design more attractive, consistent and engage to users.

IMPROVE LESSON CONTENT SCREEN

  • Integrate Video Content: offer the video content to users, increase user engagement.
  • Integrate Lesson Summary: an enhancement for users to summary what they learnt from the lesson.
  • Add "Study Guide": Op Provide the flexibility to view both video and text content. It's also the way to evaluate the engagement and quality of content.
  • Integrate Pause functionality: Users can pause their study anytime. The resume study feature is displayed in many places in the app.
  • Bookmark Lesson: Allow students to bookmark their favourite lesson.

ENHANCE USER ENGAGEMENT WITH A MASCOT

By introducing a friendly and relatable Mana - Mascot name, the app can create a more inviting and interactive experience for students. The mascot can serve as a guide, offering helpful tips, encouragement, and even challenges to keep users motivated and entertained as they navigate through the app's features.​

Additionally, the mascot can add a sense of personality and fun to the app, fostering a stronger connection between users and the platform.

NEW DESIGN PROPOSAL

The first step in my design approach at Manabie was to audit the product and refine the design process. ​I began by downloading the app from Google Play and the Apple Store, exploring its features in the learning journey, and evaluating its performance and user interface.

Next, I defined the design process for the team, choosing Agile UX to enable effective collaboration between designers and developers. This choice aligned seamlessly with the development team’s existing Agile/Scrum methodology.
The first step in my design approach at Manabie was to audit the product and refine the design process. ​I began by downloading the app from Google Play and the Apple Store, exploring its features in the learning journey, and evaluating its performance and user interface.

Next, I defined the design process for the team, choosing Agile UX to enable effective collaboration between designers and developers. This choice aligned seamlessly with the development team’s existing Agile/Scrum methodology.

THE IMPACT OF MY SOLUTION

Throughout conducting user interviews and using user tracking tool (Mixpanel and Google Analytics). We've observed many positive outcomes.​ These metrics below demonstrate the positive impact of the new improvements on the app's performance and user experience, underscoring its success in meeting its objectives.
Reduce the drop-off rate to 38.2%
Reducing the drop-off rate by 29.4%, bringing it down from 67.6% to 38.2%. This significant reduction highlights the effectiveness of my design solution on the manabie learning journey.
Time on the Lesson Video Screen doubled
There has been a remarkable 200% increase in users' time spent on the lesson video screen, indicating a higher level of engagement and satisfaction.
Students learn more: 4 lessons instead 2
The number of lessons students learn weekly has seen a rise, +2 additional lessons compared to the previous version. This indicates that the enhancements have made the learning experience more effective.
User Satisfaction from 30% to Over 56.5%
This improvement also significantly enhanced the Manabie Learning App, boosting user satisfaction from 35% to an impressive 52.5%
Assignment Completion Rate increases by 9.2%
By implementing these solutions, I increased the assignment completion rate by 9.2%, enhancing user engagement and academic productivity.

MY FURTHER ACHIEVEMENTS AT MANABIE

During my 3 years at Manabie, I played a important role in shaping the product strategy, building high-performing team, and defining design process. Also, I contributed to creating tailored solutions for manabie's clients - schools and universities in Japan.
06
Make a High-Impact Design Team at Manabie
I grew the design team from 1 designer to 6, form the design processes, build a strong team culture, and promoting seamless collaboration, which greatly contributed to the overall success of our projects.
$41m
Securing $41 Millions in Investment
I played a key role in supporting Manabie’s fundraising, successfully securing $19.8 million in investment from over 10 investors - foundation for our growth and development.

Thank you for reading!

Thank you for taking the time to read my case study "Manabie" in my portfolio. Your interest in my work means a lot to me, and I hope it provided valuable insights into my design approach and problem-solving skills. If you have any questions or would like to discuss the project further, please feel free to reach out to me at huytruong.art@gmail.com.

I'm always excited to connect and explore new opportunities.
Contact

Let’s Talk & Collaborate

I’m always excited to collaborate and exchange ideas! If you're passionate about design and eager to connect, feel free to reach out.

Let’s create, innovate, and inspire together!
(+44) 749 8648 205 - (+84) 363 720 448
huytruong.art@gmail.com
I have worked on
40+
Design Projects
20+
Brands & Companies
Thank you!
Your submission has been received!
Oops! Something went wrong while submitting the form.
Contact
About
Awards
My Story
Portfolio
Blog
Follow me:
Dinh Huy Truong  |   huytruong.art@gmail.com
Copyright @2021 all rights reserved.