Episode Transcript

Ethan:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, we’re about as excited as the first day of school because we are here with Dan Betz and Tea Ho, who are here to talk to us about Donors Choose. Dan, Tea, thank you so much for joining us.

Dan:

Thanks for having us.

Tea:

Yea!

Karen:

But first, let me welcome our sponsor, FreshBooks. I personally have used FreshBooks to manage my invoicing for many years now. FreshBooks has made my life so much easier by helping me keep track of who has paid me, and who hasn’t. It’s been a great product for years, but now it’s even better, with an all new version redeisigned from the ground up. Now it’s even easier to send invoices, set up online payments, and manage expense reports. Their dashboard, notifications, and automated late payment reminders will help ensure you get paid on time. FreshBooks is offering a 30 day, unrestricted free trial to our listeners. To try them out, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section. They’re great, and you should totally try them out.

Ethan:

So before we dive in, maybe we could just take a moment to have you both introduce yourselves, tell us a little bit about what you do, and maybe tell us a little bit about Donors Choose for our listeners. Dan, would you like to go first?

Dan:

Definitely. Thanks again. My name is Dan Betz, I’m the design director at DonorsChoose.org. I’ve been here for about three years, and just to give you a little background about what we do: DonorsChoose.org is an educational non-profit for supporting US public schools. You can think of us as sort of like a Kickstarter for classrooms, even though we’ve been around since the year 2000, which is before crowdfunding was even a thing. Teachers basically come to our site to request the materials and experiences they need most for their classrooms—from books to technology, to standing desks or class trips. Donors can then browser our site and give to the projects that inspire them. As of this year, we’ve brought in over $540 million to American classrooms and reached over twenty million students.

Tea:

I’m Tea Ho, and I’m a product designer at DonorsChoose.org. Before I started working with the team here, I was a web developer and then a product designer at a few different start-ups. But I knew I wanted to work in social good and was lucky to step into DonorsChoose.org, because even though we’re a non-profit, we have this great product and engineering team that I find just as strong as any of the start-ups where I worked at before. I didn’t have to create the tech team here. I got to join twelve engineers, our product manager, design director, user researcher, data scientist, and it really just marries everything I love about social good and start-ups.

Ethan:

Well, that is wonderful, and once again, welcome to you both. So, I’d love to hear a little bit more about how this redesign happened and, more specifically, why there was a decision to go actually go responsive. I’m just curious to hear if there were any discussions around whether not responsive design was the right approach, or was it more or less a given from day one.

Dan:

It’s funny you mentioned the redesign like it was this event. Like I mentioned, I’ve been here for about three years, but DonorsChoose has been in existence for about seventeen years now. So when I stepped into my role here, the way I always describe it to people is I basically inherited fifteen years of design debt. Because despite being an awesome model and having a really great engineering team like Tea said, I feel like we never had someone in the role of bringing the user experience together. So the site was not great, but our donors were willing to suffer our less-than-perfect experience to do some good because they felt really tied to the classrooms they were giving to, and obviously our teachers were willing to go through a not-great experience to get their stuff in, because they just saw the pot of gold at the end of the rainbow, which was getting this amazing stuff for their classroom and for their students.

So the redesign, it’s still going on actually, we’re just kind of going through everything and paying down this design debt. We’ve always been responsive as long as I’ve been here, it was just not really well-optimized for mobile, if that’s the right way to say it. So yeah, the approach we’ve been taking is to sort of work through the core experiences for both our donors and our teachers, and to make sure that the different touchpoints work on the appropriate device.

For example, a lot of the content on our site is created by our teachers, so they’re creating projects and telling their story about, “This is what I need for my classroom,” and a lot of that happens on a desktop computer, as you would imagine, because they’re writing long-form content. And then when they create these classroom projects and send them out into the world, a lot of that sharing happens through social, or email, or other ways of just standard sharing on the web. So the people who come in through those venues are generally on mobile devices, so we have to think through how they’re first seeing all this content, and we kind of optimize for that experience.

