UX & Visual Design, Website Development, WordPress

How do you get a single view of your customer, creating the most optimized user experience and response? Data integration is the solution. We walk through how we worked with Candid (formerly the Foundation Center) to crack their data integration and UX challenges with a new design and complex data integrations on GrantSpace.org.

See how both teams worked collaboratively to integrate a WordPress website with best-in-class, user-friendly software solutions, including Eventbrite, GoToWebinar, Bridge LMS, NetSuite and Stripe for a seamless experience that allows nonprofits to find and enroll in training courses.

Get an inside look into the website, the transformation process, and how cross-team collaboration was essential to success.

Transcript

Liz Murphy: Hello, welcome to our webinar today. I’m going to introduce Curtis Holland, who’s going to lead us off for today’s webinar.

Curtis Holland: Hello everybody. Welcome. We’re going to be supercharging your website. So, let’s get some integration stuff going.

I would like to begin by introducing our Candid people. Loren, if you want to go ahead and take it away.

Loren Rice:  Yeah. My name’s Loren Rice I’m lead web developer here at Candid.

Renee Westmoreland: And I’m Renee Westmoreland, managing director of web design and development at Candid, formerly Foundation Center. And I’ve been here for nearly 22 years.

Curtis Holland: And as Liz mentioned, my name is Curtis Holland. I am a tech lead here at Allegiance Group (formerly Beaconfire RED). And I’ve been here for about, I think it’s seven six years, six years now. For those who don’t know who we are, we are Allegiance Group (formerly Beaconfire RED).

We do analytics, marketing, UX, design, and tech. We have lots of tech expertise here and I will not read this entire slide.

Renee Westmoreland: Absolutely. Candid is new. And if you don’t know what it is, it’s because Candid was created just in February when Foundation Center and GuideStar joined forces to form a 501(C)(3) organization. And if you’re not familiar with Foundation Center and GuideStar, I’ll just say that bringing our companies together is important because trillions of dollars are spent by nonprofits and for nonprofits around the world.

And Candid finds out where the money comes from, where it goes and why it matters. And you can learn more at candid.work.

The project that we’re going to talk about today is a project of creating a new website for GrantSpace.org and GrantSpace is Candid’s learning community for the social sector. It was a website that was originally created with Beaconfire and Foundation Center in 2010 to give the social sector a dedicated place to learn and improve skills related to fundraising, building sustainable nonprofit, proposal writing, managing a nonprofit, and more.

GrantSpace had served us well for almost eight years. But, eight years is pretty old for a website. So, it was definitely time for a make-over, but our training offerings and other things that we were doing at the time and offering on the website had evolved. And systems that you use to do things related to training had evolved as well. Particularly systems for event registration and online learning. The problems that we were dealing with had to do with a number of different systems that our users had to interact with. For example, on the old site, customers had to take different paths depending on the sort of training they wish to register for.

They had to switch to a separate website to pay for the course they wanted to take, and staff had to manually gather enrollments and they also had to manually upload lists of attendees for webinars into webinar software, or for self-paced learning. There was a manual process for getting some information about the students in those classes and the various enrollments in all the different types of training we offered were stored in different systems. Particularly if it was a free training, which we offer a lot of free training, but we also offer training that you have to pay for. And so the systems for different enrollment process were in two different systems.

The content entry process for the staff who maintains the trainings was complicated in the CMS that we were using, and they would have to do multiple pieces of content entry. We didn’t 100% solve that problem, but we, made it a whole lot better for them.

The other problem is that the systems were not state-of-the-art, and we are a non-profit, we’re not an e-commerce or event software specialist. And sometimes because our systems were clunky or frustrating to the user, we had staff sometimes going outside of our system altogether and using Eventbrite or something similar to do registration for a particular class or event that they were offering.

You can imagine from an organizational standpoint, how complicated that would be, because that was data we just didn’t have. Some other details about this were that we had some systems in place already. Our learning management system is Bridge and we had already been using that. We were interested in building our own e-commerce API because there were other things that we were planning on offering in the future, other subscription products or things like APIs that you could purchase. And we hope to leverage some of the work that happened during this project, particularly the build of an e-commerce API, for things we might want to sell in the future.

We knew we had to integrate with our accounting system, which is NetSuite. And we dealt several years ago with the, harsh reality of PCI compliance, and we knew we didn’t want a story any credit cards our systems. We wanted to build a website where it was clear what training programs we offered and make it easy to sign up.

