Let’s talk

SELECTED WORK / NONPROFIT

Hogar’s Helping Hands.

Aguacate, Guatemala

A sponsorship and giving website for a children’s home in Guatemala, from child profiles and monthly sponsorships to mission-trip sign-ups.

Visit live website (opens in a new tab)Explore the project
Hogar’s Helping Hands homepage: “Make a difference. One life at a time.” with kites over deep green
CLIENT
Hogar’s Helping Hands
INDUSTRY
Nonprofit
OUR WORK
Website design & development
WEBSITE
hhhguat.org

THE PROJECT

A children’s home in Guatemala.
One place to help.

Hogar’s Helping Hands supports Hogar Miguel Magone, a children’s home in the village of Aguacate, Guatemala, through child sponsorship, giving and a yearly mission trip. The website brings all three together for sponsors, donors and volunteers.

We designed and built it on Next.js. Supporters can browse a directory of children and start a monthly sponsorship, give once or every month, register for the mission trip and follow along through events, a photo and film gallery and stories from each trip. Sponsors have their own sign-in and can manage a sponsorship from a secure emailed link.

DESIGN STRATEGY

Warm and personal,
one life at a time.

The design reads as warm and personal rather than institutional. Documentary photos of the children, the home and mission teams at work sit on deep forest green and cream, and the copy centers on single relationships: one child, one sponsor, one life at a time.

Pages open with a full-width photo and a short line, then move through plain steps, like the three-step sponsorship explainer and the trip details on the Serve page. The Donate button in the header and the Sponsor a Child prompts keep giving one step away.

TYPOGRAPHY

Fraunces, a soft serif, for headlines, over Inter for body text.

COLOR

Deep forest green and warm cream, with a gold accent for the calls to give.

MOTION

Headlines rise in and sections fade up as they arrive, and the animation stops for visitors who prefer reduced motion.

HOW IT’S BUILT

Sponsorships, gifts
and sign-ups, built in.

The site runs on Next.js with the App Router, styled with Tailwind CSS 4, with self-hosted fonts and responsive WebP images. Public pages are prerendered and cached at Amazon CloudFront, and the donate page renders on each request.

Stripe takes card and bank gifts and PayPal takes PayPal and Venmo gifts. Behind the public pages, a sponsor portal lets supporters manage their sponsorships and a private admin area runs the site.

FRAMEWORK
Next.js (App Router)
STYLING
Tailwind CSS 4 with a custom theme
PAYMENTS
Stripe for card and bank gifts, PayPal for PayPal and Venmo
ACCOUNTS
A sponsor portal and a private admin area
IMAGES
Responsive WebP through next/image
HOSTING
Prerendered pages cached at CloudFront

SEARCH, BUILT IN

Easy to find,
with children’s pages kept private.

The public pages are built to be found in search. The children’s own pages are deliberately kept out of it.

Every page has its own title and meta description, following one consistent pattern.

An XML sitemap lists the public pages, events and stories with last-modified dates, and robots.txt points to it.

Each child’s profile page is marked noindex and left out of the sitemap, and the sponsor portal and admin are kept out of search entirely.

Checkout and donation confirmation pages are kept out of crawling, so only pages worth finding are indexed.

Images are responsive WebP files with descriptive alt text, and images below the hero load lazily.

The Hogar’s Helping Hands homepage on a phone, with Sponsor a Child and Our Story buttons

THE SAME WEBSITE. A SMALLER SCREEN.

PROJECT HIGHLIGHTS

The details
that make it work.

Sponsor a child

A filterable directory of children leads to a monthly sponsorship, and sponsors can update a card, change a gift or cancel from a secure emailed link.

Give your way

The donate page takes card and bank gifts through Stripe and PayPal and Venmo gifts through PayPal, with instructions for checks and donor-advised funds.

Plan the trip

The Serve page lays out the week in Guatemala, and a registration form collects passport, emergency contact and health details for each traveler.

KEEP EXPLORING

Learn more about the services behind our work.

YOUR NEXT WEBSITE

Planning a website
your customers will use?

Let’s talk about your business, your customers and what your website needs to do.

Let’s plan your website More of our work