Compassion Connect Website

It started with a pain point

After I struggled to sign up to volunteer with Compassion Connect’s youth mentoring program, I offered to help with the website. Before the first call, I took some time to list out the problems I saw on the pages I had encountered.

• The website navigation is a mix of pages and page subheadings. Youth mentoring is hidden under Anti-trafficking.

• There’s good content on the Youth Mentoring page, but there is also poor visual hierarchy and not enough whitespace.

• All volunteer roles for Compassion are listed on the same page without side navigation. Unlike all other positions, roles for Youth Mentoring are listed on a PDF. This is a challenge for mobile users.

• The volunteer form asked for background information without distinguishing between types of volunteer roles. This was a turn-off.

Timeline

I was contacted by someone at Compassion who was happy to meet. They used some of my suggestions right away, and were interested in partnering to make other changes happen. My contact said she built the website, and it had grown with the nonprofit. She was transitioning out of the company, but had six weeks before she left. We made a plan based on that timeline and my ability to volunteer only a few hours a week.

• Volunteer help often leaves problems without solutions. I planned to make changes to the pages I encountered for my sign-up process.

• I focused on a narrow area to complete changes and evaluate them before my contact left.

• My experience in WP Bakery editing was helpful, but I worked on a draft page to make changes without them going live.

Wordpress

Website platforms add many constraints to design, and any editing need to take the entire system into account. I learned this as I started to look at changes to page, and gathered questions to ask my contact.

• Links: How did I change page names to be more clear without breaking links around the site? Is there a way to make those changes easily?

• Tabs: Without a navigation drawer, I used tabs to organize positions for each volunteer area. This streamlined the page but broke the current sub-menu. Is there a way to add another menu? Are all these positions current?

• Covid updates: What changes have been made to volunteering during 2020-21? Can families or groups volunteer? What age requirements are there?

• Style changes: The body font size across the site was larger than it needed to be, and made block content longer. Can we change that?

Changing contacts and project objectives

My contact had to leave three weeks early, but put me in touch with other people to try to implement the changes I made. We went back and forth for a month to talk about changes and options. While they wanted to help, they did not have the time to answer company-specific questions, and only one page was approved for publishing.

When I tried to set up a test to show the impact of my work, I realized that the changes I made were focused on UI and would not have enough of a contrast for A/B testing. It was a dead-end, so I ended the project with the option to look at it again in the future when I could work alongside another person in the company.