Website for a nonprofit in Votorantim, Brazil · Associação Horizontes

PortalAssociação Horizontes2025

For a nonprofit, the website isn't a storefront. It's where donors decide whether to trust it.

Client
Role: Product builder: strategy, design, and AI-assisted development
Timeline: About 4 weeks, with updates throughout 2026
Disciplines: Information architecture, UX/UI, Content, AI-assisted development

Home page of the Associação Horizontes website, with a colorful banner and a donate button at the top

The context

Associação Horizontes, in Votorantim, in the state of São Paulo, has more than twenty years of social work and serves children and teenagers through track and field, martial arts, dance, and recreational activities. It started in a makeshift locker room and grew into its own headquarters. It runs on donations from individuals, companies, and projects approved under Brazil’s tax incentive laws for sports and culture.

A first website was put together quickly, in a single day, just to claim the address. A few days later work began on the definitive version, with one goal that drove every decision: raise funds. From people who give a little and from people who can direct part of their taxes.

The pain

Nonprofits compete for attention with causes from all over the country, and donors have a question nobody says out loud: does this money actually get there? Without an answer to that question, no donate button works.

There was also an audience almost no small nonprofit website serves: companies and individuals who can direct part of their income tax to incentivized projects. They don’t know they can, and when they do, they don’t know how.

The research

The architecture was designed around three questions visitors arrive with:

What do you do? About us, history, headquarters, organizational structure, and one page per project, with its mission, activities, and numbers.
Can I trust you? A whole transparency area: financial reporting with each year’s balance sheets and statements to view and download, official recognitions, and certifications.
How can I help? Three paths, from lightest to most committed: a quick donation via Pix (Brazil’s instant payment system), recurring donations, and volunteering. And a fourth, for those with taxes to direct: the tax incentive law.

The menu follows that order. And the “Quero Doar” (I want to donate) button stays pinned to the top, highlighted, on every page.

Home page banner with a photo of a child, a headline about the association, and counters for years of history and lives impacted — The banner shows who is served. The donate button never leaves the top.

Association introduction section with a founding timeline and an institutional video — The short history, with dates, before any ask.

The solution

The Horizontes home page is a summary of the whole site: who we are, the mission in one sentence, the projects, the ways to donate, the financial reporting, and the latest news.

Cards for Associação Horizontes' three projects with activity photos and lists of what each one offers — Each project with real activity photos and what the kids do there. Donors want to see where the money goes.

Donating was designed to be frictionless. Pix shows up with a key to copy and a QR code in a modal; recurring donations and volunteering open a short interest form.

Donation section with a quick Pix donation and recurring donations — Pix with one click to copy, QR code in a modal. A one-time donation can't be a chore.

Financial reporting is the trust piece. Each year’s balance sheets sit side by side, each with view and download. Anyone who wants to check opens the document themselves, without the team having to send anything. Every new year is just one more card: the most recent statements went in months after launch, without touching the structure.

Financial reporting page with cards for each year's balance sheets, with view and download buttons — One card per year with the document. Transparency donors can check without having to ask.

The tax incentive page explains, in taxpayer language, that part of the tax owed can go to social projects, and walks through the steps.

Tax incentive law page with a call to direct part of your income tax — The audience that can contribute the most is the one least aware it can. A whole page for them.

Each project has its own page, which also helps with reporting to sponsors.

There’s also a news section with a page per story, recording events, certifications, and achievements and keeping the site alive between campaigns.

On mobile, the banner, donations, and transparency keep the same reading order.

Three mobile screens of the site: banner, Pix donation, and financial reporting — On mobile, the Pix donation is a thumb's reach away.

How it was built

React with Vite and Tailwind, generated and iterated with an AI interface builder and refined by hand. There are more than fifteen pages: institutional pages, three projects, transparency, financial reporting, donations, tax incentive law, news with detail pages, contact, privacy, and terms of use. The contact form sends through an email script on the association’s own hosting, with server-side validation and a per-address send limit to hold back spam. SEO with sitemap, robots, and social share images. A cookie banner with preferences.

What I took from this project

For a nonprofit, transparency is the sales pitch. The financial reporting page persuades more than any impact statement.
Giving has steps. One-time Pix, recurring donations, volunteering, and the tax incentive law are different asks for different people. Putting them all behind the same button wastes the biggest ones.
Content that changes every year needs a fixed home. Annual documents, news, and banner slides go in without rebuilding pages. That’s what kept the site up to date after handoff.
First live, then done right. The one-day version claimed the address; the definitive one had time to be thought through.