There were other goals, but we offer a number of different kinds of trainings. Live classroom trainings live webinars trainings, self-paced online classes in the Bridge system, and also recorded webinars and other training programs, and some videos and podcasts as well.

We, wanted information in one system so that we would know who took what training, so that we could get a clear view of user activity, assist our users as they moved through our curriculum, or at least direct them towards a future classes that would be helpful to them once we knew what they had already taken.

And that would really help us to market our classes and continue to evolve and develop our curriculum effectively. We needed the signup process to be clear and straightforward. Most of all we really wanted it to be a good process for the users to go through when signing up for a class. We also wanted to use software that leveraged the latest technological advances and because those kinds of e-commerce and event registration and other kinds of software related to learning had evolve so much, we wanted to use something that the audience has already felt somewhat familiar with because we all know what the standard best practices are. And when we encounter a website that has a funky purchase process, it’s hard to trust that source or to put your credit card into that website.

On the staff side we really needed a better user experience for the people who were actually managing the classes, entering the events, and also just dealing with checking off enrollment when at, the classes, and then communicating with the users after.

What we decided to do was design and build a website in-house. We had built up a lot of expertise over a period of time on building WordPress websites. But we wanted to partner with Allegiance Group (formerly Beaconfire RED) on the integration piece, pieces I should say, as you’ll see from what Curtis will show you, there are multiple integrations here, and we knew that was not our particular area of expertise.

And we had actually done complex integration projects with them in the past. What we did do in the leading up to this though, is we created with the team that oversees the content of GrantSpace and develops our training curriculum, created user journeys. They had already created personas.

We did a lot of investigation about what was working and not working on the old website. And from that we created a feature list. And then, because we had the requirement of wanting a commerce API that we could reuse and because there were systems already in place, our director of technology integration created a detailed technical workflow that I believe you’ll see a little bit later in the presentation. We already had some systems we knew we had to use or that we wanted to use, and those include NetSuite, our accounting system, the Bridge learning management system, we had recently selected GoToWebinar as our choice for live and recorded webinars.

And we had a lot of experience and success with building WordPress websites. So I’m going to turn it over to Curtis to talk about how Allegiance Group (formerly Beaconfire RED) validated those technologies and decided on some of the others that we used.

Curtis Holland: Thanks, Renee. I wanted to talk just really quickly about what we did regarding validation, how we validated these tools. As she mentioned, and I won’t read them again, these tools were used in the primary process of these new integrations. And we wanted to make sure that the APIs for these technologies would do what we needed them to do. So if someone were to purchase something, we would need to make sure that the API would allow us to create a customer in NetSuite, to create an order in NetSuite, or even a refund in NetSuite. We need to make sure that we can enter an address for taxation purposes. And we need to enter additional customer information so that they can do some reporting later. Regarding Bridge, which is the LMS or the learning management system, we needed to make sure that we could create a customer, or we could remove customers.

We can create a learner, which is what Bridge calls them, we can add a learner to a course, we can add a learner to a program, we could remove a learner from a program, and we could remove a learner from the system altogether. We just needed to make sure we could interact with it at a high level.

Regarding GoToWebinar, we needed to make sure that we could create a webinar. We, needed to make sure that we could add a description to the webinar, create attendees to the webinar, or remove attendees from the webinar. And we needed also to make sure that GoToWebinar would send out the invitation email once we’ve added someone to the webinar.

We just needed to make sure that we were able to interact with these technologies behind the scenes without a user having to go to NetSuite or Bridge or GoToWebinar to actually create something manually. Finally, the system of record, which we already knew was to be WordPress.

Loren will talk about that in the next few slides. A couple of additional tools that they were going to need that they tasked us to research was a couple of payment processors and event registration. We looked at a series of them at the time. We ended up going over PayPal, Square and Stripe. I think PayPal had a couple of larger fees and there was too much admin involved. Square, I believe they had a subscription for an organization as large as Candid. What we ended up going with was Stripe.

It was very straightforward; you make the purchase with Stripe and deposits into an account and then you move forward. There’s no real overhead there. Now the payment processor is needed for a self-paced course and a downloadable content that we’ll talk about in the future.

I just wanted to give you a little heads up that’s coming. Regarding event registration, we researched three, two of them came to the forefront. One of them was Cvent and Cvent was very large. It was basically for somewhere that they manage attendees, they manage the venue, they manage additional information such as vendors who sell who’s selling there.

I don’t think Candid is going to be selling popcorn at their course. So, I didn’t feel that this was a good fit for them. But we ended up going with Stripe, which was a very simple here’s a ticket, go to the event kind of thing.

