NYYC logoNYYC
Nonprofit Web Platform20244 Months

NYYC — New York Youth Club Digital Platform

Award-winning nonprofit platform empowering New York youth through mentorship, education, athletics, and community programs since 1998. Services: Web Development, UI/UX, Nonprofit Digital

NextjsReactNodejsFigmaGithub
Visit Site
NYYC — New York Youth Club Digital Platform preview
Section 01 · Overview

Overview

New York Youth Club (NYYC) is an award-winning nonprofit organization dedicated to empowering Black youth through structured development and community engagement programs since 1998. We built their full digital platform to bring their mission online — giving youth, parents, and donors a dynamic, engaging destination that reflects the energy and impact of everything NYYC does on the ground. From program signups and donations to a member portal, gallery, and contact system, the platform serves as NYYC's digital home base. With 25+ years of community impact, summer programs, mentorship, STEM, arts, and athletics, NYYC needed a platform as bold and forward-moving as the organization itself.

Overview visual
Feature 01

Youth-first nonprofit platform with donation, signup, and member login flows.

Feature 02

Dynamic program pages for education, athletics, arts, tech, and mentorship.

Feature 03

Integrated donation gateway — secure, tax-deductible, 100% to programs.

Feature 04

Gallery, contact, and community engagement sections driving ongoing participation.

The Challenge · Problem Statement

Problem Statement

NYYC had 25+ years of community impact but no digital presence to match it. Without a modern platform, they were losing potential donors, volunteers, and youth participants to friction — no easy way to sign up, donate, learn about programs, or connect with the organization online. Their mission was powerful but invisible to anyone beyond their immediate neighborhood.

User Painpoints

No Digital Presence

A 25-year-old organization with no modern website meant donors, parents, and youth couldn't find or engage with them online.

Lost Donations

Without a secure, frictionless donate flow, NYYC was missing recurring contributions from supporters who wanted to give.

Manual Signups

Program enrollment and event signups were handled manually, creating administrative bottlenecks for a lean nonprofit team.

Invisible Impact

Years of award-winning community work, testimonials, and gallery moments had no platform to showcase them to the world.

How We Build · Design Process

Design Process

Our proven 4-step approach to delivering products that actually ship.

  1. Step 01

    Discover

    User research, stakeholder interviews, and competitive analysis to ground every decision in evidence.

  2. Step 02

    Define

    Product hypothesis, user stories, and a prioritized scope we can all sign off on before a pixel is drawn.

  3. Step 03

    Design

    Style guide, high-fidelity wireframes, and clickable prototypes validated with real target users.

  4. Step 04

    Deliver

    Production-grade UI, component libraries, and a fully documented system your engineers can ship fast.

Section 04 · Our Solution

Our Solution

How we solved each pain point — with outcomes, not ambiguity.

  • Flagship Solution · 01

    Full Digital Platform

    End-to-end Next.js website with home, about, activities, goals, gallery, contact, signup, and login — every page optimized for engagement and accessibility.

  • Solution 02

    Integrated Donation Gateway

    Secure SSL-encrypted donation flow with tax-deductible confirmation, 100% fund transparency messaging, and recurring giving support.

  • Solution 03

    Program & Activity Showcase

    Dedicated pages for Education & Mentorship, Athletics, Creative Arts, Tech & Development, Leadership Council, and Community Action.

  • Solution 04

    Member Portal

    Youth login and signup system so members can register for programs, track participation, and stay connected to the club.

  • Solution 05

    Impact-Forward Design

    Bold, energetic visual identity with real photography, video hero background, testimonials, and a gallery that puts real faces to the mission.

Section 06 · Visual System

Color Palette & Typography

The visual language guiding every pixel.

Color Palette

  • Deep Black

    #0A0A0A

  • NYYC Red

    #E63946

  • Warm Gold

    #F4A11D

  • Pure White

    #FFFFFF

  • Light Grey

    #F5F5F5

Typography
Typography

Poppins

Bold · Semi Bold · Medium · Regular · Light

Aa Bb Cc · 0 1 2 3 4 5 6 7 8 9

Tech Stack

Technology Stack

The production-grade stack we used to ship this product — and exactly how each piece pulls its weight.

Framework

Next.js

How We Use

Full site framework — SSR for SEO-critical pages (home, about, programs), static generation for gallery and goals, and API routes for the contact form.

Benefit

Fast page loads and strong Google indexing are critical for a nonprofit that needs discoverability to attract donors and volunteers.

Backend

Node.js

How We Use

Express backend handles contact form submissions, member authentication, newsletter subscriptions, and donation webhook processing.

Benefit

Lightweight, fast API layer that keeps operational costs low — important for a budget-conscious nonprofit.

Design

Figma

How We Use

Full design system with bold youth-facing components, color tokens, mobile-first layouts, and high-fidelity prototypes delivered before a line of code was written.

Benefit

The client saw and approved the exact final look before development — zero redesign cycles.

DevOps

GitHub

How We Use

Version control, PR-based code reviews, and branch protection on main — keeping the codebase clean and deployments safe.

Benefit

Every update is peer-reviewed and rollback-ready — critical for a live platform handling real donations.

Outcomes · Results & Impact

Results & Impact

What NYYC shipped — and what it delivered.

  • 0+

    Years of Community Impact

  • 0(c)(3)

    Registered Nonprofit

  • 0%

    Donations Go to Programs

  • 0

    Core Program Tracks

Get a Quote