← back to Sdcc Mockups
html/peers.html
142 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Peer Non-Profits — SDCC Analysis</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;background:#0a0a0a;color:#fff;padding:48px 32px;min-height:100vh}
.wrap{max-width:1320px;margin:0 auto}
.crumbs{font-size:12px;color:#666;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.crumbs a{color:#888;text-decoration:none}
h1{font-family:Georgia,serif;font-size:48px;font-weight:400;letter-spacing:-.02em;margin-bottom:8px}
.sub{color:#888;margin-bottom:48px;font-size:16px;max-width:780px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;transition:border-color .25s;display:flex;flex-direction:column}
.card:hover{border-color:rgba(255,255,255,.4)}
.shot{display:block;width:100%;aspect-ratio:16/10;background:#fff;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.08)}
.shot-fallback{display:flex;align-items:center;justify-content:center;color:#888;font-size:14px;background:#222}
.body{padding:22px 26px;flex:1;display:flex;flex-direction:column;gap:8px}
.title-row{display:flex;justify-content:space-between;align-items:start;gap:12px}
.t{font-family:Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.005em;line-height:1.2}
.cat{font-size:10px;color:#888;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;background:rgba(255,255,255,.08);border-radius:99px;flex-shrink:0;align-self:flex-start;white-space:nowrap}
.url{font-family:monospace;font-size:12px;color:#a855f7;text-decoration:none}
.borrow{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#ddd;line-height:1.5}
.borrow strong{color:#fbbf24;font-weight:600;display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-family:-apple-system,sans-serif}
</style></head><body>
<div class="wrap">
<div class="crumbs"><a href="/">SDCC Analysis</a> / Peer Non-Profits</div>
<h1>12 Peer Non-Profits — Front-Page Survey</h1>
<div class="sub">Comparable advocacy orgs in adjacent spaces (debt, education, consumer financial, civil rights). For each: front-page screenshot + the one specific UX or creative move SDCC could borrow.</div>
<div class="grid">
<div class="card">
<img class="shot" src="peer-shots/protect-borrowers.jpg" alt="ProtectBorrowers.org homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Protect Borrowers</div><div class="cat">DEBT ADVOCACY</div></div>
<a class="url" href="https://protectborrowers.org/" target="_blank" rel="noopener">protectborrowers.org →</a>
<div class="borrow"><strong>What to borrow</strong>One page = one action = one progress bar. Retire SDCC's multi-action Take Action page in favor of a single dominant campaign with a live counter.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/nclc.jpg" alt="National Consumer Law Center homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">National Consumer Law Center</div><div class="cat">CONSUMER LAW</div></div>
<a class="url" href="https://www.nclc.org/" target="_blank" rel="noopener">nclc.org →</a>
<div class="borrow"><strong>What to borrow</strong>Dual-audience nav split — "I need help" / "I'm a policy advocate" / "I'm press" — surfaces the right path immediately for each visitor type.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/aft.jpg" alt="AFT Higher Education homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">AFT Higher Education</div><div class="cat">UNION</div></div>
<a class="url" href="https://www.aft.org/highered" target="_blank" rel="noopener">aft.org/highered →</a>
<div class="borrow"><strong>What to borrow</strong>Full press-room page with media kit, headshots, standing media contact, embargo policy. Journalists landing on SDCC currently have to hunt for any of this.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/demos.jpg" alt="Demos homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Demos</div><div class="cat">POLICY</div></div>
<a class="url" href="https://www.demos.org/" target="_blank" rel="noopener">demos.org →</a>
<div class="borrow"><strong>What to borrow</strong>Inline data viz inside policy posts. Numbers as styled callouts, not buried in sentences. Increases dwell time and citation-readiness.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/roosevelt.jpg" alt="Roosevelt Institute homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Roosevelt Institute</div><div class="cat">POLICY</div></div>
<a class="url" href="https://rooseveltinstitute.org/" target="_blank" rel="noopener">rooseveltinstitute.org →</a>
<div class="borrow"><strong>What to borrow</strong>Opinion-first headlines (vs. neutral). +20–30% CTR in search and social. SDCC's neutral phrasing is leaving organic traffic on the table.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/young-invincibles.jpg" alt="Young Invincibles homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Young Invincibles</div><div class="cat">YOUTH ADVOCACY</div></div>
<a class="url" href="https://younginvincibles.org/" target="_blank" rel="noopener">younginvincibles.org →</a>
<div class="borrow"><strong>What to borrow</strong>Real people throughout the site, not just on the About page. Borrower faces should be in the hero, in article sidebars, in footer testimonials.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/american-progress.jpg" alt="Center for American Progress homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Center for American Progress</div><div class="cat">POLICY</div></div>
<a class="url" href="https://www.americanprogress.org/" target="_blank" rel="noopener">americanprogress.org →</a>
<div class="borrow"><strong>What to borrow</strong>Issue-page hub model — the template for SDCC's pillar-page content cluster strategy. CAP's hubs rank top-5 for high-volume policy queries.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/public-citizen.jpg" alt="Public Citizen homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Public Citizen</div><div class="cat">WATCHDOG</div></div>
<a class="url" href="https://www.citizen.org/" target="_blank" rel="noopener">citizen.org →</a>
<div class="borrow"><strong>What to borrow</strong>Victory archive. Donors and members stay engaged when they can see specific wins attributed to org pressure. SDCC has the wins; they just aren't surfaced.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/edtrust.jpg" alt="Education Trust homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">Education Trust</div><div class="cat">EDUCATION EQUITY</div></div>
<a class="url" href="https://edtrust.org/" target="_blank" rel="noopener">edtrust.org →</a>
<div class="borrow"><strong>What to borrow</strong>Downloadable datasets next to every policy post. Increases academic and press citation rate substantially. Makes SDCC a primary source.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/aflcio.jpg" alt="AFL-CIO homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">AFL-CIO</div><div class="cat">LABOR</div></div>
<a class="url" href="https://aflcio.org/" target="_blank" rel="noopener">aflcio.org →</a>
<div class="borrow"><strong>What to borrow</strong>Coalition partner logo wall on the homepage. Power-in-numbers visual signaling that SDCC's 47-org coalition is invisible to first-time visitors.</div>
</div>
</div>
<div class="card">
<div class="shot shot-fallback">[onefairwage screenshot pending]</div>
<div class="body">
<div class="title-row"><div class="t">One Fair Wage</div><div class="cat">WORKERS</div></div>
<a class="url" href="https://onefairwage.site/" target="_blank" rel="noopener">onefairwage.site →</a>
<div class="borrow"><strong>What to borrow</strong>Campaign-mode homepage template. Build the "vote is Thursday" hero now and flip it on whenever a vote approaches. Doesn't require redesign every cycle.</div>
</div>
</div>
<div class="card">
<img class="shot" src="peer-shots/cfpb-loans.jpg" alt="CFPB Student Loans homepage screenshot">
<div class="body">
<div class="title-row"><div class="t">CFPB Student Loans</div><div class="cat">FEDERAL CONSUMER</div></div>
<a class="url" href="https://www.consumerfinance.gov/consumer-tools/student-loans/" target="_blank" rel="noopener">consumerfinance.gov →</a>
<div class="borrow"><strong>What to borrow</strong>Task-oriented article format ("What to do this week") added to every policy post. The federal site does this; SDCC doesn't, despite being the borrower-friendly alternative.</div>
</div>
</div>
</div>
</div>
</body></html>