← All work
2026
Live
Nonprofit
Design system
Accessibility
One Earth One Chance
A first design system and a website rebuild for a Texas climate nonprofit, designed around what Google's Ad Grants review requires
Role
UX/Product Design Lead (volunteer)
Timeline
Aug 2026 to present
Services
Design System · Web Design · Content Structure · Accessibility
Tools
Figma, Squarespace, Claude, Perplexity
Industry
Nonprofit
Status
Live
Visit live site ↗
Overview
One Earth One Chance is a 501(c)(3) environmental nonprofit in Parker, Texas. It plants trees, runs cleanups and teaches sustainability across Dallas-Fort Worth. I joined as a volunteer design lead with two connected jobs: give the organization its first design system, and rebuild its Squarespace website so it could pass Google's Ad Grants review.
The visual redesign is live. The new navigation and rewritten content are designed and in progress.
Challenge
The site had two problems that looked separate and were not.
The first was visual. The only guidance was a one-page brand sheet (two fonts, four colors), and the site showed it: a small logo, white headlines over a busy photograph, a flat grey page and a brown Donate button.
The second was Google's. In July 2026 an audit found thin text on key pages, goals and testimonials locked inside images where crawlers cannot read them, four pages returning 404, a footer formatting bug and a mobile performance score of 38 out of 100. Ad Grants activation had been rejected.
Fixing the look would not clear the review, and fixing content alone would not either. They needed one plan.
Constraints
This is a volunteer project with a small team and no budget for new tools. The site stays on Squarespace. I would have preferred a platform with a CMS and more flexible templates, but the board chose Squarespace so that more volunteers could edit the site, and I designed within it. That meant working through Site Styles and design tokens rather than custom code.
The audit also set hard requirements: word-count floors for key pages, real text for every metric and quote, and working pages for contact and newsletters.
Process
Research and direction. I researched color, type and brand patterns for nonprofits on my own, using Perplexity to find and check sources. I kept the one thing that was already right, the green sampled from the logo, and changed the rest. Claude helped me build and present the proposal.
A system of roles, not just a palette. Five colors, each with one job: Evergreen for statements, Ivory and white for reading, Green for brand and growth, and Terracotta for a single primary action per page. Marcellus sets headlines and Inter sets body text. Buttons are pills, cards use a 12px radius and spacing follows an 8px grid. I built a library of 30+ components with variants, wrote it all as CSS design tokens, and documented it in an HTML style guide so non-designers can use it.
Homepage directions. I designed four homepage concepts for leadership to review, then built the templates and applied the tokens through Squarespace Site Styles.
One content plan. With a teammate, I wrote the final navigation and content plan: seven top-level items (Home, Impact, Programs, Education, Events, Partners, Join Us), Get Involved retired, a new Contact Us page, and Home merged with Goals and Testimonials. It replaces a menu of 20+ items and four dead ends, and includes a page-by-page brief that layers each audit requirement onto the agreed copy.
Rollout. The system became the reference for the website and for marketing materials, starting with a website announcement flyer.
Decisions & Tradeoffs
Roles instead of a free palette. The system's own notes say reaching for terracotta twice on one page is the most common way it gets misused. Limiting it to one action makes the system easy to apply and hard to break. The cost is that nobody can add a second accent without changing the system.
Design for the editors, not for me. Staying on Squarespace cost me flexibility in layout and type scale. It kept the site editable by volunteers who are not designers, which matters more for an organization that runs on them.
Content before polish. The audit showed that a good-looking page whose numbers sit inside images still fails. Every metric and quote becomes real text, with graphics as support.
One plan for two problems. I merged the design work and the audit requirements into a single plan so the relaunch can clear review once instead of being reworked twice.
Result
The redesigned look is live on oneearthonechance.org. On Google's mobile PageSpeed test, the performance score moved from 38 in the July audit to between 61 and 81 across repeated runs, Largest Contentful Paint from 21.9 s to between 4.2 s and 5.3 s, and First Contentful Paint from 13.0 s to between 2.6 s and 3.0 s. The homepage weight fell from about 3.4 MB to 1.75 MB. Mobile speed was a separate workstream owned by teammates, so I read these as the site's current state rather than my own result. Accessibility scores stay in the mid-90s.
The audit's target before reapplying is a score of 70 or higher, so there is more to do. I will add the Ad Grants review outcome here once the application is resubmitted.
What I’d Do Next
Finish the navigation and content rollout from the Sept 11 plan. Run a full accessibility audit with keyboard and screen reader testing, because the first review was preliminary and did not test contrast or keyboard use. Bring the flyers fully into the system, with the same type and button rules as the site. Resubmit for Ad Grants once mobile speed reaches the 70 target.
How I used AI. I used Perplexity to find and check sources and Claude to help build and present the design system proposal. The direction and decisions are mine.
Next project →
