Course Detail

Evaluate a course through syllabus, instructor, outcomes, prerequisites, ratings, and enrollment context. This example brings Overview and Syllabus together so learners and course teams can find the next task without losing context.

It includes representative records such as Define the product problem and Map customer evidence. Use the screenshot to study the layout, then adapt its components and product states to your own design system.

Course Detail
Use this template in Figr

Template facts

Screen

Detail

Primary action

Enroll now

Pattern

Detail

State

Default, loading, empty, error, permission, success

Design system

Configurable product UI theme

What this screen helps users do

Product and growth teams need to enroll now while keeping lessons, duration and exceptions visible. The interface should show what changed and who should act next.

Key elements

  • Main workspace: Overview gives users an obvious place to start.
  • Supporting view: Syllabus keeps the related context close.
  • Primary action: Enroll now stays visible when people need it.
  • First signal: Lessons shows a useful value (28).
  • Second signal: Duration gives additional context (6.5h).
  • Sample record: Define the product problem.
  • Next record: Map customer evidence.

States worth designing

  • Record not available: say what changed, protect progress, and offer a clear next step.
  • Details refreshing: say what changed, protect progress, and offer a clear next step.
  • Incomplete evidence: say what changed, protect progress, and offer a clear next step.
  • Action complete: say what changed, protect progress, and offer a clear next step.
  • Record read-only: say what changed, protect progress, and offer a clear next step.
  • History not available: say what changed, protect progress, and offer a clear next step.

Where this screen sits in the flow

Overview → Syllabus → Enroll now → Review outcome

Patterns used

Detail, Overview, Syllabus, contextual actions, error recovery

Why these choices work

Emphasize record status, next action and recent changes. Put secondary history nearby without competing with the primary task.

Pay attention to overview and syllabus. People need to distinguish Define the product problem from Map customer evidence. Keep lessons visible, especially when a record changes owner or status.

Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Enroll now”. Make error recovery as clear as the happy path.

Related screen examples to explore next: Course Catalog, Lesson Player, Learning Dashboard.

Start from this in Figr

Design a course detail screen inside our existing product. Use our current components, tokens and content language. Include Overview and Syllabus views, credible records like Define the product problem, and a clear “Enroll now” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.

Open Figr