Oboe.com — Complete Feature Documentation
A thorough analysis of every feature in Oboe, an AI-powered learning platform that generates personalized courses, podcasts, flash cards, study guides, and exams from any topic. This document is your blueprint for building a similar app for pastry chefs.
The homepage centers around a single text input with the placeholder "I want to learn about..." — the entire UX is focused on this single action. Users type any topic and the AI generates a full multi-chapter course.
Input Components
- Text input field — "I want to learn about..." with large, inviting styling
- File upload button — "Upload files to include in your course" (attach PDFs, documents to inform course content)
- Configure button — Opens configuration panel (see Section 02)
- Generate button — Circular arrow icon, triggers AI course generation
Suggested Topics
Below the input, a horizontal scrolling row of topic suggestions appears with icons/emojis:
- Introduction to Particle Physics
- The Voyager gold record
- How do ocean currents work?
- Plate tectonics explained
- How does the stock market work?
- Antimatter propulsion
These are clickable pill-style buttons that auto-fill the input and generate a course.
Generation Flow
User enters topic + optional file uploads
The input accepts free text. Files can be PDFs or documents that serve as source material.
AI processes with configuration settings
Shows "Thinking..." animation with a small avatar icon while processing. The page navigates to a new URL (/learn/[slug]).
Table of Contents appears first
The sidebar TOC populates with chapter names while the first chapter is still generating. This gives users immediate feedback.
Content streams in progressively
The first chapter content streams in with headings, paragraphs, tables, equations, images, and quizzes appearing sequentially.
Supplementary materials generate
Podcast, Flash Cards, Study Guide, and Final Exam links appear in the sidebar as they become ready.
Clicking the "Configure" button (gear/slider icon) opens a floating dialog below the input with four radio-group settings:
| Setting | Options | Default | Purpose |
|---|---|---|---|
| Primary Focus | Learning, Reviewing | Learning | Controls whether content introduces new concepts or reviews known material |
| Length | Short, Medium, Long | Medium | Controls how many chapters and how deep each chapter goes |
| Complexity | Beginner, Intermediate, Advanced | Intermediate | Controls technical depth — beginner uses analogies, advanced uses technical terms |
| Personalize | Yes, No | Yes | When yes, AI tailors examples to the user's context/interests |
Each course is divided into 6 chapters (for a Medium-length course). Each chapter is a full lesson page with rich, multi-media content. The content quality is remarkably high — it reads like a well-edited textbook.
Content Elements Found in Each Lesson
Each chapter has a prominent H1 title (e.g., "Force Carriers") and an H2 subheading that's more evocative (e.g., "Mediators of the Universe"). This two-level heading pattern creates a textbook feel.
Pastry equivalent: Chapter: "Chocolate Tempering" → Subheading: "Mastering the Crystal Dance"
Paragraphs use conversational, clear language with key terms rendered as clickable buttons inline with the text (styled with a subtle underline or highlight). Clicking a term opens a detailed definition popover (see Section 04).
Example: "...these medicine balls are called gauge bosons, the fundamental carriers..."
Academic-style blockquotes appear throughout with the source linked below. The quote is indented with a left border, and the citation links to the original source (e.g., CERN's website) with a small source badge.
Clean HTML tables with headers present structured data. Example table had columns: Force, Exchange Particle, Range, Relative Strength. Tables use zebra-striping or subtle hover effects.
Pastry equivalent: Sugar temperature stages table (Thread/Soft Ball/Hard Ball/Soft Crack/Hard Crack with temperatures in C and F, visual indicators, and use cases).
Equations are rendered using MathML/LaTeX with both the rendered equation and a fallback text version displayed. Each equation has an "Explain this" button (see Section 05).
Pastry equivalent: Baker's percentage formulas, hydration calculations, scaling ratios, tempering curve equations.
Relevant images appear throughout the lesson with:
- Image alt text ("Lesson image")
- Attribution link icon that links to the source (e.g., Wikimedia Commons)
- Descriptive caption below the image
Images seem to be sourced from open/Creative Commons repositories, not AI-generated.
Key terms within lesson text are rendered as clickable button elements that visually blend into the paragraph text but have a subtle interactive affordance (underline or different weight).
Popover Behavior
Clicking a term opens a slide-in side panel (not a small tooltip — a full rich panel) with:
- Creative title for the definition (e.g., "The Cosmic Messengers" for gauge bosons)
- Multiple paragraphs of explanation, not just a one-liner
- Contextual examples that relate to the current lesson
- Analogies in plain language
Wherever a mathematical equation appears in the lesson, an "Explain this" button appears directly below it with a small icon. Clicking it opens a side panel that provides a step-by-step breakdown of each variable and what the equation means in plain English.
What the Explainer Shows
- The formula displayed prominently at the top
- Variable-by-variable breakdown (R = range, ℏ = Planck's constant, m = mass, c = speed of light)
- Plain-English interpretation of the relationship
- Real-world examples of what happens when you change each variable
At the end of each lesson section (before the "Go Deeper" area), a fill-in-the-blank quiz appears inline with the content. This is not on a separate page — it's embedded right in the reading flow.
Quiz Format
Question Type
"Fill in the Blank" — a sentence with a missing word/phrase, presented with 4 clickable option pills.
Answer Options
4 horizontal pill-style buttons (e.g., "mass", "color", "velocity", "spin"). Single-select.
Feedback
Correct answer is highlighted in green with a checkmark. The blank in the sentence is filled with the correct answer. Immediate, no page reload.
Placement
Appears between the last content paragraph and the "Go deeper" section of each chapter. Natural reading position.
At the bottom of each chapter, separated by a horizontal rule, a "Go deeper:" section offers two interaction modes:
1. AI-Suggested Questions (5 pre-generated)
Five clickable questions appear as a bulleted list, each with a small arrow/icon. Clicking one presumably generates additional inline content. Examples observed:
- "How does the strong force hold nuclei together?"
- "Explain virtual particles in more detail."
- "Why isn't gravity part of the Standard Model?"
- "Walk through an example of a W boson interaction."
- "How do these forces change at high energies?"
2. Custom Question Input
Below the suggestions, a text input with placeholder "Go deeper on..." and a send button lets users ask any follow-up question about the lesson content. This is essentially a scoped AI chat — but presented as a "dive deeper" interaction, not a chatbot.
Accessible via the "Podcast" link in the sidebar TOC. Generates an audio version of the course that users can listen to.
Podcast Page Layout
- Title: "Podcast" with the course title context
- Episode list: One episode per chapter, numbered (1-6 for a 6-chapter course)
- Each episode shows: chapter title, play button (circle with triangle), download icon
- Layout is a clean vertical list with consistent spacing
- Pro feature: Export/download podcasts requires Pro plan ($32/mo)
Accessible via the "Flash Cards" link in the sidebar. Generates a deck of flashcards from the entire course content.
Flash Card Interface
Card Design
Warm tan/gold background card with the course cover image as a subtle backdrop. Clean typography.
Front (Term)
Shows the term name in large heading text with "See Answer" below. Progress counter: "0 completed • 12 remaining".
Back (Definition)
Shows the definition in smaller text, with two action buttons below.
Spaced Repetition
"Ask Again Later" (puts card back in deck) and "Next" (marks as reviewed). Classic SR pattern.
Observed Cards (12 total from Particle Physics course)
- Gauge Bosons
- Virtual Particles
- Fundamental Forces Range
- Feynman Diagrams
- Vertices (Feynman Diagrams)
- Gauge Invariance
- Spontaneous Symmetry Breaking
- Higgs Field
- Higgs Boson
- Large Hadron Collider (LHC)
- Standard Model Gaps
- Matter-Antimatter Asymmetry
Additional controls: "Reset Cards" button to start over. "Flash Cards" header label on the non-flipped side.
Accessible via the "Study Guide" link in the sidebar. Generates a long-form study document with the following sections:
Each chapter gets a single paragraph distilling its essential concept. Example: "Fundamental Forces & Exchange Particles — Forces are mediated by exchange particles (gauge bosons), whose mass determines the force's effective range, replacing the old idea of action at a distance."
This gives students a rapid overview before deep-diving.
Organized by chapter topic, each section has 5 bold-labeled bullet points. Format:
- Bold label: "Four Forces:" followed by the key fact
- Bold label: "Force Carriers:" followed by explanation
This is the "what to memorize" section. Every point starts with a bolded keyword for scannability.
Each term includes:
- Term name (bolded) + definition
- Used in context: — an example sentence showing how the term is applied
- Don't confuse with: — disambiguation from similar terms
- Topic: — which chapter the term belongs to
Terms are separated by horizontal rules. This is far superior to a simple glossary — the "Don't confuse with" field is particularly valuable.
Comparison tables that contrast related concepts side by side. Example observed:
- Electromagnetic Force vs. Weak Force vs. Strong Force (gauge boson, mass, range, what it acts on, examples)
- Higgs Field vs. Higgs Boson (what it is, state, role, analogy)
Each table is followed by a "Memory trick" in bold — e.g., "Heavy messengers (W/Z) get tired quickly and can't travel far."
Complex processes are broken into numbered steps. Each step has:
- Step N: Title (bolded)
- What happens: — the core action
- Key indicator: — what to look for in a diagram/experiment
- Common error: — mistakes students typically make at this step
Example: Beta Decay in a Feynman Diagram — 5 steps from Initial State through Boson Emission to Final State.
Each mistake follows this pattern:
- ❌ MISTAKE: The misconception stated plainly
- Why it happens: — The intuitive (but wrong) reasoning
- ✅ Instead: — The correct understanding
- Memory aid: (sometimes) — A mnemonic or analogy
- Topic: — Chapter reference
Example mistake: "Thinking forces are an invisible 'pull' acting at a distance" → Instead: "Forces are mediated by the exchange of physical (though 'virtual') particles."
Accessible via "Final Exam" in the sidebar (with a checkmark icon). Generates a comprehensive test covering all course chapters.
Exam Structure
- 12 questions in a single scrollable page (not paginated)
- Each question is numbered prominently (1-12) with H3 headings
- 4 options per question (A, B, C, D) rendered as clickable button cards
- Options have a letter badge (A/B/C/D) followed by the answer text
- Questions can include mathematical equations (LaTeX rendered inline)
- Questions cover all 6 chapters, testing recall, comprehension, and application
- Bottom: "All done? Get your grade" text + "Submit" button
Question Types Observed
| Type | Example | Difficulty |
|---|---|---|
| Conceptual | "What is the primary reason for [X difference]?" | Medium |
| Factual | "Which conservation law must be satisfied at every vertex?" | Easy-Medium |
| True/False | "True or False: According to the principle of gauge invariance..." | Medium |
| Application | "Why is the photon massless?" (requires understanding mechanism) | Hard |
| Negation | "Which is NOT a known limitation..." (tests thoroughness) | Hard |
| Process | "In a Feynman diagram representing [X], what do the line styles represent?" | Medium |
Accessible from the sidebar navigation (always visible). A free daily engagement feature that doesn't require a course.
Puzzle Page Components
- Title with emoji: "The Sound of Nothing" with a puzzle piece emoji prefix
- Tagline: "One puzzle a day, 100% free."
- Email subscription form: "Enter your email to subscribe" — newsletter capture for puzzle delivery
- Date navigation: Previous Puzzle / [Current Date] / Next Puzzle buttons
- Puzzle content: A paragraph describing the question/scenario
- Multiple choice answers: 4 options with "point finger" prefix (☞)
- Closing editorial note: A poetic/reflective one-liner (e.g., "Even silence has a voice.")
- "Click to Reveal" button: Shows the answer
- Puzzle archive: Browsable via Previous/Next — full archive access requires Plus or Pro plan
Each generated course comes with a "View [N] Sources" button in the course header bar. The Particle Physics course had 13 sources.
Sources Panel
- Clicking the button opens a slide-out panel from the right side
- Lists all sources used to generate the course content
- Includes academic papers, educational websites (CERN), textbook references
- Sources are also linked inline within blockquotes throughout the lesson content
The "Share" button in the course header opens a dialog titled "Share Deep Dive" with:
Share Dialog Components
- Course title and cover image displayed as a preview card
- Shareable URL with a copy button
- Social sharing buttons:
- Twitter/X
Left Sidebar (Always Visible)
- Top: Oboe logo/home link
- Collapse/search button — toggles sidebar width
- "New Course" button — returns to homepage course creation
- "Daily Puzzle" button — navigates to daily puzzle
- "Course History" list — shows previously generated courses as clickable links
- User profile button (bottom) — opens profile/settings menu
Course Page Sidebar (TOC)
- Course cover image (AI-generated, matches topic)
- Chapter list — clickable links to each chapter page
- Supplementary links (below chapters):
- Podcast (audio icon)
- Flash Cards (card icon)
- Study Guide (book icon)
- Final Exam (checkmark icon)
Course Header Bar
- Course title (H1)
- Course actions dropdown (bookmark, remove)
- Sources button with count
- Share button
- Upgrade button
Oboe uses a credit-based freemium model with a timer showing when credits reset (e.g., "Your credits reset in 5h 22m"). The paywall appears as a modal dialog when limits are hit.
- Generate courses on any topic
- Generate courses from attachments
- Rate limits on course creation
- Limited access to course chapters and interactions
- Unlimited chapter access and interactions
- No limits on course creation
- Full access to puzzle archive
- Priority support
- Everything in Plus
- Inline editing of course content
- Public sharing without account requirement
- Export/download course materials + quizzes
- Export/download podcasts
- White glove support
Monetization Mechanics
- Monthly/Annual toggle on the pricing dialog (Annual: $144/yr for Plus, $384/yr for Pro)
- Usage-based gating — credits reset on a timer (not session-based)
- Paywall trigger: Appears when accessing course content after credits are exhausted
- Paywall UX: Full-screen modal with "Back" button, prevents interaction with underlying page
- Feature differentiation: Free → Plus (quantity), Plus → Pro (control/export)
Login/Signup Methods
- Email + Password — standard form with email and password fields
- Continue with Google — OAuth button
- Continue with Apple — OAuth button
- Password reset — linked from login form
- Auth provider: Auth0 (auth.oboe.fyi subdomain)
User Profile Menu
Accessible via a small avatar button at the bottom of the left sidebar. Opens a dropdown menu with:
- User avatar + email displayed at top
- Contact: team@oboe.com (mailto link)
- Upgrade — links to pricing
- Newsletter — subscription management
- Careers — job listings
- Terms of service
- Privacy policy
- Log out
Color Palette
| Element | Color | Usage |
|---|---|---|
| Background | Warm white (#FDFBF7-ish) | Main content area — not stark white, has a warm paper-like feel |
| Sidebar | Dark charcoal/near-black (#1a1a1a) | Left navigation sidebar |
| Text | Dark charcoal (#2c2c2c) | Body text |
| Accent | Warm terracotta/rust | Buttons, highlights, interactive elements |
| Cards | White | Content cards, flash cards, quiz containers |
| Borders | Light warm gray | Subtle dividers, table borders |
Design Principles Observed
- Minimal chrome: Very little UI decoration — content takes center stage
- Warm tonality: Everything has a warm, inviting cast — not cold/clinical
- Generous whitespace: Content breathes — wide margins, tall line heights
- System fonts: No custom font loading, uses system font stack
- Progressive disclosure: Features reveal themselves as you interact (config panel, term definitions, go deeper)
- Content-first hierarchy: The course content is the hero — UI controls are subtle and secondary
- Reading-focused layout: Single-column content with a max-width that's comfortable for reading (~700px)
Keyboard Shortcuts
- Alt+T — Notifications panel (observed as a hidden region in the DOM)
- Escape — Close dialogs/popovers
URL Structure
Homepage: oboe.com/ Course: oboe.com/learn/[slug]-[id] Chapter: oboe.com/learn/[id]/[chapter-slug]-[index] Podcast: oboe.com/learn/[id]/podcast Flash Cards: oboe.com/learn/[id]/flashcards Study Guide: oboe.com/learn/[id]/study-guide Final Exam: oboe.com/learn/[id]/final-exam Daily Puzzle: oboe.com/puzzle/[puzzle-id] Auth: auth.oboe.fyi/u/login