Redesign design document · jyothismavelikkara.com · Sep 2026

Jyothis, but joyful.

A playful, energetic, full-color redesign for Jyothis Special School and Therapy Centre — a not-for-profit special school in Mavelikkara, Kerala, run by the Mar Thoma Church since 1994. Jyothis means light. This document proposes “Jyothis Pop”: a spice-bright, toy-soft visual and motion system that feels like the children it serves — while keeping the trust a parent, donor, or bishop needs.

Prompt“I am looking to re-design this website. I want a playful, energetic redesign. You are allowed to do whatever you want — move images, remove, adjust whatever is required. Should have colorful animation. Blow me away with design. Create a design document, not the website itself.”

What it is

Special school + therapy centre, est. 1994

Audited

8 pages · ~27 images · Gatsby 4 + MUI

Directions explored

4 → 1 recommended

Effort to build

~7–9 weeks, 4 phases

✦ JYOTHIS MEANS LIGHT✦ FREE EDUCATION SINCE 1994✦ 5 THERAPY DEPARTMENTS✦ SPONSOR A CHILD · ₹10,000 / YEAR✦ KERALA'S BIGGEST CAMPUS✦ JYOTHIS MEANS LIGHT✦ FREE EDUCATION SINCE 1994✦ 5 THERAPY DEPARTMENTS✦ SPONSOR A CHILD · ₹10,000 / YEAR✦ KERALA'S BIGGEST CAMPUS

What we found

The current site is competent but somber — a navy corporate template wrapped around one of the warmest institutions in Alappuzha. Full inventory in jv-site-audit.md.

🎨 It looks like a bank, not a school

Navy-and-cream MUI template, all-caps nav, centered everything, clipart icons, dense justified paragraphs, a 7-slide carousel nobody scrolls through. Zero motion, zero warmth, zero color.

🔧 The plumbing is tired

Gatsby 4.18 + Material-UI + Roboto on Azure Static Web Apps, content frozen since Nov 2024. Four of eight pages have the wrong <title>. No SEO meta, no sitemap, no analytics, no sitemap.xml.

💝 The ask is buried

“₹5 lakhs a month keeps the school running” and “₹10,000 sponsors a child for a year” — the two most powerful facts on the site — sit in plain tables. There is no payment gateway, no UPI QR, no bank details. Donating is effectively impossible online.

Before — the current site

Current homepage: navy template, centered carousel, dense intro paragraph — Home — carousel + wall of text

Current about page: long paragraphs and service blocks — About — paragraphs + duplicated services

Current support us page: clip-art hands holding a heart, plain donation table — Support us — clip-art + plain table

Who the site must speak to

Parents

Seeking admission or therapy; need trust, clarity, and an easy “Book an appointment.”

Donors & sponsors

Local, diaspora, and church communities; need a joyful, frictionless way to give.

Volunteers & visitors

Fellowships, students, well-wishers planning visits and celebrations.

The children

They see this site too. It should feel like their campus — bright, proud, theirs.

THE BRIEF, SHARPENED “Playful” here means joyful, not juvenile. The redesign must radiate childhood energy and color, feel unmistakably Keralan, guide a worried parent gently to answers, and hand a willing donor a one-tap way to give — while meeting accessibility standards befitting a disability-services institution.

The big idea: Jyothis Pop

Four directions were explored (research in jv-design-research.md). The winner fuses two of them: the rooted spice-market brightness of Kerala Pop with the squeezable softness of Toybox Clay — plus sticker-scrapbook moments from Sticker Zine for photos and events.

Kerala Pop

Spice-market brights, kolam dots, temple-arch frames, bilingual type.

Baloo Chettan 2 · Nunito

Unmistakably of-place; instant differentiation

Malayalam-capable display font (one font, two scripts)

Needs discipline to avoid festival-clutter

BASE — RECOMMENDED

Toybox Clay

Squishy pastel softness; nothing has a sharp corner.

Fredoka · Quicksand

Gentle, toddler-safe softness; great for a school

Clay shadows + idle wobble = “alive” cheaply

Pastel-only can read washed-out on cheap screens

BLEND IN — shapes & motion

Sticker Zine

Scrapbook energy: ink outlines, hard shadows, washi tape.

Bricolage Grotesque · Space Grotesk

