How a Redesign Helped us Tell Teachers’ Stories and Drive Donations
One of the most important parts of any e-commerce or crowdfunding site is the item details where people can learn about the item that they’re purchasing or donating to. On Kickstarter, that’s a “project.” On Etsy, it’s called a “listing.” On DonorsChoose.org, we call it the “project page” — where teachers request the materials and experiences they need for their students.
The project page on DonorsChoose.org is a teacher’s primary fundraising tool because this is where donors come to give. It’s our #1 landing page — more people come to our site through project pages than through any other page on our site, including our homepage. Because of this, the project page has a lot of responsibility: it needs to quickly orient new visitors so they understand our crowdfunding model, it needs to build trust in our charitable platform, and it needs to compel donors to open up their wallet.
It had a lot of jobs to do, but here’s an example of what a project page looked like before the redesign:
Problems with the old design
There were a lot of issues with the old design, but here are the major ones:
- Poor visual hierarchy: At a glance, it was hard to tell what teachers were asking for. Most of the text was at the same size, making “Vendor shipping charges” about as prominent as the amount of money needed to fund the project or the description of what students actually need.
- How do I donate? This page’s primary goal is to get donations, but the donation box was shoved to the side without much visual prominence. Additionally, the progress bar and its labels were detached, which made the project lose its sense of momentum and urgency.
- The essay was all broken up: The teacher’s essay is where the teacher can really shine, but it was hidden behind multiple “more” links. These made it harder for people to read.
Scrolling down the page, it didn’t get better.
- Was that an invoice? For transparency’s sake, we wanted to show donors exactly how their money would be used to help teachers and students. That’s why there was an itemized list of materials requested complete with prices and vendor names, but though some people want to see this whole list, most people would find it overwhelming. The way it was presented also made it unclear if donors were expected to purchase these individual items themselves and send them to us, or if they were required to pay for the entire list themselves.
- The donor comments were in gray boxes similar to everything else on the page. It was easy to miss them. What should’ve appeared as a warm exchange between teacher and supporter instead looked like a sea of text.
We knew we could do more to help our teachers. We set out to redesign our project page so we could foster a connection between donor and classroom and bring in more donations for teachers.
Goals for our redesign
The primary metrics we wanted to improve were revenue and donation conversions. In order to improve those, we knew we’d need to:
- Create an emotional connection between donor and classroom.
- Make giving easy and clear.
- Keep our process and model transparent.
- Show a sense of community.
Behold! Our redesign!
To limit the scope of this project, we didn’t want to create any new features on the page — just update the existing features to be clearer, more usable, and more inspiring.
Here’s a side by side comparison of the project page before and after the redesign:
Let’s go through how we solved the problems we identified to land on our current solution.
Changes we made
1. Create a connection between donor and classroom.
During my early exploration phase, I took a look at other crowdfunding sites to get an idea of how they presented their details page. I immediately noticed that the general page layout on many crowdfunding sites were very similar: large photo or video on the left with give button on the right.
These pages seemed like they were created to leverage the fundraisers’ creative skills. The visual draw of the pages were beautiful photographs, eye-catching videos, professionally designed graphics —made by users who either were or could employ professional photographers, designers, videographers.
Our teachers are generally not professional photographers, graphic designers, or video producers. Many, however, are brilliant writers.
We know that asking people to reach into their pockets to help a stranger out can be a big ask, but we also know that it’s easier when people feel connected to those they’re helping.
Teachers were already writing essays that helped donors see themselves in students’ shoes, essays that explained groundbreaking teaching methods, essays that showed what the next generation is capable of. So we put the teachers’ words front and center.
We made the essay the focal point of a project page and visually separated the essay from the rest of the page to make the teacher’s voice more distinct from ours. We also made it easier to tell what the teacher was asking for at a glance by moving the “My students need” section to the top and increasing its visual weight. By highlighting parts of the essay, we made it easier to scan. A little attention to typography goes a long way.
2. Make giving easy and clear.
The single most impactful action that a person could take on the project page is to donate, so we wanted to make sure the give box was hard to miss.
We decided to put the give box right at the top so that people could see the call to action right away. Together, the progress bar, goal, and give button quickly orient visitors so they realize that they’re on a crowdfunding site, that they can contribute, and the urgency of the request.
Most people take a little convincing before they’re actually ready to donate, so we made this key section sticky — it follows visitors as they scroll through the page.
This way, the give button is there for visitors whenever they’re ready to donate. Whether they needed to read the entirety of the teacher’s essay before being convinced, or if they wanted to see exactly what items the teacher is requesting, they can give without having to scroll all the way back up to the page.
3. Keep things transparent.
Because a portion of our donors are more cautious and want to know exactly where their money is going (and because transparency is one of our core values), we couldn’t get rid of the intimidating “invoice” section altogether. However, there were a few things we did in order to make it less prominent and give it more clarity.
The first thing was making sure that donors didn’t think they had to go out and buy these individual items. We added a header titled “Where your donation goes” to clear that up.
We further minimized the emphasis on the nitty gritty by reducing the font-size a little and letting that section sink into the gray background a bit. Finally, if a list has more than three items, we truncate it. This way, those who want to see every detail can access it, but the list doesn’t dominate the page for the casual donor.
4. Highlighting our community.
Projects are brought to life thanks to the support of donors, corporate and foundation partners, teachers, and DonorsChoose.org staff. We wanted to highlight and humanize the contributions of all of these different folks.
We rounded the profile photos, which were previously square. Circles are shapes that feel friendlier and more organic than squares (nature has few hard edges and straight lines), so circular user photos are often used in social media to indicate people. We also shrunk down the profile photo and placed them right next to each person’s name to make it more clear that they were connected. The speech bubbles are a friendly way to differentiate donors’ and teachers’ voices from our own (similar to how we visually separated teachers’ essays from the rest of the page). Gentle indentation makes it easy to see which comments and actions are related.
This section is now titled “Project Activity,” and the comments are connected with timestamps on the left to make this feel like an active living timeline and give it a sense of momentum.
Outcome
We released the redesign in an A/B test and found a ~6% increase in conversion. At the time of the redesign, this 6% increase meant that we were able to bring approximately $3,000 extra dollars to classrooms everyday, or about $1.1MM per year. Success!
Since our initial redesign, we’ve continued to tweak the project page. We’ve made it even easier to fully fund projects with one click, we’ve highlighted our match offers in new ways to inspire donors to give, and we’ve given teachers additional tools to fundraise. Because this page is a key part of the DonorsChoose.org experience, we’ll continue to work on it as we refine and make our donation experience even better so that teachers have everything they need to give their students the best tools and experiences possible.