Karen:

I’d love to know how you planned and scoped this project or all of these initiatives that you’re working on. How did you know what you were going to change and how did you know what that might mean in terms of timing and how you might plan out the work of the people on your team?

Dan:

One of the differences of working at a resource-constrained non-profit as opposed to working at a start-up is that we’re not beholden to these deadlines where for this quarter we have to have this performance. We can take a little bit more of a measured approach with everything, so we’re really looking at the long game here. Like I said, I’ve been here for about three years and we’re still working on this big redesign. But the way we’ve prioritized and planned it out is by focusing on that core experience.

One of the first things we did was to go through and tighten up the checkout flow a little bit and to, again, smooth it out on mobile especially and make sure that we’re catching all the low-hanging fruit. And then we kind of worked backwards through the donor experience of, Okay, now let’s make sure the project page where the donors read the story of the teacher and feel the connection to the classroom—let’s make sure that part is as strong as possible. Then we went backwards to search and to the home page. And for the teachers, the really big thing there is, like I mentioned, that content creation piece where they’re writing their project and they’re telling their story. So, that’s where we focused our first attention, on all of that stuff, and that’s kind of been trickling through the rest of the site and we’re kind of working out from there.

Ethan:

Dan, you’ve mentioned optimizing things for mobile a few times, and I guess I’d love to hear a little bit more about how your team does that. Specifically when you’re looking at some of these user flows, how do you make decisions about what to prioritize on different-sized screens based on what the user is actually trying to do?

Dan:

That’s a great question. I think a lot of times we take for granted that we’re a crowdfunding site and we’re about raising money for these classrooms and getting these teachers’ projects funded, so it’s all about the donation. But what I think we’re realizing now is that it might not be a fair assumption that mobile donors, for example, maybe that’s too much of an ask, to give money to this project right now as you share it on Facebook or whatever. So, Tea’s actually been doing a lot of experimentation around that, and maybe she could talk a little bit about other goals for mobile.

Tea:

So, since so many of our donors gets to our site through social, like Facebook, or through a friend of theirs who posted a project and then emailing them their project, some of them might be reaching the site when they’re on the go and they’re walking around. It’s tough to pull out your wallet when you’re out in the world, so we’ve thought about some lower touch, smaller asks that we can get donors to engage in. Whether that’s in saving a project for later, where we’ll email them a project and they can get to it when they’re sitting down at home later, or just getting them to share out the projects on their own social networks, we’ve really been focusing on that and A/B testing these lower touchpoints, and they’re doing way better. So, we’ve found that when we redesigned the teachers page, where they list out all of their projects and donors can come to that page and check for anything new that a teacher’s been up to, in our recent redesign of that page we were able to double the sharing metrics.

Ethan:

That’s fantastic. This might actually be a good time for me to ask a little bit about how design and implementation work together at Donors Choose. What kind of process do you put in place to actually realize some of these responsive features or products? Are you doing a lot of traditional layouts in tools like Sketch or Photoshop? Are you doing a lot more prototyping? How do you actually do this responsive work?

Tea:

Our two designers, me and Dan, are in it through every step of the process. So when we’re just scoping out the project and the problems, we work with our stakeholders to get all of that ironed out. Then Dan and I will do our initial wireframes a little differently; sometimes I’ll draw them out on paper or do really rough wireframes in Sketch. Dan, I think you usually bake them out a little bit more in Sketch with more cleaned up mocks?

Dan:

Yeah, I like to call them “beautiful wireframes.”

Tea:

[laughs] Right. And then we’ll do usability testing that’s pretty robust in order to get qualitative feedback on our early wireframes. And then from there, I’ll either do a code mock or actually build it out in engineering with the engineers, and then we’ll test again with real teachers and real data, or real donors and real data.

Dan:

Yeah, and I think something that Tea touched on, but I think it’s worth stating, is that both Tea and I are in the code building this stuff, so we’re not just making pictures of things. We’re what you call product designers in the modern world, where we’re actually helping to build the things that we design.