Highest impact-to-effort; ~95% pure CSS

Perfect treatment for photos & event memories

Punk-zine edge can clash with a church-run school

BORROW — photo & gallery moments

Bubblegum Cosmos

Deep-violet night mode, glowing blobs, chrome text.

Unbounded · Outfit

Maximum “blown away” per section

Aurora backgrounds are pure CSS

Dark, nightlife mood — wrong register for parents & a school

PARKED — not this brand

THE PITCH Jyothis Pop = Kerala Pop base + Toybox softness + sticker scrapbooking. Coconut-cream paper, ink-indigo type, chili/turmeric/peacock/pink accents. Everything rounded, nothing sharp. Photos become polaroids and arch-framed stickers. The campus gets a happy identity that no template can fake — and the “light” metaphor finally gets a sunrise palette to live in.

Design system

Tokens, type, and shape rules a developer can implement directly.

Palette — “sunrise over the backwaters”

Coconut

#FFF8EE · bg

Ink Indigo

#262262 · text

Chili

#E8452C · primary

Turmeric

#FFB320 · energy

Peacock

#12A594 · links

Rambutan

#F25CA2 · delight

Leaf

#4E9F3D · success

Backwater

#2D9CDB · info

Rules: one accent per section (max two when celebrating). Body text is always Ink Indigo on Coconut — 12.6:1 contrast. Chili is reserved for the most important action on screen.

Typography

Every light shines.

ജ്യോതിസ് · Jyothis

Display

Baloo Chettan 2 ExtraBold — rounded, bubbly, and natively Malayalam and Latin (Ek Type, Google Fonts). Used 34–72px, tight leading.

Body

Nunito 400/600/700 — round-terminal sans, extremely legible at 16–18px, 65ch measure.

Handwritten

Caveat — teacher's-pen captions on polaroids and annotations. Never for wayfinding.

Fallback

system-ui stack; Malayalam body option Anek Malayalam if bilingual pages ship.

Shape & motif language

Squishy geometry

Radii 16–28px; buttons are full pills. Zero sharp corners anywhere — the Toybox rule.

Arch frames

Temple-arch (gopuram-curve) photo masks honor Kerala's silhouette; hero treatment for campus + portraits.

Kolam dots

A faint dot-grid texture on section backgrounds — the page's “paper grain.”

Kasavu stripes

Gold-on-cream divider bands echo the kasavu border of a Kerala sari — used for section breaks and the marquee.

Voice & language

Warm, proud, plain — the voice of a favourite teacher. Sentence case headlines. Short sentences. Person-first, current terminology; the institution's dignity stays, the clinical coldness goes.

Today	Becomes	Why
“mentally handicapped”	“children with intellectual disabilities”	Person-first; keep “NIMH Hyderabad” only as an institution citation
“differently abled” / “special children”	“children with disabilities” / simply “our children”	Plain and respectful; lead with the child, not the label
“open to all needy children”	“free for every family, regardless of income”	Same promise, no poverty framing

Motion system — colorful, but kind

Three tiers of animation, all transform/opacity only, all silenced under prefers-reduced-motion. Live demos below are pure CSS — the real site behaves exactly this way.

Ambient · idle wiggle

✦JYOTHIS

Stickers, the logo sun, and badge chips breathe with a tiny ±1.5° wiggle every ~6s. Life, at zero cost.

Ambient · blob morph

Soft gradient blobs drift behind heroes and CTAs — animated border-radius + slow rotate, blurred small layers scaled up (never blur a full-viewport node).

Interaction · spring hover + squish press

hover me → springs straight

Entry · staggered pop-in

Cards, chips, and list items pop in sequence (--i × 90ms), triggered on scroll-into-view.

SCROLL · MARQUEE BANDS (PAUSE ON HOVER, CLONE IS ARIA-HIDDEN)

The full catalogue (build notes)

