DesignGrounds: designing a learning platform as a design exercise

Context

I needed a durable external memory for product design knowledge — primary-source based, testable, and structured better than bookmarks and notes. Existing options optimize for course sales, not for retention of understanding.

Problem

How to organize a field’s knowledge so that learning it, referencing it, and testing it reinforce each other instead of living in separate tools.

Process

Architecture first. Before any visuals: information architecture, six user flows, a content model with five linked types (lesson, term, pattern, question, study). The core decision — every topic exists in three states (Learn / Reference / Test) — came from the flows, not from a layout.

Prototype to test the IA. A single-file clickable HTML prototype validated navigation and the quiz loop before committing to a stack.

Evidence-based content. Every claim links to a primary source (NN/g, Baymard, WCAG, the classic books). Summaries are original digests — the copyright-safe and pedagogically stronger format.

Build as design system practice. Design tokens as CSS variables, full state checklists on interactive components, WCAG AA contrast, keyboard-first quiz controls. The site eats its own curriculum.

Result

A static Astro site: 12 tracks, 90+ glossary terms, pattern library, quizzes with explained answers, search, RSS. Content velocity: one lesson ships with its terms and quiz questions in one sitting.

Reflection

Writing quiz questions immediately exposes vague lessons — if a question is hard to write, the lesson didn’t teach anything testable. That feedback loop became the main editorial tool.