A Mission Worth Supporting
“Denver Rescue Mission meets the needs of those experiencing poverty and homelessness through emergency services, community outreach, long-term rehabilitation programs, transitional programs, and assistance for permanent housing. Since 1892, the Mission has been changing lives in our community.”
With a mission statement like that, NEWMEDIA set out on our own mission: design, build, and deliver an incredible website for Denver Rescue Mission and get it launched before the holidays since that is their busiest time of year for donations. Considering we had approximately three months to pull this off, it was not quite mission impossible, but we knew we would need to be firing on all cylinders to accomplish everything we wanted to before time ran out.
Made Custom by Us, for You
The Mission was not just looking for a Denver web design agency. They needed a full-service marketing partner, and that’s exactly what we delivered. The NEWMEDIA team custom designed the website specifically for Denver Rescue Mission. But what exactly does that mean—custom design? A custom-designed website is more than just a unique design. It’s more than just creating something original instead of using a template. In fact, a template design may be more effective than a custom design if the custom design falls flat and does not perform well. A custom design should solve specific problems in a specific manner, which means that the designer knows and understands the needs and goals of the client, then creates a well-thought-out strategy to address those issues.
One example of the custom design on the new website is the donation form; because Denver Rescue Mission cannot exist without donations, this could be considered a “primary purpose” of the site, and the primary purpose of any site gets special attention from NEWMEDIA. We knew we could not just replicate the current form and then move on to the next piece of the site. We needed to design this form to work for Denver Rescue Mission, perform better than the previous form, and persuade people that Denver Rescue Mission is worth their donation dollars. There is more to come related to the donation form later in this case study, but for now, let’s focus on getting users to this form.
Even the world’s best form will be worthless if users do not have an obvious and engaging path to get to the form. A menu item that says “Donate Now” is not enough. A link in the sidebar is not enough, and a link in the footer is definitely not enough. The link needed to be prominently displayed on every page without being overbearing. It needed to invite users further into the site without scaring them away. And in the case of Denver Rescue Mission, it needed to make an emotional appeal that users want to act on. Sounds easy, right?
To accomplish this, our Denver-based web developers needed to focus on a compelling user experience design and conversion rate optimization to remove some clutter from the top of the page, so we moved the main menu into a clearly labeled collapsible menu. This was a bold move and one that not everyone agreed with, but this is where we must remind ourselves of the primary purpose of the site—the donation form. With the main menu out of the way but still accessible, we used the high-value real estate at the top of the page to display three buttons: Donate Now, Get Help, and Volunteer. These three buttons were also designed to “stick” to the top of the page as the user scrolls so that they are always present. Of those three links, only one needed to be emphasized, so we dressed up the “Donate Now” button with the use of their primary brand color and a heart icon. This change really made it stand out on the page without getting in the way or being obnoxious. In a mobile scenario, these buttons stick to the bottom of the user’s screen so they are always present, but stay out of the way for the most part and work well across all devices.
Another not-so-obvious example of a well-thought-out custom design is the use of large hero images throughout the site. You’re probably thinking there is not much that is custom about hero images, as many sites have them and they usually look bad, and we typically agree. While big hero images can be amazing with the right photos, they can also look just as bad with poor image choices. However, we had inside information and knew Denver Rescue Mission has a talented writer and photographer named “RoBo” on staff. This information was a game-changer and meant we could go with big and bold images without gambling on the results. It sounds like a small detail, but design choices add up and in the end, will make a big difference in the success of a site.
Use Good Form
As we covered earlier, we knew that the donation form was truly the heart of the Denver Rescue Mission website. It needed to persuade a user who was on this page, ready to fill out the donation form, ready to click submit. This form needed to talk to people—directly to them. Who does the money help? How does it help these people? How many meals does $40 provide? How many nights of shelter does $20 provide? Why should I donate my money to Denver Rescue Mission, plain and simple?
As with many important forms, this form also needed to be integrated with a third-party service. Denver Rescue Mission and many other nonprofits use the Blackbaud service to manage their online donations. The integration also needed to be a two-way street, meaning any donations coming to and from the form needed to be posted to their Blackbaud account, and any modifications of the form in Blackbaud needed to be simultaneously updated and displayed on the site as well.
So the form needed to do two things: It needed to be compelling, and it needed to play well with Blackbaud.
Let’s start with the compelling part. The donation form that Denver Rescue Mission was using on their previous site was exactly what you might expect from a donation form. It was long—very long—which means donors were falling off before even beginning to fill out the form. If you decided to donate, it did not necessarily inspire you to donate more than the first and lowest option. It did not educate the user about Denver Rescue Mission’s other services beyond providing meals. It did not delight the user with a message or feedback of some sort if they increased their donation amount. It was the bare minimum.
Early in the discovery process, we realized the potential for the donation form and made sure that improving it stayed a priority throughout the entire project. First thing, the form needed to look better; it needed to be more compact and feel shorter while you were filling it out. Bryon went to work and came up with a three-stage form that broke it into smaller pieces, which made it so the process didn’t seem so long. Next, we really wanted an interactive piece to go along with the form, something to get people to click on different amounts and hopefully be educated and pleasantly surprised about the different ways their donation helps. Last, we wanted the donation form to be able to evolve, stay fresh, and give the Denver Rescue Mission a way to test donation amounts and messages to see what is most successful. The form we designed and developed covered all of these areas and then some. We would describe it in words, but we recommend taking a look for yourself.
The next challenge with the form was to integrate it with Blackbaud; this is where things got a little more technical. Enter Owen, our back-end developer on this project. The first part was to get Drupal to generate a form using the forms API based on the information created in Blackbaud using the Luminate Online Donation API. This way, if Denver Rescue Mission needs to add a new donation amount next month, they can update the form in Blackbaud without our assistance and it will immediately update on their new website as well.
You Control the Message
Another custom feature our team worked on was to set up the donation form so Denver Rescue Mission has control over the messages that are displayed for each donation amount or breakpoint. For example, at a $400 donation amount, they can display two messages. One message is based on a pattern where the noun and verb can be replaced to give more control. That’s a little hard to describe, so let’s look at a specific example. Say Denver Rescue Mission wants to set a new donation amount of $400 and they also want to let users know that amount would feed and shelter 40 families. They could create a new Donation Breakpoint and set the amount ($400), set the ratio for donation amount for items (10.0 in this example), set the verb (feed and shelter), and set the noun (families). When the user selects the $400 option on the form, the message will say “Your donation helps feed and shelter 40 families” whenever the $400 donation amount is selected. Think of it as modern-day Mad Libs.
If that pattern feels too canned, they also have the ability to add a custom message. A donation over $1,000 could have a message that says “Your donation truly changed lives today. Thank you.” It gives them a simple strategy to keep a consistent message with the ability to fully custom when needed—the best of both worlds.
Just in Time
We’ve talked about design, forms, words, links, and all of the fun stuff that makes a website go. Now let’s take a step back and take look at another thing that makes websites go: The website development process and timeline.
What exactly is the website development process? For the purpose of this case study, we are going to define the development process as everything that takes place after discovery and design, but before the site goes live. The actual development process for the Denver Rescue Mission site began on October 5th. We knew we needed to finish the site before the holidays, so we were targeting the second week in November to launch the site. That gave us about five weeks to take the approved designs and documented site requirements and turn them into a real, bug-free, ready-for-the-wild website. Let’s go!
On second thought, let’s not “go” just quite yet. At NEWMEDIA, we are planners. We measure twice before even looking at a saw. Sure, we could have gone off and just started building. We probably would have seen some short-term results early in the project, made some good progress, and given ourselves a false sense of confidence just before we realized that we can develop the site on time, but getting all of the content in as well would be a different story. Jerit, our project manager on the NEWMEDIA side of things knew that, in order for this to be a successful launch, we were going to have to let Katelyn and the Denver Rescue Mission team begin entering content before development was complete and he began making plans to ensure that would happen.
This is where having a true partner in a web development agency makes all the difference. In order to meet the deadline, we needed to adjust our development process for this project. Typically, we prefer an agile development process that gives the client lots of opportunities to see demonstrations and walkthroughs throughout the development process. This gives the website or application plenty of room to evolve over the course of the project as needed. However, for a (relatively) smaller site like Denver Rescue Mission, we like to get these projects close to 100% complete before we do a formal walk-through, train the client, open up the quality assurance process, and allow them to begin entering content. Due to the tight deadline, this was not an option.
As early as possible in the development process, we needed to let their web administrator, Katelyn, know what content types and fields to expect so she could begin organizing, rearranging, and “massaging” their content to work with the new system. That meant we needed to build the content types and fields first and get those in front of Katelyn; however, we had to make sure that this content structure was not going to dramatically change over the course of development, which can often happen. So, we took some time to measure.
We started by creating a build specifications document to get a list of all of the content types, fields, and dynamic content mapped out. When we were happy with that document, we focused on actually building all the content types and fields in Drupal 7. Once those were built, we felt comfortable sharing the content types and field structures with Katelyn so she and her team could begin organizing their content for the new website. We created Google Docs content templates that could be paired with screenshots of each content type so they would have a good context of exactly what they needed to do with their current content and how that content would fit into the new site while we continued to develop the site in parallel. We shared those content templates with Katelyn on October 7, only three full working days after development began.
In addition to giving them tools to help get their content ready, we also knew we would need to train Katelyn earlier in the process than usual, and allow her to begin entering content before development was 100% done. This is much like moving into a house before construction is done… it’s possible, but there is some essential planning and communication involved to make sure you are not tripping over power cords connected to circular saws. Knowing this, we scheduled training for October 28th with the idea that we needed to identify and define which parts of the site needed to be completed on training day so that the Denver Rescue Mission team could begin entering content immediately after training, while the NEWMEDIA team was still developing the rest of the site.
This is not an ideal scenario, but it is also not the first time we rearranged our internal development processes to meet a tight deadline. We were confident we could make an internal adjustment, so we went ahead with the training, which went great. Katelyn loved the new system and realized she could now easily and quickly add new content whenever she needed to without any help from anyone else. She and the Denver Rescue Mission team began entering content that afternoon and continued to work on it until November 9th—one day before the go-live date.
Results
The NEWMEDIA Denver web design team was able to work in parallel with the Denver Rescue Mission team to fully complete website development on time, and the site launched on November 10 without a hiccup. Denver Rescue Mission did not skip a beat in donations and has done a great job entering and managing its content by itself. A win-win in both worlds.
Oh yeah, and they love the new site.
If you’re interested in a custom website design or making your web forms work as hard as you do, contact the team of NEWMEDIA experts to see if a small change can make a big difference.