Partnership Designer — layout review
Same concept, same mock data: one field of opportunities mixing loans,
grants, corporate partnerships, and equity, no siloed tabs by capital
type. This is the arrival flow into CHELCIE itself, so the whole point
is the narrative: there's more than grants in here. Twelve rounds
below, same underlying data and Draft-with-CHELCIE simulation,
different structures.
Round 12 · from a Figma concept: floating right panel
Built from an actual Figma mock the user shared ("Concept 1: Floating Right Panel"), not a
chat description: Instrument Serif headlines, Instrument Sans everything else, a dark-teal
monochrome badge system instead of hue-coded capital types, dashed connector lines, faint
orbital rings behind the constellation, and the persistent create-panel moved to the right
side. Each capital type gets its own fixed compass quadrant (grants upper-left, corporate
upper-right, loans lower-left, equity lower-right) with a labeled heading, instead of Layout
T's proportional arc. Same underlying data, builder, refine, and tracker as every other round.
Round 12
Capital Constellation
Four fixed compass quadrants around a central hub, each labeled and color-consistent (dark teal, not hue-coded), cards showing type, fit, name, and funding amount. The create-panel floats on the right instead of the left. One viewport on desktop, everything reflows and cards shrink to fit on mobile. Now also has a small Constellation/List toggle for anyone who'd rather not read a radial map, plus an onboarding-profile modal (click the hub) to review and edit what drives the matches.
Round 12 · alternative
Scroll to List
Same constellation, same cards — but instead of a click to toggle into a list, scrolling down morphs the scattered cards into a stacked list in place, then hands off to a real, normally-scrollable list section underneath. A second answer to "what if someone doesn't want the constellation," this one driven by scroll instead of a click.
Round 11 · the post-login capital landscape, pure black and white
A separate, more fully-specified brief: not a browsing screen, a discovery moment. Your
organization sits at the center, 3-5 curated signals surround it (never a list, never
every possibility at once), and one signal is flagged as something CHELCIE surfaced that
you likely hadn't considered. One prototype, one shared data model, three ways to
visualize the same landscape via a toggle — Constellation, Orbit, Radar — so the
metaphor can be evaluated without rebuilding anything. Selecting a signal reveals why it
surfaced, and a partnership-type signal flows straight into the Partnership Designer
(split panel on desktop, full-screen hand-off on mobile) without ever feeling like you
left the landscape.
Round 10 · back to Layout B, the DNA that actually had merit
After round 9's score reveal, the call was clear: Layout B (round 2) still has the most merit,
and a literal score isn't right for this. Looking back at why B worked, it isn't the
constellation visual, it's that "Create your own partnership" is always on screen,
pre-populated with real companies, never hidden behind a click or a details toggle the way
every round since has buried it. Both layouts below keep that persistent panel fixed, and
change what sits next to it. Also the first rounds built under a new standing rule: one
viewport on desktop, no page scroll, except for the one panel that's genuinely discovery
content (the map, or the list), which scrolls on its own.
Layout R
Connected, refined
Layout B's own constellation, tightened into one viewport: your org at the center, opportunities scattered by fit, the persistent create-panel floating over the canvas exactly like B. Same mechanic, no score, no page scroll.
Layout S
List + panel
Same persistent create-panel, but the constellation is swapped for a plain ranked list, best fit first, to test whether B's merit was really the map or the panel next to it. List scrolls on its own, panel doesn't need to.
Layout T
Clusters
Layout R's constellation, but grouped: loans, grants, corporate partners, and equity each get their own labeled sector radiating off your org, instead of one continuous fan ranked by fit. Distance still means fit, but only within a cluster, the grouping itself carries the "more than grants" narrative at a glance.
Round 9 · the score reveal, straight after onboarding v2
Where you land right after "Go to my workspace," built around a specific brief: this moment
has to feel like you just joined and got a result, like CHELCIE was already working on your
behalf while you finished setup, and like your own relationships are worth building too, not
just the matches handed to you. One viewport on desktop, no page scroll, the match list is the
only part that scrolls (it's discovery content). A distinct take from round 8: a real
Resilience Score (an average of your best match in each of the four capital types, so scoring
low in one visibly pulls the number down) instead of a dollar-potential figure, plus a
dedicated dark panel for designing your own approach, kept visually apart from the passive
match list beside it.
Round 8 · the arrival page, for every kind of money
Where you land after onboarding v2. Grants, loans,
corporate partners and investors in one list, no tab per type, every entry leading with what
the funder gets out of you. Built quiet and scannable: no cards, hairlines and space
instead, following Airbnb and Monzo. Desktop and phone.
Round 7 · a batch of patterns from outside fintech
A deep Mobbin pass across non-fintech categories (dating apps, design tools, streaming,
smart-home) for interaction patterns rather than industry examples. Four quick, lean builds
to see which ones hold up. All four share builder-shared.css
and builder-shared.js instead of re-pasting the same builder
and tracker code per file.
Layout M
Swipe
One opportunity full-screen at a time, dating-app style. Drag right (or tap the check) to start drafting it, left to pass and see the next. About triage speed, not browsing.
Layout N
Canvas
Every opportunity as a node on an infinite pannable, zoomable board, Figma/Miro-style. Drag a card to reposition it, drag the board to pan, click a card without dragging it to open the builder. The user arranges the layout, not us.
Layout O
Bento
An asymmetric tile grid, Apple-style. The single best-fit match gets a 2x2 hero tile, everything else sized around it, all visible without scrolling through a list.
Layout P
Dial
A four-quadrant radial dial, one wedge per kind of capital. Click a wedge, that type's opportunities appear below. Tactile and immediate instead of click-driven navigation.
Round 6 · grounded in a real financial concept
The map from round 4 had a real problem: there's no actual geography behind a funding
opportunity, so the pins were decorative, not meaningful. This round keeps the "discovery"
feel but grounds the structure in something real: a capital stack, the way finance people
already think about layering an organization's funding by seniority and risk.
Round 5 · an out-of-the-box experiment
Not grounded in a Mobbin reference this time, just a straight nostalgia pull: iPod/iTunes
cover flow. Same data, same builder underneath, but the whole browsing experience lives in
one viewport, no page scroll at all.
Round 4 · grounded in researched marketplace patterns
Round 2 and 3 were built from memory and a couple of quick reference checks. This round is
deep research first: pulled a proven consumer marketplace's actual host dashboard, its
section-by-section submission builder, its category-row homepage, and its detail-page
layout from Mobbin before writing any code. Same CHELCIE palette (paper/ink/teal), borrowed structure.
Layout G
Dashboard
A "your next steps" band, then horizontal category rows, one per kind of capital plus "Realise your financial potential" for the generative Partnership Designer, all on one continuous page, no tabs. Clicking any card opens a builder with a left-hand outline of sections and checkmarks (the opportunity, what we're asking, how funds are used, why it fits, terms, review and send), one section focused at a time on the right, a sticky Back/progress/Continue bar. Same status + export tracker as before.
Layout H
Compass
Same palette and type treatment as Layout G, but the browse view is a universe again: your organization at the center, true circular orbits, opportunities scattered in loose clusters per direction (one per kind of capital) and sized by fit as well as placed by it, a quiet scatter of twinkling background dust. Always know where to look for loans versus equity, without a rigid plus-sign grid. Same discover strip and section-outline builder as Layout G underneath.
Layout I
Map
Opportunities plotted like pins on a territory, loosely clustered into four labeled districts (one per kind of capital), each pin showing its ask amount the way a real map app shows price. Filter chips toggle a district on or off, zoom controls actually zoom, click a pin and a card floats up with the details, same pattern as Airbnb, Zillow, or Tripadvisor. Same discover strip and section-outline builder as Layout G underneath.
Layout J
Gallery
A waterfall grid you browse instead of a list you scan, modeled on a visual-discovery feed's card grid, floating pill tabs, and category chips. "For you" sorts by best fit, "Explore" goes alphabetical within a capital type, search narrows by name, a bold "Design a partnership" pill jumps straight to your best match. Click any card and its full detail opens in a centered overlay. Same discover strip and section-outline builder as Layout G underneath.
Round 3 · the split arrival, pure black and white
The split layout from request access, pushed
further monochrome than round 2 (no teal at all). Layout F below is the real synthesis:
the constellation from round 1 and the split panel aren't just sitting next to each other,
the split is the concept, organization → landscape → unexpected connection →
partnership. D and E were the earlier, less fused attempts on the way there.
Layout F · the synthesis
Constellation + Designer
Dark panel: your organization at the center, the constellation of everything already in your landscape radiating around it, on permanent display, never hidden behind a step. Light panel: the Partnership Designer as a discovery engine, describe what you're working on and it surfaces who should fund it that isn't already on your map. Click a star on the left and the right panel swaps to designing a partnership with that one directly, same output either way. One system, two ways in: what you know, and what you haven't considered yet.
Layout D
Split, persistent
Earlier pass: the dark panel is a static brand pitch, not the constellation. Capital types, funding range, then a ranked match list, detail, and draft happen in the light panel underneath.
Layout E
Split, then hand off
Earlier pass: the split is only the landing moment, then hands off to a full-bleed one-at-a-time review. No constellation, no persistent org-at-center visual.
Round 2 · spacious, one thing at a time
Following the direction of onboarding v2 and
request access: paper/ink/teal, Archivo + Inter,
one focused question or opportunity per screen, generous negative space, a segmented
progress bar and footer nav instead of everything visible at once. Also looked at Airbnb's
own step-by-step onboarding for the same reason.
Layout A
One at a time
Three quick intake questions, then opportunities are reviewed one by one, full screen: not for us, or design a partnership. Choosing the latter walks through what they gain from you, then the pitch, then the draft, each its own screen.
Layout B · current favorite
Connected
This is the arrival screen after onboarding. The constellation is full-bleed behind everything; "Create your own partnership" floats over it on the left as an elevated card (shadow, rounded corners, always there, not a toggle), pre-populated with company names CHELCIE already surfaced, no typing required to see them (ported from Amy's C-CHANGE demo, describing your own program below sharpens the match). Click a company card or a constellation node and you land on one screen modeled on Airbnb's checkout: details on the left in a summary card, the right side is the actual document, broken into sections (what we're asking, how funds are used, why it fits, terms), each pre-drafted by CHELCIE but directly editable, with its own "redraft this section" link. Status + export tracked in "Your partnerships," export always reflects whatever you've actually edited.
Layout C
Step by step
The most literal reuse of the onboarding v2 chrome: a three-segment progress bar (what you need, your matches, design and send), one question per screen, a short ranked list instead of all thirteen, Back/Continue footer throughout.
Round 1 · earlier pass
Denser, monochrome, everything visible on one screen. Kept for reference, layout 1's
connectedness carried forward into round 2's Layout B above.
They all share data.js (mock opportunities, filter and preference logic) and most share partnership-lib.js (Amy's real corporate-sponsor matching, ported from the C-CHANGE demo). Round 1 uses shared.css (monochrome). Rounds 2 and 4 use v2-shared.css (paper/ink/teal, Archivo + Inter). Round 3 uses v3-shared.css (paper/ink only, no teal). No build step, no backend, static files only.