Build a fully responsive, AI-powered, multilingual EdTech platform that mirrors and improves upon [Testbook.com]. 🔍 Structure your design into these primary modules: Exam Pages (Overview, Test Series, Resources, Notifications, Application Guide) Jobs Board (Search + Filter Government Jobs with Application Tracking) Test Series (Cards with Mock Count, Languages, Free Demo, Result Analytics) Previous Year Papers (Download & Practice View) Practice Center (Daily Quizzes, Streak Gamification, Topic Drill) Subscription Plans (Tier Comparison Table, Features Breakdown, UPI Checkout) Live Coaching (Batch Details, Schedule, Demo Access, Teacher Bio) User Dashboard (Personalized Learning Timeline, Upcoming Tests/Classes, Analytics) Mock Test Interface (Timer, Flag, Section Nav, Autosave, Submit Modal) Result Analysis (Topic-wise Score, National Rank, AI Recommendations) Blogs & Strategy Guides (Filters, Save/Share, Responsive Reading) Footer (Policies, Support, App CTA, Social Links) 🎨 Style Guidelines: Light mode by default; add optional dark mode toggle Blue and white primary color with accent green Rounded corner components, clear hierarchy Mobile-first layouts, bottom sticky nav 📊 Analytics-Driven UX: Track test performance across time Include progress meters, streak trackers, rank comparison 🧠 UX Laws to Follow: Hick's Law: Simplify choices at each step Fitts’s Law: Large CTAs and buttons on mobile Miller’s Law: Group info into 7 or fewer chunks Doherty Threshold: Real-time feedback during tests & practice
I'll build a comprehensive AI-powered EdTech platform inspired by Testbook.com with all the modules you've specified. Let me create a fully responsive, multilingual platform with modern UX principles.
I've created a comprehensive AI-powered EdTech platform inspired by Testbook.com with all the requested modules and features. Here's what I've built:
️ Platform Structure
Core Pages & Components:
- Homepage - Hero section with success stories, stats, popular exams preview
- Dashboard - Personalized learning timeline, progress tracking, upcoming tests
- Test Series - Comprehensive test catalog with filtering and search
- Mock Test Interface - Full-featured test taking experience with timer, navigation, flagging
Key Features Implemented:
Design System
- Light mode by default with dark mode toggle
- Blue & white primary colors with green accents
- Mobile-first responsive design with bottom sticky navigation
- Rounded corners and clear visual hierarchy
Mobile-First UX
- Sticky bottom navigation for mobile
- Responsive grid layouts
- Touch-friendly button sizes (following Fitts's Law)
- Optimized mobile test-taking interface
UX Laws Implementation
- Hick's Law: Simplified navigation with clear categories
- Fitts's Law: Large CTAs and touch targets on mobile
- Miller's Law: Information grouped in digestible chunks (max 7 items)
- Doherty Threshold: Real-time feedback during tests with instant UI updates
Advanced Features
- AI-Powered Analytics: Performance tracking and progress visualization
- Multilingual Support: Language selector with multiple Indian languages
- Gamification: Streak tracking, achievements, and leaderboards
- Real-time Test Interface: Auto-save, timer, question flagging
- Comprehensive Results: Detailed analysis with explanations
Analytics & Tracking
- Progress meters and performance charts
- Streak counters and achievement badges
- National rank comparison
- Topic-wise score breakdown
The platform follows modern web development best practices with TypeScript, responsive design, and accessibility features. The mock test interface provides a realistic exam experience with all the features students need for effective preparation.
Design Prompt (Updated for Hover Interaction):
Design a multilingual, mobile-first EdTech platform like Testbook.com. Implement a hover-based mega dropdown for "Exams" in the top navigation:
Left Column: Scrollable list of 26 Exam Sectors (with icons)
Right Panel: On-hover, dynamically show up to 20 exam topics for selected sector
Optional: Rightmost panel with featured test pack, download CTA, or AI suggestion
Use modern UX patterns with clear grouping, icon support, dark/light mode, and mobile fallback (click-expand accordion).
Prioritize UX Laws:
Fitts’ Law (large hover areas)
Hick’s Law (organized by groups)
Progressive Disclosure (hide submenus until hover) implement in Exam section of top navigation bar
I'll enhance the existing EdTech platform header with a sophisticated hover-based mega dropdown for the "Exams" section, following modern UX patterns and the design principles you've specified.
I've implemented a sophisticated hover-based mega dropdown for the "Exams" section that follows all the UX principles you specified:
Key Features Implemented:
Desktop Mega Dropdown:
- Left Column: Scrollable list of 26 exam sectors with icons and color coding
- Middle Panel: Dynamically shows up to 20 exam topics when hovering over a sector
- Right Panel: Featured test pack with AI recommendations and download CTAs
UX Laws Implementation:
Fitts' Law- Large Hover Areas
- Generous padding on all interactive elements (48px+ touch targets)
- Large hover zones for smooth navigation
- Clear visual feedback on hover states
Hick's Law- Organized Grouping
- Exams grouped into logical categories (SSC, Banking, Railway, etc.)
- Visual hierarchy with icons and color coding
- Progressive disclosure prevents cognitive overload
Progressive Disclosure
- Submenus only appear on hover
- Clean initial state with clear category labels
- Smooth transitions and animations
Mobile-First Approach:
- Mobile Fallback: Click-expand accordion for mobile devices
- Responsive Design: Automatically switches between desktop mega dropdown and mobile accordion
- Touch-Friendly: Large tap targets and clear visual hierarchy
Advanced Features:
- Smart Hover Delays: 150ms delay prevents accidental closures
- Smooth Animations: CSS transitions for professional feel
- Icon System: Unique icons for each exam category
- Featured Content: AI-powered recommendations and promotional content
- Dark/Light Mode: Full theme support with proper contrast ratios
Technical Excellence:
- Performance Optimized: Efficient hover detection and state management
- Accessibility: Proper ARIA labels and keyboard navigation support
- Type Safety: Full TypeScript implementation
- Responsive: Seamless mobile/desktop experience
The mega dropdown provides an intuitive way to navigate through 26+ exam categories and hundreds of individual exams while maintaining clean visual hierarchy and excellent user experience across all devices.
