Understand.
Identify the user, the context, and where the content will come from.
The audience
The primary user is a first-year office administration student — age 18–22, from a modest financial background, studying at a non-elite Indonesian university. In her earliest semesters her working device is often her phone; her budget for professional tools is limited.
Her aspiration, decided upfront with the roadmap in hand, is to graduate ready for Executive Virtual Assistant work — either with international clients or remote-first Indonesian companies. She needs a pathway that feels manageable alongside her coursework, gets more capable each year, and doesn't require expensive certifications until close to graduation.
Research and sources
Research began by mapping the competency stack actually expected of remote Executive Virtual Assistants working with international clients. Sources included published job descriptions on remote-hiring platforms (Upwork, Glints, RemoteOK), Indonesian freelance salary benchmarks, BAN-PT-accredited office administration curricula, and Microsoft Office Specialist certification tracks.
AI tools accelerated synthesis of dispersed source material — but every claim about credential validity periods, market rates, or platform-specific requirements was cross-checked against primary sources. Early AI drafts frequently contained plausible-sounding numbers that turned out to be inflated or outdated. Verification was the largest single time investment in the project.
Define.
Convert user needs into scope, workload budget, and design direction.
Three dimensions were assessed independently before any content was structured.
Content scope. What must the learner actually know and be able to do by graduation? Every competency was sorted into three layers — mandatory, recommended, and optional — so the roadmap would surface priorities instead of drowning the learner in equally-weighted lists.
Workload budget. How many hours per week can a full-time student realistically dedicate to independent development on top of her degree? The realistic figure landed at 8–12 hours — enough to make meaningful progress, not enough to interfere with academic performance. This budget forced hard prioritization in every subsequent decision.
Visual direction. The roadmap needed to look approachable and career-oriented for a young adult female audience — professional but not corporate-formal. This meant a soft, low-saturation palette, Inter typography for a modern-professional tone, and a card-based structure to reduce cognitive load when browsing four years at a glance.
Structure.
Organize the roadmap into a coherent four-year arc — in content and in visual system.
Content architecture
The roadmap was structured across four academic years with a clear developmental arc:
- Year 1 — Foundational competencies: touch typing, MS Office basics, business English at A2/B1 level.
- Year 2 — Office productivity depth (Word/Excel/PowerPoint intermediate), professional communication, document management.
- Year 3 — Remote-work simulation: project coordination, virtual meeting facilitation, cloud-based collaboration.
- Year 4 — AI-assisted workflows, portfolio finalization, credential completion, job-market preparation.
Time-sensitive credentials (MOS, English proficiency test) were deliberately scheduled close to graduation to maximize their validity period at hiring time. LinkedIn activity was deferred to Year 3 onward — building visibility before there is anything to demonstrate creates the wrong impression.
Design system
Typography. Inter was selected for both display and body use — a clean, contemporary sans-serif that reads as professional-modern rather than corporate-institutional. Its wide weight range allowed clear typographic hierarchy without needing a second family, keeping the resource simple to deliver as a single HTML file.
Color palette. A soft, low-saturation palette with muted rose, warm cream, and neutral gray was chosen to feel approachable and career-oriented for a young adult female audience. Sufficient contrast was preserved for body text and interactive elements. The feminine tone was intentional — the target audience was clear from the outset, and neutrality-by-default would have felt impersonal.
Layout. Semester content was displayed through structured cards to reduce cognitive load and communicate the four-year progression at a glance. Each card carried no more than five primary items to prevent visual fatigue.
Generate.
Use AI to explore, draft, and compare — but never as final output.
ChatGPT and Claude were used at multiple stages: exploring alternative sequencings for the four-year arc, drafting initial module descriptions, generating example weekly schedules to test workload realism, and comparing candidate credential timing strategies.
Each AI-generated output was treated as a starting point, not a finished product. Prompt iteration was heaviest in three areas: correcting workload inflation (drafts consistently assumed unrealistic study hours), removing redundancy (early drafts repeated competencies across multiple semesters unnecessarily), and eliminating audience-mismatched vocabulary (some drafts read as if written for career-changers, not first-year undergraduates).
AI accelerated the work by an order of magnitude — but every consequential decision was made and verified by hand.
Evaluate.
Review every decision against explicit criteria — content and visual.
Content rubric
Content was reviewed against project-specific questions:
- Is this competency realistically achievable in the time allocated?
- Does the difficulty progression make sense from a beginner's starting point?
- Are optional tasks clearly labeled to avoid overwhelming the learner?
- Are credential timing choices consistent with real-world validity periods?
- Is the language age- and audience-appropriate?
- Are inflated market rates or optimistic salary figures caught and corrected?
Visual review
Visual review checked contrast ratios, font sizes, spacing consistency, card density (no more than five items per card), and reliance on visual hierarchy over color alone.
Refine.
Revise based on evaluation, then test in the audience's real context.
Revisions
Version 1 was too ambitious — the workload assumed 20+ hours per week of independent study on top of coursework, which was unrealistic. Version 2 restructured the roadmap around an 8–12 hour weekly budget and introduced the mandatory/recommended/optional layering. Several "nice to have" competencies were demoted to optional; others were dropped entirely.
Visual revisions reduced the number of colored elements per screen after early card mockups felt cluttered. Decorative containers — boxes, borders, gradient fills — were removed unless they distinguished genuinely different content types. Certain feminine palette choices were tuned toward professional legibility.
Testing
The roadmap was tested through walkthrough scenarios: could a student read the Year 1 outline and understand what to do in her first month? Could she scan the four-year overview and grasp the arc? Was the mobile layout usable on a mid-range Android device with a smaller screen?
Adjustments were made to progressive disclosure (expandable module details became the default state on mobile), tap-target sizing, and vertical rhythm between semester cards.
Deliver.
Publish as a responsive, standalone, offline-capable resource.
The final deliverable was a single-file responsive HTML resource — no backend, no login, no dependency on ongoing services. This choice matched the audience's realities: intermittent internet access, mobile-first browsing, and the need to keep the resource permanently offline-accessible.
Delivery was via direct file transfer. The learner opens it in any browser, on any device, at any time. There is nothing to install, nothing to log into, and no way for it to break because a third-party service went down.
Reflection.
The project demonstrated that comprehensive content is not the same as useful content. A successful roadmap must control scope, communicate priorities visibly, and reduce decision fatigue — because the reader will always have more information than time.
The strongest single lesson was the difference between AI-assisted content and AI-generated content. AI accelerated the work by an order of magnitude, but every consequential decision — audience calibration, workload realism, credential timing, visual restraint — was made and verified by hand.
