Kitchens for Good: Rebuilding a $10M nonprofit's website to match its scale
- Role
- UX Designer
- Timeline
- 10 weeks
- Team
- 1 Project Manager, 1 Marketer, 1 Visual Designer, 2 UX Designers, 1 Web Developer, 2 Client Contacts
- Tools
- Figma, WordPress
Overview
Overview
Kitchens for Good runs state-certified culinary and entrepreneurship apprenticeships that help people facing barriers to employment build lasting careers. Over the past decade, the organization scaled from a small local program into a $10 million nonprofit with a multi-program model, but its digital presence never caught up.
When KFG's leadership began looking for a design partner to close that gap, I joined as the UX designer on a small student-led team, drawn to the project because it wasn't a cosmetic refresh. It was a chance to fix something that was actively costing the organization applicants and donations.
The Problem
KFG's website and branding hadn't kept pace with the organization's growth. The visual identity felt fragmented and inconsistent across pages.
For a $10M nonprofit competing for donor trust and apprentice applicants, that gap wasn't just cosmetic. It was a credibility and conversion problem. I needed to know exactly where the roadblocks were happening and for whom.
Discovery
- Task-based interviews
- 20
- Survey responses
- 19
I ran 20 task-based interviews and collected 19 survey responses to evaluate navigation friction, brand perception, and mission clarity across KFG's key user groups. Several participants mistook KFG for a restaurant or a boba shop. Others described the visual brand as too juvenile for an organization operating at this scale. And "The Shop," a parent item bundling retail products, class registrations, and donations together, was a recurring source of confusion, since it forced three unrelated user intents into one unlabeled bucket.
Those findings pointed to two problems: the brand didn't communicate credibility, and the site's structure didn't match users' intuition.
To make sure I wasn't just guessing at a new structure, I ran a landscape review of established multi-program nonprofits to see how mature organizations handle complex content. A clear pattern emerged: strong nonprofit sites keep top-level navigation to 5 or 6 items and group actions under user-centered headers like "Get Involved" rather than headers that mirror internal org charts like "Capital Campaign." That confirmed what the interviews revealed. KFG's navigation was organized around internal business units, not around what a visitor was actually trying to accomplish. From there, I rebuilt the sitemap based on the user interviews instead of internal jargon.
Delivery
Before any wireframes existed, my co-designer and I tested multiple versions of the new sitemap directly with stakeholders, most critically KFG's CEO. Through several rounds of feedback, we landed on a structure that cut down the number of navbar selections and cleanly separated pathways for two very different first-time visitors: prospective program applicants and donors who had never been to the site before.
With the sitemap approved, we moved into mid-fidelity wireframes in Figma. This stage forced us to decide what content actually earned space on a page versus what was cluttering it. I designed the Social Enterprise and Support Us sections myself, 18 pages in total. Then we moved into high-fidelity design, where I applied the visual design team's new style guide and caught color contrast issues in the original guide, correcting them for accessibility.
From there, my web developer began implementing the high-fidelity designs in WordPress. That platform choice wasn't intuitive. We considered moving to a more modern site builder like Squarespace, but KFG's existing apprentice application forms and databases were built in WordPress, and migrating them carried real risk of losing applicant data mid-transition. Staying on WordPress meant slower, less flexible tooling, but it protected infrastructure the organization depended on to run its core programs, which mattered more. Once my web developer implemented every page, I assisted him in making sure every page was responsive across mobile and tablet, working with viewport-based and rem units.
Impact
- Increase in donations
- 8%
- Increase in program applications
- 5%
The redesign improved discoverability of KFG's core programs and contributed to an 8% increase in donations and a 5% increase in program applications. For an organization whose growth depends directly on donor confidence and apprentice enrollment, those numbers translate to real operating capacity, not just better-looking pages.
Reflection
The biggest lesson from this project the importance of documentation. Once the engagement ended and KFG took over the site directly, small edits on their end, like swapping a photo or updating header text, introduced bugs, and padding disappeared in places. Part of the issue was that our team only ever had access to a staging environment, not the live site, which made it harder to anticipate what would break once KFG had editing control.
If I ran this project again, I'd build out clearer documentation, so the organization could maintain the site confidently without a designer or developer on call.