Good things happening here...
redesigning a nonprofit's website that engages new visitors and motivates them to get involved
client: meals for unity // role: ux researcher & Designer // team: independent freelance
Meals for Unity is a new nonprofit founded in April 2021 by three young Asian American Pacific Islander (AAPI) city dwellers. The organization was borne out of heartbreak and passion to do something to help the AAPI elderly community after the uptick in violence and hate crimes against them. The nonprofit has grown rapidly and gained overwhelming support in just a few months, but the website has not been updated to reflect those changes. I approached the Meals for Unity team to update the site to grow with the organization.
I primarily communicated with Sam A., the organization's Media Director, and one of the co-founders, Kat V., who had put together the original website. They shared with me that they wanted me to focus the redesign on attracting new donors and volunteers.
My first step in this project was to do an audit of the current site to identify areas of opportunity and room for improvement.
I sent a questionnaire to the team about their goals for the redesign and to gain a better understanding of the organization and their brand. Kat responded with some key points:
On long term goals
"Right now, we're hosting 1 event per month...We'd ideally like to expand to 3-4 meal events per month while also branching out to multiple boroughs in NYC and demographics.
On donors
"Corporate donors [are our current target audience] since they have bigger budgets. Recently [our donors have] been young professionals who are involved in Asian ERGs and would like their company to participate!"
Brand in a few words
"Impact & Community Driven, Friendly, Approachable, Happy, Wholesome, Colorful"
The Meals for Unity team wanted me to focus on outreach to new potential donors and volunteers, who weren't already familiar with the organization. I identified some provisional personas and sought to find real life participants that fit these qualities.
I found four participants that fit the bill and arranged Zoom calls to chat with them about how they like to volunteer and donate to nonprofits and charities.
Discovery
I noticed: Participants' primary way of discovering new nonprofits is through Instagram or word of mouth from friends.
Design takeaway: Meals for Unity should continue to use their Instagram as their primary source for outreach. Instead of making double the work for them, how can I incorporate their IG content onto the site?
Trust
I noticed: In order to trust a new nonprofit, participants liked to see photos of past events, mission statement, or a testimonial from someone they know or trust already
Design takeaway: Add testimonials from volunteers and more personal background about the staff. Compile all of the event photos to one place so they are easily accessible.
Impact
I noticed: Whether participants prefer to donate or volunteer, everyone finds it important to see the tangible and direct impact that their contribution makes
Design takeaway: The mission nature of the organization appeals to this already. Highlight mission and add content on the overall impact the org has had so far on the community
From my research and conversations with the Meals for Unity team, I refined my goals for the redesign to be:
Reorganize
Improve the information architecture through page consolidation, creation, and renaming
Inform
Add content on what it takes to be a volunteer, what the events look like, and what a volunteer day looks like
Humanize
Change copy to be more approachable, add content on the Meals for Unity team and testimonials from volunteers
Refresh
Update the UI and branding to convey the friendly and inviting image that the team described in their form
I assessed the current sitemap and decided to make changes to the information architecture on the site to be more user-centric. I eliminated unnecessary pages, added pages where effective, and renamed pages to be more intuitive for new visitors.
The current site already had a lot of wonderful content in terms of event photos, statistics about food insecurity, and the heartwarming story of how the organization was founded. However, it was geared towards visitors who already knew what the mission was, and what "meal events" were and entailed.
I wanted to design a new visitor experience where the homepage was comprehensive, with plenty of information to gain their trust and draw them in without having to click around.
Key changes I made were:
- Moving the Call to Action up front and center
- Adding prominent sections about mission and impact
- Cues on getting involved with volunteering
- Sizable real estate for synced Instagram feed
The current site had a volunteer sign-up link that went directly to an external google form. I added an intermediary page to provide a smoother transition that would make potential volunteers more comfortable
Added content:
- Types of volunteers the org needs
- What it takes to be a volunteer
- What the volunteer experience looks like
- Testimonials from volunteers
The current page featured the heartwarming story of how founder Brian Pham and his friends came together to start Meals for Unity. I wanted to add to this and fully introduce the team.
Key changes:
- Re-formatted the story and made some changes to the copy to make it more readable and compelling
- Added a section to feature the staff pictures and stories, which the team had posted to their Instagram, but not added to the site
Since Meals for Unity is mainly an event-based organization, the page about their meal events is highly visible. This page is also where the organization currently shares the impact of each event and thanks their partners and volunteers. I made some changes to reorganize and consolidate the information to be more new-visitor-friendly and ready for organization growth.
Key changes:
- Consolidated "Meal Events" page and nested "Past Events" into one page
- Built filtered system to organize stories about Past Events
The Meals for Unity team wanted to keep their existing logo and the shade of red used in the current UI. I was happy to maintain these assets, as the logo really spoke to my personal taste as a designer as being playful, personal and friendly. However, the rest of the website was currently in grayscale, which didn't match the logo or the organization's brand feel of "wholesome, colorful, and inviting" that Kat wrote about in the questionnaire.
Logo by Sam Adiwidjaja
In order to better represent the organization, I wanted to bring a lot of warmth and color into the site UI. I drew a lot upon the "Yolk Yellow" and brought in a deep, bold blue to complement the colors and add a degree of professionalism and maturity to the site, to make sure it looked trustworthy.
Before shipping the product to the Meals for Unity team, I conducted usability testing for the website redesign on Maze. Rather than walk through specific tasks, I wanted to collect overall impressions of the website, and test for the efficacy of my redesign goals. Is the site organized well, does it have enough information, is it personal and human, and does the branding feel fresh and on target? I collected 15 responses over two days. Testers all found the site easy to navigate and liked the testimonials and explanation of the volunteer work. They all agreed that they had enough information to be interested in donating and volunteering.
Key suggestions to implement afterwards were mostly content-based, such as providing a typical volunteer day schedule, a full budget of how Meals for Unity uses donations, and produce some video content of events or testimonials.
After making a few adjustments, I delivered the product to Sam and walked through my research and process. She responded positively to the design, and Meals for Unity is currently working to implement the changes. I will continue to work with the team as questions and concerns arise.