You create the event, we create a multiple series of tickets. We even set up a system where you can purchase an entire series. So, there’s three tickets available, or you can buy all three tickets in one ticket. And it’s just worked very well. For the future, the event registration system is used for in-person trainings.

Loren Rice: The next thing we had to do was decide for sure which content management system we were going to go with and for many reasons we landed on WordPress. One reason that we decided on WordPress is that we already have in-house expertise for the development of the site as well as the maintenance. Also, we’ve used WordPress on many other projects in other areas of our organization. We have something like 20 or 30 Candid properties that run off of the same WordPress theme, which has given us a pretty robust code base that we could utilize out of the gate for GrantSpace, giving us a bit of a leg up. We’ve found WordPress to be very flexible. So, I knew it would meet whatever technical needs we came up with, and any new features that we developed for GrantSpace would then be able to be used in future projects moving forward as we continue to build out new sites.

The result of all of that discovery and evaluation was a beautiful newly redesigned GrantSpace. The site turned out to be very user-friendly for both the GrantSpace staff and our customers.

The content entry process was greatly simplified for the GrantSpace staff. And we also built out a robust search interface that makes it easy for our users to find exactly the training that they’re looking for.

Once a user finds the right training, we wanted the enrollment process to be as straightforward and user-friendly as possible. We consolidated all the, views of all the different types of training to make them all easy to look at, easy to find the information you’re looking for.

And most importantly we wanted it to be easy for a user to enroll in the training, whether it was free or paid, in person or at your own pace, and this is where Allegiance Group (formerly Beaconfire RED) stepped in to integrate these systems with the new WordPress site we had set up.

Curtis Holland: And we did a cool integration thing. While Loren and Candid were working on their new design and layout, we had our marching orders. We were ready to go and started with integrating Stripe, NetSuite, Eventbrite, Amazon, and Bridge into WordPress.

How did we execute it? With lots of blood, sweat, and tears? No, that wasn’t that bad. We started out with a prototype. Kevin, who’s the director of integrations, came up with the whole flow chart and he came to me and said, this is how I envisioned this system to work.

And I said, wow, that’s super complicated. He said, we can get this done. We will work together. It’ll be awesome. And then in the end it was a working set of lots of integrations, which you’ll see a large overview here. This Is the whole system. It may look confusing; it may look difficult. At first glance, I thought it was extremely difficult, but it’s actually not. This is the overview and there are seven sub sections. There’s a section for both customer workflow and administration workflow. What I want to do is I want to break one of these sections out and show you the whole workflow for both the admin and the customer.

One of my coworkers, here at Allegiance Group (formerly Beaconfire RED), Jared, wants to leisurely take an online grant writing class. And he came to me and said, how do I do that? Which is considered one of Candid’s self-paced trainings. There are a couple of steps involved. There are a couple of steps for Candid to do, but once a Candid has done their steps, they’re hands off and let the registrations roll in.

The first thing to do is, and unfortunately, these are all three manual steps, but these steps once they’re done are done. Ken will first need, to create a course within Bridge. Then we’ll need to set up the product in NetSuite and need to add the course into WordPress.

Once all that’s said and done, Jared can then go to their newly designed, wonderfully easy to find course and purchase the timed access to the course.

This is the Candid admin steps for creating this course on the backend. As I mentioned, it’s all manual stuff, unfortunately, but that’s okay. I need to set up the Bridge course and get the identification from the Bridge course. They’ll need to set up the NetSuite product and get the identification for the NetSuite product.

And then they’ll create the additional information in GrantSpace, the public facing information in the GrantSpace site, and add the identification information for Bridge and NetSuite into the GrantSpace content.

I’m sorry. I forgot to mention that Candid does not track free purchases. So if it’s free, we skip the NetSuite product step. So, the outline here is, not 100% accurate, but it’s the path okay.

Renee Westmoreland:  I just wanted to interject Curtis, that we track that in WordPress, but we use NetSuite for revenue recognition and for the accounting process. So that’s why the free ones don’t need to go into NetSuite.

Curtis Holland: Correct. Yeah. I’m sorry about that.

I think I just may have worded it wrong, but it’s all still tracked in WordPress. Yes. All right. So Jared has gone to the site, he’s found the product and would like to take the class. He’d like to take the training. So, he uses GrantSpace’s registration and login, which is a single sign-on built by Loren and his team.

