Helping Teachers Tell Their Story Through a Redesign
DonorsChoose.org exists to connect donors who want to impact educational outcomes in the US with teachers who need materials or experiences for their students. We’re a two-sided platform, but almost all of the content on our site is created by our amazing teachers. Our model works best when teachers can tell their story in a compelling way that makes donors want to give — offering a glimpse into their classroom and the students they care so much about. As such, we’ve spent a lot of time and energy on the tools that enable this content creation.
Problems with the old design
We were asking a lot of our teachers. To create a project on DonorsChoose.org, teachers needed to provide a photo of their classroom, do some creative writing, and go shopping for the materials they needed for their classroom. It was stressful and time consuming for teachers!
The list of problems with the old project creation flow were plentiful, but as we did our research, some major themes emerged:
- Too many steps and too much of a time investment. Between school, lesson prep, and grading, teachers are busy enough. We needed to be more respectful of their time and make the whole process faster.
- Outdated visual design. This experience was a few years old and it was showing its age. The design was out of sync with the visual language used on DonorsChoose.org.
- Writing an essay is scary. Many teachers are not comfortable with writing an appeal for donations and we were asking them to do a whole lot of it, all in one shot.
- No inspiration. New teachers had a hard time understanding what tone to strike or how to approach their project. How can we expect teachers to create compelling content if we don’t show them what it looks like?
- It wasn’t mobile-friendly. Creating long-form content isn’t the best fit for mobile devices, but teachers often create their project over multiple sessions, pausing and restarting whenever they have free time. So the multi-device experience had to be consistent and tight.
Here’s what all the various screens looked like before our redesign:
And because of all of this, the number of teachers who actually got through the entire process and posted a project was low. Really low. Only 49% of teachers who started a project submitted it. I’m no math whiz, but I think that’s less than half. We knew we could do better and we owed our teachers a better experience.
Goals for our redesign
After looking at the metrics and interviewing teachers who used the old design, our overall approach crystallized pretty quickly: simplify! By removing a lot of the complexity, we could focus teachers on getting through the creation flow at a higher rate. We also wanted to set teachers up for success (getting their projects fully funded) by helping them tell their story in a meaningful way. Basically, we wanted:
- More projects
- Better content
- Happier teachers
Changes we made
Eliminating the unnecessary
The easiest path through the old project creation flow was thirteen steps, and many less common paths took even more steps. We whittled that down to seven total steps and reorganized them to feel less intimidating as well. For example, instead of a “tell your story” step where we asked teachers for four long form text fields in one shot, we trimmed it down to two pieces in the redesign and split them up.
Visual design
The old visual design had a complex layout with a lot of colors and distractions, which made it difficult to focus on the actual content. With the redesign, we moved to a single-column layout and far fewer colors with a cleaner visual hierarchy and a lot of whitespace. This allows teachers to scroll straight down each screen and focus on one piece of information at a time.
We also used a design technique called tunneling to keep teachers focused in the project creation experience by removing the main site navigation and all the distractions that came with it. This makes the act of creating a project feel like you’re expected to progress through the entire flow in one sitting.
Encouragement
Despite all of our efforts to simplify, project creation can still feel scary, especially to first-timers. We offered little pieces of encouragement throughout, both when teachers do little things like met the minimum word count in a text box or when they made it through an important step, like shopping.
Good examples & clear instructions
One thing we learned in our early user research was that first-time teachers had no frame of reference for what made a compelling project. To remedy that, we provided relevant good examples for every piece of writing we asked for, hand selected from successful projects from other teachers. We also offer helpful coaching tips that show the teacher is writing.
Editable preview before submitting
In the old design, editing content was a pain in the horns. In our early research we saw that teachers were frustrated that they had to jump around through the 13-step process to make edits one at a time. With our redesign, in addition showing exactly how the project would look on our site, we added the ability to make edits on the final “review your project” step. Additionally, we added validation to this view so we could easily flag fields that needed edits before submitting.
Outcome
We put our designs in front of real teachers throughout the redesign, because that’s how we do product at DonorsChoose.org, so we felt confident in these changes. Here are some of the key metrics we measured:
Conversion rate
The number of teachers getting through the project creation flow was the primary metric we used to define success for this project.
- Before: 49%
- After: 65%
This is an across-the-board measure, but we also looked carefully at all of the main project types (materials, class trips, visitors, special requests) and devices used (desktop, mobile, tablet) and the conversion rate lifted for each of those as well.
Time spent
For a standard project requesting classroom materials, we measured the cumulative time spent on each step in the process:
- Before: 22:31
- After: 11:09
As expected, the fact that there were now far fewer steps worked in our favor. The time spent on every step also sharply decreased, with one exception: the review and submit step. Teachers are now spending more time there, but in a healthy way that leads to better composed projects.
Remember, this doesn’t include the time spent shopping on third-party sites (which we can’t measure), but it reflects every step in the experience that is within our control. As a teacher-focused organization, we feel great about project creation being almost twice as efficient a process, especially because we felt like we were able to maintain and even improve overall project quality in the process.
Teacher satisfaction
The metrics looked great, but we always like to balance that with some qualitative analysis as well. The tricky thing about trying to measure the qualitative impact of this redesign is that teachers weren’t complaining about the old version. In fact, they were pretty happy with it. We measured the original experience using the System Usability Scale (SUS) and came up with a 91 from our teachers. Not too shabby! But we realized that teachers generally conflate the DonorsChoose.org experience as a whole (getting amazing stuff for their classrooms) with the experience of actually using our site.
To level the playing field, we measure the SUS for first-time teachers only, immediately after submitting their first project (before they get the goods).
- Before: 72
- After: 95
This was really heartening and showed that all of the user research we did throughout this project helped us stay on target with a solution that not only moved the right metrics, but gave teachers a more positive experience.
The work continues
Since the projects are the core of the DonorsChoose.org experience, project creation remains one of our top priorities as a product team. We’ve continued to iterate on the project creation experience since we first launched this redesign and plan on further optimizing everything and smoothing out the rough parts. Have you seen any great examples of designing for content creation? We’d love to see them in the comments.
