Client
Nesoi.ai (Confidential Project)
Duration
10 W(Design), Ongoing (Dev)
Project Type:
Internal Tool – B2B SaaS (Training Content Creation)
Status:
Design & Frontend Complete (Under active development by client team)
Scope:
UX Design + Frontend Development (Module only)
Platform Type
Web (React + Tiptap)
Project Overview
Nesoi is building the next generation of internal training tools — allowing companies to create interactive, AI-powered learning experiences for their teams. We partnered with them to design and develop the core video course authoring module — a system inspired by Gamma, Coursera, and advanced AI content builders.
The goal was to empower L&D (learning and development) teams to quickly generate, customize, and personalize training videos using AI-generated content, modular templates, and deep personalization layers.
This module is currently under NDA and in active development, but we are sharing its essence, flow, and impact.
Target Users
- HR or Training Managers at mid-to-large companies
- Content creators building interactive employee onboarding flows
- Internal team leads creating frameworks or SOP training content
Goals & Objectives
- Design a seamless transcript-based video builder that supports AI enhancements
- Allow template-based or scratch-built creation of lessons
- Enable creation of multi-chapter, interactive training videos
- Support AI Instructions, repeat-strictly mode, and persona-driven narration
- Design a UX that's scalable and easy to develop with a modular frontend
- Implement key frontend functionality for the creation and editing tools
Core Features
Transcript-Based Course Editor: Each lesson is created by writing or editing a transcript, which the system turns into audio-visual video slides.
AI Instructions Block: Users can input short prompts and let AI generate detailed content (voice + visuals).
Repeat Strictly Toggle: Ensure script fidelity by disabling AI improvisation.
Template Selector: Choose from styles like Roleplay, Case Study, Quiz, Screenshare, or create new ones.
Module + Chapter Management: Drag-and-drop editor with thumbnail preview and chapter-wise organization.
Instructor Persona: Select or customize the presenter’s voice, tone, and avatar.
Knowledge Base Feeding: Upload company documents or URLs to fine-tune AI’s context for better relevance.
UX & Design Process
Research & Requirements Mapping
- Studied tools like Gamma.app, Synthesia, and Notion AI to understand transcript-to-video conversion
- Mapped flows from zero-to-published course creation
Information Architecture & User Flows
- Defined the course creation flow: Template → Transcript → Chapters → AI Instruction → Publish
- Designed logic for module nesting, persona configuration, and knowledge base syncing
Wireframing & Prototyping
- Created mid and high-fidelity screens (30+ screens)
- Defined states for AI input blocks, video generation previews, and real-time interactions
UI Design
- Designed clean, distraction-free editor layout
- Built a visual system inspired by professional toolkits (Linear, Gamma, Notion)
- Integrated AI-specific icons and feedback indicators
Development Implementation
Frontend Implementation (Module Only)
- Built a two-way sync between a Tiptap-based rich text editor and a JSON structure
- Enabled real-time updates: changes in the transcript editor immediately reflect in the structured JSON and vice versa
- Developed drag-and-drop thumbnails for chapter reordering
- Implemented AI instruction blocks, repeat-strictly toggles, and dynamic JSON serialization
Challenge
Maintaining consistency between UI and data
Allowing free-form + structured input for AI
Managing custom chapter states visually
Ensuring easy handoff for scalable dev
Solution
Built a bi-directional sync layer between editor and JSON
Modularized input blocks into AI-only vs. strict instruction
Implemented thumbnail previews + drag interaction
Used modular, readable component logic based on Tiptap and React
Outcome
The Nesoi AI platform transforms training content creation with its transcript-based video builder and AI enhancements. Companies can now produce professional training videos in minutes, not hours. Ready for beta testing and enterprise deployment with scalable architecture.