Once he signed on and able to purchase the class, he will, if it’s free or paid, he will begin the checkout. If the service is paid for, you’ll have a credit card entry. If the service is not paid for it you won’t have a credit card entry. Either way, you still have to have your first name, last name, and your address, I think address, maybe not address for tracking purposes.

If the course is free, if Candid is offering a free course, then the user will enter their information. And once they click submit, the WordPress system will reach out to the Candid Commerce API, which will then notify Bridge that we’ve got a new user. Bridge will send the email to Jared and then Jared can log right into Bridge. As soon as Jared clicks submit, what the system does is takes the information that was entered into GrantSpace the Bridge ID, and sends it to the API, the API will then reach out to Bridge, add the user and then go forward.

If this course is paid for, there is one additional step that we’ll have to do, which is to charge the credit card. We can’t add the user to the course until the credit card has been charged successfully. If it’s paid for, we attempt to use Stripe and charge the card.

If the card was charged successfully, then we go right to the next step of grab the ID from the content, push it to the API, along with the charge information. And that will both create the user in Bridge and create the customer, and purchase, and tax information in NetSuite. And then once all that’s complete, Jared will receive the email. Welcome to Bridge, please log in with this information. And then he accesses the course, then everyone’s life goes forward. How does this look to the user? Jared finds the product, How To Use Data To Raise More Money From Corporations. He enters his information into the right image. As soon as he clicked submit, he received the email. Everything else is done completely on the backend.

All of this is done with the API. I’d like to introduce the Candid API, which is a tool built on technology of the future. We’re using AWS services such as, the AWS API we’re using compute resources, which is Lambda or serverless applications to make it scalable, extremely scalable.

And it’s meant to tie together three systems that don’t normally communicate. So we work with Bridge Stripe, and NetSuite.

You’re probably asking, how with all of that confusion and complication and strange structure of processes, how do we QA this? How do we get this to a point where we know all of the flows are working successfully? We took each individual flow and once we completed it, I came up with a very extremely large document on how to test and pass it to Candid. Working with me, and I think it was Maha over there, who is the developer, and Loren directly. We were able to follow each checkout, each process using test API so no one’s credit card was charged, and successfully confirmed that credit cards are processed, emails are sent, customers are created, and sales are created, users are added in Bridge, users are granted access to Bridge. All of this is working properly. I will say I am a big fan of log files. So every interaction is logged somewhere. So that if there is an error someone will get an email. And the email will contain the error. And then you take that error and you go back to the log file and you can watch the transactions, what hasn’t happened. So anytime something were to break, we have that ability to look directly at why it failed, which really helped both me and the Candid staff, because Candid has been in here a lot more once we handed it off than I have.

What works well and what didn’t. It was working very well out of the door. There were a few small issues here and there that were not business critical. So we were able to fix some real time or we did a little bit of development in the back end and then push it to production and the problem was solved and there was no real issue there.

AWS was an excellent tool to use only because of how scalable it is. I don’t have any fear that if a flood of orders were to come in that the Candid Commerce API would suffer.

Pros and cons of this integration. I could start with cons. The cons were the limitations of the APIs that we used. An example would be a bundling of trainings or different formats. We were unable to bundle in-person and live events because of the two different directions. Like in-person had to be done with Eventbrite but self-paced, or independent had to be done with Stripe. So there was two different systems that just didn’t work really well to play together. Another issue was we needed Eventbrite to have an interaction that wasn’t available. There was an API call that we needed that wasn’t available. And it ended up being not super critical. So we were able to move forward without it, but we reached out to Eventbrite support. And they said, we know it’s not there, it’s coming. And I don’t know if they’re yet.

A pro is we have more control over what the data and where the data is going and how it’s used and where it’s stored.

And, we are able to say, if an order comes in and it’s missing such information, we can identify where it’s missing and why it’s missing, fix the problem. I don’t know if this is a pro or con, it’s probably a con, but we lose control of orders that come in through Eventbrite.

So if the Eventbrite systems were to go down it may or may not be a scramble on Candid on our side to make sure those orders come in. But Eventbrite needs to bring their systems back online before we can capture it. It’s also a shorter build time. We didn’t have to rebuild an ordering API . We can just use what was out of the box.

And I’m going to let Renee talk about user testing.

Renee Westmoreland:  During this project while we had the team here at candid building the WordPress website and Curtis and team at Allegiance Group (formerly Beaconfire RED) working on the integrations, I will add back to the what worked well, that could have been a really tricky situation, but with the way that Loren and Curtis worked together, that handoff of information and tasks and connecting, that ended up being very effective, but was definitely an unknown at the outset of doing such a partnership. So, I look at things from the project management perspective and the fact that worked was fantastic.

