Design decisions 🎈
This is one of six fictional demonstration practices created by MedPresence. It shows how deliberate design, patient-centred communication and compliance-focused quality assurance can strengthen patient trust. This page explains the decisions behind the experience.
1 · Concept
Paediatrics is the only specialty whose patients would rather be at the playground — so the site is one. Storybook palette (sunshine, coral, sky, mint, grape) on warm paper, chunky rounded type (Baloo 2 + Varela Round), sticker-style borders and hard offset shadows, and a slightly rotated everything — nothing in a child's world sits perfectly straight.
2 · The mascot
- A hand-drawn SVG blob with a highlight, cheeks and a big smile — no image files, just paths.
- His pupils track your cursor: each frame maps the pointer to each eye's centre and clamps the pupil travel, so he always watches you.
- He blinks on a randomised timer and bobs on a gentle keyframe loop.
3 · Play as interface
- Confetti physics: clicking any big button bursts 90 canvas confetti pieces with gravity, drag and spin.
- Balloons, clouds and stars drift on staggered keyframe loops; the visit steps sit along a dotted SVG path, like a treasure map (it becomes a simple vertical list on phones).
- Every hover uses a spring curve —
cubic-bezier(0.34, 1.56, 0.64, 1)— so things wobble past their target and settle, like toys. - FAQ is typeset as a chat between parent and doctor — speech bubbles, alternating sides.
4 · Still a medical site
Under the sticker aesthetic: semantic HTML, a real consultation structure,
honest medical content, prefers-reduced-motion support and a compliance
footer. Joy and rigour are not opposites.
5 · Shipping
Pure static HTML/CSS/JS — no framework, no build step, no image files.
Deployed to Netlify, whose pretty-URL resolution serves this page at /guide.
Why this works for patients
Every choice above serves the same goals: a committed art direction that signals care and craft, procedural visuals that stay light and fast on mobile, honest fictional-practice disclosures, reduced-motion support, and a clear path from curiosity to consultation. The same discipline — patient trust, clinical positioning, mobile clarity, accessibility, PDPA-aware consent and MMC/KKLIU-ready copy — is what MedPresence brings to real practices.
Fictional demonstration site · Produced for MedPresence · 2026