End-of-Life · AI-Native · Singapore
Indian Life Memorial
Designing for grief and building with AI — Singapore's first agentic funeral planner, built end-to-end with Claude Code
10+
Pages built
5
Configurator steps
Weeks
Brief to launch
Live
indianlifememorial.com
Role
Lead Product Designer & Builder
Timeline
2024
Tools
Claude Code · React · GitHub · Vercel
Product
indianlifememorial.com
Overview
Indian Life Memorial is a Singapore-based funeral services platform for the Indian, Hindu, and multi-faith community. It was designed and built end-to-end with Claude Code — from information architecture and UX copy through to the React codebase, GitHub workflow, and Vercel deployment. This case study documents both the product design decisions and the AI-native build process.
The premise
Designing for someone who is grieving, may be sleep-deprived, and needs to make irreversible decisions quickly — often for the first time. And building the product that serves them, using Claude at every layer.
The Challenge
Three challenges, no easy answers
Designing for grief
Users arrive in acute emotional distress. Every word, interaction, and visual choice carries more weight than in any other product context. There is no room for ambiguity.
Multi-faith complexity
Hindu, Roman Catholic, Christian, Freethinker, Direct Cremation, Baby, Pet, and Repatriation — each with distinct rituals, timelines, and logistics. The IA had to accommodate all without overwhelming anyone.
Transparency in a trust-broken industry
Funeral pricing in Singapore has historically been opaque. The product needed to surface clear nett pricing at every step — without triggering anxiety in already-distressed users.
The AI-Native Workflow
Plan → Design → Build → Ship → Evaluate
At every stage: human strategic direction, Claude execution. This is what AI-native product design actually looks like — not shortcuts, but a disciplined division of judgment and output.
Plan
Human
Product brief, user needs, cultural constraints
Claude
Full IA, page hierarchy, user journey maps across 3 user states
Design
Human
Tone of voice, visual direction, emotional register
Claude
All UX copy, microcopy, component specs, accessibility requirements
Build
Human
Architecture decisions, code review, bug judgment
Claude
React components, configurator state machine, real-time pricing logic
Ship
Human
Vercel config, domain setup, final QA pass
Claude
Commit messages, build error diagnosis, robots.txt & sitemap
Evaluate
Human
Heuristic review, prioritisation, next sprint
Claude
Evaluation framework, findings synthesis, scored action backlog
Scroll to see all 5 stages →
Stage by Stage
What actually happened at each stage
Plan
What I brought
Defined the product brief, cultural sensitivity requirements, the 8-service constraint, and who the primary user was — a grieving family member searching Google at 2am. Claude cannot decide what the product is. It can only respond to a brief. Writing that brief precisely is the first design act.
What Claude built
Generated the full 10-page IA with per-page purpose, primary CTA, and key content blocks. Mapped user journeys across three distinct user states: acute crisis, informed researcher, and pre-planner. Output used directly, with one round of structural refinement.
Design
What I brought
Defined tone of voice (compassionate, direct, never clinical), the information hierarchy for emotionally distressed users, and which content had to be visible without scrolling. These decisions require empathy and cultural understanding that cannot be prompted into existence.
What Claude built
All homepage copy, service page descriptions, configurator microcopy, FAQ content, and error states — approximately 4,000 words of production UX copy across 10 pages. First drafts were 80–90% usable; the remainder required re-prompting with more precise constraints.
Build
What I brought
Made all architectural decisions: single useState object for configurator state, shadcn/ui for the component layer, sticky sidebar for the live estimate. Reviewed every output for logic errors and caught two pricing edge cases Claude missed in the first pass.
What Claude built
The full React + TypeScript codebase: all page components, the 5-step configurator state machine, real-time pricing logic with additive selection handling, and Tailwind styling across the site. Approximately 3,200 lines of production code across 18 components.
Ship
What I brought
Reviewed all commits, configured Vercel project settings, pointed the custom domain (indianlifememorial.com), and ran the final QA pass across all 10 pages on mobile and desktop. Deployment and quality gates require human accountability.
What Claude built
Drafted Git commit messages for every significant change. Diagnosed a Vercel build error caused by a Next.js image configuration conflict. Generated robots.txt, sitemap structure, and meta tag templates for SEO.
Evaluate
What I brought
Ran a structured heuristic evaluation against Nielsen's 10 usability heuristics post-launch. Made prioritisation calls on which gaps to address first — balancing user impact against implementation cost.
What Claude built
Generated the evaluation template with scoring criteria for each heuristic. Synthesised raw findings into a structured action list with severity ratings. Drafted the next sprint brief based on highest-priority gaps.
The Prompts
What good direction looks like
Reconstructed prompts from the build — representative of the actual direction given at each stage. The craft is in the constraints.
Starting with a blank brief
"I'm building a funeral services platform for Singapore's Indian and Hindu community. Users arrive in three states: acute crisis (death just happened), informed researcher (death expected), and pre-planner (future-focused). The platform supports 8 service types: Hindu/Indian, Roman Catholic, Christian, Freethinker, Direct Cremation, Baby Funeral, Pet Cremation, Repatriation. Generate a full site IA as a structured hierarchy. For each page include: purpose, primary user state it serves, primary CTA, and 3 key content blocks. Flag pages where emotional state requires specific UX considerations."
Full 10-page IA with per-page content strategy — used directly as the project foundation.
First impression for a grieving family
"Write the homepage hero for Indian Life Memorial. Constraints: – Primary user: family member in crisis, arrived via Google at 2am – Tone: compassionate, direct, specific — never clinical or corporate – Must communicate above the fold: 24/7 availability, transparent pricing, multi-faith – Headline: confident and specific, not a question or tagline, max 8 words – Subtitle: one sentence, under 20 words, no jargon – Do not use euphemisms. 'Loved one' is fine. 'Dearly departed' is not."
Headline: "Singapore's first agentic funeral planner is here." — shipped verbatim to production.
The centrepiece feature
"Build a 5-step funeral configurator in React + TypeScript + TailwindCSS + shadcn/ui. Steps: (1) Service Type, (2) Arrangement Details [budget / cremation or burial / duration], (3) Location & Casket [venue + casket tier], (4) Add-ons [tentage, floral, 3rd-party fees shown transparently], (5) Your Details. Requirements: – Sticky sidebar: Live Estimate panel that recalculates on every selection – Pricing: base price per service type, additive per selection – Continue: disabled until all required selections in current step made – State: single useState object, no external library – Submit: format selections into WhatsApp message, open wa.me deeplink"
Full working component on first output. Required 3 revision rounds for pricing edge cases.
Key Feature
The 5-step agentic funeral planner
The standout UX challenge: a guided planning flow for grieving families that handles complex decisions without overwhelming them. A sticky live estimate panel updates in real time across all 5 steps.
Service Type
Selects from 8 types: Hindu/Indian, Roman Catholic, Christian, Freethinker, Direct Cremation, Baby Funeral, Pet Cremation, Repatriation.
Arrangement Details
Budget range, cremation or burial, and wake duration — each choice updates the live estimate in real time.
Location & Casket
Wake venue (HDB Void Deck, Parlour, Landed, Home) and casket selection from Signature or Premium tiers.
Optional Add-ons
Tentage, floral photo frame, and mandatory 3rd-party fees displayed transparently — no surprises.
Your Details
Contact and deceased information. Submits a personalised quote request via WhatsApp and email.
Key Design Decision
A persistent sticky summary panel updates in real time across all 5 steps — giving families a running total and eliminating the anxiety of “not knowing what this will cost” until the very end.
Step 1 — Service type selection
Step 3 — Location & Casket with live estimate updating in real time ($7,348)
Information Architecture
10 pages. One coherent experience.
The site architecture balances two very different users — those arriving in crisis and those planning ahead — without forcing either to navigate through the other's journey.
Home
Entry point surfacing trust signals, agentic planner preview, and 24/7 availability
Services
Faith-based navigation hub linking to 8 dedicated service pages
Hindu / Indian Funeral
Primary service — Vedic rites, process walkthrough, inclusions, FAQs
Direct Cremation
Simplified, affordable option from $1,188 nett
Repatriation
International remains transport — inbound and outbound from Singapore
Packages
Transparent, filterable pricing across all faiths with full inclusion breakdowns
Getting Started
The 5-step agentic configurator with live estimate sidebar
My Legacy Vault
Government-backed Singpass pre-planning portal integration
Resources
Guides, checklists, and downloadable PDFs for grieving families
Contact
24/7 availability — callback request and pre-planning enquiry tabs
Human Judgment
Where AI cannot go
Four moments where human judgment was irreplaceable — not because the technology failed, but because the decision required something beyond pattern recognition.
Emotional register
Deciding 'Direct Cremation from $1,888' belonged on the homepage, not a subpage. That pricing number, that early, signals honesty — but only if the designer understands why anxious users need that anchor.
Cultural sequence
Understanding why Hindu/Indian Funeral had to be listed first — above Direct Cremation, regardless of alphabetical logic or conversion rate data. Cultural respect is not an SEO variable.
Design taste
When the first generated hero copy was technically correct but emotionally flat. Knowing it was wrong, articulating exactly why, and re-prompting with precise new constraints until the output matched.
Strategic bets
Choosing to build a live estimate panel over a 'request a quote' form — knowing it required 3× more dev effort. The right call because reducing pricing anxiety is the product's core value proposition.
What Shipped
A fully deployed product
10+
Pages built
Fully designed & deployed
5
Configurator steps
With real-time pricing
Weeks
Brief to launch
Not months
Live
indianlifememorial.com
Production domain
Key Insight
“Prompt engineering is product thinking. The quality of AI output is almost entirely determined by how precisely you can define the problem, the constraints, and the user. That's a design skill.”
Reflections
What this taught me
Designing for grief made every UX principle non-negotiable. Clear language, predictable interactions, forgiving error states are usually 'nice to have'. In this context, they're essential.
The bottleneck is never the AI. It's the quality of the direction you give it. Vague briefs produce vague outputs. Precise constraints produce usable first drafts.
The gap between 'AI-assisted' and 'AI-native' is ownership. In an AI-native workflow, you own every decision — Claude executes them. That distinction matters.
What's Next
SEO optimisation, WhatsApp deeplink integration for immediate enquiries, and A/B testing the configurator entry point — comparing a direct jump into Step 1 against a softer introduction for users in acute distress.
Next Case Study
Fintech · Banking · MAS Regulation