Meals for Unity is a non-profit organization based in New York City, providing warm meals and grocery distributions for Manhattan Chinatown's food-insecure and elderly residents.

Company

Meals for Unity

Role

Web Designer

Timeline

May 2025

Ongoing

Project Overview

Meals for Unity hired me at a pivotal moment in their growth, fresh off a good year for fundraising and expanding the digital team from 2 members running the website to 4 to accelerate improvements on website accessibility and overall aesthetic appeal.

As a relatively fresh organization in the non-profit scene of New York City, Meals for Unity recently found their foothold securing funding through grant applications and corporate sponsorships and are currently making an effort to use their site to reach the general public and entice more small donors.

I want to give the site a more polished look that feels less "template-y" and more sophisticated, reflective of the organization's maturity and growth from when it was founded during the COVID-19 era.

Challenges

Upon inheriting the design files, I conducted a brief accessibility audit where I confirmed my suspicion that for much of the color usage, especially in typography, it did not meet web accessibility standards due to low contrast. I also evaluated usage of alt text for images and icons, which was basically non-existent, and would not be properly processed via screen reader.

One of the other biggest areas for growth was an underwhelming donate page, lacking compelling language and visuals. We were not getting much traffic, if any, and very little of the previous year's fundraising had come from individual donors.

I conducted competitive research on non-profit organizations of similar age and size, plus research on much larger non-profits, and surveyed friends and family about what stood out on websites for orgs they felt were 1) trustworthy, and 2) worth donating to.

Issues in competitors that we can avoid:

  • Visuals are not very impressive — branding is there but it’s very minimal and not eye-catching

  • Too much text OR text is not formatted well and line length is too long, affecting readability

What we could do better based on survey feedback:

  • Better highlight things we do outside of meal/grocery distribution — partnerships, booths, in-office events

  • Showcase our process (writing notes, bagging meals, actual distribution)

  • Highlight impact of donations — where does the money go? How do we make it work for us?

First
Second
Before
After
First
Second
Before
After

Results

Meals for Unity's branding and color story lends itself to a certain youthfulness I rarely find in non-profit style guides.

I took inspiration from the illustration style used in the logo as well as on merchandise to give the website:

  • A playful but refined perspective on non-profit website design — using uncommon shapes and cutout images

  • An expanded color palette to include more shades of the signature cerulean blue and coral red

Those new additions to the M4U website means:

  • The diversity of the new color palette and usage in typography now passes accessibility standards. Where we once only used an illegible red text over beige background, we now have the option of white on navy blue or dark grey text on pale coral.

  • Feedback from a survey highlighted that it feels "more interesting and fun" compared to the original and also positively noted my usage of new shapes and images.

I asked survey members also for feedback on the redesigned donate page:

  • 100% of survey members agreed they felt more compelled to click through my redesign and would consider donating or volunteering, which upon full implementation would reduce the bounce rate and drive conversion on pages like "Get Involved" which directly impacts volunteer signup numbers and corporate sponsorship, and "Donate" which drives the decision of individual donors to make contributions.

Meals for Unity is a non-profit organization based in New York City, providing warm meals and grocery distributions for Manhattan Chinatown's food-insecure and elderly residents.

Company

Meals for Unity

Role

Web Designer

Timeline

May 2025

Ongoing

Project Overview

Meals for Unity hired me at a pivotal moment in their growth, fresh off a good year for fundraising and expanding the digital team from 2 members running the website to 4 to accelerate improvements on website accessibility and overall aesthetic appeal.

As a relatively fresh organization in the non-profit scene of New York City, Meals for Unity recently found their foothold securing funding through grant applications and corporate sponsorships and are currently making an effort to use their site to reach the general public and entice more small donors.

I want to give the site a more polished look that feels less "template-y" and more sophisticated, reflective of the organization's maturity and growth from when it was founded during the COVID-19 era.

Challenges

Upon inheriting the design files, I conducted a brief accessibility audit where I confirmed my suspicion that for much of the color usage, especially in typography, it did not meet web accessibility standards due to low contrast. I also evaluated usage of alt text for images and icons, which was basically non-existent, and would not be properly processed via screen reader.

One of the other biggest areas for growth was an underwhelming donate page, lacking compelling language and visuals. We were not getting much traffic, if any, and very little of the previous year's fundraising had come from individual donors.

I conducted competitive research on non-profit organizations of similar age and size, plus research on much larger non-profits, and surveyed friends and family about what stood out on websites for orgs they felt were 1) trustworthy, and 2) worth donating to.

Issues in competitors that we can avoid:

  • Visuals are not very impressive — branding is there but it’s very minimal and not eye-catching

  • Too much text OR text is not formatted well and line length is too long, affecting readability

What we could do better based on survey feedback:

  • Better highlight things we do outside of meal/grocery distribution — partnerships, booths, in-office events

  • Showcase our process (writing notes, bagging meals, actual distribution)

  • Highlight impact of donations — where does the money go? How do we make it work for us?

First
Second
Before
After
First
Second
Before
After

Results

Meals for Unity's branding and color story lends itself to a certain youthfulness I rarely find in non-profit style guides.

I took inspiration from the illustration style used in the logo as well as on merchandise to give the website:

  • A playful but refined perspective on non-profit website design — using uncommon shapes and cutout images

  • An expanded color palette to include more shades of the signature cerulean blue and coral red

Those new additions to the M4U website means:

  • The diversity of the new color palette and usage in typography now passes accessibility standards. Where we once only used an illegible red text over beige background, we now have the option of white on navy blue or dark grey text on pale coral.

  • Feedback from a survey highlighted that it feels "more interesting and fun" compared to the original and also positively noted my usage of new shapes and images.

I asked survey members also for feedback on the redesigned donate page:

  • 100% of survey members agreed they felt more compelled to click through my redesign and would consider donating or volunteering, which upon full implementation would reduce the bounce rate and drive conversion on pages like "Get Involved" which directly impacts volunteer signup numbers and corporate sponsorship, and "Donate" which drives the decision of individual donors to make contributions.