Skip to content

design

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

design

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
pages
pages
 
 
MISSING_PAGES_SPECIFICATIONS.md
MISSING_PAGES_SPECIFICATIONS.md
 
 
README.md
README.md
 
 

README.md

InsightLearn WASM - UI/UX Design Documentation

Generated: 2025-11-07 Version: 1.0 Status: Complete Site Analysis & WOW Specifications

Overview

This directory contains comprehensive UI/UX design specifications for all missing pages in the InsightLearn WASM learning management system. All specifications follow the existing Redis.io-inspired clean, minimal design system.

Documentation Structure

Main Document

MISSING_PAGES_SPECIFICATIONS.md (88KB)

  • Complete site analysis summary
  • Current design system documentation
  • All 18 missing pages with WOW specifications
  • Implementation priorities (P0-P3)
  • Design principles and checklist

Individual Page Specifications

pages/ - Detailed implementation specs for each page

Currently available:

More individual specs can be generated on demand by following the same pattern.

Site Analysis Results

Total Analysis

  • 41 unique routes identified across navigation
  • 23 existing pages (fully implemented)
  • 18 missing pages (need implementation)

Existing Pages Breakdown

  • Public: 7 pages (Home, Login, Register, Help, Privacy, Terms, Cookie Policy)
  • User Dashboard: 3 pages (Dashboard, Student Dashboard, Instructor Dashboard)
  • Admin: 14 pages (User management, Course management, Analytics, Settings, etc.)

Missing Pages Breakdown

Critical (P0) - Revenue Impact:

  1. /courses - Browse Courses
  2. /courses/{id} - Course Detail
  3. /cart - Shopping Cart
  4. /my-courses - My Enrolled Courses

High Priority (P1) - Core Experience: 5. /categories - All Categories 6. /categories/{slug} - Category Detail 7. /profile - User Profile 8. /search - Search Results

Medium Priority (P2) - Support & Trust: 9. /settings - User Settings 10. /about - About Us 11. /contact - Contact Us 12. /faq - FAQ Page

Lower Priority (P3) - Growth: 13. /instructors - Become an Instructor 14. /enterprise - Enterprise Solutions 15. /accessibility - Accessibility Statement 16-18. Instructor course management pages

Design System Summary