Tea:

Right, and we’ve been building out this design toolkit—a code design toolkit, so there are a lot of reusable snippets in our code that make building our products out even easier and faster because we can kind of just reuse these snippets and get things working in real code, in a real product, so we can test things and have it be usable.

Karen:

I’d like to ask about how you take into consideration the content that’s going to be created, especially because this is a case of user-generated content where you’re not the ones actually managing the content through a CMS, but rather you’re asking your donors or teachers to go in and fill out a set of forms on the front-end. How does that fit into a responsive redesign, where you may not be able to anticipate what your users are going to do?

Dan:

That’s definitely one of the challenges. I think before we undertook redesigning the process by which teachers create their project requests, we were not doing a very good job of giving them guidelines of what a good project essay is, or how’s the best way to tell your story, and as a result, they were kind of all over the place. We had some really, really amazing, compelling projects, and then some that were just kind of like a little flat. So, one of the challenges is just understanding that there is going to be this diversity, and they are going to be different.

I think our goal here as the platform is to just enable the teacher to tell their story. So, we recognize that they’re going to be different; some teachers are going to be very succinct, some are going to be very emotional and talk about personal stories and people will cry reading these essays. But I think our stance has been to really just strip back the tools and to focus on what is the right question to ask the teacher, and then providing them with a lot of good examples—but again, different kinds of good examples, so they can see, Oh, well this might be a good way to approach this, or that might work. This is a thing that’s hard to measure, but we feel like we’ve done a pretty good job of getting teachers to tell their story with our redesign. But it’s definitely something we’re always thinking about and always continuing to work on.

Karen:

And what about how you engage other people in your organization? So as you’re going through and making changes to the site, what sort of team do you have of stakeholders and business owners that need to review work-in-progress, and how did you manage those reviews?

Tea:

Right, so our design team doesn’t work in a silo. Like, it’s not just me and Dan sitting together, designing, and then doing design reviews where no one sees it until the end. We work on a per-project basis, and our teams are made up of people from across the organization. So, it’s usually like a designer, product manager, engineer, and then different members of our org are also involved depending on how much their team is affected by the work. In the beginning, we’ll lay out the problems with stakeholders, so they’re involved from the get-go. And I like to have daily or even weekly stand-ups, where every design iteration they’re there to see, and they’re also always updated on the result of usability testing. We can talk about whether our designs are meeting business goals, are there any concerns, and there’s just a lot of open communication throughout the entire process.

Ethan:

One of the big challenges that some organizations have, especially as they start doing more responsive work, is supporting all of these different browsers and devices that are out there. It’s one of the worst parts of the job, I guess. But how does Donors Choose talk about device support? How do you figure out what you’re actually supporting for this responsive design?

Dan:

That’s usually a really tough question and I think a hard problem for a lot of companies, but actually for us it’s pretty easy. As a resource-constrained non-profit, we can’t afford to just try to make everything pixel-perfect on every single device. So, we run our analytics and we pay attention to what our top devices and our screen sizes are, and we really just try to focus on that. I think one of the main differences of our site is it’s not like it’s one of these beautiful responsive flexible sites where you can drag it to any size and something magical happens, you know. There’s the nice clean desktop version, and then there’s the mobile version, which will fit to all the standard mobile sizes. So for us, we’re actually very lucky because of our top ten devices, nine of them are iPhones or the iPad in very standard sizes. So, that leaves about less than one percent for a non-Apple device as an audience share for us. We use BrowserStack to make sure it’s working, and we do test in different devices, but like I said, it’s pretty easy because we can focus mainly on Apple products.

Ethan:

Interesting. That’s great. I guess the other part of that equation is I’d be curious to know if performance and site speed are ever part of the design discussions that you’re having. So, getting things to fit on different-sized screens is definitely a wonderful part of the process, but do you focus on how fast they’re loading as well? And if so, how do you measure that?

