Understand.
Identify the learner, the self-study context, and where trustworthy content comes from.
The audience
The primary user is a 12-year-old Indonesian boy preparing to enter middle school (SMP). He has access to a PC for study and a private tutor who comes to his home — the household is supportive of his learning. But he still struggles to grasp material, both from school lessons and from the tutor's explanations. His English proficiency is particularly low, and school-provided materials assume comprehension he does not yet have.
The gap is not access to learning resources; it is comprehension despite them. The design response was to prepare comprehensive material from the fundamentals — especially in English — that could bridge between his current understanding and what school and tutor already assumed he knew. Material also spans the transition from grade 6 (SD elementary) into grade 7–9 (SMP junior high), covering the abstraction jump into subjects like basic algebra.
Research and sources
Content coverage was mapped against the Indonesian curriculum for grade 7–9 (SMP) across English, mathematics, natural science (IPA), and Arabic, plus preparation content spanning end of grade 6 (SD) as a bridge into middle school. For the SD-to-SMP transition, foundational topics were prioritized: basic algebra, number operations, motion and acceleration, and temperature — the abstraction jumps that commonly trip up early-SMP students who arrive without preparation.
AI tools accelerated exploration of alternative explanation styles, but every explanation was verified against curriculum sources. Early AI drafts frequently used vocabulary calibrated for adult learners; systematic simplification was required across every module.
Define.
Convert age constraints into scope, exercise budget, and design tone.
Three dimensions were fixed before any module was built.
Content scope. Modules span two transitions: end of grade 6 (SD) as preparation for middle school, and grade 7–9 (SMP) itself. English carries the heaviest coverage — built from foundational grammar and vocabulary because the learner's starting proficiency was low and school materials assumed higher. Mathematics preparation focused on the SD-to-SMP transition: basic algebra, number operations, motion and acceleration, and temperature (natural science). Additional modules cover Arabic and other supporting subjects.
Exercise budget. Each module includes 25–40 exercises. The design principle is that repeated exposure to the same concept in slightly varied forms builds understanding more reliably for this learner than a small number of highly varied exercises. Because active production (speaking) is not part of the study setting, learning weight shifts to receptive skills and controlled production — grammar patterns, sentence construction, reading comprehension, and structured written responses.
Visual tone. The design needed to feel approachable for a middle-school-age learner without infantilizing him. This meant Nunito body typography for its rounded, warm letterforms; subject-specific color systems; and larger tap targets and font sizes than adult-oriented materials.
Structure.
Organize content across subjects and grades into a coherent, predictable system.
Content architecture
Each module follows the same internal structure — learning objective, worked example, guided practice, 25–40 exercises, and answer key with explanations. This consistency was intentional: reducing structural variability lets the learner focus cognitive load on the content, not on figuring out where things are on the page.
Modules are organized by subject × grade × topic with clear tags for navigation. Answer keys are separated from exercises but linked — the learner answers first, then checks. This preserves the retrieval-practice benefit that immediate answers destroy.
Design system
Typography. Nunito 16–18px body — larger than adult-oriented materials — with generous line spacing (1.6–1.7) to reduce reading fatigue.
Color. Each subject received a dedicated primary color: blue for mathematics, purple for English, green for science, teal for Arabic. Colors are applied consistently across module cards, section headers, and progress indicators.
Iconography and layout. Small subject icons reinforce the color coding so meaning does not rely on color alone. One primary concept per screen; expandable "learn more" sections for students who want depth. Tap targets are at least 44px; interactive mechanics are limited to simple show/hide answers.
Generate.
Use AI to draft content — with vigilant review for age-appropriateness and factual accuracy.
ChatGPT and Claude were used at multiple stages: drafting concept explanations, generating the 25–40 exercises per module, creating multiple-choice distractors, and producing answer-key rationale.
Iteration was heaviest in three areas. Vocabulary calibration: AI drafts frequently used words appropriate for undergraduate learners, not for a 12-year-old with low starting proficiency. Factual accuracy in mathematics and science content: some AI-generated explanations contained subtle errors — mis-stated steps in algebra, or oversimplified physical reasoning — that required cross-checking against curriculum sources. Cultural and religious context in Arabic content: drafts needed careful review for appropriateness to Indonesian Islamic education norms.
AI generated the first draft. Verifying that a 12-year-old with low starting proficiency could actually follow it was the real work.
Evaluate.
Review every module against accuracy, clarity, and age-fit criteria.
Content rubric
Each module was reviewed against project-specific questions:
- Is the concept explained at the right level of abstraction for this grade and starting proficiency?
- Does the vocabulary match what a 12-year-old with low starting English can actually parse?
- Is the worked example genuinely worked, or does it skip steps that a struggling learner needs?
- Do the 25–40 exercises cover meaningful pattern variety, not just repetition of one drill?
- Does the answer-key rationale explain the "why", not just the "what"?
- Are English grammar rules, mathematics steps, science facts, and Arabic examples verified against curriculum sources?
Visual review
Contrast ratios were checked at Nunito 16px and 18px sizes to ensure readability. Color-only distinctions were audited — every subject uses a color, an icon, and a label, so color-blind users lose nothing. Card density was capped at five elements per screen. Answer-reveal mechanics were tested for clarity — students must know when they are seeing the answer versus their own attempt.
Refine.
Simplify vocabulary, reduce concept density, tune the visual system based on scenario testing.
Revisions
Version 1 modules were still too dense — some explanations tried to cover a concept and its variations on the same screen. Version 2 separated these into progressive screens, each covering one aspect. Vocabulary was systematically reviewed and simplified further; where school-material vocabulary appeared, it was footnoted or expanded rather than assumed. Several exercise types (fill-in-the-blank with high-context clues) were removed because they rewarded guessing more than understanding.
Visual revisions reduced the number of interactive states per screen, standardized icon usage across subjects, and adjusted color saturation on the mathematics blue and Arabic teal after they read as visually competing when placed adjacent.
Testing
Scenario walkthroughs asked: could the learner open module 3 of grade 7 mathematics on his PC or phone, understand the objective, complete the exercises, and check his answers — without needing to ask his tutor or teacher? One representative module per subject was walked through in this way.
Adjustments were made to instructional wording, exercise phrasing, and visual affordances (which elements are tappable, which are static) based on observed friction points.
Deliver.
Deliver as modular standalone HTML — one file per module, offline-usable, mobile-first.
Each module was delivered as its own standalone HTML file, so the learner can open only the modules relevant to his current study session, store them locally on his PC, and use them without depending on internet connectivity or account logins. A simple index page lists all modules by subject and grade.
The modular file structure was intentional. A monolithic file would obscure which parts of the material addressed which concepts; per-module files make it possible to revisit exactly the module where a concept was first explained, and iterate through it as many times as needed — a crucial affordance for a learner whose primary problem is comprehension gap, not information gap.
Reflection.
The approach produced measurable results. The learner moved from remedial standing at his SD school to a final-exam score of 80 at grade 6 completion — evidence that comprehensive, repetition-heavy material bridging school gaps could close comprehension deficits that direct tutoring alone had not.
The strongest single lesson was that "resource availability" and "resource comprehensibility" are different problems. This learner had a PC, a tutor, and school lessons; the gap was not access, it was material calibrated to his actual starting point. AI accelerated drafting significantly, but every draft needed a full pass to verify that a 12-year-old with low starting proficiency could actually follow it — a check no AI system currently performs reliably on its own.
