Can you spot the difference in this redesign?

Tea Ho
Making DonorsChoose
3 min readAug 27, 2018

People love write-ups on huge redesigns with flashy before and afters, but every redesign doesn’t have to be like Anne Hathaway’s makeover in the Princess Diaries. Sometimes a redesign can feel more like a spot-the-difference puzzle from Highlights for Children and still make an impact.

Spot the Difference by Jason Sampson

At DonorsChoose.org, we’re not always building new features; we’re often focused on refining and improving our core features. One of these core features is our match-offer product, where foundations and corporate partners match donations on our site. That means that if a person gives $50 to a classroom project, another $50 will be applied so the teacher gets $100 for their students.

We were shouting out match-offers on our site, but we felt like we could do more to call out matching donations and make projects with match-offers even more appealing to potential donors. Could a match inspire more people to give to classrooms?

Can you spot the difference?

Changes on the Project Page

The original match callout vs. the redesign

In the original design on a project page, we had the 2x match badge next to the give box, but we didn’t call out the new cost-to-complete until you clicked into the give box (if you look closely, you’ll notice that the original design is in its focus state while the redesign is not).

With the redesign, we moved the 2x match badge so it sits besides the new, ever-present descriptive match callout. Prospective donors wouldn’t have to click into the box to see us highlight the new reduced cost-to-complete, making this much more discoverable.

Changes in Search

Original project card in search vs. the redesign

We tweaked the project cards on our search page, too. Originally, each card had a match-offer banner at the top. We hadn’t called out the new cost-to-complete on the card because a match-offer could potentially end before a project reaches full funding and we didn’t want to accidentally mislead teachers into thinking that their project would always be half-off.

Our redesign addressed this by changing the language from “Still Needed” to “For Now” when there’s a match-offer on a project. This implies that the cost-to-complete might change if a match-offer ends. We also moved the banner to the bottom of the project card to draw a stronger connection between the cost-to-complete and the match offer.

Small change, big impact

These changes might not seem like much at a glance, but during our A/B test, we found an increase in conversion across our site. There was a 6.5% increase in conversion from a teacher’s page and a 17.5% increase in people clicking to fully fund a project. All of this meant a 3.26% increase in revenue.

These weren’t drastic changes, but they made our match-offers more discoverable and inspired more people to donate. With the numbers up, we launched this change, just in time for a huge campaign we had called #BestSchoolDay.

On #BestSchoolDay in 2017, our partners made sure that every single project on our site had a match offer — that was 278K projects! Donors gave $2M to classrooms that day and many of them fully funded projects by clicking on our newly redesigned callout.

--

--