Lumin: Online Learning, From Curious to Enrolled

The route runs homepage, catalog, course page, sign-up, onboarding, and the rule I held every screen to is that browsing never asks for anything. The catalog and course pages are logged-out views with Log in and Get started in the header; the account arrives at the moment someone decides to enroll, not before it. Every branch off the main path leads back onto it: a search with no results, a returning user, someone not ready to pay. The last step is drawn dashed because it isn't in this set of screens. Checkout and the lesson player would be the next things to design, and I'd rather show where the work stops than imply it doesn't.

Onboarding asks one question per step: what do you want to learn? Eight interest tiles, one gold Continue, and 'Skip for now' directly underneath it. Personalising the catalog is useful to the product and optional to the student, and a questionnaire wedged between sign-up and the course they came for is exactly where someone who already knows what they want gives up. The three-segment bar at the top states the cost up front: this is step one of three, not one of an unknown number.

Search takes a topic, a tool or a skill, and category chips narrow it without typing. The interesting screen is the one where that fails. The empty state keeps the query in the box so the student can see what they searched, says plainly that nothing matched, and offers a single way back: 'Browse all courses', in the same gold as the primary action elsewhere. The worst version of this screen is a blank grid with the filters still showing, which is a dead end that looks like a loading bug.

The course page is built around one decision, so the price card stays pinned beside the content as you scroll. It carries two actions on purpose: 'Enroll now' for someone who's convinced, and 'Try a sample lesson' for someone who isn't yet. $149 is a real decision, and an outline button that lowers the stakes keeps that student on the page instead of sending them off to compare tabs. Below the card, the 'what you get' list answers the questions people otherwise go hunting for: how many lessons, whether there are project files, whether there's a certificate.

Reviewing the set against my own brief turned up three problems. First, the brief reserves gold for the primary action, and onboarding, the empty state and the course page all follow it, but the catalog's Enroll buttons are violet. That's six loud buttons competing on one screen, and I'd make the whole card the link and drop the button. Second, the course page shows curriculum items ticked as complete next to 'Enroll now', which is progress belonging to someone who hasn't started. Logged out, those should be plain outlines, with progress appearing after enrollment. Third, one catalog card puts its rating and length together where the other five split them, a small sign the card drifted rather than being built as one component, which is the first thing I'd fix in the Figma file. The coded prototype linked at the top applies all three fixes; the Figma screens on this page are the originals. Building it meant adding what the set was missing: onboarding steps two and three, which follow step one's pattern, and a plain end screen where checkout and the lesson player would be. None of it has met a real student yet. The prototype is what the next step tests: a five-person test of this route, starting at the empty search.