Team Relax MC

A club that grew into a charity, with a website still talking like a club

Team Relax MC started as friends who climbed together. Over time they began carrying supplies to communities living below the peaks they climbed: feeding programs, school supplies, medical support. The work now depends on strangers. Donors need to believe their money is used well. Volunteers need to know what role they could play. Communities need to see the group is accountable.

The club’s leader is a friend of John Jovence Laspinas, the back-end developer on our team of 2. The brief was a public site the officers could keep current on their own, without a developer. As a nonprofit, the club had no budget for running costs, so we built everything on free plans.

3 visitors, 3 questions

Visitor	Their question	What they need
Donor / sponsor	“If I give ₱5,000, where does it actually go?”	Proof, not adjectives. Totals, categories and a way to ask for more detail.
Would-be volunteer	“I’m not a mountaineer. Is there a place for me?”	Roles beyond climbing, and what’s coming up next.
Club officer (admin)	“I need to update the numbers without breaking anything.”	Non-technical. Edits budgets and activities in a CMS between outreach trips.

We met the club’s leader in person, and the ask was clear: a website that shows exactly where the money goes. The donor and volunteer questions above come from those conversations and the club’s goals; I didn’t interview donors or volunteers directly.

What I designed, and why

4 decisions that shaped the parts of the site I owned.

Show the money, including the part that isn’t spent yet

The Impact & Reports page leads with a fund-allocation donut: total donations, the share allocated, and a card for each spending category in pesos.

The choice I’d defend hardest is the grey Unallocated slice. Hiding unspent money would make the chart look tidier, but a donor who later learns about it would trust the page less. Showing it as “Pending Allocation” turns a gap into an honest status.

• A year switcher keeps the last 3 years 1 tap away without a long archive.
• Each category shows the peso amount first. Percentages are secondary, because donors think in money.
• “Request a Personalized Report” sits directly under the chart for anyone who wants more.

Figures shown are sample data entered in the CMS during development.

Make the CMS impossible to get wrong

A transparency page is only trustworthy if the numbers add up. The officers updating it are climbers, not accountants, so I designed a custom editor for each budget line in Sanity.

• Officers type the peso amount, and the percentage is calculated for them.
• A live line shows how much of the budget is still unallocated.
• Going over 100% turns the badge red and explains the fix in plain words.
• If the yearly total is missing, the editor asks for it first.

This turned a data-integrity rule into interface feedback, so the public chart can’t show 112%.

Label

Water

Amount (₱)

60,000

Calculated percentage of total 32.27%

Remaining unallocated: 6.71%

Label

Water

Amount (₱)

80,000

Calculated percentage of total 43.02%

⚠ Over-allocated by 4.04%. Reduce this item's amount.

Replace grids that shrink with a deck you scroll through

On desktop the landing page uses a 3-column stats row and a 7-tile photo bento. On a phone, both collapsed into a long, flat column where each number or photo lost its weight.

I built a reusable stacking-card pattern instead. The section pins to the screen, and each scroll brings the next card up over the last with a slight tilt, like photos dropped on a table. 1 idea per screen, with the “Become a Volunteer” card always last.

• Each card gets 1 screen of scroll, so the pace stays steady.
• An 8px peek keeps earlier cards visible, so people know there’s a stack.
• 1 component serves the stats, the photo bento and the team section.

1 contact page, 3 clear intents

Every call to action on the site, whether sponsor, volunteer or request a report, leads to a single Contact page. It opens by asking what the visitor wants to do: Donate, Request Form (for a report) or Become a Volunteer.

For volunteers, the form names roles beyond climbing: Climber / Ground Team, Medical Support, Logistics & Supply, Remote / Admin Support, or Open to Any Role. That answers the “Is there a place for me?” question before anyone has to ask it.

Activities follow the same thinking. Each outreach is a CMS entry with a status (Upcoming, On Going, Completed). The Activities page lists them with status filters, and the Impact page shows the milestones as a timeline you filter by year.

Forest and ember

Deep forest green stands for the mountains and steadiness. Ember orange marks calls to action, section labels and what’s coming up next. Headlines in Playfair Display give the club’s stories warmth, and DM Sans keeps forms and figures easy to read.

