azrul-photo

Hazrul Aswad 👋

A Passionate Product Designer 🖥️ & Design Mentor that having more than 4 years of working experiences over some companies and institutions. Currently I'm diving into front-end coding ⚙️. Available for remote work!

View My CV
project-details-1

Project For:

Eduqat

Services:

Product Design and Research

eduqat.com

Eduqat - AI-Powered Course Builder (Self-Paced)

My Role: Product Designer & Researcher

Team Contributor: 1 Head of Product, 1 PM, 2 Product Designers, 1 UI Designer, 2 UATs, and 4 Developers.

Project Duration: 2-3 Months

Status: Development Success

project-details-2
project-details-3

Project Background

Online education has grown rapidly in recent years, providing greater access for individuals to learn anytime and anywhere. However, creating high-quality online courses remains a significant challenge for many individuals and educational institutions. This is primarily due to the complexity of course creation, the need for effective curriculum design, and the lack of technical expertise in delivering engaging and interactive materials.

Problems

  • 1. Time and Resources: The process of creating courses often takes a long time and requires significant resources. From content research to producing materials (text, videos, and quizzes), it can be highly time-consuming.
  • 2. Limitations of Existing Tools: While many course creation platforms are available, most are either too complex for beginners or lack automation features that could speed up the content creation process.
  • 3. Low Engagement: Poorly designed courses tend to fail to capture participants' attention, leading to low completion and success rates.

Solutions Offered

  • 1. AI Content Creation: AI assists users in generating text,rich-text and quiz content based on their chosen topics, allowing course creators to focus on delivering ideas without starting from scratch.
  • 2. Curriculum Recommendations: The AI system analyzes topics and learning objectives to provide relevant and structured curriculum suggestions.
  • 3. Drag-and-Drop Editor: A user-friendly interface allows users to edit and organize course materials intuitively, without requiring technical skills.

Objectives

The goal of this project is to empower educators, training institutions, and individuals to create engaging and high-quality online courses efficiently by leveraging AI-driven automation features. The platform provides a user-friendly design experience with intuitive interfaces and smart tools that simplify the course creation process while optimizing content production through automated curriculum recommendations, content generation, and customizable templates, ultimately enabling users to deliver impactful learning experiences in less time.

Roles & Responsibilities

As a Product Designer, my role encompasses responsibilities that include UX design for the "Create Course With AI" feature on our self-paced learning platform. Below is a detailed overview of my contributions:

  • 🗒️ Organizing and Refining Requirements:

    I was responsible for organizing and synthesizing the requirements brief provided by stakeholders. Collaborating closely with the Head of Product, Senior Designer, and UI Designer, I conducted brainstorming sessions to map out the logic and step-by-step process for the AI-driven course creation feature.

  • 🔍 Research and Insights Gathering:

    To ensure the solution aligns with user needs and industry trends, I conducted thorough research on the impact of AI in education, particularly for teachers aiming to create online courses. My research sources included articles, blogs, YouTube videos, and news platforms, providing a well-rounded perspective on how AI can streamline course creation processes.

  • 📊 Competitor Benchmarking:

    I conducted a comprehensive competitor analysis, examining platforms such as Thinkific, Kajabi, Teachable, GetCourse, Course Generator, and LearnWorlds. This benchmarking provided valuable insights into industry standards, strengths, and potential areas for differentiation in our product.

  • 📲 User Flow and Wireframing:

    Based on the insights gathered, I designed detailed user flows to ensure a seamless and intuitive course creation process. I then developed high-fidelity wireframes to visually represent the solution. These deliverables were handed off to the UI Designer for further refinement and aesthetic enhancement.

