grtwo markgrtwo-docsbeta

Report this document

Describe the issue — this goes directly to our review queue.

0/500

Asia Education — Website Design Brief

Content note: Copy in this brief is placeholder-level. It does not have to be accurate — real content comes from the client later. Design to the structure and hierarchy, not the exact words.

1. Client Snapshot

  • Asia Education — Japan study-abroad consultancy, based in Kathmandu, Nepal
  • Helps students prepare for and get into Japan's N4-level language program (language school pathway)
  • Audience: Nepali students aged 18–25 and their parents — mostly browsing on mobile, often on slower connections
  • Tone: trustworthy, calm, premium — deliberately unlike the loud/cluttered look most local consultancy sites have
  • Industry context worth knowing: this sector has a real trust problem in Nepal — students are actively warned about fraudulent agents. Visible legitimacy (named staff, registration/accreditation, real photos) matters more here than in most industries. The design should make the consultancy feel real and accountable, not anonymous.

2. Global Elements

Navbar

  • Logo (left)
  • Links: Home · Program · Blog · Contact
  • Language toggle: EN / 日本語 — compact, not a dropdown that dominates
  • Primary CTA button: "Book a Free Counselling" — this exact phrasing is the industry-standard call to action in Nepal; students recognise it
  • Sticky on scroll, with a subtle background/blur transition
  • Mobile: hamburger → full-screen menu, with the CTA staying visible as a persistent button

Footer

Four columns on desktop, stacked on mobile:

  1. Brand — logo, one-line positioning, Kathmandu address, and any registration/accreditation marks (Ministry of Education registration, ECAN membership, etc.) shown as small badges
  2. Explore — Home, Program, Blog, Contact
  3. Program — N4 Curriculum, The Journey, Demo Class, FAQ (anchor links into the Program page)
  4. Get in touch — phone, email, WhatsApp/Viber, office hours, social icons

Bottom bar: copyright line, plus a small Student Portal login link (the portal is a separate app — this just needs an entry point).

Floating element

  • Persistent WhatsApp/Viber button, bottom-right — this is how most enquiries actually happen locally

3. Pages to Design — 4 total

No fees page — client decided not to show pricing publicly for now. Do not design one. No About or Testimonials as separate pages — these live as sections inside Home. No Gallery as a separate page for now — if the client turns out to have real photo volume (multiple events, years of batches), it can be promoted to its own page later.

Page 1 — Home

  1. Hero — short headline (6–8 words max), one-line subhead, primary CTA ("Book a Free Counselling") + secondary ("See the program")

  2. Trust strip — 3–4 key stats (students placed, years running, visa success rate, batches running)

  3. Why Asia Education — 4 short value cards, one line each:

    • You always know where you stand (live application tracker)
    • Real Japanese, from day one (sponsor interview + classes in Japanese)
    • One office, real attention (Kathmandu-based, focused)
    • Practice before it counts (JLPT N4 mock tests)

  4. The journey — the signature visual of the whole site. A connected stepped path/timeline showing the 9 stages a student actually goes through. Horizontal on desktop, vertical on mobile. Each step gets only 3–5 words — never a numbered paragraph list.

    1. Counseling
    2. Demo Class
    3. Enrollment
    4. Language Classes
    5. Sponsor Interview (conducted in Japanese)
    6. Document Submission
    7. COE Received
    8. Fee Payment
    9. Embassy Interview

    This same visual is reused on the Program page with durations added — design it once as a reusable component.

  5. Program preview — one strong card summarising the N4 program, linking through to the Program page

  6. Meet your counsellors — real staff photos with names and roles. This matters more than it looks: in this industry students pick a consultancy because of a specific person, not a brand — reviews of competitors overwhelmingly name individual counsellors by name. Should feel human and specific, not a generic "our team" grid. 3–4 people, photo + name + role + one short line.

  7. Testimonials — 3 student cards: photo, name, where they're studying now, 1–2 sentence quote

  8. Gallery strip — horizontal scroll of event/class photos, no captions needed

  9. Final CTA band — contrasting background, one clear action