Token	Value	Role
Emerald 950	#022C22	Deep backgrounds, and the Completed status
Emerald 900	#064E3B	Surfaces and section bands
Orange 600	#EA580C	Calls to action, section labels, timeline markers and the Upcoming status
Amber 500	#F59E0B	The On Going status
Stone 950	#0C0A09	Text

• Headings: Playfair Display
• Body and UI: DM Sans
• Logo: Archivo Black

In the launched site these fonts never actually loaded, which I only found in the revamp audit below.

The site at launch

Working with the client

The leader set 1 goal, transparency about where the money goes, and left the layout, look and feel to us. That freedom meant every design decision above was ours to make and defend, which is why each one is tied back to a donor, volunteer or officer question.

At launch

The club now has 1 place to show its impact and take in help, and officers update budgets and activities themselves in the CMS.

The site is live at teamrelax.netlify.app. Visitors can see who the club is and exactly where donations go, by year and by category. I don’t have visitor or inquiry numbers to share yet.

The revamp

In October 2026, on my own initiative, I went back to the live site and audited it page by page. Building v1 quickly had left problems that screenshots never showed:

• The brand fonts never loaded. They were declared in the theme but never imported, so every visitor saw system fallbacks.
• The Contact page couldn’t send anything. Its form fields had been removed in an earlier change, and the Send Message button had an empty link.
• Body text defaulted to near-white on a cream background, so any text without its own colour was invisible.
• The numbers disagreed. The Impact page said 42 mountains and 120 members, its stats band said 12+ peaks, and Home said 45 missions.
• Small things added up: emoji as icons, 2 orange bands competing for attention, 11px nav links, and a mobile menu you couldn’t close with Escape.

I wrote the findings into a revamp plan with goals, a type and spacing system, and a page-by-page order of work, then rebuilt the site on a branch, 1 page at a time.

Direction. I borrowed the look, trust signals and always-visible Donate button of fundraising sites like GoGetFunding and WhyDonate, but not their online checkout. Giving stays personal, through Messenger, email or phone, because that’s how the club handles donations. Pages became brighter with the same brand colours: green for structure, orange only for actions.

What changed, page by page

• Impact. The donut became a stacked bar with a table beside it: distinct colours, the percentage and peso amount for each category, and “Not yet allocated” for the unspent share. The totals now come from 1 shared source, so Home, Donate and Impact can’t disagree.
• Contact. It’s now a path picker: Donate, Volunteer or Request a report, which changes the form and the steps beside it. With no backend, sending opens the visitor’s email app or Messenger with the message already written, and a Copy message fallback covers the case where no app opens. Errors show inline and move focus to the first one.
• Activities. Filters sit in their own row with a count on each, keep the choice in the link so a filtered view can be shared, and every empty filter explains what to do instead.
• Everywhere. Line icons instead of emoji, a skip link, a mobile menu with Escape and focus handling, and support for reduced motion. I removed the stacking cards I designed for v1: they had no reduced-motion fallback, and a plain grid now works at every size.

Results. Lighthouse, mobile preset on a simulated slow 4G connection, measured on a local production build:

Page	Performance	Accessibility	Largest content loads in
Home	81 → 98	88 → 100	5.0 s → 2.5 s
Donate	80 → 97	93 → 100	5.0 s → 2.6 s
Activities	81 → 99	96 → 100	4.9 s → 2.3 s
Contact	82 → 98	96 → 100	4.7 s → 2.4 s
Impact	89 → 97	93 → 100	3.5 s → 2.6 s
About	77 → 96	96 → 100	6.0 s → 2.8 s

SEO went from 91 to 100 on every page. The biggest single win was the favicon: a 400 KB image hidden inside an SVG, loaded first on every page, now a 3 KB PNG.

The revamp is finished and waiting to deploy, so these are local numbers. I’ll re-measure on the live site once it’s out.

What I’d do next

1. Deploy the revamp and re-measure on the live site with PageSpeed Insights, where hosting and caching will differ from my local build.
2. Test the transparency page with real donors. I’d check whether people read the bar correctly, and whether showing unallocated money makes them trust the page more or less.
3. Guide CMS wording too. The editor protects the math, but not the labels: a category typed as “Grocert” still shows on the public page. Set categories and consistent casing would fix that.
4. Fix the numbers at the source. The site says 45 missions, but the CMS holds 11. The totals should come from the CMS, so they update with every mission.