Tea:

Absolutely. We really do care about performance, because when our teachers are accessing our site, a lot of them do it from their schools, and so they might be on a school network, which might be slower, or on older machines. So, we have to take into consideration that not everyone has the fastest network or the latest gadget when they’re accessing our site. We have done larger performance evaluations in order to test this. Dan, could you speak a little more to how we measure that with our engineers?

Dan:

Sure. That’s actually good timing because I was just wrapping our every-six-months performance testing party. So yeah, like Tea said, we really do care about our site speed, but we don’t have a web performance team here because we’re a small non-profit. So the way it works generally is we’ll just benchmark our main pages every six months or so and look for any slippage and to try to keep things tight, and look for mistakes that we can fix, and just go from there. We don’t have specific numbers we’re trying to hit, we are just sensitive to making everything as fast as possible, especially on mobile.

Karen:

Let me ask about how you measure the effectiveness or the success of the site overall. What sort of research or data or analytics are you looking at to know if the site is working for you and your teachers and your donors?

Tea:

We measure everything both qualitatively and quantitatively through surveys, usability testing, user research… And then any new feature that we release, no matter how big or small, we’ll do an A/B test, and we A/B test everything with Optimizely and we’ll monitor it during and after launch. We’ll also use Heap, Looker, FullStory, and Google Analytics to keep track of how things are performing before and after a redesign. We can really drill down to specific metrics to see how things are doing, whether conversion has improved, conversion for donors being donors making and completing a donation. For teachers, we can see if they are creating more projects, if they’re able to get through that project flow more quickly, if sharing has improved. And we have a really great data science team that has built out this amazing database that we have access to, and we really just look at a lot of different metrics over time to see if we’re doing better.

Dan:

Yeah, and another thing that we really care about as an org is teacher success. So, Tea mentioned a lot of the numbers that we watch, but teacher success is also a really good indicator of the overall health of our site and how things are working, and right now that’s hovering around seventy-five percent of projects being successfully funded. So, that’s a number that we also pay very close attention to and make sure, as we’re twiddling the knobs of all these different features, that we don’t hurt that in any way.

Ethan:

Well Dan, Tea, this has been a wonderful chat, but before we let you go, I would love to know if you happen to have any advice for our listeners. If someone out there is starting their own responsive design or redesign, is there one or two things that you’ve learned that you’d like to share with them?

Dan:

I think the allure of responsive design is, like I said before, all the cool stuff you can do… If you pull up your site, the RWD podcast site, it’s kind of just fun to play with and you can see all these amazing things happen at every different size. But you don’t have to start with something as ambitious as that. You can start small. Our site is just really responsive for the desktop view and the mobile view, and you can start there with one breakpoint and focus there, and then study how people are using it, see if people are viewing it in the portrait mode of iPad and it would make sense to add another view, and just really let the need dictate what you work on.

Tea:

I would add to that and say one of the things that really encouraged me to focus on responsive design was forcing myself to only access our site and the sites that I go to a lot through my phone. It’s easy to ignore the problems when you’re just working on your desktop and you have a really great and fast internet connection. But there have been times where I’ve tried to show a friend or family or make donations through our site on mobile, and it’s when I’m trying to do something that I need to do and I’m running into these pain points that drives home the point that it’s really important to focus on responsive design. So if you can, try to only use your phone to access the sites that you need to access for a couple of weeks and see if that makes a difference in how you feel.

Karen:

Well, I want to thank you both for taking some time out of your day to talk to Ethan and I. Ethan and I both really think Donors Choose is a fantastic product, and I’m really delighted to get a chance to hear a little bit more of the story about it. So, thank you.

Dan:

Thank you so much.

Tea:

Yea, thanks for having us.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design Podcast. Thanks also to our sponsor, Freshbooks. Go to Freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section for a 30-day free trial.

If your company wants to go responsive but you need help getting started, Karen and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more, and let us know if your company is interested.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks again for listening, and we’ll see you back here next week.