Visit The Gifted Equine
Nonprofit · Equine Rescue & Sanctuary

The Gifted Equine

Donation-driven website for an equine rescue and sanctuary. Built to tell the horses’ stories, accept recurring and one-time donations through Donorbox, and let the team update content without touching code.

Year
2021
Platform
React · Vite · TypeScript
Status
Live in production
https://thegiftedequine.com/
Project preview

At a glance

Custom design
100%
Donations live
Recurring
Self-serve content
CMS
In production
Live
The challenge

What The Gifted Equine needed.

The Gifted Equine needed a public home that did more than describe a rescue. It had to move people. Visitors arrive curious about the horses, and the site had to carry them from a story into a donation without friction, while letting a small, non-technical team keep stories, programs, and gallery content fresh on their own.

Goals

  • Turn visitors moved by the horses into recurring donors
  • Let a small, non-technical team run the site themselves
  • Stay fast and accessible for an older, mostly-mobile audience
Our approach

How we built it.

We designed and built the site around the horses’ stories first, then layered donations and content management on top so the team can run the site day to day without engineering help.

  1. 01

    Spending a Day With the Horses

    1 week

    We spent a day at the sanctuary before drawing anything. We met the horses, watched a volunteer post a Facebook update from her phone, and noticed she abandoned it halfway through because the wind picked up. That moment shaped the CMS: had to be phone-first, had to survive interruption, had to be forgiving.

    • A content model with the horse as the unit
    • Donor journey notes "moved → curious → giving" in three taps
    • CMS shortlist filtered for "can a volunteer use this in a barn"
    • A short roadmap the team could read at the kitchen table
  2. 02

    Designing for Warmth

    2 weeks

    Most sanctuary sites use the same stock photography and the same blue gradient. We started over. Warm typography, lots of room around the horses, calls to support placed where the story naturally leads. Never bolted onto the side.

    • Figma design system with the horse as visual anchor
    • Horse profile and program-page templates
    • Design tokens tuned warm. Never cold or corporate
    • Mobile specs reviewed on a real phone in real light
  3. 03

    React + Vite, Light Enough for Rural Cellular

    2 weeks

    Most of the sanctuary's audience reaches the site on a phone over slow cellular. We picked Vite for the tiny production bundles, inlined the critical CSS, and made sure the first paint was a real story. Not a spinner.

    • Production deploy on a fast static host
    • Headless CMS wired so editing a horse profile takes two taps
    • Base UI built from the design system
    • Story templates with inline image lazy loading
  4. 04

    Donorbox, Embedded Where It Belongs

    2 weeks

    Donorbox usually drops people into a separate portal. We embedded it inline. The donor never leaves the horse's story to give. That single decision did more for conversion than any copy change we made.

    • Donorbox inline on every story page
    • Recurring donation as the gentle default
    • Horse profile pages with care timeline + current needs
    • Gallery and program pages
  5. 05

    Handing It Over

    1 week

    Production deploy, CMS training for the volunteers (one hour, on a phone, in the barn. Fitting), and an accessibility audit because a chunk of the sanctuary's supporters are over 65.

    • Live launch at thegiftedequine.com
    • One-hour CMS training that stuck
    • WCAG AA accessibility sign-off
    • A four-page volunteer-facing runbook
The outcome

What we delivered.

The Gifted Equine asked us for a website. What they needed was a quiet, mobile-first place where each horse's story leads straight to a way to give, and where a volunteer can update a horse profile from a phone in the barn.

The Gifted Equine is live at thegiftedequine.com. Running recurring donations through Donorbox, with the team updating stories and programs themselves through the CMS.

  • Donorbox donations integrated

    One-time and recurring donation flows embedded directly into the site, placed where stories naturally lead to a call to give.

  • Self-serve content management

    Non-technical team members can publish new horse profiles, programs, and updates without involving engineering.

  • Story-first design system

    Custom Figma design built around the horses. Page templates pair narrative, imagery, and supporting calls to action.

  • Fast, mobile-first build

    React + Vite stack tuned for quick first paint on mobile, where most donors discover the sanctuary.

  • Accessible by default

    Typography, color contrast, and tap targets reviewed across breakpoints so supporters of all ages can navigate easily.

  • Live in production

    Running today at thegiftedequine.com, supporting the rescue’s ongoing fundraising and outreach.

Before and after

What changed.

Before

  • The sanctuary lived entirely on Facebook. If you didn't follow them, you didn't know they existed
  • Donations happened through a Venmo handle posted in the comments of a Facebook update
  • Each horse's story sat in a different post, on a different day, sometimes deleted by accident
  • Updating anything meant texting the volunteer who originally set up the page
  • Someone moved by a story had no obvious next step. They'd close the tab and forget
  • Most visitors arrived from phones; nothing was sized for a phone
  • Nobody knew which stories actually brought in support

After

  • A site whose whole job is to take a moment of being moved by a horse and turn it into a recurring donation, gently
  • Donorbox embedded inline with each story. No jarring redirect, no payment portal interstitial
  • Each horse has a permanent page: photos, history, current needs, and a donate button that's already in the right context
  • Volunteers update content from the CMS on their phone, in the barn, between feedings
  • Mobile pages that load in under two seconds even on rural cellular
  • WCAG AA typography and contrast. Supporters in their 60s and 70s can actually read it
  • Analytics that tell the team which horse's story moved the most people to give this month
Technology

Built with.

The tools behind the build, and why each one was chosen.

Frontend

React
Templates for horses, programs, and updates all share the same components. Adding a new template type is half a day, not a week.
Vite
Tiny production bundles matter when half the audience is on rural cellular. Vite gave us that without us thinking about it.
TypeScript
The CMS content shape and the template props are typed against each other. A volunteer can't publish a horse profile that breaks the page.

Styling

Tailwind CSS
We wanted a warm, restrained design. Tailwind tokens made it easy to keep that warmth consistent across every page.

Content

Headless CMS
Picked specifically because a volunteer can use it on a phone in a barn. That was the actual selection criterion.
Horse-as-unit model
Each horse is a first-class content type with a story, photos, care notes, and a current-needs field that updates the donate call to action.

Donations

Donorbox
Embedded inline on the story page so the moment of being moved and the moment of giving aren't separated by a redirect.

Code Nativex

Typically replies instantly

👋 Hi there! Ready to build something amazing together? Chat with us on WhatsApp.

Start Conversation