By combining research, collaboration, and design expertise, my role ensured the "Create Course With AI" feature was user-centric, strategically aligned, and ready for implementation.

    1. Discover

    So, I Started With Research First!

    The research phase began with data synthesis from stakeholders to identify the key pain points experienced by Eduqat’s end users. These insights served as the foundation for further investigation, leading to secondary research across various sources such as articles, blogs, news, and YouTube. The objective was to assess the impact of AI in education and validate how Eduqat’s AI-driven course creation feature could effectively address the challenges faced by educators in developing and structuring online course content.

    To strengthen the problem statement, I gathered supporting data on AI’s influence in the edtech sector. A key reference was the statistical report from AIPRM on AI in education, which highlighted:

    research-insight

    This is an overview of how teachers have incorporated AI into their everyday teaching practices.
    airpm-2

    According to a Forbes survey, about 60% of teachers have incorporated AI into their daily teaching, while 35% say they have not.

    An overview of the most commonly used AI tools in education.
    airpm-1

    Over 35% of teachers use chatbots to support students, while nearly 29% integrate AI through intelligent tutoring systems.

    So, What’s Good for Eduqat?

    After conducting research, I always find myself asking, ‘What can I contribute to Eduqat from my findings?’ This question drives my approach to identifying valuable insights and translating them into meaningful solutions. So, the conclusion from research insights and identified pain points is Eduqat has the opportunity to revolutionize course creation by leveraging AI-powered tools that directly address educators' challenges in designing and delivering online courses. Below are key takeaways and recommendations for feature development:"

    • 1. AI-Driven Curriculum Assistance: I believe Eduqat can use AI to suggest course structures, lesson sequences, and learning objectives based on best practices and existing educational frameworks. This would make it much easier for educators to plan their courses without spending too much time on manual setup.
    • 2. Smart Content Generation & Enhancement: In my opinion, AI can help educators by automatically generating course curriculum, course descriptions, rich-text content, lesson summaries, and even craete quizzes using AI.
    • 3. AI-Powered Assessment & Feedback: If a class has many students, grading and giving feedback can be time-consuming. AI can help by automating quiz grading, providing instant feedback, and even suggesting areas for improvement—saving teachers valuable time while maintaining quality.

    Source: www.aiprm.com/ai-in-education-statistics

    Competitor Benchmarking

    To build a competitive and innovative course creation platform, I conducted a competitor benchmarking analysis on the following platforms: Thinkific, Kajabi, Teachable, Mini Course Generator, and Learnworld. The goal was to compare key features and identify opportunities where Eduqat can stand out.

    For the competitor benchmarking, I analyzed five key aspects to gain insights into how Eduqat can stand out in the market. These included total active users to understand the market reach and adoption of each platform, Pro plan pricing to compare subscription costs and position Eduqat competitively, AI course creation to evaluate how AI is being used to streamline the course development process, AI assignment or assessment to check if AI is being utilized for automating student evaluations and giving a feedback, and also AI quiz creation to analyze how AI is assisting in generating quizzes and interactive content. This comprehensive analysis provided valuable insights to guide Eduqat’s feature development and competitive strategy.

    bechmarking-result

    Key Takeaways From Benchmarking

    After analyzing Thinkific, Kajabi, Teachable, Mini Course, and Learnworlds, here’s what I found:

    benchmarking-insight

    Business Goal Insights for Eduqat Based on the Research Data

    Based on my research, Eduqat’s AI-driven course creation should align with the following business goals:

    A. Market Differentiation

    Eduqat has the opportunity to stand out by going beyond just structuring courses—integrating AI-powered assessments, interactive quizzes, and personalized content recommendations. This not only makes the platform smarter but also more valuable for educators looking for an all-in-one solution to streamline course creation.

    B. Maximizing Eduqat’s Adoption & Engagement

    With many educators already using AI, Eduqat has a strong opportunity to grow. By simplifying course creation through AI automation, it can save teachers time and boost engagement, making it a go-to platform for smarter online learning.

    C. Smart Monetization for Eduqat

    Eduqat can maximize revenue by offering AI as a premium feature within a competitive Pro Plan. A subscription-based model, like Kajabi and Thinkific, ensures steady income, while additional revenue can come from AI-driven content enhancement, curriculum optimization, and analytics tools for educators.

    D. Future Growth & Expansion

    Eduqat’s AI-driven course creation is just the starting point. By integrating AI-powered student feedback, personalized learning recommendations, and automated grading, Eduqat can evolve into a fully comprehensive edtech platform, ensuring long-term scalability and innovation.

    2. Ideate

    Brainstorming With Team

    After gathering insights from research, the next crucial step is to present the findings to the internal team. My team and I will always open a meeting discussion using Zoom, Slack or Lark, this step will help us to determine the scope of AI implementation in course creation. In the end of discussion, we prioritize the most impactful features while aligning with development feasibility. Additionally, we will identify the key user needs when interacting with the AI-powered course creation tool.

    Features Mapping Using Eisenhower Matrix
    userflow-aicourse-creation-1

    constraints: For MPV AI-driven course creation v1, Eduqat only focus on rich-text contents but just drop on title. So if user want to get the content details inside of that material, they can generate manually using AI rich-text tool.

    User Flow

    As a team, we sat down to map out the ideal user journey for Eduqat’s AI-Driven Course Creation. Our goal was to ensure a smooth experience for educators, whether they preferred building their courses manually or leveraging AI assistance.

    We started by outlining the basics—users (vendors) log in via SSO and land on the dashboard. From there, they navigate to the Product menu, select the Self-Paced Course option, and see a table listing all their existing courses. This gives them an overview of what’s already created.

    Now comes the exciting part—creating a new course. When a user clicks Create New Course, we designed a pop-up with two options:

    • 1. Start from Blank which takes them straight to the Curriculum Builder for manual structuring.
    • 2. Generate Using AI where a new prompt appears, asking for key details like the number of chapters and the complexity level of the course.

    This flow balances efficiency and flexibility, ensuring that users can harness AI without losing creative control. As a team, we felt this approach would make course creation more intuitive and time-saving while still allowing for personal customization.

    Features Mapping Using Eisenhower Matrix
    userflow-aicourse-creation-1
    userflow-aicourse-creation-2

    constraints: For MPV AI-driven course creation v1, Eduqat only focus on rich-text contents but just drop on title. So if user want to get the content details inside of that material, they can generate manually using AI rich-text tool.

    Wireframing at Eduqat: A Unique Approach

    At Eduqat, the way we do wireframing is a bit different from most companies. Instead of starting with rough sketches or low-fidelity wireframes, we jump straight into building wireframes using our existing design system components. This makes our wireframes look almost like the final high-fidelity design, even though they’re still in the early stages.

    Why do we do this? Because it helps us communicate ideas more clearly to both stakeholders and developers. Stakeholders can visualize the product better, and developers can immediately assess whether the design logic makes sense and is technically possible to build. This means we get faster, more relevant feedback, and avoid major revisions later in the process.

    For me, this approach has been both challenging and exciting. Since we have to present our wireframes quickly, there’s a lot of pressure to get things right. But at the same time, it’s helped me understand backend logic better and work more effectively with developers. Plus, getting direct feedback from C-level executives means we can align expectations early on, making the whole process smoother.

    In the end, this way of wireframing helps us create better designs and faster. So, we can make sure that what we build is both user-friendly and technically feasible.

    Wireframe Sample 1: Create New Course Pop up
    wireframe1
    Wireframe Sample 2: Pop up AI Course Creation
    wireframe2

    3. Design

    High-Fidelity Design: Refining the Vision

    Once we’ve gathered feedback from stakeholders and developers, it’s time to refine our wireframes into high-fidelity designs. This phase starts with me polishing the previous wireframes into final designs, ensuring everything is clean, consistent, and aligned with Eduqat’s design system.

    After my part is done, we hold an internal review session with the product team, which includes:

    This review is crucial because it allows us to evaluate the design from different perspectives—usability, aesthetics, and feasibility. The discussions in this session often serve as a turning point for refining the design further before the next stakeholder meeting.

    At this stage, Andy Ardana, our UI Designer, takes over to finalize the visual details, ensuring the design meets Eduqat’s style standards and design system. Once the high-fidelity design is ready, we schedule a Zoom meeting with stakeholders to present it and gather final feedback.

    Any necessary tweaks are made before we hand off the design to the developers. This includes a dedicated team meeting where we walk them through the design, provide context, and share Jira tickets as development guidelines. This structured process ensures a smooth transition from design to development, making implementation more efficient and aligned with our vision.

    Oke, before we take a look at the high-fidelity designs, let's watch the overview of some Ai features on Eduqat that have been competely built by our team for V1 (MVP 1).

    Watch AI Course Creation Overview on eduqat

    Note: This video was uploaded on March 9, 2023. As of now, Eduqat has been updated with more visual aesthetics. Let's Join Eduqat!

    Before Moving to High-Fidelity, We Had to Finalize the AI Logo

    Once the concept for AI Course Creation was solid, the next step was defining a distinctive AI logo for Eduqat—one that stood out from competitors. We began by researching various logo inspirations, analyzing design trends, and exploring visual elements that could represent AI in a way that aligned with Eduqat’s identity.

    From our initial explorations, we created multiple logo variations and narrowed them down to three potential designs for finalization. However, during the review process, we realized that these logos felt too complex and didn’t fully reflect Eduqat’s core identity—simple, clean, and modern.

    ai-logo-1

    After several iterations and refinements, we simplified the design while maintaining a sleek, contemporary feel. And finally—boom! The logo was approved, perfectly capturing the essence of AI within Eduqat’s brand. 🚀

    ai-logo-2

    Let's Breakdown The UI's

    1. Product Library Interface | Self-Paced

    The Product Library serves as the main dashboard that displays all created course products in the form of product cards. Each card includes key course information, settings, course management options, and publication status. We’ve added multiple call-to-action buttons to make it easier for educators, especially those who may not be tech-savvy, to navigate and use the available features effectively.

    course-library
    2. Add New Product: Initial Modal

    When users click the "Add New Product" icon from the sidebar, a modal window appears where they can enter the course title and choose the type of course they want to create. This marks the first step in the product creation process.

    ai1
    3. Self-Paced Course: Method Selection Modal

    This is the next step after selecting the self-paced course type. Users are presented with two options, either start from a blank template or use AI to assist with course creation. The same modal will also appear if the user is already in the self-paced product library and decides to create a new course.

    ai2

    If the user selects the AI-assisted method, this modal allows them to provide additional details such as the number of chapters, course level, preferred language, and whether to include quizzes and assignments. These inputs help the AI generate a course structure that fits their needs.

    ai3
    4. AI Content Generation in Progress

    After entering all the required information, the AI begins generating the course content. During this process, a loading screen is shown to inform the user that content is being prepared.

    ai4

    Once the AI finishes, the user is presented with a structured syllabus organized by chapters. At this point, the content for each topic is still minimal. Users can add more information manually or use the built-in AI tool to expand each section.

    ai5
    5. Rich-text Material Editor (Empty State)

    In this example, the user has opened one of the course materials in the rich-text editor, which currently has no content. To address this, we provide an AI writing tool that can generate relevant content based on the title or customized inputs from the user.

    ai6
    6. Generated Rich-text Content (Preview)

    This is a sample of content produced using the AI assistant. It gives a quick and relevant draft that matches the user's input, helping them move forward more efficiently with course development.

    ai7

    4. Reflection

    Impact

    The development of our AI-driven course creation feature has had a significant impact on educators and course creators. By leveraging AI, we’ve drastically reduced the time and effort required to build structured, high-quality courses. Based on our projections and industry benchmarks, we estimate that this innovation has:

    50%

    Educator Workload Reduced

    3x

    Faster AI Course Creation

    85%

    Higher User Engagement

    +10hrs

    Saved Per Course Creation

    These numbers aren’t just stats, its show how much easier and more efficient course creation has become. With AI handling the heavy lifting, educators can spend less time on manual setup and more time on what really matters: creating great learning experiences.

    It's not just about speed, AI also helps make courses more engaging and interactive, which means students stay more involved and learn better. As we keep improving this technology, we’re excited to see even more impacts, more personalized learning experiences, real-time feedbacks, and effortless content updates. This is just the beginning of a smarter way to teach and learn.

    Next Step

    After launching AI-driven course creation, we’ve reached a crucial turning point. The feature has been built, tested, and introduced to educators—but the journey doesn’t stop here. The real impact of our work isn’t just in launching a product, but in how well it solves real problems for users.

    Looking back, this development process has taught us a lot. We learned that balancing AI automation with user control is key. Educators want AI to help, but they also need flexibility to shape their courses in their own way. We also realized that the success of an AI-powered feature isn’t just about how advanced the technology is—it’s about how intuitive, helpful, and practical it feels for users.

    By continuously improving, we can ensure AI becomes an essential tool for educators—not just an option, but a game-changer in their workflow. With that in mind, here’s what comes next:

    1. Validate & Improve AI Course Creation

    Conduct user testing to gather feedback on AI-generated courses, identify pain points, and refine AI accuracy. Enhance user control, optimize onboarding, and ensure AI suggestions align with educators' needs for better adoption.

    2. Develop AI Quiz & Assignment Creation

    Now that AI Course Creation is established, the next logical step is expanding into AI-powered quizzes & assignments to offer a full-fledged AI-assisted teaching experience.

    3. Measure Success & Iterate

    Track user adoption, engagement rates, and content creation time to refine AI features and ensure they deliver real value.

    4. Prepare for Scaling & Monetization

    With AI-powered course creation gaining traction, explore premium AI features to enhance monetization strategies while keeping the core product competitive.

banner-shape-1
banner-shape-1
object-3d-1
object-3d-2