Off hours · Nonprofit
Caitlin Clark Foundation
A site that shows the full scale of the Foundation’s work
Unsolicited concept · not affiliated with the Foundation
The short version
The Foundation’s site hadn’t caught up with its standing: three of its nine programs were in the menu, and the home page showed no totals. I rebuilt it around three moves: show the scale, lead with confirmed numbers, and give each audience one next step. The result is a working 36-page concept. It hasn’t been pitched or tested with visitors yet.
The problem
The Caitlin Clark Foundation funds books, food programs, courts and hospital care for kids, with partners including Nike, Hy-Vee and Scholastic. I saw an organization doing more than its site could show yet, so I redesigned it as a concept to offer the Foundation.
How can the Foundation’s site carry the same authority as its founder?
I worked alone and from the outside, with no access to the team, analytics or confirmed numbers, so nothing could be invented. And Caitlin’s fame could easily crowd out the kids the work is for.
Key design decisions
Every program in the menu
The live site filed almost everything as news. I organized it as a body of work: four pillars, nine programs under them, and each story filed to its program. Three menu items became six, with every program one click away.
BeforeThe Foundation’s site today
3 of 9programs in the menu
- Impact
- Community Courts
- Back-to-School Backpacks
- Reading Team
- About
- Donate
Everything else runs as news, in one feed on the home page.
AfterThe redesign
9 of 9programs in the menu
- Our Work
- EducationCaitlin Clark Reading Team · Book Donations · Back-to-School Backpacks
- NutritionHy-Vee Round Up · Food Pantry Grants
- SportsCommunity Courts · Athlete and Youth Sports Grants
- HospitalsTurning Pages, Healing Hearts · Hospital Grants
- Stories 16, each filed to its program
- Partners
- About
- Get Involved
- Donate
AfterThe Our Work menu, open
Confirmed numbers first
Three confirmed totals sit right under the promise on the home page, and every grant is listed once. Figures the Foundation hasn’t published sit in placeholders that disappear from the live build.
The decision: reset the look
The Foundation’s site today is cream and charcoal, with condensed capitals and a tilted banner across the home page. My first version kept that look and added paper, tape and a graded photo style. Built across every page, it looked dated. Refining it was the safe option. I reset to written rules instead: ink, white and one yellow, natural photos, and the real court as the signature. With no client to sign off, I held every page to those rules.
BeforeThe Foundation’s site today
AfterThe redesign
The rules I designed by
I wrote the look down as rules before redesigning, so every page after could be judged the same way.
- 01
Two typefaces, each with one job
Instrument Sans does nearly everything. Bebas capitals are only for the home headline and the numbers.
- 02
Photos do the work
Natural color, large and often edge to edge, with kids in motion over posed groups. No grade, filter or cutout.
- 03
One accent
Yellow is a fill with ink on it, or text on ink. Never text on white.
- 04
Space, not boxes
Sections are white, or ink for the big moments, and separated by room. Depth comes from one piece rising over another.
Photo first, with one big moment
Each main page and story now opens with its photo sharing the first screen with the title. Main pages have one band on ink for why the work matters, programs show as large photos instead of icon cards, and a story keeps its key facts beside the text.
One next step for each visitor
Most pages close on the same question, with one row per kind of visitor. Each row is the link, and the Give row starts filled.
Caitlin, in her own words
The home page gives Caitlin one moment of her own: her words on why she started the Foundation, set large on ink, with her outlined cutout rising out of the band. It is the one cutout the rules allow. Everywhere else the kids lead the photos, so her fame draws people to the work without crowding out the kids it is for.
The visual design
Large photos, ink and one yellow
These are the pages where the rules show most. Photos run large, often to the edge of the screen, and show kids in motion. Each main page has one band on ink, programs alternate photo and text, and yellow appears only on the main action or as text on ink.
How I worked
Led
- The strategy: three moves, each tied to a visitor need and a goal for the Foundation
- The design direction, and the call to reset it
Hands-on
- The audit, the information architecture and the content cleanup
- The design system and every page, designed and built with Claude Code
- The 2023–2025 annual report, reset in the same system
Results
It is a working concept. It hasn’t been pitched to the Foundation or tested with visitors, so there are no outcome numbers yet. What I can measure is the difference between the two sites.
Live site and redesign
| Measure | Live site | Redesign |
|---|---|---|
| Programs reachable from the menu | 3 of 9 | 9 of 9 |
| Totals shown on the home page | None | 3 confirmed figures |
| Home page length | 10.3 screens | 6.5 screens |
Measured in the same 1440 × 900 window in 2026.
Reflection
I would start with the Foundation’s goals and analytics. I inferred what the site should drive from the outside, and several sections still wait on numbers only the team can confirm, such as kids reached and what a gift pays for.
I would also settle the look on one test page before building the rest. I built the first direction across every page before I saw it looked dated, and resetting it touched all of them.