Color Palette

  • Primary: Red (#dc2626)
  • Grayscale: 9 shades from gray-50 to gray-900
  • Semantic: Success, Warning, Error, Info

Typography

  • Font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif
  • Scale: 9 sizes from xs (12px) to 6xl (60px)
  • Weights: 5 weights from light (300) to bold (700)

Spacing

  • Scale: 4px base unit (space-1 to space-24)
  • Consistent: All spacing uses CSS custom properties

Components

  • Buttons (primary, secondary, ghost)
  • Forms (inputs, selects, textareas with validation)
  • Cards (standard, elevated, metric)
  • Tables (clean, responsive)
  • Badges, Alerts, Modals, Dropdowns

Accessibility

  • WCAG 2.1 AA compliant
  • Keyboard navigation
  • Screen reader support
  • Focus indicators
  • Reduced motion support

Using This Documentation

For Frontend Developers

  1. Read the main document first: MISSING_PAGES_SPECIFICATIONS.md
  2. Understand the design system (Section 2 of main document)
  3. Review the specific page you're implementing
  4. Check the individual spec in pages/ directory (if available)
  5. Follow the implementation checklist at the end of each spec
  6. Test against the accessibility checklist
  7. Validate with the design system checklist

For Designers

  1. Review design system to ensure consistency
  2. Check WOW factors for each page
  3. Validate interaction patterns
  4. Create missing design assets (illustrations, icons, etc.)
  5. Review responsive behavior

For Product Managers

  1. Review implementation priorities (Section 5 of main document)
  2. Understand user journeys for each page
  3. Validate content strategy
  4. Check API requirements
  5. Plan release phases (P0 → P1 → P2 → P3)

Implementation Priorities

Phase 1: Critical Path (Week 1-2) - P0

Revenue-impacting pages that enable course discovery, purchase, and access:

  • Browse Courses
  • Course Detail
  • Shopping Cart
  • My Courses

Why: Without these, users cannot purchase or access courses. Critical for revenue.

Phase 2: Core Experience (Week 3-4) - P1

User engagement and discovery enhancement:

  • Categories (All & Detail)
  • User Profile
  • Search Results

Why: Improves discoverability and retention. Essential for user satisfaction.

Phase 3: Support & Trust (Week 5-6) - P2

Trust-building and support pages:

  • User Settings
  • About Us
  • Contact Us
  • FAQ

Why: Builds credibility and provides support. Important for long-term growth.

Phase 4: Growth (Week 7+) - P3

Growth initiatives and compliance:

  • Instructor onboarding
  • Enterprise solutions
  • Accessibility statement

Why: Supports scaling and compliance. Can be added after core is stable.

Design Principles

WOW Factor Guidelines

Every page should include:

  1. Delightful micro-interactions - Smooth animations, hover effects
  2. Clear visual hierarchy - Guide users' attention
  3. Generous white space - Don't overcrowd
  4. High-quality assets - Professional imagery/icons
  5. Progressive disclosure - Show details on demand
  6. Instant feedback - Loading states, success animations
  7. Personality - Unique touches without distraction

Performance First

  • Lazy load images and components
  • Minimize layout shifts (CLS <0.1)
  • Optimize critical rendering path
  • Target Lighthouse score >90
  • Time to Interactive <2.5 seconds

Blazor WASM Optimization

  • Minimize component re-renders
  • Use virtualization for long lists
  • Efficient state management
  • Debounce search/filter inputs
  • Cache where appropriate

Key Design Decisions

1. Redis.io-Inspired Design

  • Why: Clean, professional, content-first approach
  • Benefit: Fast loading, accessible, modern aesthetic

2. Mobile-First Responsive

  • Why: Majority of users browse on mobile
  • Benefit: Better mobile experience, progressive enhancement

3. Component-Driven Architecture

  • Why: Reusability, consistency, maintainability
  • Benefit: Faster development, easier updates

4. Database-Driven Endpoints

  • Why: Flexibility to change APIs without code changes (per CLAUDE.md)
  • Benefit: Dynamic configuration, easier maintenance

5. WCAG 2.1 AA Compliance

  • Why: Legal requirement, better UX for all users
  • Benefit: Accessible to users with disabilities

Common Patterns

Page Structure Template

┌─────────────────────────────────┐
│ HEADER (Fixed)                  │
├─────────────────────────────────┤
│ HERO / PAGE HEADER              │
├─────────────────────────────────┤
│ MAIN CONTENT                    │
│ (70% width, left-aligned)       │
│                                 │
│ SIDEBAR (if applicable)         │
│ (30% width, sticky)             │
├─────────────────────────────────┤
│ RELATED CONTENT / CTA           │
├─────────────────────────────────┤
│ FOOTER                          │
└─────────────────────────────────┘

Loading States

  1. Show skeleton loaders immediately
  2. Fetch data from API
  3. Fade in real content with stagger
  4. Total time: <2 seconds

Empty States

  1. Illustration (SVG)
  2. Headline ("No [items] found")
  3. Description (helpful explanation)
  4. CTA (alternative action)

Error States

  1. Alert banner with clear message
  2. Retry button
  3. Alternative actions
  4. Support link

File Naming Conventions

Page Components

  • /Pages/[PageName].razor - Main page component
  • /Pages/[Folder]/[PageName].razor - Nested pages (e.g., Admin, Instructor)

Reusable Components

  • /Components/[ComponentName].razor - Shared components
  • /Components/[ComponentName].razor.css - Isolated CSS (if needed)

CSS Files

  • design-system-base.css - Variables, typography, spacing
  • design-system-components.css - Reusable components
  • design-system-utilities.css - Utility classes
  • [page-name].css - Page-specific styles

JavaScript Files

  • wwwroot/js/[page-name].js - Page-specific interactivity
  • wwwroot/js/[component-name].js - Component-specific JS

Resources & References

Design System Files

  • /src/InsightLearn.WebAssembly/wwwroot/css/design-system-base.css
  • /src/InsightLearn.WebAssembly/wwwroot/css/design-system-components.css
  • /src/InsightLearn.WebAssembly/wwwroot/css/design-system-utilities.css

Existing Components

  • /src/InsightLearn.WebAssembly/Components/ - Reusable components to reference

Existing Pages (for patterns)

  • /src/InsightLearn.WebAssembly/Pages/Index.razor - Homepage with modern design
  • /src/InsightLearn.WebAssembly/Pages/Login.razor - Authentication pattern
  • /src/InsightLearn.WebAssembly/Pages/Admin/Dashboard.razor - Admin layout pattern

Architecture Documentation

  • /CLAUDE.md - Project architecture, endpoint configuration, database structure
  • /README.md - General project information
  • /DEPLOYMENT-COMPLETE-GUIDE.md - Deployment instructions

API Endpoints Reference

Important: All API endpoints are stored in the database (SystemEndpoints table). See CLAUDE.md for details.

Course Endpoints

  • GET /api/courses - List courses with filters
  • GET /api/courses/{id} - Course detail
  • GET /api/courses/{id}/reviews - Course reviews
  • GET /api/courses/{id}/related - Related courses

Category Endpoints

  • GET /api/categories - All categories
  • GET /api/categories/{slug} - Category detail with courses

User Endpoints

  • GET /api/users/me - Current user profile
  • PUT /api/users/me - Update profile
  • GET /api/users/me/courses - Enrolled courses
  • GET /api/users/me/cart - Shopping cart

Search Endpoints

  • GET /api/search?q={query} - Search courses, instructors, categories

Contact & Questions

For Design Questions:

For Development Questions:

For Product Questions:

Change Log

Version 1.0 (2025-11-07)

  • Initial comprehensive site analysis
  • Documented all 18 missing pages
  • Created design system documentation
  • Defined implementation priorities
  • Generated detailed specs for Browse Courses and Course Detail

Next Steps

  1. Frontend Team: Review main document and prioritize P0 pages
  2. Design Team: Create missing design assets (illustrations, icons)
  3. Backend Team: Ensure API endpoints match specifications
  4. Product Team: Validate user journeys and content strategy
  5. QA Team: Create test plans based on accessibility checklist

Last Updated: 2025-11-07 Document Author: Claude Code (UI/UX Analysis Agent) Review Status: Pending team review