Technique	Cost	How
Tier 1 — Ambient: sticker wiggle, blob morph, marquee bands, logo sunburst spin (slow)	100% CSS	Keyframes on `transform`/`border-radius`; infinite alternate; paused under reduced-motion
Tier 2 — Scroll: staggered pop-ins, section reveals, polaroid strip parallax, scroll progress bar	CSS + tiny JS	`animation-timeline: view()` where supported, IntersectionObserver fallback; Lenis (~3KB) for inertia; GSAP ScrollTrigger only if parallax grows
Tier 3 — Interaction: spring hover, squish press, magnetic “Donate” button, confetti burst on successful donation/appointment, number count-up on impact band	+ canvas-confetti (~6KB)	Spring via CSS `linear()`; magnetism = 15 lines of pointer JS gated to `(hover:hover) and (pointer:fine)`; confetti fires once, ~100 particles, `aria-hidden` canvas
Page transitions: arch-shaped wipe between routes	View Transitions API	`@view-transition { navigation: auto }` + `::view-transition-new(root)` clip-path; degrades to instant nav

Signature spring, in two lines

/* every hover on the site uses this curve */
transition: transform .45s linear(0, .42 12%, 1.12 26%, .96 38%, 1.02 50%, 1);
card:hover { transform: translateY(-6px) rotate(-1.5deg) scale(1.04); }

The kindness switch (non-negotiable)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important; } }
/* JS also checks matchMedia — skips Lenis,
   confetti, magnets; reveals render visible. */

Why this matters double here: many users will be sensory-sensitive children and anxious parents. Motion is a seasoning, never a gate — every content path works with animations off, on a touch screen, and on a ₹8,000 Android phone over 4G.

Page-by-page blueprint

What stays, what moves, what goes, what's new — for all eight routes. KEEP MOVE REMOVE ADD

/ · Home

The joyful front door

REMOVE7-slide carousel, duplicated intro paragraph, stock-style checkmark list.

KEEPThe claim “Kerala's biggest campus” — reframed with warmth + proof.

ADDHero headline over arch-photo collage with sticker burst; marquee; 5 service arch-cards; impact band with count-up; polaroid campus strip; sponsor peek; sticky Donate pill (every page).

Headline options: “Every light shines here.” · “Big campus. Bigger hearts.” · “30 years of first steps, first words, first wins.”

/about · About

The story, told with pride

REMOVEService paragraphs duplicated from Departments (single source of truth).

KEEPFounding story, church governance, registrations, the big campus photo.

ADDVertical timeline 1994 → today (“one teacher, three children, a rented house” → 25,661 sq ft campus); numbers band; arch-framed campus hero; Malayalam display accent ജ്യോതിസ്.

/departments · Departments

Five doors, five colors

