I had the pleasure of partnering with Chris Flitter, the cofounder of, to redesign her nonprofit’s website. This post is a behind-the-scenes look at our design process.

TEAM: Chris Flitter (stakeholder), Jennie Lambert (developer), and myself (designer).

TIMEFRAME: October 2016 — March 2017.

Poverty does not end when a family or veteran escapes homelessness and crisis and moves into an empty apartment. Chris and Donna founded a 501(c)(3) nonprofit to do something for families in tough situations. They started recruiting volunteers, donors, and corporate partners to donate furniture, household items, and new mattresses to local families who deserve a safe, warm, and comfortable home.

Since 2013, Grateful Gatherings has connected 600+ volunteers to serve 80+ families in the Bay Area to date.

For your time and money, it is hard to find more immediate impact in the local community.

Upworthy created a video about Grateful Gatherings in 2017, which we now feature on the website.

Project Background

The two cofounders were bogged down with manual tasks coordinating email inquires, SignUpGenius forms, website content, paper checks sent in the mail, blog posts, newsletters, social media posts, and ongoing, daily operations to run the organization. The old WordPress website was an abandoned mess. Links did not work, duplicate photos were used side-by-side as placeholders, content was too wordy, and the site lacked any clear calls to action for any of the target personas. The website was not connected to MailChimp, PayPal, or SignUpGenius.

The “Before” Shot: Assessment notes from the original homepage.


  • FOR THE COFOUNDERS: Redesign the website in a Wordpress template so that the cofounders are able to update content and photos on an ongoing basis without outside help.
  • FOR BACKEND INTEGRATION: Connect the website to contact forms, SignUpGenius, and PayPal so the cofounders can scale the organization’s capacity.
  • FOR VOLUNTEERS AND DONORS: 1) Design a more compelling website to attract new volunteers and donors, 2) write actionable and engaging content to explain how people can get involved, and 3) ultimately increase the number of people who sign up to volunteer or donate.
  • FOR CORPORATE PARTNERS: 1) Feature the existing partners with more prominence and 2) help recruit additional partners.
  • FOR SOCIAL SERVICE AGENCIES: Create a standardized, online form that can be filled out by the partner agencies to identify and prioritize families in need.


  • DEADLINE: Launch the site by March 2017 due to two scheduled events: 1) a planned fundraiser and 2) the release of an Upworthy campaign, which were both scheduled in March and would be a big driver of new volunteers and donors to the site.
  • LOGO: Keep the ‘purple and peach’ logo, but try to make the color palette less feminine.
  • WORDPRESS TEMPLATE: The site needed to utilize WordPress so that the cofounders could edit content or images and publish blog posts.
  • CORPORATE PARTNERSHIPS: The site needed to do a better job featuring the corporate partners.

Design Principles

  • USER-CENTERED DESIGN: The old site was heavily focused on “About us.” Instead, the cofounders wanted the new site to speak directly to potential volunteers and partners to increase recruitment efforts and community impact.
  • FLEXIBILITY: The design needed to be flexible on the front and back stage. On the front stage, visitors needed to understand the range of flexible volunteer opportunities… 1) volunteer in person or online, 2) donate goods or money, 3) volunteer as an individual or group, and 4) support an existing effort or plan a new Gathering. Back stage, the cofounders needed the ability to update content and images online without outside help to promote opportunities for potential and returning volunteers.
  • IMMEDIATE COMMUNITY IMPACT: Content and design needed to focus on immediate, local community impact to families in need.
  • ACTION ORIENTED: The site needed to promote volunteer opportunities for individuals, groups of friends, families, and companies to do something in a tangible way besides “donating money to a good cause.”


“Let there be light!” — Grateful Gatherings volunteer

“When we go into these families homes, we are not going in as a bunch of haves, to help a bunch of have nots. That is not who we are. We are friends and family coming to help families at a time when they need a little help.” — Donna Somerville

  • PRIMARY PERSONA: Volunteers — Individuals and Groups
  • SECONDARY PERSONA: Corporate Partners
  • SECONDARY PERSONA: Financial Donors
  • Families in need in the San Francisco Bay Area
  • Social Service Agency Account Coordinators
  • Grateful Gatherings employees — Chris and Donna

User Research

My favorite aspect of this project was conducting user research. Chris was completely open to me reaching out to her power users and general user base for interviews and surveys.

