UI/UX Designer Career in the EdTech Industry

// Onboarding — the first five minutes.
// The most important screen in any EdTech product.

export function OnboardingStep1({ onContinue }) {
  return (
    <div className="onboarding">
      <h1>What do you want to learn?</h1>

      <p className="subtitle">
        Pick a goal. You can change it later.
      </p>

      <div className="goal-grid">
        <GoalCard emoji="🎯" title="Crack an exam" />
        <GoalCard emoji="💼" title="Get a job" />
        <GoalCard emoji="📚" title="Learn a subject" />
        <GoalCard emoji="🔬" title="Explore something new" />
      </div>

      <button onClick={onContinue}>Continue</button>
    </div>
  );
}

// What this teaches:
// - The first step should feel like a choice, not a form
// - Goal setting turns a generic signup into a personalised path
// - The user can change their mind — that removes anxiety
//
// Why onboarding matters so much in EdTech:
// - Most learners churn before the first lesson
// - Each extra field or step loses 10–20% of users
// - The goal you set here drives the rest of the experience
//
// Interview probes:
// "How would you design onboarding for a K-12 learning app?"
// This is the shape of a good answer.

// Progress — motivation by design.
// The single most underrated screen in EdTech.

export function ProgressCard({ streak, completed, total, nextLesson }) {
  const pct = Math.round((completed / total) * 100);

  return (
    <div className="progress-card">
      <div className="streak">
        🔥 <strong>{streak}</strong> day streak
      </div>

      <div className="progress-bar" role="progressbar"
           aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100}>
        <div className="fill" style={{ width: `${pct}%` }} />
      </div>

      <div className="progress-text">
        {completed} of {total} lessons completed
      </div>

      <div className="next">
        <span className="label">Up next</span>
        <span className="title">{nextLesson.title}</span>
        <button>Resume lesson</button>
      </div>
    </div>
  );
}

// What this teaches:
// - A streak alone is not motivation — it needs a clear "what's next"
// - The progress bar must have accessible ARIA attributes
// - Every element on this screen is a design decision, not decoration
//
// Why it matters:
// - Learning is hard. Progress is the reward that keeps learners coming back.
// - "Where am I?" and "What's next?" are the two questions every learner
//   has at the end of every session.
// - Designing those two answers clearly is one of the highest-impact
//   design decisions in EdTech.
//
// Interview probes:
// "How would you design a learning dashboard for adult learners?"
// This card is the answer.

// Accessibility — designing for all learners.
// Not optional in EdTech, where learners span ages, languages, and abilities.

export function LessonCard({ lesson }) {
  return (
    <article
      className="lesson-card"
      aria-labelledby={`lesson-${lesson.id}-title`}
      role="article"
    >
      <h3 id={`lesson-${lesson.id}-title`}>
        {lesson.title}
      </h3>

      <p className="description">{lesson.description}</p>

      {lesson.audioUrl && (
        <audio controls>
          <source src={lesson.audioUrl} type="audio/mpeg" />
        </audio>
      )}

      <div className="meta">
        <span>{lesson.duration} min</span>
        <span aria-label="Difficulty">{lesson.difficulty}</span>
        <span>{lesson.language}</span>
      </div>

      <button>Start lesson</button>
    </article>
  );
}

// What this teaches:
// - Semantic HTML (h3, article) is the foundation of accessibility
// - Audio is provided for learners who cannot read comfortably
// - Language is shown — a critical detail in India
// - ARIA attributes are added only where semantic HTML is not enough
//
// Why accessibility matters more in EdTech than anywhere else:
// - Learners include children, elderly, and users with disabilities
// - Many learners are in low-bandwidth environments
// - Language diversity is not an edge case — it is the norm
//
// A product that excludes learners is a failure, no matter how beautiful.
//
// Interview probes:
// "How would you make this lesson accessible?"
// The answer is not "add alt text". It is the whole design.