Page 2 — Japan N4 Program

  1. Opening — not a plain page header. Design something with real presence: a strong editorial statement about what the program leads to, paired with a cinematic image or a visual hint of the level structure, plus the primary CTA. It should feel like arriving somewhere, not reading a heading. Treat this as the second-most important composition on the site after the Home hero.

  2. What you'll achieve — 3–4 outcome points, icon + one line each

  3. Curriculum breakdown — N4 levels shown visually (stepped/card structure): level name, duration, 3 bullets max per level

  4. Class format — schedule, batch size, teaching approach — short data-style presentation, not prose

  5. The full journey — the same 9-step component from Home, shown here with approximate duration per stage

  6. Demo class callout — visually distinct highlighted band offering 1–2 free trial classes. This is the main low-friction CTA on the page and should stand apart from everything around it.

  7. What's included — clean checklist (counselling, classes, interview prep, document guidance, COE support)

  8. FAQ — 6–8 accordion items, short answers only

  9. CTA band

Page 3 — Blog / Resources

Index:

  1. Page header, one-line description
  2. Category filter row (JLPT Prep, Visa Process, Life in Japan, Student Stories)
  3. Featured article — larger card, full width
  4. Article grid — 2–3 columns desktop, 1 column mobile (image, category tag, title, date, 1-line excerpt)
  5. Pagination / load-more

Article template:

  1. Title, category, date, reading time
  2. Feature image
  3. Article body — max ~65-character line length, generous line height, clear heading hierarchy, styled pull-quotes/lists (this is the most important typography work on the whole site)
  4. Related articles (3 cards)
  5. Soft CTA at the end

Page 4 — Contact

  1. Header — short, warm headline
  2. Two columns: enquiry form (name, phone, email, interest, message — keep fields minimal) + contact details (address, phone, email, WhatsApp/Viber, office hours)
  3. Map — embedded, Kathmandu office
  4. Visit us — 2–3 lines on what to expect from a first counselling visit, to reduce hesitation about walking in

4. Design Direction

Aesthetic: Premium, editorial, minimal. Japanese design sensibility — generous whitespace, precise alignment, quiet confidence. Avoid: cluttered layouts, generic stock photos, loud gradients, flag/cliché imagery.

Reference mood: Dark, cinematic SaaS landing pages — near-black background with warm undertone, light-weight serif headlines, tiny uppercase monospace eyebrow labels, asymmetric layouts, rounded cards with hairline borders, oversized stat numbers with small labels.

Color (max 3 total):

  • Primary: deep indigo (Japanese aizome dye tone)
  • Accent: vermilion/burnt red — used sparingly, CTAs only
  • Background: warm off-white / cream for content-heavy sections (blog, curriculum, testimonials); dark near-black for hero/feature sections
  • Text: near-black ink, not pure black

Type:

  • Headings: light-weight serif (e.g. Shippori Mincho or similar — authentic Japanese-designed typeface)
  • Body: clean sans (Inter or Noto Sans)
  • Stats/data: monospace (e.g. IBM Plex Mono)

Copy rules — important:

  • Body text in short blocks, 2–3 sentences max, never long paragraphs
  • Medium-sized text, not dense chunks — students skim on mobile
  • Every section scannable in a few seconds
  • Line length capped (~65–70 characters) wherever there's real body copy

Layout rules:

  • Consistent grid, strict left-alignment for body content (center only for short intros)
  • Generous vertical spacing between sections — let content breathe
  • Mobile-first — most traffic is phone, often on slower connections

Photography direction:

  • Real staff and student photos wherever possible — this industry runs on personal trust, and stock imagery actively undermines it
  • Where stock is unavoidable (hero, atmosphere), use cinematic, desaturated, editorial treatment — never bright generic "happy students with laptops"

5. Deliverables Expected

  • Figma file, desktop + mobile, for all 4 pages
  • Navbar and footer designed as reusable components
  • The 9-step journey designed as a reusable component (used on 2 pages)
  • Basic design system export — color tokens, type scale, button/input/card states — needed because the portals are being built separately in code and must stay visually consistent with the site
  • No dev handoff docs required beyond the design system — developer is building directly from Figma

6. Explicitly Not Needed

  • No fees page
  • No gallery page (strip on Home only, for now)
  • No multi-country destination pages — this consultancy handles Japan N4 only
  • No partner institution directory or test-prep listings (IELTS/PTE/GRE etc.) — not applicable
  • No branch locator — single Kathmandu office
  • No admin or student portal screens (handled separately)
  • No full brand guideline deck — just the design tokens above
  • No user research or persona work — audience and requirements are already defined in this brief