We had started to implement usability testing with a variety of real-life end users on another project and then expanded on that experience with this project. And I think that user testing and usability testing can seem really daunting and during this project we learned that there are pieces of it that are a little bit time-consuming. But it actually can go faster than you would imagine, and we did a couple of different rounds. One very early on that helped us to identify some gaps in the website. And then a little further down the road when things were a bit more refined in terms of searching for training classes on the site, we were able to do this with a process we learned that included creating three fairly simple tasks that the users have to do without directing them how to do it, observing them, having them talk us through what they’re doing. We have people taking notes and then we organize all of the information and feedback and usually the user testing sessions only took about 20 or 30 minutes and you only need to do about five people. And so that was incredibly effective, and not as difficult as you might think it would be.

The other thing that we learned was that making it easy for the end user and for the content editors, did not translate into making things easy on the real backend admin side, particularly the accounting side. Especially when you’re integrating with, an e-commerce solution or something where you’re dealing with the revenue recognition. The accounting department ended up participating in the QA process. Once we were doing actual real transactions and we were discovering some issues there and their life got a little bit more complicated because we connected with these payment processing and these other systems that did make the experience more user-friendly. But the fact that they had to reconcile from a couple of different places, especially if there was an error in the accounting, then they would have to either go back to Stripe or go back to Eventbrite. And it’s probably a trade-off we still would want to make, but it would’ve been nice to have anticipated that complexity ahead of time.

I think those were the biggest things we learned in this project. Curtis, do you want to talk about the APIs?

Curtis Holland: Sure. I wonder if people are asking if the APIs had what we needed. I did mention this earlier, but I have notes now as to which the API didn’t and it was Eventbrite when we were using this wonderful modal that comes up when the user purchases something from Eventbrite, it was seen in the last slide or a couple slides ago.

We were able to place the order, but when Eventbrite fired its call back, we didn’t have any information as to who placed what order and we weren’t able to get that, and we needed to be able to track it in WordPress so that Candid knew who’s attending their training.

Kevin, Loren, and I sat down, and Kevin spotted an additional parameter we could send to Eventbrite that would come back to us in the callback. And it actually worked out very well. It worked out better than I anticipated.

So, we were able to trick, the API a little bit to pass information that came back and we were able to link those two orders together. That’s really the only API that kind of caused us a little heartache.

The other APIs were very well thought through. That doesn’t mean you shouldn’t use the Eventbrite API. It’s very robust. But understanding it and having a contact to talk to over at Eventbrite would be super helpful.

Liz Murphy: So, that concludes the presentation. Before we take questions, Loren, Curtis and Renee, is there anything else that you would like to add about the process?

Loren Rice: This is Loren and for me, this was unique project. I hadn’t really coordinated so closely with an outside developer before. And it went just extremely smoothly and could not have been happier with the end result. So, thanks, Curtis.

Curtis Holland: You’re welcome to do it again.

Liz Murphy: We do have a question, two questions requesting information. They don’t see a CRM system in the mix. Where do you store customer data?

Curtis Holland: I want to start with, we do not store credit card data. All we store is the name and the email address so that we can debug the issues if they were to arise with NetSuite and or Stripe, and or any of the backend tools that we use. Renee, did you want to add anything about the CRM system or

Renee Westmoreland:  Yeah, we don’t have this wired up to a CRM. I think that’s something we would like to do down the road, but the goal of this was to have what the classes the customer took and other things that they did on the website.

And so everything, while it had to travel out to Eventbrite and Stripe and go into NetSuite, if there was a money transaction at all, the transaction ended up back in WordPress.

Loren Rice: Right. The GrantSpace users have a profile and we store some basic information about them, if they choose to include it, like their name and their zip code for marketing purposes. And then we are able to link a training registration to that particular user. At the moment we haven’t really built out the system that we have plans for to utilize it in the form of a user dashboard to show a history of training. But all the pieces are there, and so that’s a future enhancement that will be coming to GrantSpace.

Renee Westmoreland: We do have an e-newsletter signup that is the tie-in for an opt-in for that. But we’re not using a CRM for this piece of it right now.

Liz Murphy: Okay, thank you, Loren. Thank you, Renee. Thank you, Curtis. As I said before, a copy of this recording will be available within 24 hours and will be emailed out to all registrants. Thank you so much for attending and come again.