This is a demo built by Viridian Shift for A Step Beyond.
Book a call to get yours →Built Under Pressure, Designed to Last
How we gave a Chicago nonprofit a professional web presence in two weeks — and then came back to take it further.
01 The Challenge
Two audiences. One website. No time.
A Step Beyond is a women-led nonprofit doing real, tangible work in Chicago’s Bronzeville neighborhood — housing development, education, small business support, public health. They weren’t short on impact. They were short on time, short on a web presence, and short on a clear vision for how to present themselves online.
Nicole came to us with a unique problem that most nonprofits face but few articulate: the site had to serve two completely different audiences at the same time. On one side, community members who need to find the organization, understand what programs are available, and feel like this is a place built for them. On the other side, donors and funders who need to quickly understand the mission, see the impact, and find a clear path to give.
Most nonprofit websites fail one audience to serve the other. They either look like a corporate fundraising brochure (and alienate the community) or they look like a community bulletin board (and lose the donors). We needed to thread that needle.
On top of all that, there was a hard deadline. Events were happening, programs were running, and the organization needed a live site — not in a month, not “when we get to it.” Now.
02 Phase 1: The Rapid Build
Two weeks. From nothing to live.
We didn’t have the luxury of a long discovery phase. Nicole had a clear sense of what the organization does and who it serves — what she needed was someone to turn that into a real, functional website quickly and professionally.
- Full multi-page website Dedicated sections for the mission, all four program pillars (housing, education, small business, public health), impact stats, leadership bios, and a donor-facing support page.
- Extensive photo gallery A Step Beyond had been doing incredible work in the community — events, award ceremonies, panel discussions, performances — and none of it was visible online. We built a gallery system that could showcase the organization’s real-world presence.
- Dual-path navigation The site was structured so that community members and donors naturally find different content without the site feeling split or confusing. Programs and services are front and center for the community. Impact numbers and giving options are prominent for donors.
- Mobile-first responsive design The community A Step Beyond serves is predominantly mobile. Every page, every gallery image, every CTA was tested and optimized for phones first.
The site went live on time. It wasn’t perfect — Phase 1 never is — but it was professional, functional, and it gave the organization a real online presence for the first time.
03 Phase 2: The Redesign
Good enough isn’t good enough.
Phase 1 got the job done. But Nicole had a bigger vision, and once the immediate pressure was off, we started talking about what the site could be — not just functional, but memorable. Not just informative, but moving.
That’s where Phase 2 comes in. We’re currently redesigning the homepage from the ground up with a completely new design system that matches the emotional weight of what A Step Beyond actually does.
- Plum and gold palette Deep, warm plum tones paired with a rich gold accent. This isn’t the typical nonprofit blue-and-white. It’s distinctive, dignified, and it immediately signals that this organization takes itself seriously.
- Cinematic scroll experience Scroll-triggered animations, floating blob elements, a marquee ticker, and section transitions that pull the visitor through the page like a story. The homepage isn’t a brochure — it’s an experience.
- Editorial typography Playfair Display for display headings (warm, authoritative) paired with Plus Jakarta Sans for body text (modern, readable). The italic accent words in gold create a signature visual rhythm throughout the page.
- Impact-forward storytelling The new homepage leads with the mission, breaks into four program pillars with visual cards, then hits the visitor with hard impact numbers before introducing the founder and community voices. Every section builds the case for both involvement and donation.
- Dual CTA strategy “Support Our Mission” for donors and “Our Programs” for community members, both above the fold. The rest of the page serves both audiences naturally.
04 Design Details
The new homepage design system.
Color Palette
| Swatch | Name | Hex | Purpose |
|---|---|---|---|
| Plum | #3D3354 |
Primary background — warm, distinctive, dignified | |
| Deep Plum | #332A48 |
Darker sections and cards | |
| Gold | #C9A23C |
Accent — CTAs, highlights, accent text | |
| Warm Section | #3A2F50 |
Alternating section backgrounds | |
| White | #FFFFFF |
Primary text on dark backgrounds |
Typography
- Display: Playfair Display — warm editorial serif, italic gold accents for signature words
- Body: Plus Jakarta Sans — clean, modern, highly readable at all sizes
Signature Elements
- Floating gradient blobs that drift behind content, adding depth without distraction
- A continuous marquee ticker below the hero cycling through program areas
- Gold-accented “accent words” in italic serif throughout headings — a visual signature that ties the whole design together
- Scroll progress bar at the top of the page in a gold gradient
- Cursor glow effect on desktop for a premium interactive feel
05 The Dual-Audience Problem (Solved)
How we serve the community and the donors.
This was the hardest design challenge of the project. Here’s how we solved it:
For the community — The hero opens with “Building Stronger Communities, One Step at a Time” and a badge that says “Chicago 501(c)(3) Nonprofit.” The first CTA path is “Our Programs,” which leads directly to the four pillars: housing, education, small business, and public health. Each pillar has its own visual card with a clear description. A community member can understand what ASB does and how to access it within 10 seconds of landing on the page.
For donors and funders — The hero’s primary CTA is “Support Our Mission.” The impact section hits hard with real numbers. The founder section builds personal trust. The community voices section provides social proof. And the final section is a dedicated support block with three clear options: Donate, Volunteer, or Partner — each with its own description and CTA. A donor can go from “who is this?” to “here’s my money” in a single scroll.
For both — The photo gallery (from Phase 1) remains accessible from the main navigation. Nothing builds trust like seeing real people at real events doing real work. The gallery serves both audiences equally — community members see themselves reflected, and donors see exactly where their money goes.
Key Numbers
Turnaround
Images
Showcased
(Zero Templates)
06 What’s Next
Phase 2 is currently in progress.
The homepage redesign is built and in review. Once approved, we’ll roll the new design system across the full site — programs pages, gallery, about section, and the donor support flow. The goal is a cohesive experience that makes A Step Beyond look and feel like the serious, impactful organization it is.
Nicole came to us needing a website on a deadline. She’s leaving with a brand.
“I needed a website yesterday, and I got one that actually represented us. Now we’re building something even bigger — a site that matches the scale of what we’re doing in this community.”
— Nicole, Founder · A Step Beyond Community Development
Want results like this?
We build websites for nonprofits and community organizations that are done looking invisible. Fast turnaround. Custom design. Built to convert donors and serve your community at the same time.
Start a Project →