Learner Experience Overview

Welcome to Your Learning Journey

Sunschool provides a personalized, engaging learning experience designed specifically for young learners. Every learner gets their own dashboard with adaptive lessons, fun quizzes, and a visual map of everything they’ve learned.

Daily Learning Flow

When learners log in, they see their Learner Home with:

1. Personal Greeting

// From learner-home.tsx:228-241
<View style={styles.header}>
  <View style={styles.userInfo}>
    <View style={styles.avatarContainer}>
      <User size={24} color={colors.primary} />
    </View>
    <View>
      <Text style={styles.greeting}>Hello, {selectedLearner?.name}!</Text>
      <Text style={styles.gradeText}>
        Grade {profile?.gradeLevel || '—'}
      </Text>
    </View>
  </View>
</View>

Each learner sees their name and current grade level at the top of the screen.

2. Current Lesson Card

The active lesson is prominently displayed with:

Lesson title and subject
Continue Learning button to resume
Change Subject option to switch topics
New Lesson button to generate a fresh lesson

// From learner-home.tsx:279-285
{activeLesson ? (
  <>
    <LessonCard
      lesson={activeLesson}
      onPress={handleViewLesson}
    />
    // ... action buttons
  </>

If no lesson is active, learners see a friendly empty state with options to select a subject or get a random lesson.

3. Brain Map (Knowledge Graph)

Visual representation of connected concepts learners have mastered:

// From learner-home.tsx:338-348
{profile?.graph && profile.graph.nodes.length > 0 && (
  <View style={styles.sectionContainer}>
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>My Brain Map</Text>
    </View>
    <View style={styles.graphContainer}>
      <KnowledgeGraph graph={profile.graph} />
    </View>
  </View>
)}

The knowledge graph shows:

Nodes: Individual concepts learned
Edges: Connections between related ideas
Interactive: Learners can tap nodes to see details

4. Goals Progress Strip

A quick view of their top reward goal:

// From learner-home.tsx:43-77
<GoalsStrip learnerId={selectedLearner?.id} onPress={() => setLocation('/goals')} theme={theme} />

Shows:

Goal emoji and title
Progress bar (saved points / total needed)
Percentage complete

5. Learning Journey Card

Tappable card leading to detailed progress tracking:

// From learner-home.tsx:353-367
<TouchableOpacity 
  style={styles.journeyCard}
  onPress={() => setLocation('/progress')}
>
  <View style={styles.journeyIcon}>
    <Compass size={24} color={colors.onPrimary} />
  </View>
  <View style={styles.journeyContent}>
    <Text style={styles.journeyTitle}>My Progress</Text>
    <Text style={styles.journeyText}>
      Track your progress and see how far you've come
    </Text>
  </View>
</TouchableOpacity>

Kid-Friendly Interface

Design Principles

Simple Navigation: Pull-to-refresh, clear buttons, no complex menus
Visual Feedback: Loading animations use FunLoader with encouraging messages
Instant Gratification: Immediate feedback on quiz answers
Gamification: Points, badges, and visual progress tracking

Loading Experience

// From learner-home.tsx:243-251
{isLoading ? (
  <FunLoader
    progressMessages={
      generateLessonMutation.isPending
        ? ['Finding the best lesson for you...', 'Almost ready...', 'Here it comes!']
        : undefined
    }
    message={generateLessonMutation.isPending ? undefined : 'Getting your stuff ready...'}
  />

The FunLoader component shows animated progress with kid-friendly messages to keep learners engaged during loading.

Parent-as-Learner Mode Preview

Parents can experience the learner interface by:

Switching to their child’s view using the learner selector
Seeing exactly what their child sees
Testing lessons and quizzes
Understanding the learning flow

This helps parents:

Monitor difficulty levels
Preview content before children see it
Understand the reward and achievement system
Provide better support

Key Features Accessible to Learners

Personalized Lessons

Grade-specific content with adaptive difficulty

Interactive Quizzes

Immediate feedback and points for correct answers

Achievements

Unlock badges for milestones and perfect scores

Reward Goals

Save points toward parent-created rewards

Next Steps

Learn About Lessons

Explore how lessons are generated and adapted to grade level Read about lessons →

Understand Quizzes

See how quizzes work and how learners earn points Quiz mechanics →

Track Progress

Review the knowledge graph and mastery tracking system Knowledge tracking →

​Welcome to Your Learning Journey

​Daily Learning Flow

​1. Personal Greeting

​2. Current Lesson Card

​3. Brain Map (Knowledge Graph)

​4. Goals Progress Strip

​5. Learning Journey Card

​Kid-Friendly Interface

​Design Principles

​Loading Experience

​Parent-as-Learner Mode Preview

​Key Features Accessible to Learners

Personalized Lessons

Interactive Quizzes

Achievements

Reward Goals

​Next Steps

Welcome to Your Learning Journey

Daily Learning Flow

1. Personal Greeting

2. Current Lesson Card

3. Brain Map (Knowledge Graph)

4. Goals Progress Strip

5. Learning Journey Card

Kid-Friendly Interface

Design Principles

Loading Experience

Parent-as-Learner Mode Preview

Key Features Accessible to Learners

Next Steps