<!doctype html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:,">
    <link rel="canonical" href="https://davidmansaray.com/">
    <link rel="preload" as="image" href="assets/community-manager-notebook.webp">
    <link rel="preload" as="image" href="assets/paper-noise.png">
    <title>David Mansaray — Product, distribution and the messy middle</title>
    <meta name="description" content="David Mansaray thinks out loud about product and distribution, sharing the process behind Checkout Watch, Perquio and Distrow.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="David Mansaray — Product, distribution and the messy middle">
    <meta property="og:description" content="Building useful internet products and sharing the decisions, false starts and discoveries behind them.">
    <meta property="og:url" content="https://davidmansaray.com/">
    <meta property="og:image" content="https://davidmansaray.com/assets/social-card.png">
    <meta property="og:image:secure_url" content="https://davidmansaray.com/assets/social-card.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="David Mansaray — Product and distribution">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="David Mansaray — Product, distribution and the messy middle">
    <meta name="twitter:description" content="Building useful internet products and sharing the decisions, false starts and discoveries behind them.">
    <meta name="twitter:image" content="https://davidmansaray.com/assets/social-card.png">
    <meta name="twitter:image:alt" content="David Mansaray — Product and distribution">
    <script>document.documentElement.classList.add('has-js');</script>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a class="skip-link" href="#top">Skip to main content</a>
    <header class="site-header">
        <a class="mark" href="#top" aria-label="David Mansaray, home">DM</a>
        <p>Product & distribution</p>
        <nav aria-label="Primary navigation">
            <a href="#work">Work</a>
            <a href="#about">About</a>
            <a href="mailto:david@davidmansaray.com">Say hello</a>
        </nav>
    </header>

    <main id="top" tabindex="-1">
        <section class="hero" aria-labelledby="hero-title">
            <div class="hero-copy">
                <h1 id="hero-title" data-profile-field="name">David Mansaray</h1>
                <p class="hero-role" data-profile-field="role">Product &amp; distribution</p>
                <p class="hero-belief">Sharing the messy process of building products people need, want, and actually notice.</p>
            </div>

            <div class="portrait-collage" data-portrait-collage>
                <span class="paper-shard shard-one" aria-hidden="true"></span>
                <span class="paper-shard shard-two" aria-hidden="true"></span>
                <span class="paper-shard shard-three" aria-hidden="true"></span>

                <div class="portrait-layer portrait-base" data-depth="0.75">
                    <img src="assets/computational-collage-portrait-final.webp" width="1254" height="1254" decoding="async" fetchpriority="high" alt="Left-facing portrait of David Mansaray constructed from ink, graph lines, code, and torn paper">
                </div>

                <svg class="portrait-graph" viewBox="0 0 900 760" aria-hidden="true">
                    <g class="graph-grid" aria-hidden="true">
                        <path d="M110 94H795M110 188H795M110 282H795M110 376H795M110 470H795M110 564H795M110 658H795"/>
                        <path d="M160 42V708M270 42V708M380 42V708M490 42V708M600 42V708M710 42V708"/>
                    </g>
                    <g class="graph-lines" aria-hidden="true">
                        <path d="M152 526C260 418 268 184 438 170S679 254 756 112"/>
                        <path d="M118 288C262 340 330 298 405 234S585 150 730 204"/>
                        <path d="M218 652C286 538 444 574 496 428S594 259 776 326"/>
                        <path d="M202 134C306 202 346 372 480 390S660 468 742 610"/>
                        <path d="M130 458C290 444 334 504 434 498S602 388 788 442"/>
                        <path d="M266 94L338 222 502 124 628 286 748 190"/>
                        <path d="M232 592L360 474 510 548 656 426 786 542"/>
                    </g>
                    <g class="graph-nodes" aria-hidden="true">
                        <circle cx="152" cy="526" r="8"/><circle cx="438" cy="170" r="10"/><circle cx="756" cy="112" r="6"/>
                        <circle cx="118" cy="288" r="6"/><circle cx="405" cy="234" r="7"/><circle cx="730" cy="204" r="9"/>
                        <circle cx="218" cy="652" r="7"/><circle cx="496" cy="428" r="11"/><circle cx="776" cy="326" r="6"/>
                        <circle cx="202" cy="134" r="7"/><circle cx="480" cy="390" r="6"/><circle cx="742" cy="610" r="9"/>
                        <circle cx="130" cy="458" r="5"/><circle cx="434" cy="498" r="8"/><circle cx="788" cy="442" r="6"/>
                        <circle class="node-blue" cx="628" cy="286" r="14"/><circle class="node-rust" cx="510" cy="548" r="10"/>
                    </g>
                </svg>

                <div class="collage-note note-listen" aria-hidden="true">What has<br>to be true?</div>
                <div class="collage-note note-build" aria-hidden="true">The first version<br>is a question.</div>
                <div class="collage-note note-wait" aria-hidden="true">What can wait?</div>
                <div class="collage-note note-notice" aria-hidden="true">Who needs to notice?</div>
                <pre class="code-fragment" aria-hidden="true"><code>const work = {
  problem,
  evidence,
  constraints,
  tradeoffs,
  product,
  distribution,
  nextMove
};</code></pre>
                <div class="registration-mark registration-one" aria-hidden="true"></div>
                <div class="registration-mark registration-two" aria-hidden="true"></div>
            </div>

            <a class="scroll-cue" href="#process">See how I work <span>↓</span></a>
        </section>

        <section class="process-intro" id="process" aria-labelledby="process-title">
            <p>How I work / 01—04</p>
            <div>
                <h2 id="process-title">Every product starts<br>as a question.</h2>
                <p>What are people quietly working around? What’s the smallest thing that would genuinely help? Where would the right people notice it? And what does real use ask for next?</p>
            </div>
        </section>

        <section class="process-story" data-process-story data-active-process="0" aria-label="My product-building process">
            <div class="process-layout">
                <div class="process-copy-rail">
                    <article class="process-chapter is-active" data-process-index="0">
                        <div class="process-chapter-inner">
                            <p class="process-verb">Listen / look closer</p>
                            <span class="process-number" aria-hidden="true">01</span>
                            <h3>Separate what people say from what their behaviour reveals.</h3>
                            <figure class="process-mobile-frame process-mobile-problem" aria-label="Notebook transcript analysis comparing conversation notes with observed patterns">
                                <span class="mframe-sheet sheet-a" aria-hidden="true"></span>
                                <span class="mframe-sheet sheet-b" aria-hidden="true"></span>
                                <span class="mframe-tabs" aria-hidden="true"><i class="is-on">01</i><i>02</i><i>03</i><i>04</i></span>
                                <span class="mframe-page" aria-hidden="true"></span>
                                <span class="mframe-tape" aria-hidden="true"></span>
                                <div class="mobile-notebook-content mobile-transcript">
                                    <p class="mobile-artifact-title">What people said / what I noticed</p>
                                    <div class="mobile-transcript-row">
                                        <p>“Submissions arrive wherever people happen to send them.”</p>
                                        <strong><small>Repeated pattern</small>The work is happening, but the record is fragmented.</strong>
                                    </div>
                                    <div class="mobile-transcript-row">
                                        <p>“I remember the regulars. Everyone else is harder to track.”</p>
                                        <strong><small>Contradiction</small>More activity creates less visibility.</strong>
                                    </div>
                                    <p class="mobile-takeaway"><small>What this points to</small>The problem wasn’t participation. It was seeing and recognising the work.</p>
                                </div>
                            </figure>
                        </div>
                    </article>

                    <article class="process-chapter" data-process-index="1">
                        <div class="process-chapter-inner">
                            <p class="process-verb">Make / question</p>
                            <span class="process-number" aria-hidden="true">02</span>
                            <h3>Make it real enough to use, question, and improve.</h3>
                            <figure class="process-mobile-frame process-mobile-build" aria-label="Notebook feature graveyard showing discarded scope and the useful core">
                                <span class="mframe-sheet sheet-a" aria-hidden="true"></span>
                                <span class="mframe-sheet sheet-b" aria-hidden="true"></span>
                                <span class="mframe-tabs" aria-hidden="true"><i>01</i><i class="is-on">02</i><i>03</i><i>04</i></span>
                                <span class="mframe-page" aria-hidden="true"></span>
                                <span class="mframe-tape" aria-hidden="true"></span>
                                <div class="mobile-notebook-content mobile-graveyard">
                                    <p class="mobile-artifact-title">Feature graveyard</p>
                                    <div class="mobile-discarded">
                                        <span>Leaderboards</span>
                                        <span>Automation</span>
                                        <span>Advanced reports</span>
                                    </div>
                                    <div class="mobile-core-loop">
                                        <small>Core workflow / enough to learn</small>
                                        <p><b>Challenge</b><i>→</i><b>Submission</b><i>→</i><b>Review</b><i>→</i><b>Recognition</b></p>
                                    </div>
                                    <p class="mobile-takeaway"><small>The decision</small>Test the uncertain part. Don’t imitate the final product.</p>
                                </div>
                            </figure>
                        </div>
                    </article>

                    <article class="process-chapter" data-process-index="2">
                        <div class="process-chapter-inner">
                            <p class="process-verb">Ship / help it travel</p>
                            <span class="process-number" aria-hidden="true">03</span>
                            <h3>Put it in the world and give the right people a chance to notice.</h3>
                            <figure class="process-mobile-frame process-mobile-distribute" aria-label="Notebook matching the first audience with the right message and place">
                                <span class="mframe-sheet sheet-a" aria-hidden="true"></span>
                                <span class="mframe-sheet sheet-b" aria-hidden="true"></span>
                                <span class="mframe-tabs" aria-hidden="true"><i>01</i><i>02</i><i class="is-on">03</i><i>04</i></span>
                                <span class="mframe-page" aria-hidden="true"></span>
                                <span class="mframe-tape" aria-hidden="true"></span>
                                <div class="mobile-notebook-content mobile-amp">
                                    <p class="mobile-artifact-title">Audience × message × place</p>
                                    <div class="mobile-amp-grid">
                                        <div><small>Who</small><strong>Community manager</strong><span>Feels the admin pain now.</span></div>
                                        <div class="is-selected"><small>What</small><strong>Stop losing track of good creator work.</strong><span>Pain language, not product language.</span></div>
                                        <div><small>Where</small><strong>Operator communities</strong><span>The problem is already discussed.</span></div>
                                    </div>
                                    <p class="mobile-takeaway"><small>The decision</small>Start with the words people already use, in the places they already gather.</p>
                                </div>
                            </figure>
                        </div>
                    </article>

                    <article class="process-chapter" data-process-index="3">
                        <div class="process-chapter-inner">
                            <p class="process-verb">Learn / go around again</p>
                            <span class="process-number" aria-hidden="true">04</span>
                            <h3>Keep what worked. Change what didn’t. Name what’s still unknown.</h3>
                            <figure class="process-mobile-frame process-mobile-loop" aria-label="Circular notebook retrospective organised into keep, change, and question">
                                <span class="mframe-sheet sheet-a" aria-hidden="true"></span>
                                <span class="mframe-sheet sheet-b" aria-hidden="true"></span>
                                <span class="mframe-tabs" aria-hidden="true"><i>01</i><i>02</i><i>03</i><i class="is-on">04</i></span>
                                <span class="mframe-page" aria-hidden="true"></span>
                                <span class="mframe-tape" aria-hidden="true"></span>
                                <span class="m-circle circle-under" aria-hidden="true"></span>
                                <span class="m-circle circle-top" aria-hidden="true"></span>
                                <div class="mobile-notebook-content mobile-retro">
                                    <p class="mobile-artifact-title">Keep / change / question</p>
                                    <div class="mobile-retro-grid">
                                        <div><small>Keep</small><span>One clear challenge</span><span>Human review</span></div>
                                        <div><small>Change</small><span>Show submission status</span><span>Close the loop</span></div>
                                    </div>
                                    <strong>Learning is a decision,<br>not a collection of feedback.</strong>
                                    <p><small>Question</small>What makes someone want to contribute again?</p>
                                </div>
                            </figure>
                        </div>
                    </article>
                </div>

                <aside class="process-stage" data-process-stage aria-label="The process shown as a working notebook of layered pages">
                    <div class="stage-decor" aria-hidden="true">
                        <span class="decor-dot dot-one"></span>
                        <span class="decor-dot dot-two"></span>
                        <svg class="decor-registration" viewBox="0 0 64 64"><circle cx="32" cy="32" r="15"/><path d="M32 4v56M4 32h56"/></svg>
                    </div>

                    <div class="notebook">
                        <nav class="notebook-tabs" aria-label="Choose a process step">
                            <button type="button" class="nb-tab tab-one" data-process-jump="0" aria-label="Step 1: Separate what people say from what their behaviour reveals" aria-controls="process-sheet-1" aria-current="step">01</button>
                            <button type="button" class="nb-tab tab-two" data-process-jump="1" aria-label="Step 2: Make it real enough to use" aria-controls="process-sheet-2">02</button>
                            <button type="button" class="nb-tab tab-three" data-process-jump="2" aria-label="Step 3: Put it in the world" aria-controls="process-sheet-3">03</button>
                            <button type="button" class="nb-tab tab-four" data-process-jump="3" aria-label="Step 4: Keep what worked, change what didn’t, and name what’s still unknown" aria-controls="process-sheet-4">04</button>
                        </nav>

                        <div class="notebook-inner">
                            <span class="backsheet backsheet-one"></span>
                            <span class="backsheet backsheet-two"></span>
                            <span class="backsheet backsheet-three"></span>
                            <span class="backsheet backsheet-four"></span>
                            <span class="backsheet backsheet-five"></span>
                            <span class="backsheet backsheet-six"></span>

                            <article class="notebook-page page-one transcript-page is-active" id="process-sheet-1" data-process-sheet="0" aria-hidden="false">
                                <p class="mono-tag transcript-title">What people said / what I noticed</p>
                                <div class="transcript-grid">
                                    <div class="transcript-notes">
                                        <article>
                                            <p>“Submissions arrive wherever people happen to send them.”</p>
                                            <small>Paraphrased conversation note</small>
                                        </article>
                                        <article>
                                            <p>“I remember the regulars. Everyone else is harder to track.”</p>
                                            <small>Paraphrased conversation note</small>
                                        </article>
                                        <article>
                                            <p>“By reward time, the evidence is spread across tabs.”</p>
                                            <small>Paraphrased conversation note</small>
                                        </article>
                                    </div>
                                    <div class="transcript-analysis">
                                        <article>
                                            <b>Repeated pattern</b>
                                            <p>The work is happening, but the record is fragmented.</p>
                                        </article>
                                        <article>
                                            <b>Contradiction</b>
                                            <p>More creator activity creates less operational visibility.</p>
                                        </article>
                                        <article>
                                            <b>Repeated pattern</b>
                                            <p>Memory becomes the system until it stops scaling.</p>
                                        </article>
                                    </div>
                                </div>
                                <div class="transcript-synthesis">
                                    <b>What this points to</b>
                                    <p>The problem wasn’t participation. It was seeing and recognising the work already happening.</p>
                                </div>
                                <p class="transcript-question"><b>Open question</b>Could one shared record make every contribution easier to review and reward?</p>
                            </article>

                            <article class="notebook-page page-two graveyard-page" id="process-sheet-2" data-process-sheet="1" aria-hidden="true">
                                <p class="mono-tag graveyard-title">Feature graveyard <span>Good ideas. Not for now.</span></p>
                                <div class="grave-card grave-leaderboard">
                                    <span class="grave-icon" aria-hidden="true">01</span>
                                    <b>Leaderboards</b>
                                    <p>Interesting later. Not needed to test the core loop.</p>
                                </div>
                                <div class="grave-card grave-automation">
                                    <span class="grave-icon" aria-hidden="true">02</span>
                                    <b>Automation rules</b>
                                    <p>Powerful, but early automation would hide what we still need to learn.</p>
                                </div>
                                <div class="grave-card grave-rewards">
                                    <span class="grave-icon" aria-hidden="true">03</span>
                                    <b>Points system</b>
                                    <p>Motivation matters, but it isn’t the first uncertainty.</p>
                                </div>
                                <div class="grave-card grave-reporting">
                                    <span class="grave-icon" aria-hidden="true">04</span>
                                    <b>Advanced reports</b>
                                    <p>Useful after the workflow produces something worth measuring.</p>
                                </div>
                                <div class="grave-core">
                                    <b>Core workflow / enough to learn</b>
                                    <div class="grave-flow">
                                        <span>Challenge</span><i>→</i><span>Submission</span><i>→</i><span>Review</span><i>→</i><span>Recognition</span>
                                    </div>
                                </div>
                                <div class="grave-decision">
                                    <b>The decision</b>
                                    <p>Test the uncertain part.<br>Don’t imitate the final product.</p>
                                </div>
                                <p class="grave-risk"><b>Still unknown</b>Will one complete manual loop be valuable before automation?</p>
                            </article>

                            <article class="notebook-page page-three amp-page" id="process-sheet-3" data-process-sheet="2" aria-hidden="true">
                                <p class="mono-tag amp-title">Audience × message × place</p>
                                <svg class="amp-connectors" viewBox="0 0 720 410" preserveAspectRatio="none" aria-hidden="true">
                                    <path class="amp-line amp-line-selected" d="M170 190C245 190 250 210 335 210S460 175 545 175"/>
                                    <path class="amp-line" d="M170 190C245 190 260 100 335 100S460 85 545 85"/>
                                    <path class="amp-line" d="M170 190C245 190 260 320 335 320S460 300 545 300"/>
                                </svg>
                                <div class="amp-columns">
                                    <section class="amp-column amp-audience">
                                        <small>Who feels this first?</small>
                                        <div class="amp-person" aria-hidden="true"></div>
                                        <b>Community manager</b>
                                        <p>Runs creator programmes and feels the admin pain now.</p>
                                        <span>Urgent problem<br>Reachable audience</span>
                                    </section>
                                    <section class="amp-column amp-messages">
                                        <small>What could we say?</small>
                                        <p>Manage ambassadors in one place.<i>Product language</i></p>
                                        <p class="is-selected">Stop losing track of good creator work.<i>Pain language</i></p>
                                        <p>Make every contribution visible.<i>Outcome language</i></p>
                                    </section>
                                    <section class="amp-column amp-places">
                                        <small>Where are they already?</small>
                                        <p>Ecommerce newsletters<i>Broad, slower feedback</i></p>
                                        <p class="is-selected">Operator communities<i>Trusted, conversational</i></p>
                                        <p>Cold outreach<i>Direct, little context</i></p>
                                    </section>
                                </div>
                                <div class="amp-decision">Start with the words people already use, in the places they already gather.</div>
                                <p class="amp-outreach"><b>Outreach fragment</b>“How are you tracking the creator work that arrives between campaigns?”</p>
                                <p class="amp-next"><b>Next test</b>Listen for the words people use before introducing the product.</p>
                            </article>

                            <article class="notebook-page page-four" id="process-sheet-4" data-process-sheet="3" aria-hidden="true">
                                <span class="circle-sheet circle-one"></span>
                                <span class="circle-sheet circle-two"></span>
                                <span class="circle-sheet circle-three"></span>
                                <div class="circle-face retro-face">
                                    <p class="mono-tag retro-title">Keep / change / question</p>
                                    <div class="retro-grid">
                                        <section class="retro-keep">
                                            <h4>Keep</h4>
                                            <small>What real use validated</small>
                                            <ul>
                                                <li>One clear challenge</li>
                                                <li>Submissions in one place</li>
                                                <li>Human review</li>
                                            </ul>
                                        </section>
                                        <section class="retro-change">
                                            <h4>Change</h4>
                                            <small>The sharpest confusing edge</small>
                                            <p>Contributors couldn’t tell what happened after submitting.</p>
                                            <b>Show status. Confirm receipt. Close the loop.</b>
                                        </section>
                                    </div>
                                    <div class="kraft-slip retro-core">Learning is a decision,<br>not a collection of feedback.</div>
                                    <section class="retro-question">
                                        <h4>Question</h4>
                                        <small>What remains genuinely unknown</small>
                                        <ul>
                                            <li><span>What makes someone contribute again?</span></li>
                                            <li><span>When should recognition become a reward?</span></li>
                                        </ul>
                                    </section>
                                    <div class="retro-version"><b>v1 → v1.1</b><span>Clarify the next step after every submission.</span></div>
                                    <p class="retro-prior"><b>Prior belief</b><s>More feedback creates better decisions.</s></p>
                                    <p class="hand-note note-back">back to the problem ↩</p>
                                </div>
                            </article>

                            <span class="notebook-binding"></span>
                            <span class="stack-tape stack-tape-left"></span>
                            <span class="stack-tape stack-tape-right"></span>
                        </div>
                    </div>

                    <p class="process-stage-instruction">Scroll to advance
                        <span class="progress-dots" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
                        <span class="instruction-arrow" aria-hidden="true">↓</span>
                    </p>
                </aside>
            </div>
        </section>

        <section class="work-intro" id="work" aria-labelledby="work-title">
            <p>Current work / 01—03</p>
            <div>
                <h2 id="work-title">What I’m<br>working on.</h2>
            </div>
        </section>

        <section class="project-story" data-project-story data-active-project="0" aria-label="Selected projects">
            <div class="project-layout">
                <div class="project-copy-rail">
                    <article class="project-chapter is-active" id="checkout-watch" data-project-id="checkout-watch" data-project-index="0">
                        <div class="chapter-inner">
                            <header class="chapter-meta">
                                <span>Project <b data-project-field="number"></b></span>
                                <span>Live / WooCommerce</span>
                            </header>
                            <h3 data-project-field="name"></h3>
                            <p class="project-summary">Your store can be online while checkout is quietly losing orders.</p>
                            <p class="project-detail">Checkout Watch follows the complete WooCommerce buying journey, alerts you when it breaks, and shows where the failure began.</p>
                            <a class="project-cta" data-project-link><span>See Checkout Watch</span> <i>↗</i></a>
                            <figure class="mobile-project-media">
                                <img data-project-image alt="">
                                <figcaption>Current product interface</figcaption>
                            </figure>
                        </div>
                    </article>

                    <article class="project-chapter" id="perquio" data-project-id="perquio" data-project-index="1">
                        <div class="chapter-inner">
                            <header class="chapter-meta">
                                <span>Project <b data-project-field="number"></b></span>
                                <span>Building / early access</span>
                            </header>
                            <h3 data-project-field="name"></h3>
                            <p class="project-summary">Your customers can be your most credible marketers—but without a programme, their enthusiasm rarely becomes consistent content, reach, or revenue.</p>
                            <p class="project-detail">Perquio helps smaller ecommerce brands turn loyal customers into active ambassadors by rewarding them for creating UGC and promoting the brand. Every challenge creates more authentic content, expands the brand’s reach, and gives fans another reason to stay engaged and bring in new customers.</p>
                            <a class="project-cta" data-project-link><span>Explore Perquio</span> <i>↗</i></a>
                            <figure class="mobile-project-media">
                                <img data-project-image alt="">
                                <figcaption>Ambassador growth workflow</figcaption>
                            </figure>
                        </div>
                    </article>

                    <article class="project-chapter" id="distrow" data-project-id="distrow" data-project-index="2">
                        <div class="chapter-inner">
                            <header class="chapter-meta">
                                <span>Project <b data-project-field="number"></b></span>
                                <span>Live · private beta</span>
                            </header>
                            <h3 data-project-field="name"></h3>
                            <p class="project-summary">A good product cannot grow if it only appears on its own website and social accounts.</p>
                            <p class="project-detail">Distrow helps businesses show up across Reddit, LinkedIn, X, search-visible conversations, and other discovery channels—building the visibility and trust that lead more potential customers back to the product.</p>
                            <a class="project-cta project-brand-cta" href="https://distrow.co/" data-project-link>
                                <img src="assets/distrow-wordmark-dark.svg" width="112" height="25" alt="">
                                <span>Visit distrow.co</span>
                                <i>↗</i>
                            </a>
                            <figure class="mobile-project-media">
                                <img data-project-image alt="">
                                <figcaption>Distrow / adaptive distribution system</figcaption>
                            </figure>
                        </div>
                    </article>
                </div>

                <aside class="project-stage" data-project-stage aria-label="Project visual stage">
                    <div class="stage-topline">
                        <span>Selected work</span>
                        <span><b data-stage-count>01</b> / 03</span>
                    </div>

                    <nav class="project-index" aria-label="Choose a project">
                        <button type="button" data-project-jump="0" aria-current="true">01 <span>Checkout Watch</span></button>
                        <button type="button" data-project-jump="1">02 <span>Perquio</span></button>
                        <button type="button" data-project-jump="2">03 <span>Distrow</span></button>
                    </nav>

                    <div class="stage-panels">
                        <div class="stage-panel is-active" data-stage-panel="0" data-project-id="checkout-watch" aria-hidden="false">
                            <span class="stage-wash" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-one" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-two" aria-hidden="true"></span>
                            <figure class="stage-screen">
                                <img data-project-image alt="">
                                <figcaption>Current product / checkout monitor</figcaption>
                            </figure>
                            <div class="prototype-artifact artifact-note">
                                <span>Problem behind the product</span>
                                <strong>Stores often find out after a customer complains—or quietly leaves.</strong>
                                <small>Make a silent failure visible.</small>
                            </div>
                            <div class="prototype-artifact artifact-flow" aria-label="Checkout Watch monitors the journey, catches failures, diagnoses the cause, and helps the store recover">
                                <span>Stop silent failures from becoming lost sales</span>
                                <svg viewBox="0 0 500 120" aria-hidden="true">
                                    <path d="M42 60H458"/>
                                    <circle cx="52" cy="60" r="18"/><circle cx="184" cy="60" r="18"/><circle cx="316" cy="60" r="18"/><circle cx="448" cy="60" r="18"/>
                                    <text x="52" y="103">MONITOR</text><text x="184" y="103">CATCH</text><text x="316" y="103">DIAGNOSE</text><text x="448" y="103">RECOVER</text>
                                </svg>
                            </div>
                        </div>

                        <div class="stage-panel" data-stage-panel="1" data-project-id="perquio" aria-hidden="true">
                            <span class="stage-wash" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-one" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-two" aria-hidden="true"></span>
                            <figure class="stage-screen">
                                <img data-project-image alt="">
                                <figcaption>Current product / ambassador workflow</figcaption>
                            </figure>
                            <div class="prototype-artifact artifact-note">
                                <span>Growth loop</span>
                                <strong>Reward the customers already helping the brand grow.</strong>
                                <small>UGC builds reach, trust, and loyalty.</small>
                            </div>
                            <div class="prototype-artifact artifact-flow" aria-label="Perquio turns customers into creators, creators into advocates, and advocacy into growth">
                                <span>Turn loyal customers into a growth channel</span>
                                <svg viewBox="0 0 500 120" aria-hidden="true">
                                    <path d="M42 60H458"/>
                                    <circle cx="52" cy="60" r="18"/><circle cx="184" cy="60" r="18"/><circle cx="316" cy="60" r="18"/><circle cx="448" cy="60" r="18"/>
                                    <text x="52" y="103">CUSTOMER</text><text x="184" y="103">CREATOR</text><text x="316" y="103">ADVOCATE</text><text x="448" y="103">GROWTH</text>
                                </svg>
                            </div>
                        </div>

                        <div class="stage-panel" data-stage-panel="2" data-project-id="distrow" aria-hidden="true">
                            <span class="stage-wash" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-one" aria-hidden="true"></span>
                            <span class="ghost-sheet ghost-two" aria-hidden="true"></span>
                            <figure class="stage-screen">
                                <img data-project-image alt="">
                                <figcaption>Distrow / adaptive distribution system</figcaption>
                            </figure>
                            <div class="prototype-artifact artifact-note">
                                <span>Distribution principle</span>
                                <strong>Every useful contribution creates another path back to the product.</strong>
                                <small>Visibility compounds across channels.</small>
                            </div>
                            <div class="prototype-artifact artifact-flow" aria-label="Distrow helps businesses contribute, get found, earn trust, and grow">
                                <span>Build visibility by being useful</span>
                                <svg viewBox="0 0 500 120" aria-hidden="true">
                                    <path d="M42 60H458"/>
                                    <circle cx="52" cy="60" r="18"/><circle cx="184" cy="60" r="18"/><circle cx="316" cy="60" r="18"/><circle cx="448" cy="60" r="18"/>
                                    <text x="52" y="103">CONTRIBUTE</text><text x="184" y="103">GET FOUND</text><text x="316" y="103">EARN TRUST</text><text x="448" y="103">GROW</text>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <p class="stage-instruction">Keep scrolling — the work is still moving <span>↓</span></p>
                </aside>
            </div>
        </section>

        <section class="about" id="about" aria-labelledby="about-title">
            <div class="about-index" aria-hidden="true">
                <span>ABOUT / 001</span>
                <i></i>
                <span data-profile-field="location">UK → Brazil</span>
            </div>
            <div class="about-copy">
                <p>A bit about me</p>
                <h2 id="about-title">I like the work<br>before the answer<br>is obvious.</h2>
                <div class="about-body">
                    <div class="about-text">
                        <p>I’m David — from the UK, now in Brazil. Freelancing and working in agencies dropped me into a different business every few months: new customers, new constraints, new ways for a product to live or die. I never could stay in one lane — I’d follow a problem from the research into the design, through the code, and out to the question of who needs to notice it.</p>
                        <p>That range used to be hard to label. In the age of AI it’s the advantage: the tools finally match the curiosity, and one person can run the whole loop. These days I run it for my own ideas and the problems I want to solve. This site is where I think out loud about the decisions, false starts and small discoveries behind them.</p>
                        <blockquote>A product no one finds is just a prototype.</blockquote>
                    </div>
                </div>
            </div>
            <div class="about-portrait">
                <div class="about-portrait-visual">
                    <img src="assets/davidmansaray.jpg" alt="David Mansaray smiling in a café">
                    <svg class="about-orbit" viewBox="0 0 220 220" aria-hidden="true">
                        <circle cx="110" cy="110" r="84"/><path d="M10 110H210M110 10V210"/><circle cx="194" cy="110" r="7"/>
                    </svg>
                </div>
                <nav class="about-socials" aria-label="Social links">
                    <a data-social="x" data-social-icon href="https://x.com/davidmansaray" target="_blank" rel="noopener noreferrer" aria-label="X (opens in a new tab)">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.24 2.25h3.31l-7.23 8.26 8.51 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23 5.45-6.23Zm-1.16 17.52h1.83L7.08 4.13H5.12l11.96 15.64Z"/></svg>
                        <span class="sr-only">X</span>
                    </a>
                    <a data-social="linkedin" data-social-icon href="https://www.linkedin.com/in/davidmansaray" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in a new tab)">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V8.98h3.42v1.57h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.29ZM5.32 7.41a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12Zm1.78 13.04H3.54V8.98H7.1v11.47Z"/></svg>
                        <span class="sr-only">LinkedIn</span>
                    </a>
                    <a data-social="email" data-social-icon href="mailto:david@davidmansaray.com" aria-label="Email David">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 5.5h17v13h-17z"/><path d="m4 6 8 7 8-7"/></svg>
                        <span class="sr-only">Email</span>
                    </a>
                </nav>
            </div>
        </section>

        <section class="contact" id="contact" aria-labelledby="contact-title">
            <p>Any stage is a good stage</p>
            <div>
                <h2 id="contact-title">Working on something<br>interesting? Let’s talk.</h2>
                <p>Whether it’s an early idea, a product taking shape, or a problem that won’t leave you alone, I’d be glad to hear about it.</p>
                <a href="mailto:david@davidmansaray.com">Start a conversation <span>→</span></a>
            </div>
        </section>
    </main>

    <footer>
        <p>© <span data-year>2026</span> <span data-profile-field="name">David Mansaray</span></p>
        <a href="#top">Back to the beginning ↑</a>
    </footer>

    <script type="module" src="hydrate.js?v=20260720-distrow-live"></script>
    <script type="module" src="script.js"></script>
</body>
</html>
