Jake Cochran - Portfolio

The Challenge

The original multi-page website treated every audience the same, even though the organization's primary digital goal was donor and institutional partner conversion. Program participants still needed information, but as a secondary layer after the core fundraising narrative.

I was given the existing brand identity, a prioritized content spreadsheet, and full creative ownership to redesign the experience around conversion.

Identifying the Problems

Before designing anything, I audited the existing site through the lens of the client's stated priority: donor and partner conversion. Several structural problems stood out:

No persuasion architecture

The site presented information but never built a case. There was no narrative flow guiding a potential donor from "what is this organization?" to "I should give them money." Content was organized by category (about, programs, get involved), not by the psychological steps someone takes before donating.

Donation was an afterthought

The only path to giving was a text link to a third-party platform. There was no emotional context, no framing of impact, and no reason to choose a specific amount. The conversion moment happened off-site with zero momentum behind it.

Information architecture served the org chart, not the user

The multi-page structure reflected internal organization categories rather than what a visitor needed to understand and feel before taking action.

Audiences competed instead of being sequenced

Donors, partners, volunteers, and participating families all shared the same undifferentiated interface. Without audience prioritization, the site asked everyone to self-sort, which usually increases bounce and reduces action.

Designing the Solution

Information Architecture: Building a Persuasion Sequence

The most important decision wasn't visual, it was structural. I redesigned the page as a linear persuasion sequence where each section builds on the previous one to move a donor from awareness to action.

Emotional hook - Problem framing: The page opens with the tension between Houston's booming tech sector (40% job growth) and its education gap (only 43% of 8th graders meeting math standards). This gap-analysis framing creates urgency before any ask.
Human story - Identification: A student spotlight ("Meet Nick") puts a face on the problem. This uses the identifiable victim effect, moving from abstract need to personal transformation.
Credibility signals - Trust building: Collaborators (Scratch Foundation, Texas A&M) and NBC Nightly News appear before any ask, providing third-party validation that reduces perceived risk.
Impact metrics - Evidence of scale: Concrete numbers (5,000+ students, 50+ partner organizations, 500+ tech kits) answer the rational question: "What have they done?" Metrics are scannable because donors skim for evidence.
Testimonial - Peer confirmation: A parent quote bridges the evidence section and the donation form, so the last message before the ask reinforces intent.
Donation form - Conversion with anchoring: The form is embedded directly in-page to preserve momentum. Each amount is tied to an outcome ($15 field trip, $100 microscope, $500 robotics set), using anchoring and concreteness.
Partnership and volunteer paths - Secondary conversion: These paths are detailed enough to convert, but intentionally placed after donation to preserve hierarchy.
Programs - Participant information: Full program details remain available at the end so participating families still find what they need.

Persuasion Sequence in the UI

Emotional hook and problem framing section — Emotional hook and problem framing (40% growth vs 43% math standards).

Meet Nick student spotlight section — Human story and identification through the student spotlight.

Credibility signals with featured alumni and media coverage — Credibility signals and trust building through collaborators and media.

Impact metrics section with quantified outcomes — Impact metrics as scannable evidence of scale.

Embedded donation form with impact-based amount tiers — Embedded donation form with anchored impact tiers.

Accessibility and Responsiveness

I adjusted the brand palette to meet WCAG 2.1 AA contrast while preserving visual identity. For a nonprofit serving underserved communities, accessibility needed to be a baseline requirement.

Desktop used stronger spatial hierarchy (horizontal donation tiers, structured volunteer grid, scannable impact blocks). Mobile adapted these patterns into stacked tiers, card-based volunteer roles, and a compact metrics layout while preserving the same persuasion order.

What I'd Add With More Time

Usability testing with 2-3 potential donors to validate the persuasion sequence and donation form before handoff.
A/B testing framework for donation tier structures to optimize conversion post-launch.

View Figma File →