Web & Product
A bilingual English/Chinese website and back office for a 100-member church in Tennessee. Visitors get sermons, events, ministries, a prayer wall and a weekly bulletin in either language; staff manage all of it themselves, from sermon imports to the homepage copy, without touching code. I designed it, built it end to end, and delivered it through two rounds of content requests and a live three-variant design review with the client.
A YouTube channel with 400+ sermons, a bilingual congregation, and no website either group could use. The ask: one site that reads naturally in both languages, and a back office a pastor, a clerk and a volunteer video manager can run from a phone, with no developer on call.
Thirteen public pages in English and Chinese, with the toggle keeping you on the same page. The homepage computes the Sabbath start from sunset and surfaces the latest sermon and schedule. A 433-video sermon archive with click-to-play and filters. Events with list and calendar views, RSVP, potluck sign-up and QR sharing. Ministry pages run by their own leaders. A prayer wall with candles, comments, answered prayers and anonymous posting. Every time shown in the church's own time zone.
Four staff roles plus a per-ministry leader role, enforced on the server and again by row-level security. Sermons import from YouTube on a two-day cron, with one-click sync and a live-stream switch. Events, ministries and bulletins have side-by-side bilingual fields; bulletins move through draft-to-publish. Every public string is editable in a searchable content editor and goes live on save, no deploy. Uploads accept HEIC, resize to WebP in the browser, and land in path-scoped storage. Prayer moderation has trust-based comment approval and a masking view that keeps anonymous authors anonymous. A first-party analytics dashboard, a phone-sized console, and a bilingual staff guide.
A "new Chinese" ink-wash direction: rice-paper ground, ink mountains and boats at the page edges, gold fret corners, and a custom ink cover for each of the 13 ministries. Designed page by page in Pencil first. Decorative elements were cut from AI-generated sheets into a catalogued library of 142 pieces, with composition rules written into the spec so the system stays coherent as pages are added. Motion is pure CSS above the fold and respects reduced-motion. Noto Serif SC carries both scripts.
Spec-driven: ~380 numbered tasks across 18 phases, a design spec with tokens and composition rules, a deployment runbook, a design-QA checklist. Every change ran typecheck, lint, a production build and Playwright screenshots at two widths. Two pre-launch audits found and fixed 5 P0 and 12 P1 issues the same day, then covered security, SEO/a11y/i18n, 21 functional flows and Lighthouse (desktop 100, accessibility 94–96). Client work handled like client work: a pitch deck, two rounds of bilingual content-request forms, open items tracked by ID, review on a live preview. When the first ink design read as "too Chinese", three homepage variants shipped side by side so the client could compare real pages; they chose the ink.