REMOVEGrey clipart icons (and the stray " typo).

KEEPExpandable “Read more” pattern — it works.

ADDCustom sticker icon set (one accent color per department); “who it's for” chips (age/condition); per-department “Book an assessment” CTA; photo from real therapy rooms.

/ourjyothisfamily · Family

The people wall

MOVELeadership trio here becomes “The people behind Jyothis” with roles as colorful chips.

KEEPAll staff headshots, the President's letter (as a designed letterhead card with the signature), doctors-on-call.

ADDPolaroid treatment + handwritten name captions; monogram avatars for anyone without a photo; resolve the President signatory conflict (home says Rt. Rev. Dr. Euyakim Mar Coorilos; letter is signed Rt. Rev. Thomas Mar Timotheos).

/facilities · Facilities

Campus tour + Moments

REMOVEThe frozen 2020–22 “Events” list as a news section.

KEEPThe six facilities; event photos move into a gallery.

ADDIcon cards for facilities; a “Moments” photo wall (sticker scrapbook, dated, easy for staff to add to); hand-drawn campus map illustration with the children's park, therapy blocks, farms.

/testimonials · Voices

A wall of love, not a list

REMOVESkeleton-avatar placeholders (unsettling, literally).

KEEPAll six quotes — they're strong (Archbishop of Utrecht, Dr. Nair Anup C, Heather Sinclair…).

ADDMasonry quote wall in rotated tinted cards; monogram chips + name/role; collect 3–5 parent voices (the most persuasive kind); date-stamp each quote.

/supportus · Support

From “information” to “impact”

REMOVEThe clip-art heart-in-hands, the plain price table, the donate modal.

KEEPEvery sponsorship tier and the ₹5-lakh monthly need — they become the heroes.

ADD“₹5L keeps our lights on” progress meter; sponsor-a-child card (₹10,000/yr); meal chips as colorful coupons (Breakfast ₹4,000 · Lunch ₹4,000 · Dinner ₹5,000 · Full day ₹10,000); UPI QR + bank details on-page; volunteer steps; success = confetti + receipt request. See §07.

/contactus · Contact

Zero-friction hello

KEEPGoogle Maps embed, both phones, the query + feedback forms.

ADD“Plan your visit” card (hours, landmarks, bus info); WhatsApp deep-link button (Kerala's default channel); inline validation + friendly success states; “how did you hear about us” kept as a chip picker.

REMOVE90vh scrollable modal forms → inline sections.

Imagery & asset strategy

The site owns genuinely warm photography — it's just presented cold. Same assets, new treatment (plus a shortlist of what to retire).

Treatments (all pure CSS)

Sticker cutout

Thick white border, blob radius, hard offset shadow, −3° tilt; springs straight on hover. For hero collage + Moments wall.

Polaroid scrapbook

White frame, Caveat caption, washi-tape corners, nth-child rotations. For staff, events, celebrations.

Arch mask

Gopuram-curve clip for the campus hero and portraits — the Kerala signature.

Duotone wash

Accent duotone (grayscale + multiply) that blooms to full color on hover. For background storytelling strips.

Verdicts on the 27 existing assets

Asset group	Verdict
Logo (transparent PNG)	Keep, redraw — simplified sticker mark + animated sunburst variant for loading/hero
BANNER 1–7 (carousel)	Retire the carousel. Best frames reappear as hero collage cutouts & polaroids
campus (2).jpg — 554KB	Keep, hero it. Re-compress to AVIF (~80KB target), arch mask, home + about
Leadership ×3, staff ×11 portraits	Keep — consistent warm recrop; arch or polaroid frames; monogram fallback where missing
Department clipart ×5	Replace with a custom 5-icon sticker set (one accent color each)
Event1–5 photos	Move into “Moments” gallery; add dates; grow over time
avatar_skeleton.jpg	Delete — replace with monogram chips
sign.png	Keep inside the letterhead card

Safeguarding rule (new, non-negotiable)

Publish only consented images; prefer group/activity shots over identifiable solo portraits; never pair full names with faces of children; documented opt-out and takedown path. A new half-day photo shoot (golden hour, therapy sessions, crafts, meals, the bus) fills every gap — with consent forms.

Content fixes & the donation upgrade

Small copy repairs with outsized credibility gains — and turning the site's most powerful numbers into its most beautiful section.

Fix list (all found in audit)

Wrong <title> on 4 of 8 pages — /ourjyothisfamily says “Home”, /facilities says “Departments”, /testimonials says “Support us”, /contactus says “About”. One day of work, instant SEO sanity.

Zero SEO meta — add unique titles + descriptions, OG/Twitter cards, canonical, sitemap.xml, robots.txt, JSON-LD (School + NGO).

President signatory mismatch between Home leadership and the Family-page letter — verify and correct.

Stale events (nothing after Jul 2022) — archive into Moments; assign a staff owner for updates.

Copy typos — “Not- for- profit”, stray quote on Departments, “equipments”, “feedbacks”; malformed target="__blank" everywhere; untouched Gatsby-default theme-color.

Terminology — adopt the person-first language table (§03) across all pages.

No analytics — add Plausible or GA4 to finally learn what parents and donors actually do.

Donation flow — the “blow me away” business case

Today: “Donate now” opens a form that collects intent… and nothing else. No UPI, no bank details, no gateway. A willing donor hits a dead end.

Redesign:

On-page UPI QR + bank details — give in 10 seconds from any UPI app; zero gateway fees; works for every Indian donor today

Sponsor cards — child / breakfast / lunch / dinner / full-day / special meals as bright coupons; tap one → amount pre-filled

“₹5 lakhs a month” meter — a friendly jellyfish-blob progress bar showing monthly running costs met

Confetti + gratitude screen on pledge submit; optional receipt request form (name, PAN, email)

Later, if volume justifies: Razorpay payment gateway for cards + foreign donors (verify FCRA/80G status first — see §10)

New impact band copy (home)

“30+ years · 25,661 sq ft of campus · 16 staff · 5 therapies · ₹10,000 puts a child in school for a year” — each number counts up on scroll, each is a link to its story.

Technical plan

Two routes. One recommendation. Hosting and DNS stay exactly where they are.

Option A — Static rebuild RECOMMENDED

Astro (or hand-rolled HTML/CSS + a sprinkle of JS): ships near-zero JS by default; motion libs load lazily

Content becomes Markdown/JSON a staff member can edit; kills the duplicated home/about content model

Escapes Gatsby 4 (EOL) + MUI v5 — the direct source of the corporate look

Same Azure Static Web Apps + Cloudflare setup; zero migration of DNS/SSL

Full rebuild effort (~7–9 weeks with design)

Option B — Restyle in place

Cheapest first step: new theme layer over existing Gatsby pages

All content/URLs untouched; safe

MUI + Gatsby 4 debt remains; rich motion fights the framework; content model stays duplicated

Best reserved as a bridge (pair with the §07 P0 fixes) if budget is tight this quarter

Motion stack & budgets

Library	Weight (gz)	Role
None — CSS first	0 KB	Tiers 1–2 motion, reveals, marquees, blobs, springs
Lenis	~3 KB	Smooth scroll inertia (desktop, gated)
canvas-confetti	~6 KB	Donate/appointment success only
GSAP core (+ScrollTrigger, SplitText)	~40 KB	Only if parallax/count-ups outgrow CSS — free since 3.13

Budget	Target
JS total (gz)	≤ 90 KB
LCP (4G, mid Android)	< 2.5 s
INP / CLS	< 200 ms / ≈ 0
Fonts	2 families + 1 accent, `font-display: swap`
Images	AVIF/WebP, sized `srcset`, lazy below fold

Accessibility bar (a special school must clear it)

WCAG 2.2 AA: 4.5:1 body contrast (Ink on Coconut = 12.6:1 ✓), visible restyled focus rings (thick offset outline — on brand), 44px touch targets, labels on every form field, prefers-reduced-motion honored everywhere (§04). Cognitive accessibility: consistent pill nav, plain language, one idea per section, no autoplaying anything. Malayalam alt-text when bilingual pages ship.

Roadmap — four phases, ~7–9 weeks

Week 1

Phase 0 — Stop the leaks

Fix titles/SEO meta/typos/links; verify form backend; correct President conflict; add UPI QR + bank details to Support Us; add analytics. No visual change needed — huge credibility win.

Weeks 2–4

Phase 1 — Foundation + Home

Design tokens, Baloo Chettan 2/Nunito/Caveat, sticker icon set, logo redraw, motion core (springs, marquee, blobs, reduced-motion switch). Rebuild Home: hero, services arches, impact band, polaroid strip, sticky Donate.

Weeks 5–7

Phase 2 — All pages

About timeline, Departments, Family wall + letterhead, Facilities + Moments gallery, Voices masonry, Contact. Consent forms out for the photo shoot.

Weeks 8–9

Phase 3 — Donate + polish

Donation flow (meter, coupons, confetti, receipts), new photography in, perf budget pass, WCAG 2.2 AA audit, staff how-to-update session, launch.

Risks & open questions

Children's photo consent (safeguarding) — the single biggest responsibility of this redesign. Written consent per child, group-first framing, no name+face pairs, takedown path. Must be settled before the photo shoot.

Form backend unverified — the current sendEmail helper's destination isn't visible in served bundles. Test it end-to-end before rebuilding; if broken, bridge via mailto/WhatsApp while a proper endpoint (Azure Function / Formspree) is added.

Donation compliance — the site's testimonials reference donors in England and Kuwait; accepting foreign contributions touches FCRA rules, and Indian donors will expect 80G receipts. Confirm registration status before promoting online giving loudly.

Content maintenance — events froze in 2022; a beautiful site that goes stale dies twice. Name a staff owner, choose an editable stack (Markdown/JSON), and put “add a Moment” on a monthly calendar.

Bilingual scope — Malayalam display accents are free (Baloo Chettan 2); full Malayalam pages need translation capacity. Ship English first with ജ്യോതിസ് accents; add ML pages if a translator exists.

Open questions — Keep Azure SWA + Cloudflare as-is? Budget for the photo shoot? Plausible vs GA4? Keep the PWA manifest? Is a Razorpay gateway desired in phase 3 or later?