ONLINE SURVEY: I was able to send a Google Forms survey to 175 users who were on Chris’ newsletter and eblast list. 24 people responded (14% response rate). About half of the respondents had previously volunteered, and the other half had not yet attended an event (but planned to do so). We gained insights from the two distinctive groups that we had not previously considered.

Of the 175 users emailed the survey, 24 people responded (14% response rate).

The best insights came from people’s responses about “motivations to support Grateful Gatherings.” Responses directly impacted content strategy, calls to action, and the narrative on the homepage.

Here is a sampling of survey responses:

“I support Grateful Gatherings because we can immediately help those in need, in local community.” — Survey response

“Volunteering [with Grateful Gatherings is a] great way for my family to work together to help a family. My kids become so much more aware.” — Survey response

“I love donating something other than money” — Survey response

“It’s easy to help, they have a great concept, and their mission is simple yet inspiring and fast.”— Survey response

1:1 POWER USER INTERVIEWS: I then drafted an interview script, which Chris also reviewed and approved. I emailed 8 power users and did a Google Hangout with 4 of them. Questions focused on their volunteer and donation experiences. Their insights directly impacted our journey mapping activities to understand how the organization worked and where there were major opportunities for improvement.

8 power users were invited to provide feedback, and 4 completed 1:1 phone interviews.

Insights from the 1:1 power user interviews helped prioritize the top call to action on the site and the “Upcoming Gatherings” section. Chris and Donna had a hypothesis that “images” were the single most important thing needed to be promoted on the site. After talking with 4 power users, we learned that the power users like to see images (before and after shots, in particular) in the eblast recap after the event, but before the event just want to see the SignUpGenius and PayPal links for each Gathering, tied in with an easy to scan calendar view.

Here is a sampling of 1:1 interview responses:

“If I’m in town during a Gathering, I want to donate household goods. I want a calendar to see the upcoming events so that I can keep stuff organized in my garage for the event. But if I’m out of town, I want to donate cash.” — Power user interview

“I read every story about every family that Grateful Gatherings promotes. Their story is important to me. I like knowing that the family is getting the things they need most. Stories about the families are more important than images.” — Power user interview

“I’m a huge fan of SignupGenius — I use it at my kid’s school for sporting events, and it works well for Grateful Gatherings. Chris posts a list of a family and their needs, so you can see whether the items have been secured yet for the Gathering. I often see who already signed up for certain items so that I can coordinate with them. SignUpGenius is also great if I want to update or edit my donations.” — Power user interview

“Gatherings are a great way to expose my kids to other people’s situations. It’s eye opening. As a family, we’ve worked some grueling days at Gatherings, and other times it has been fast and easy because there are a lof of other volunteers.” — Power user interview

Alignment Mapping

After my first discovery meeting with Chris, I tried to map out the operations, key moments, and major pain points to figure out how the nonprofit works (or does not work).

Sample whiteboards capturing the discovery process and running list of questions.

I then used a higher fidelity map and tried to capture key moments (purple icons) alongside Chris’ technology touch points (peach icons) to see what was or was not working well.

Journey map v1 was used to understand how the organization works.

Service Mapping

After initial mapping efforts, I plotted the “personas” along the Y axis and “time” along the X axis to capture what I learned about Chris’ operations. I used swim lanes in the below service map to try to capture pain points, inefficiencies, and all the complexity in making a Gathering happen. I added major pain points in the bottom swim lane to call out areas of opportunity, which I checked and prioritized together with Chris.

Journey map v6 calls out the largest pain points in the bottom row.

Design Brainstorm

Once aligned on the flow and key moments, I took to the whiteboard to start brainstorming possible solutions for Chris’ needs.

Ideating on the whiteboard.


Here is a sampling of low fidelity wireframes that I put together in Sketch. Iterations progress from left to right. Here are three samples showing the progression of the homepage:

Wireframe snapshot, showing iterations progressing from left to right.

Visual Design

Chris required that I keep the purple and peach logo, but clean up the visual polish on the site. I recommended free Google fonts and a neutral blue color. I paired with my colleagues at Lab Zero for feedback, who provided feedback, advocated for even more white space, and helped me refine visual design. (Thanks Jim, Tracey, Dean, and Stacy!)

Color palette exploration to find a complimentary color to pair with the existing purple and peach.

As a visual exercise, Chris and I reviewed other sites that she appreciated and disliked. I gathered screenshots on an InVision board to guide the conversation. We found a lot of inspiration in lots of other sites:

