Designed and built an AI study app end-to-end — upload a PDF and it turns it into quizzes and flashcards, with a spaced-repetition study flow, a dark category-coded UI, and a token-based design system across web and mobile.
01 / Overview
A self-initiated product — an AI study tool that turns documents into quizzes and flashcards, designed end-to-end across web and mobile on one design system.
02 / Challenge
Most students study by re-reading notes and PDFs — passive, slow, and easy to mistake for real learning. Active recall and spaced repetition work far better, but the tools are clunky: you write every flashcard and quiz by hand. Exam Drill’s bet was simple — let AI turn any document into a study set in seconds, then make the studying itself feel fast and rewarding.
I was designing and building it solo, so everything had to stay shippable by one person: a system cohesive enough that new screens were variation, not invention, and a product simple enough that a student could go from uploading a file to their first quiz without a tutorial.
Re-reading and highlighting feel productive but rarely stick. The product had to pull people toward active recall — without nagging.
One person designing and building a full product on web and mobile — only possible on a tight, token-driven system.
Generated quizzes and flashcards have to read as clear, correct, and easy to edit — or students won’t rely on them.
03 / Approach
Tokens before pages, patterns before mocks, then web and mobile on one foundation.
01DISCOVERY
Looked hard at how students actually study and where flashcard and quiz apps fall down — too much manual setup, dull interfaces, weak on mobile. Came out with a short list: generation has to be instant, the UI has to feel calm, and study has to work one-handed on a phone.
02SYSTEM
Built the system in Figma variables: a dark surface scale, the locked category colors (study blue, quizzes cyan, flashcards purple), type, spacing and components. Every screen reads tokens, so web and mobile stay in lockstep — and a light theme is a token map away.
03PRODUCTION
Designed the full product against the system — dashboard, AI generation, quiz and flashcard study, sharing, settings, onboarding and a marketing site — exploring variations directly in Figma, refining toward a launch-ready build.
04 · THE APP
Upload, generate, study. Dashboard, quizzes and flashcards — dense without being noisy, fast without being clipped.
Upload, generate, quiz and review wherever you are — on the train, in line, between classes. Every screen is designed mobile-first, so studying fits the gaps in your day.
05 · DESIGN SYSTEM
Built as the foundation for the whole product. Fully token-based — consistent across web, mobile, light and dark.
TOKEN · CATEGORY COLOR
TOKEN · TYPE RAMP
TOKEN · SPACING SCALE
06 · AI GENERATION
Upload a document and Exam Drill generates quizzes and flashcards in seconds — review, tweak, and start studying. The feature that makes the whole product worth opening.
07 / Outcomes
A full consumer product, designed solo: web and mobile, an AI generation flow, and a design system that keeps them in sync.
A token-driven kit that keeps web, mobile, light and dark in sync — new screens are variation, not invention.
A complete consumer product: dashboard, AI generation, quiz and flashcard study, sharing, onboarding and a marketing site.
An upload-to-study-set flow designed to feel instant and trustworthy — with results you can review and edit before you study.
A calm, dark, category-coded interface that makes studying feel like progress — explored through many variations in Figma.
08 / Reflection
Designing and building it myself meant the system had to do the heavy lifting. Starting from tokens — color, type, spacing, the category colors — every new screen on web or mobile became a recombination of things that already existed. That’s the only reason one person could ship a product this size.
— ALEKSA RADOVANOVIC · FOUNDER & DESIGNER, EXAM DRILL
NEXT CASE STUDY · 01 / 06
vatan.app
A crypto casino startup designed end-to-end — casino, cashier, games, CRM, and a six-brand white-label design system.