This is a concept for an LLM-powered learning platform that can generate structured, engaging courses on virtually any topic the user wishes. The concept only covers the course UI (as opposed to the course creation/discovery UI).
Layout
For every course, there’s a content panel, a chat panel, and an outline panel. The chat and outline panels can be toggled on and off according to the student’s preferences.
Content Panel
The content panel is the focal point of the UI. The other two panels play a supporting role to it.
Content is broken down into subsections that can be completed in about ten minutes. As the student progresses through a subsection, the progress bar at the bottom of the panel fills up, showing them at a glance how much is left and motivating them to keep going.
I haven’t mocked this up, but the idea is that the content panel has three modes: text, notes, and flashcards. Notes and flashcards would be autogenerated based on the text, but editable by the student. I imagine a flow where the student reads the content, then reviews with the notes and flashcards. I also think it would be super useful to incorporate a spaced repetition system for reviewing flashcards (ala Anki), where you prompt the student to review at set intervals. This would help them retain what they’ve learned, and give the platform a good reason to send notifications that boost retention.
Chat Panel
My initial idea was to have chat happen “in-stream” with the text content. However, I wanted the chats to persist and I didn’t want them to clutter up the core content, so I decided on the panel approach.
By default, the chat would display the chat history for the entire course, but I’d like to add a filter toggle for displaying just the current section (this would be useful if a student was reviewing a previous section and wanted to see only the relevant chat messages).
Outline Panel
The outline panel displays the top level course outline, and shows the subsections of whatever section the student is currently viewing. The subsections for the other sections are hidden to avoid overwhelming the student, but the student can click on a section if they want to see its subsections. As the student progresses through a section, the subsections are checked off and progress bar for that section fills up.
Selection & Annotation
The UI for highlighting and interacting with specific content is my favourite part of this concept. LLM’s ability to customize and discuss content is incredibly useful, but it’s pretty uncharted territory UI-wise.
The solution I came up with is this:
To learn more about a piece of content, click on it. Clicking once will select the entire paragraph, clicking again will select the sentence, and clicking a third time will select the word (you can also highlight the old-fashioned way by clicking and dragging).
When content is selected, a menu appears with some standard commands: Simplify, Explain with Analogy, and Use an Example. You can also ask a question about the selection in the chat, and the selection will be passed in behind the scenes to give the LLM context.
I think of the responses as annotations. Annotations are shown in a card overtop of the content. Like with chats, I wanted the annotations to persist for later review, but didn’t want them to clutter up the core content. So, with each annotation created, a small button appears inline beside the relevant content. To view the annotation again, the student just needs to click on the button.
Progression
I’m a big believer in chunking content to avoid overwhelming the user, keep them engaged, and create a sense of progression.
When a student begins a new subsection, they are only presented with one “sub-subsection” at a time. When they finish reading the sub-subsection, they click the next button to move on and the progress bar updates. They can easily scroll up through the sub-subsections they’ve already finished, no need to spam the back button to revisit something they read earlier.
Dark Mode
Dark mode is probably more important for a learning platform than for most products, since students often study at night and it involves a lot of reading, so I wanted to mock that up as well.
Relatedly, I think it’d be cool to allow students to choose a custom color theme for their course. It would add a little delight to the experience, but it would also help students mentally separate courses if they were taking multiple concurrently.
Additional Thoughts
Augmenting Existing Courses
I suspect that the most engaged and retentive users of a platform like this would be students learning material for school. For them, the product is a painkiller, because their grades and future careers depend on learning the material. For people learning for fun, the product is more of a vitamin.
Students learning for school have to cover the specific material from their course, so auto-generating a course based on the topic probably wouldn’t suit their needs. One way to solve that could be to allow the students to create their own outline, so they can plug in the outline from their course’s textbook, then have the LLM generate content for each section of the outline.
It might even make sense to create courses based on a bunch of the most popular textbooks, using their outlines. You could use the LLM's embedding capability on the entire books to make the AI chat really good (not sure if copyright law prevents that).
Gamification
I’ve spent a lot of my career working on products that use gamification to motivate good-but-hard activities. There’s huge potential in a platform like this to leverage gamification to make learning fun and keep students motivated. I included a couple small gamification techniques in this concept (the progress bars and content chunking), but there’s a ton more you could do (e.g. streaks, a point system, collectible badges).