Feeding Children Everywhere has an incredibly relevant homepage that, identical to Grateful Gatherings, balances three calls to action: host an event, donate cash, and donate items.

Visual exploration: Feeding Children Everywhere was another great example of “many calls to action” featured on the homepage for users: the site’s nav bar balanced donating money, stuff, time, or starting a partnership.

Visual exploration: provided inspiration for their contact forms, since Grateful Gatherings also has tricky furniture donation logistics.

Visual exploration:

NY-based Robin Hood was a great example of strong content strategy around similar issues of poverty and housing. Similar to the Bay Area, New York is large in geographic area, racially diverse, and has a large wealth divide between the wealthy and the less fortunate.

Visual exploration: The Robin Hood Foundation

Humans of New York was added to our list of inspiration due to their inspiring yet respectful efforts to share people’s stories.

Storytelling exploration: Humans of New York


Based on the user feedback, I spent a lot of time working on the “Upcoming Gatherings” section. Some considerations taken into account:

  • Each Gathering event could support up to four families per Saturday: one dropoff location, one moving truck, one morning shift of volunteers to collect the goods, and one afternoon shift to drop off the goods and set up the homes for the family recipients.
  • SignUpGenius was organized such that one “event” with a unique ID and URL was required per family: up to four links per Saturday. There was no view on SignUpGenius to see “all lamps needed by all families,” for example, making it tedious for volunteers to see how many of one type of item was needed per Gathering — something expressed in the interviews and survey.
  • SignUpGenius is used for both time and item donations: 1) sign up for work shifts and 2) sign up to donate certain items.
“Upcoming Gatherings” exploration, part 1.

Given these SignUpGenius constraints, I tried a number of ideas to show the date, location, and calls to action for both time and item donations to give users a better experience signing up for events. I also considered adding pictures. We decided to not include the image, due to concerns about possible and unintentional racism. We tried including an image of the empty apartment, instead of a picture of the family, but found it to be out of context. In user testing sessions, people did not know what the empty apartment picture was showing. We also realized it would be too much work for Chris to upload and maintain those images over time, so we went back to the drawing board.

“Upcoming Gatherings” exploration, part 2.

After round two of updates, we realized the “calendar” view was less prominent and needed to be better emphasized for users. I tried adding circular icons featuring the month and date. I explored various color options as well, keeping in mind how this section related to the rest of the homepage.

“Upcoming Gatherings” explorations, part 3.

After many rounds of iterations and feedback, we landing on the winning solution, shown below.

  • The H1 used the blue color to be consistent with the rest of the homepage
  • The large orange icons featured the month and date to give power users a quick way to plan on their calendars
  • The primary orange button was used for the SignUpGenius link (time and item donations), which speaks to user’s love that Grateful Gatherings asks for something other than money. But, for folks out of town, we featured the PayPal link with the white, secondary button as a fallback.
  • Given a Gathering can include up to four families per Saturday event, we decided to merge all four family’s needs onto one SignUpGenius link so that a donor could pick out “all lamps” to make the donation process more efficient.
The winning solution for the “Upcoming Gatherings” section, part 4.

Final Mockups

The Website “Before”

“Before” homepage.
“Before” How to Donate page.


If you have any feedback or questions, please drop us a line. We are always curious what people think of our work.

Looking for a Quality WordPress Developer?

If you are looking to hire a Wordpress developer, please consider Jennie Lambert. Based in California, she implemented Grateful Gathering’s site and did a phenomenal job integrating contact forms and SignUpGenius.

Want to Volunteer or Donate to Grateful Gatherings?

If you are moved by Grateful Gathering’s mission, consider volunteering or donating to their cause. Learn more at our new site!




Lead Product Designer working for the Democrats at the DNC (he/him)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Improving usability with a redesign

PART 2: User Experience Maps: A brand new point of view

Through the Grapevine: Finding Trusted Experts in a Hurry

Brown’s dining halls serve terrible, bland, poorly prepared food.

Design integrations for Storybook

14 Things Your Fab-House Needs to Know

UOC DCO Case Study

My experiences: GDS Introduction to Content Design on FutureLearn

Laptop with notebook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Clayton Hopkins

Clayton Hopkins

Lead Product Designer working for the Democrats at the DNC (he/him)

More from Medium

So what does a Design Producer actually do?

A good Design is selfless!

My foray into Mentorship — Part 1/2: How I got into Mentorship

An illustration of myself dipping a toe into a pool labeled “mentorship”

How to Advocate and Articulate User Experience!