Files
nur-falah-prevention/docs/PERSONAS_AND_JOURNEYS.html
T
wmj 9767c0d626 docs: add personas and user journey map
Six personas mapped against the app's actual roles and features: Head of
Family (owner), Family Member, Estate Agent/Mutawalli, the multi-family
professional-mutawalli variant, plus two no-account personas reached only
through data others enter — the Heir/Beneficiary (notified by the
notify-heirs email relay once a trigger fires) and the Professional
Reviewer (tracked via the Wassiyah review-request workflow). Each journey
is stage-by-stage through real tabs, not generic template steps.
2026-08-14 12:52:31 +08:00

468 lines
23 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nur Falah — Personas &amp; Journeys</title>
<style>
:root {
--bg: #14171c;
--surface: #1b1f26;
--surface-2: #20252d;
--ink: #e8e4da;
--muted: #8d8879;
--line: rgba(232,228,218,0.10);
--line-strong: rgba(232,228,218,0.18);
--accent: #b4884a;
--accent-soft: rgba(180,136,74,0.14);
--accent-2: #4e7a6e;
--accent-2-soft: rgba(78,122,110,0.16);
--good: #5fa876;
--warn: #c99a4a;
}
:root[data-theme="light"] {
--bg: #f3f0e8;
--surface: #fbfaf5;
--surface-2: #ffffff;
--ink: #1f1c14;
--muted: #6b6656;
--line: rgba(31,28,20,0.10);
--line-strong: rgba(31,28,20,0.20);
--accent: #96703a;
--accent-soft: rgba(150,112,58,0.10);
--accent-2: #3c6459;
--accent-2-soft: rgba(60,100,89,0.10);
--good: #3c7a52;
--warn: #97731f;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #f3f0e8;
--surface: #fbfaf5;
--surface-2: #ffffff;
--ink: #1f1c14;
--muted: #6b6656;
--line: rgba(31,28,20,0.10);
--line-strong: rgba(31,28,20,0.20);
--accent: #96703a;
--accent-soft: rgba(150,112,58,0.10);
--accent-2: #3c6459;
--accent-2-soft: rgba(60,100,89,0.10);
--good: #3c7a52;
--warn: #97731f;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 56px 24px 96px; }
header.page-head { margin-bottom: 48px; }
.eyebrow {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
h1 {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
font-weight: 400;
font-size: clamp(30px, 4vw, 42px);
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0 0 14px;
}
.lede {
max-width: 62ch;
color: var(--muted);
font-size: 15.5px;
}
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.swatch.in-app { background: var(--accent); }
.swatch.external { background: var(--accent-2); }
.persona-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.persona {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 14px;
padding: 30px 32px;
position: relative;
overflow: hidden;
}
.persona::before {
content: '';
position: absolute; top: 0; left: 0; width: 4px; height: 100%;
background: var(--rail, var(--accent));
}
.persona.external { border-style: dashed; }
.persona.external::before { background: var(--accent-2); }
.persona-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.persona-name {
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
font-size: 22px;
font-weight: 400;
margin: 0;
}
.persona-tag {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
background: var(--tag-bg, var(--accent-soft));
color: var(--tag-fg, var(--accent));
}
.persona.external .persona-tag { background: var(--accent-2-soft); color: var(--accent-2); }
.persona-goal { color: var(--muted); font-size: 14px; max-width: 68ch; margin: 0 0 22px; }
.persona-goal strong { color: var(--ink); font-weight: 600; }
.journey { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 16px; }
.step-rail { display: flex; flex-direction: column; align-items: center; }
.step-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rail, var(--accent)); margin-top: 5px; flex-shrink: 0; }
.persona.external .step-dot { background: var(--accent-2); }
.step-line { width: 1px; flex: 1; background: var(--line-strong); margin-top: 2px; }
.step:last-child .step-line { display: none; }
.step-body { padding-bottom: 20px; }
.step:last-child .step-body { padding-bottom: 0; }
.step-title { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.step-detail { font-size: 13px; color: var(--muted); margin: 0; }
.touchpoints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
padding: 3px 8px;
border-radius: 6px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--ink);
}
.outcome {
margin-top: 22px;
padding: 14px 16px;
border-radius: 10px;
background: var(--accent-soft);
font-size: 13px;
}
.persona.external .outcome { background: var(--accent-2-soft); }
.outcome-label { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.footnote {
margin-top: 48px;
padding: 22px 26px;
border: 1px solid var(--line-strong);
border-radius: 14px;
background: var(--surface);
}
.footnote h2 { font-family: Georgia, serif; font-weight: 400; font-size: 17px; margin: 0 0 8px; }
.footnote p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 70ch; }
@media (max-width: 640px) {
.wrap { padding: 36px 16px 72px; }
.persona { padding: 22px 18px; }
}
</style>
</head>
<body>
<div class="wrap">
<header class="page-head">
<div class="eyebrow">Nur Falah · Prevention Suite</div>
<h1>Six people, one estate — mapped end to end</h1>
<p class="lede">Every role the app actually has, from the head of family logging their first asset to the beneficiary who never opens the app at all. Journeys are built from what's implemented today, not aspirational flows.</p>
<div class="legend">
<span class="legend-item"><span class="swatch in-app"></span>Has a Nur Falah account</span>
<span class="legend-item"><span class="swatch external"></span>Never signs in — reached by data others enter</span>
</div>
</header>
<div class="persona-grid">
<!-- 1: OWNER -->
<div class="persona" style="--rail:#b4884a; --tag-bg:rgba(180,136,74,0.16); --tag-fg:#b4884a;">
<div class="persona-head">
<h2 class="persona-name">The Head of Family</h2>
<span class="persona-tag">Owner</span>
</div>
<p class="persona-goal">Get everything they own arranged to skip the slow Faraid/probate queue, before anyone needs it to.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Creates the family and sets jurisdiction</p>
<p class="step-detail">Signs up, starts a family, picks Malaysia/Singapore/UK once in Settings — this quietly drives every legal note downstream.</p>
<div class="touchpoints"><span class="tp">Auth</span><span class="tp">Family Switcher</span><span class="tp">Settings</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Logs everything they own</p>
<p class="step-detail">Property, cash, vehicles, business interests, digital assets — each with ownership share, then attaches proof (title, grant, cover note) for later verification.</p>
<div class="touchpoints"><span class="tp">Assets</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Sees the gap, not just the data</p>
<p class="step-detail">Coverage Dashboard shows the exposed percentage; the recommendations list turns that into a specific next tab to open.</p>
<div class="touchpoints"><span class="tp">Coverage</span><span class="tp">Faraid</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Closes the gap with the right instrument</p>
<p class="step-detail">Hibah for immediate lifetime gifts, Family Waqf for a dedicated corpus, Nomination Registry for EPF/Takaful/bank mandates/trusts/business continuity/digital custody.</p>
<div class="touchpoints"><span class="tp">Hibah</span><span class="tp">Family Waqf</span><span class="tp">Nominate</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Writes the discretionary third</p>
<p class="step-detail">Bequests non-heirs within the one-third cap, generates a draft will document, and requests a professional's review before treating it as final.</p>
<div class="touchpoints"><span class="tp">Wassiyah</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Rounds out the picture</p>
<p class="step-detail">Logs Takaful/insurance policies, runs the Zakat check, builds the family tree with photos, and sets up their own death-trigger attestors — though they can never fire their own trigger.</p>
<div class="touchpoints"><span class="tp">Insurance</span><span class="tp">Zakat</span><span class="tp">Tree</span><span class="tp">Trigger</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Delegates</p>
<p class="step-detail">Invites a mutawalli/agent and other adult family members, so the estate outlives any one person managing it alone.</p>
<div class="touchpoints"><span class="tp">Family</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>A documented, mostly-covered estate with a trustee already in place — not a plan that dies with them.</div>
</div>
<!-- 2: MEMBER -->
<div class="persona" style="--rail:#b4884a; --tag-bg:rgba(180,136,74,0.16); --tag-fg:#b4884a;">
<div class="persona-head">
<h2 class="persona-name">The Family Member</h2>
<span class="persona-tag">Member</span>
</div>
<p class="persona-goal">Handle their own share of the estate planning without needing to run the whole family's affairs.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Accepts an invite</p>
<p class="step-detail">Joins a family the owner already created — no family of their own to set up.</p>
<div class="touchpoints"><span class="tp">Pending Invites</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Sees the shared estate, adds to it</p>
<p class="step-detail">Views family-wide Assets, Hibah, and Nominations; can add assets and confirm another member's asset as a second witness — but can't manage who's in the family.</p>
<div class="touchpoints"><span class="tp">Assets</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Authors their own documents</p>
<p class="step-detail">Their Wassiyah, Waqf, Insurance, and Zakat are theirs alone — visible to the mutawalli for execution, invisible to other members.</p>
<div class="touchpoints"><span class="tp">Wassiyah</span><span class="tp">Family Waqf</span><span class="tp">Insurance</span><span class="tp">Zakat</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Adds themselves to the tree</p>
<p class="step-detail">Places themselves and their relatives in the family genealogy, with photos where they have them.</p>
<div class="touchpoints"><span class="tp">Tree</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>Their personal instruments exist under the family umbrella, isolated from everyone else's — nothing they write is visible to a sibling by accident.</div>
</div>
<!-- 3: MUTAWALLI -->
<div class="persona" style="--rail:#b4884a; --tag-bg:rgba(180,136,74,0.16); --tag-fg:#b4884a;">
<div class="persona-head">
<h2 class="persona-name">The Estate Agent / Mutawalli</h2>
<span class="persona-tag">Agent</span>
</div>
<p class="persona-goal">Execute what the family already planned, exactly when it's needed — and never for themselves.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Accepts the mutawalli invite</p>
<p class="step-detail">Joins with agent-level access; switches into this family from any others they already serve.</p>
<div class="touchpoints"><span class="tp">Pending Invites</span><span class="tp">Family Switcher</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Reviews each member's documents</p>
<p class="step-detail">Picks a member from the chip list, reads their Wassiyah, Waqf, and insurance, and checks whether professional review has been requested or completed.</p>
<div class="touchpoints"><span class="tp">Mutawalli</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Sets up the trigger for that member</p>
<p class="step-detail">Executor name, death certificate reference, two attestors who each confirm independently — never for the member who happens to be themselves.</p>
<div class="touchpoints"><span class="tp">Mutawalli</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Fires it, and notifies heirs</p>
<p class="step-detail">Once both attestors confirm, fires the trigger and sends the automated heir-notification email — a real send, not a preview.</p>
<div class="touchpoints"><span class="tp">Mutawalli</span><span class="tp">Trigger</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Works the execution packets</p>
<p class="step-detail">Uses the per-asset packets generated for each covered instrument to actually carry out the transfer.</p>
<div class="touchpoints"><span class="tp">Trigger</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>Acts with real authority over everyone else's plan and none over their own — enforced by the system, not just the UI.</div>
</div>
<!-- 4: MULTI-FAMILY MUTAWALLI -->
<div class="persona" style="--rail:#b4884a; --tag-bg:rgba(180,136,74,0.16); --tag-fg:#b4884a;">
<div class="persona-head">
<h2 class="persona-name">The Professional Mutawalli</h2>
<span class="persona-tag">Agent · multi-family</span>
</div>
<p class="persona-goal">Serve several unrelated families as their appointed trustee, without one family ever seeing another's affairs.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Holds the same role across families</p>
<p class="step-detail">Accepts separate agent invites from each client family, all under one login.</p>
<div class="touchpoints"><span class="tp">Family Switcher</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Switches, executes, switches again</p>
<p class="step-detail">Every action — trigger status, attestor count, review state — is scoped to the active family and the specific member, so firing one client's trigger can never touch another's, even if the same person happens to belong to both.</p>
<div class="touchpoints"><span class="tp">Mutawalli</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>One professional, many clients, zero cross-contamination — the case this app's data model was specifically hardened for.</div>
</div>
<!-- 5: HEIR -->
<div class="persona external" style="--rail:#4e7a6e;">
<div class="persona-head">
<h2 class="persona-name">The Heir / Beneficiary</h2>
<span class="persona-tag">No account</span>
</div>
<p class="persona-goal">Find out what was left to them, without needing to have planned any of it themselves.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Named, not signed up</p>
<p class="step-detail">A family member enters their email against a Wassiyah bequest or a Waqf beneficiary — the heir never touches the app at this point, or maybe ever.</p>
<div class="touchpoints"><span class="tp">Wassiyah</span><span class="tp">Family Waqf</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Gets one email, once</p>
<p class="step-detail">After the mutawalli confirms death and fires the trigger, an email lands in their inbox — sent through the app's own mail relay, not a third-party marketing tool.</p>
<div class="touchpoints"><span class="tp">notify-heirs</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>Learns what's theirs at the moment it matters, with no account to forget the password to.</div>
</div>
<!-- 6: PROFESSIONAL REVIEWER -->
<div class="persona external" style="--rail:#4e7a6e;">
<div class="persona-head">
<h2 class="persona-name">The Professional Reviewer</h2>
<span class="persona-tag">Lawyer / consultant · no account</span>
</div>
<p class="persona-goal">Give a real legal opinion on a draft before a family relies on it — without the app pretending to replace them.</p>
<div class="journey">
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Contacted outside the app</p>
<p class="step-detail">A family member marks their Wassiyah "review requested" and reaches out directly — no in-app marketplace or booking.</p>
<div class="touchpoints"><span class="tp">Wassiyah</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div><div class="step-line"></div></div>
<div class="step-body">
<p class="step-title">Reviews the actual draft</p>
<p class="step-detail">Reads the generated will document — clearly watermarked as a draft, not a claim of legal validity — with jurisdiction-specific notes already flagging what execution requires.</p>
<div class="touchpoints"><span class="tp">Draft will PDF</span></div>
</div>
</div>
<div class="step">
<div class="step-rail"><div class="step-dot"></div></div>
<div class="step-body">
<p class="step-title">Sign-off gets recorded</p>
<p class="step-detail">The family member marks it "reviewed" with the reviewer's name — visible to the mutawalli from then on.</p>
<div class="touchpoints"><span class="tp">Wassiyah</span><span class="tp">Mutawalli</span></div>
</div>
</div>
</div>
<div class="outcome"><span class="outcome-label">Outcome</span>A real professional opinion, tracked as a visible status — the app hands off, it doesn't substitute.</div>
</div>
</div>
<div class="footnote">
<h2>People in the tree who never log in</h2>
<p>Grandparents, deceased relatives, young children — most nodes in a real family tree have no account and never will. Anyone with access adds them as a lightweight person record with a name, dates, and an optional photo, and can link them to a real account later if one gets created. They're a data subject in this app, not a user of it.</p>
</div>
</div>
</body>
</html>